Work pages — Anushka Shukla

Map Style Editor
Case study

10-03-2022

Creating a Photoshop for maps 💡

A web application for HERE Technologies

Timeline
24 weeks

Deliverables
︎ Product design strategy
︎ User experience design
︎ User interface design
︎ Design system
︎ User research

⚡ Mission

Modern-day cartographers and developers need a solid product to build complex maps. A product that lets users create, export (SDK, API and HERE navigation) and use maps on scale and gives them control over every visual element of the map.

My goal was to redesign this product, make it simpler, more user-friendly and scalable. This way, users could focus on building high-complexity maps rather than understanding the tools themselves.

📦 Outcome

I redesigned the navigation tabs to give a visual hierarchy previously absent. Then added a dynamic highlight in these navigation tabs to link them to visual elements of the maps.

I also designed a new POI icon selection flow. It enabled users to select multiple icons and replace them with new ones in one go making the process faster and more scalable than before.

✨ Impact

Since implementing these new designs, users reported through usability testing interviews that they could ‘see’ tools more efficiently and completed their tasks much faster.

ℹ️ Introduction

HERE Technologies is a data platform company that provides a platform to buy, sell and license location data. It gives platform products that let users create, visualise and edit their location data.

HERE Style Editor is a web application that lets users create, style and customise maps.

In-house cartographers, developers and car manufacturing clients use this tool to create new customised, detailed and complex maps based on their unique brand styles.

🎯 Challenges

Users face significant visual challenges when using this application. I found these problems by exploring the application and conducting user research by shadowing users as they performed specific tasks. After discussing with the PM and the product team, I decided to prioritise and solve the three most critical problems the users face. I’ve discussed these problems below:

Poor visual hierarchy makes it difficult to navigate within the property panels.
The application’s complexity makes it hard to link layers and attributes on the map to the navigation panels on the left.
The current map editing process is laborious and time-consuming due to the absence of a bulk editing feature. It results in poor scalability of the map editing process.

✍🏽 Process

Goal 1

My first goal was to address the visual hierarchy within the panels. In the older design, the users needed help differentiating between different properties and attributes within the navigation panels.

After using the tool, I realised the most prominent issues users faced in the visual hierarchy.

There were no folder levels, meaning the inside content looked the same as the folder heading due to a lack of indents. It made finding any attribute or layer in a long list daunting.
There wasn’t enough visual difference between selected, unselected and disabled states in the list. It made finding the selected item in the panel very slow.
The distance between the main list items and within a folder’s contents was very little and without proper demarcation. It made differentiating between different list items a cognitively heavy task.

I incorporated my research and redesigned each panel.

Goal 2

My second goal was to establish a clear link between the map and the tabs on the left. To build that link, I explored dynamic highlighting within these tabs. Whenever a user hovers on the map, the hovered-upon layer and its attributes are highlighted on different panels.

After exploring different ways to highlight, I chose an orange outline highlight. An orange dotted line denotes that the hovered-upon layer falls within the highlighted folder. In contrast, a solid orange outline is a highlight to indicate the hovered-upon layer itself.

Goal 3

Creating a new feature where users could update multiple identical icons in a single flow was essential to make the map customisation scalable.

My third goal was to create a UX flow and UI screens for this feature.

I began by creating wireframes of the workflow. (View visuals upon request)

The users would select change icons in the Attributes Panel or click on any POI icon on the map to enter this flow.
Once in this flow, users will go to an icon selection screen, which will let them select all icons they want to change.

Once selected, each grouped icon will sit together, and users will have the option to unlink individual icons from the group.

Then, when users choose to upload a new file, they can select from different icons from HERE’s icon library or even upload their icons.

Once users make these bulk editing choices, they can save them and view them on their maps.

Then I created the UI screens for the entire flow.

The biggest challenge when creating this flow was exploring the edge cases since even the most minor edge case could have enormously impacted the flow’s scalability.

In one such case, I convinced my team to give users more choices in this flow. Once users select an icon, all the POIs with identical icons are selected. Users can retain the same icon for POIs by individually unlinking them from the list. With this function, users were able to customise their POI icons at an individual level.
In another case, I had to decide when users could relink an unlinked icon. I designed it so that the relinking function would be destroyed if users updated the main group icon.
I chose to list the grouped icons together in the third case instead of a vertical list. I did this because when customising a large map, there would be innumerable grouped icons and wading through that list would become very difficult. Even a solid visual hierarchy would only work sometimes. So placing POIs together will let users know they all fall under the same group, making navigation easier.

👉🏽 Conclusion

After months of designing new visual designs and features, I worked alongside the tech team to build these visuals into the application. It was necessary to work together since many visual elements were separate from the HERE design system. I had to ensure they looked and worked as part of the system.

After implementing the new designs, we tested the Editor with users to see how they reacted. Users reported finding tools with more ease. It directly helped them complete their tasks 25% faster than before. While using the icon change workflow, users could make more changes in their maps with fewer clicks, enabling them to work more efficiently.

Check out the Style Editor for yourself and build custom maps!