elit by Stolichnaya is a luxury vodka brand targeted toward high-end, savvy customers. It had a site that was functional, and featured a map that allowed users to search for elit vendors. Unfortunately, for a website meant to be functional on the go, it wasn’t usable on mobile devices.
I pinpointed the problem areas and optimized the content and navigation for mobile.
Presented below are the “before” and “after” screens.
Home Landing (click to zoom)
- A ubiquitous top navigation was designed for quick access to the map feature (1), “home” button, and a drop-down menu to access other pages of the site (3).
- The map allows users to search elit vendors. As the most important feature of the site, it warranted its own navigation shortcut. We added a compass icon that leads users there directly.
- To solve the home landing, we had to translate content designed for the horizontal web into navigable mobile content. On mobile, the hotspots on the elit bottle were too small to touch, so we incorporated a bottom-anchored navigation bar (2) easily accessed by the thumbs.
elit Finder Map (click to zoom)
The main challenge with the elit Finder was the large amount of content and functionality that it had: location lists, location share, restaurant/bar checkboxes, liquor store checkboxes, search, and of course, the map. To fit that functionality in while increasing the interactive dimensions of the map would require some prioritization of visual elements.
- Standard on/off toggles were used to control search results (1).
- “Current location” became default (map used to start blank) and a target icon (2) was added to allow for quick map orientation.
- List view was given a toggle (3), as users’ behaviors showed list view was often just used for address confirmation, after searching and browsing on the map interface. Email share functionality was retained.
Map Navigation Wireframe Sketches (click to zoom)
Other Pages – Before/After (click to zoom)
Client: elit by Stolichnaya
Partner: Killswitch Collective