Navigating on mobile devices is a tough business; you have to allow for fat fingers, a small screen and a distracted perspective (people are in the queue at the shops, on the couch watching TV whilst they’re half shopping).
In this post, I’ll explore the mobile navigation designs of ASOS and Farfetch, highlighting key learnings and testing opportunities.
🔍 Both ASOS and Farfetch deliver personalized experiences, showcasing the option relevant to my shopping history upfront when opening the navigation tab.
🌈 From a branding perspective, ASOS stands out with its vibrant and colorful elements, while Farfetch adopts a cleaner, minimalistic approach, reflecting their distinct brand identities.
🖼️ ASOS utilizes graphical navigation to visually represent categories and sub-categories, enabling quick scanning for users. However, through testing, I’ve found that icons and images may not guarantee success, which could explain Farfetch’s clean navigation approach.
🔍 Farfetch’s navigation, especially at the first level, appears tightly packed and challenging to scan (even though their navigation is full width compared to ASOS’s modal)
💼 Both ASOS and Farfetch prioritize merchandising elements at the top of their navigation. ASOS emphasizes sales and discounts, while Farfetch places its actual navigation deeper within the tabs (5 tabs down).
📝 Both brands adopt a two-layered navigation approach, ensuring users have to sort and filter broad categories (e.g., coats, jeans) on the product listings page. This approach simplifies the navigation process but calls for consideration regarding the optimal level of granularity.
🔬 Drawing inspiration from these examples, there are several elements we can test:
Depth of navigation
Role of graphics
Balance of merchandising elements
Personalization strategies
Font size, spacing and size of navigation
Brendan McNulty 