How might we redesign the site to help visitors browse and find relevant initiatives?
- Understand what kind of content they can find on the site.
- Discover initiatives relevant to their interests.
- Navigate easily on their mobile phone, since mobile devices make up half of the traffic to the site.
Starting point: the home page
As a grant-funded project, we needed to get the most bang for our buck. Using site analytics, we decided that starting with the home page would give us the most opportunity for impact. The home page introduces visitors to the collaborative economy and provides a first impression of what people can expect to find on the site.
Meeting user expectations by reintroducing the map
Through discovery and user testing, we found ourselves and users asking “Where’s the map in The Smart Map?” We put the namesake map front and center on the home page, while still maintaining an improved version of the original initiative listings feed with new curated highlights.
Three ways to discover: map, listings feed, and search
It was important to stakeholders at Smarta Kartan that we create flexibility for how visitors can browse the site. We did this by offering 3 main ways to find relevant initiatives: the map, the listings feed, and the new search modal. Newcomers to Gothenburg can get to know the city with nearby listings while active members of the sustainability community can simply search for tried-and-true intiatives.
Distinguishing content on the site
The feed on the home page features a dynamic mix of content: initiatives, highlights, events, blog posts, and testimonials. I created new card designs to easily distinguish between the content types on the site. As our work expanded beyond the home page to the rest of the content pages, I reused the visual language set by the cards to create cohesion with the rest of the site.
Establishing a UI library
While refreshing the visual design of the site, I established a simple UI component library. Since the mobile design was just the first stage in the roadmap to launch Smarta Kartan 2.0, this UI library would serve as a foundation the desktop design in the next phase of the project.
Client handoff for the next phase of the relaunch
We handed off redesign that covered the entirety of the mobile site. With the new design system, the Smarta Kartan team was able to take ownership of the next phase of the project while maintaining consistency with the work done in this phase. Smarta Kartan 2.0 launched in January 2019.