elitbystoli.com – Optimizing the mobile web for on-the-run partygoers

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
Agency: Relevent
Partner: Killswitch Collective

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: