Left: proposed mobile wireframe solution.
Right: the old version of TomFord.com’s mobile navigation.
UX challenges included bringing traffic to high-converting sub-category pages directly from the navigation without making users tap to visit category pages first (ie, adding a tertiary level of navigation), keeping navigation options specific to the shopping userflow (driving to product listing pages), and performing A/B testing on background color and font color reversal.
Another priority for the brand was keeping the Store Locator accessible for mobile users, but without it occupying space in the shopping navigation.
Left: proposed mobile wireframe solution.
Right: the old version of Tom Ford’s mobile navigation. This allowed for only secondary navigation access (example: Men’s: Shirts).
Left: Mobile wireframes, including tertiary links to sub-category pages.
Right: Screengrab of live, final navigation including tertiary navigational links.
NOTE: On both the wireframe and UI design, the search field is shown. The user must tap to open that. Analytics suggested that shoppers use on-site search on this site at a higher than average rate, and that sessions with site search convert at a higher rate than those that do not on mobile devices. Making search consistently accessible was a UX priority.
Left: wireframe for mobile homepage with updated navigation.
Right: Screengrab of old mobile homepage and navigation.