Designing a smart map home page
Smartakartan, “The Smart Map” in English, is Gothenburg’s online guide to the collaborative economy. In the collaborative economy, rather than buying new and then tossing things when they’re no longer useful or fun, people can share, rent, trade, or give away their stuff. Visitors to the Smartakartan website can use the site to find free family-friendly public spaces, join a bike kitchen where they can learn how to refurbish an old bike back to its former glory, or other local initiatives.
Smart maps like Smartakartan can create more sustainable cities which is why the Smartakartan team is moving to open source their platform so that other cities can create a smart map of their own. Pivoting to a platform presented the perfect opportunity to redesign the Smartakartan website. We (Aksel and I) worked with Smartakartan to create a revamped, mobile-friendly update of their site with the support of Digidem.
Our Design Process
Roughly half of all traffic to Smartakartan comes from mobile users, which is why we chose to use a mobile-first approach. We designed first for the constraints of a smaller screen on mobile and then expanded upon our design to make use of the added screen real estate in desktop.
We also used a user-centered approach where user feedback helped drive our design decision-making. Generally, we started with pen and paper sketches to explore different ideas and then converted the most promising ideas into mid-fidelity prototypes in Figma. We used these mid-fidelity prototypes to get feedback from users and other stakeholders. Admittedly, we didn’t always follow best practices, sometimes favoring casual chats with strangers about the prototype over using a testing protocol, but the important thing for us was that we had user feedback at each step of the process.
The Evolving Home Page
We worked to redesign the Smartakartan website from top to bottom, but to see how user feedback is reflected in our design, let’s focus on the mobile home page and how it evolved with each round of user testing.
The old Smartakartan home page featured a top navbar and a feed of initiative listings as cards. It was a perfectly standard layout, but it didn’t showcase the variety of content on Smartakartan and for a site named “The Smart Map” there was no map to speak of on the home page. With our first iteration, we made the map accessible from the home page with a toggle button that let users switch between exploring listings in a feed or map view. We also converted the feed to be two columns, to show more initiative listings at a time. Some of the cards in the feed were full-width, to emphasize featured content, such as stories of how people have connected with the smart map.
The user feedback for our first design wasn’t as positive as we had hoped, and one user even commented that they felt there was too much information on the page so we went back to the drawing board and simplified the design. We re-organized the visual hierarchy and switched back to a single column feed with the map on a separate page, now with filtering functionality.
But as it turns out, we overcorrected when we tried to streamline the design. The single-column feed didn’t feel dynamic and it wasn’t very good for showcasing the variety of initiative listings on Smartakartan. We tried using a two-column feed again, this time simplifying the listing card design rather than the entire feed.
The response from users and other stakeholders to this design was enthusiastic and encouraging. Able to view multiple cards at a time, users got a better sense of the types of content they could find on the site. However, users started asking what we ourselves had asked at the beginning: where’s the smart map? We realized we were on the right track in a previous iteration putting the map on the home page. Our mistake was how we had interpreted the initial user feedback and hiding the map behind a toggle button rather than putting it front and center.
Once we gave the map top billing in the page’s hierarchy, users had a much clearer idea of how they can explore the content on the site. Still, our user tests found areas for improvement, such as the size of the map window made it difficult to easily spatially explore listings. Additionally, the size of the full-width cards featuring stories and highlights ended up overshadowing the surrounding cards and broke the dynamic feel of the feed’s flow.
In our final design iteration, we went all out, creating a high-fidelity prototype to communicate overall experience of the new home page. This design made the home page *the* place to discover all that Smartakartan has to offer. Users can find content through standard scrolling in the feed or by spatially exploring the map.
While the feed primarily showcases the variety of Smartakartan listings, additional content like stories, blog posts, and events are mixed in to give users a sampler of the rest of the site. Each content type has its own card design to distinguish items in the feed from each other and to create visual variety in the feed.
The new home page features a smart map that lives up to the name. Users can expand the map to full screen to better explore listings in a specific area. When users tap on a map pin to get more information about a listing, they also get suggestions for highly related initiatives. Users can also apply filters to the map, like “Open right now”, which stay active when the user switches back to the feed view.
Takeaways
The home page is just one of the several pages and features we worked on in the Smartakartan redesign, but its evolution illustrates some key takeaways we had about the design process.
- Kill your darlings. A classic bit of design advice that we heeded in this project. There were times where we thought we were really onto something (like the toggling the feed and map views) but our user data said otherwise. We trusted the feedback and came up with other solutions that led to a better end result.
- Keep a record of what you’ve done. Sometimes killing your darlings might be overkill. As in the case of the map on the home page, we ended up resurrecting it and transforming it into something better that users really responded to. Working in Figma, we made each iteration its own page, so we were always able to look back on our previous designs and understand the decisions we had made. Sometimes we looked back and realized we had the right idea but the wrong execution and we were able to come up with better solutions.
- Test early and test often. We tested our designs and got feedback early on that gave us valuable insight about what users valued. Sometimes we misinterpreted early feedback from our users, but by continuously testing throughout the process we started to develop a clearer picture of what they wanted to get from the Smartakartan site.
If you’re interested in the details of this design, we’ve released the UI kit we created while redesigning Smartakartan on Figma. You can use the UI kit to design your own smart map features or adapt it to fit your design needs.
We are Aksel and Connie, two interaction design students at Chalmers University of Technology. You can see how the Smartakartan home page has continued to evolved since our involvement when the redesign launches in February 2019 at http://smartakartan.se.
