I created this space to remember, reflect on, and to celebrate the works of my journey as a designer.
© 2022 Glenda Yeo
© 2022 Glenda Yeo
The behaviour of the header makes it difficult for the customer to access key features (Home, Cart, Promos, Search, Account) after the first fold. In order to see the updated cart quantity and status to free delivery, customers will have to forgo their browsing efforts and scroll back to the top of the page.
A quick fix to this issue would be to simply change the behaviour of the header and make it stick to the top of the screen. However, this in itself could compromise the browsing experience as the existing headers take up significant portions of the screen. On a small viewport, the header could easily take up a third of the real estate on mobile, and a quarter on desktop. On top of that, with several new features in the pipeline, we decided to do a proper fix the header to ensure its scalability.
1. Improve access of key features (Home, Cart, Promos, Search, Account) throughout the browsing experience
2. Allow users to easily view the status of cart & delivery tracker while they are browsing
3. Reduce real estate of the header by optimizing its layout to allow room for more content in the first fold
We conducted an analysis of navigation headers on competitors in the market, looking at the pros & cons for the behaviour and layout on mobile app, mobile web, and desktop. For me, this also helped to expand the possibilities of interactions that a header navigation can afford.
Analysis of navigation headers on mobile
Analysis of navigation headers on desktop
Explorations for mobile web
Explorations for desktop web
Exploration of a minimized header that docks to top
The minimized header was not adopted as it brought negligible value for our users.
Exploration with brand colour
While the brand-coloured variant was preferred by many in the product and design teams, the white-coloured variant was selected to maintain brand consistency across all platforms.
Explorations with cart icon
Set B was chosen to support accessibility.
Explorations with delivery tracker
A version without the progress bar was selected to minimize the impact to usability due to technical challenges.
Live site interaction - Desktop navigation header
Live site interaction - Mobile web navigation header
Layout designed based on interaction frequency & industry's best practices
Mobile web enhancements - Before & After
Desktop enhancements - Before & After
The iterations for this project were tested internally with NTUC Enterprise & NTUC Fairprice staff. We also worked closely with the business and product development teams to optimize the designs throughout the testing process.
The new navigation header was first rolled out to a small group of users, as part of A/B testing. It was subsequently released to 100% of users as it was monitored to perform as well as, if not better, than the previous navigation header.
This achievement was celebrated together with the whole FairPrice team at the quarterly townhall!
I am thankful for the opportunity to work on a feature with high visibility, and also grateful for the support from the internal staff teams who tested the navigation header and gave us valuable feedback. However, I recognise the need to better plan measurable goals for design enhancements, and to follow through with a more thorough data collection post launch!