Work /

Smarta Kartan Mobile Redesign

Designing a smarter smart map

Swedish for “The Smart Map,” Smarta Kartan is Gothenburg’s guide to local community-run sustainability initiatives. My role was to completely overhaul the mobile site as the first stage in the roadmap to launch Smarta Kartan 2.0.

My Role
  • UI/UX Design
  • Visual Design
  • Prototyping
Client
  • Smarta Kartan
Date
  • Fall 2018
Teammate
  • Aksel Biørn-Hansen, UX Design & Research
Redesigned Smarta Kartan initiative page
Redesigned Smarta Kartan subcategory page
The brand new Smarta Kartan sporting a fresh new look and thumb-friendly navigation.

How might we redesign the site to help visitors browse and find relevant initiatives?

User outcomes

  1. Understand what kind of content they can find on the site.
  2. Discover initiatives relevant to their interests.
  3. Navigate easily on their mobile phone, since mobile devices make up half of the traffic to the site.
Original Smarta Kartan home screen Original Smarta Kartan map menu
Before Content was hidden behind multiple nested menus in the old off-the-shelf template.

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.

Wireframes of the home page
We first focused on iterating and getting the home page, then carrying over any established patterns over to other pages.

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.

After The new and improved map enables users to find initiatives based on filters and related listings.

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.

Full screen map view
Redesigned Smarta Kartan home feed
Search overlay view
Highlights and recommendations help visitors discover listings as they browse.

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.

Card designs informing the rest of the design
The distinct card designs for each content type were expanded to the rest of the content pages.

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.

Smarta Kartan design system Additional Smarta Kartan screens
Using the UI library, we created a consistent experience across the site.

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.

Next Project

Volvo Cars Voice Guidelines