Engage Map Manager
Engage is a companion application that allows people to track activities with Recon smart eyewear. The Map Manager redesign aims to improve the user experience of downloading maps from the web to the glasses for heads-up navigation and managing offline maps for the smart glasses. I redesigned the information architecture and web UI.
Design Challenges
Heads-up navigation is an important feature on the Recon smart glasses. It requires users to plug the glasses into their desktop and use Engage’s Map Manager is used by advanced cyclists, runners, and skiers to download maps to their glasses before the trips, so they can have heads-up navigation even in an area without data coverage.
Planning new routes before biking, running, or skiing
Preparing for long routes before their trips
For example. A triathlon athlete is plotting an unfamiliar route in a new area. Except wearing the sunglasses, he can’t carry a phone or extra devices with him during the training. Before going outside, he needs to download the maps to the smart glasses so he can use it offline to navigate in the new area.
Previous Engage web UI
Main user points are:
Users can’t easily access the Map Manager from the main navigation menu.
Problematic navigation, which doesn't allow users directly switch between Map Manager and Dashboard Customization.
Poor visual hierarchy, content buried in the dark background
Information Architecture
To surface the map manager feature and fix the navigation problem, I examined the sitemap, and proposed to flatten out the layers under the devices.
Redesign
Allow user directly access both dashboard and map management on one page from the main navigation menu. Also considering some user may have multiple devices, provide a side navigation to allow them easily access and manage the maps for each device. For example, after the user set up running maps on the sun glasses, they can easily switch to the ski goggles tab to set up your skiing maps. Engage will automatically send the maps to the corresponding devices when connecting the devices next time.
For visual design, I keep the dark theme to keep consistent with the other features. Improve the visual hierarchy by using a better layout and different shades to bring out the important content. Display saved maps in the default grid view, which is very easy to scan, also provides options for users to switch to list or map views.
When you click the add icon to add a new map. It will take you to a full-screen map view without the chrome and side menu, which provides a big canvas easier for users to work on. The light theme also makes the map more legible.
Users can save multiple locations on the map view, when it is approaching the device storage limit, a usage bar appears to remind users. If it reaches 90% of the device storage, the bar turns into red to give user a warning.
To reduce visual clutter, instead of displaying all tooltips and controls, secondary information and controls are hided only visible in hover or selected states.
The redesign makes the Map Manager feature more discoverable, legible and usable, also improves the overall navigation of the web application.
MORE PROJECTS
