Morrisons Groceries Website
Homepage UX review and redesign proposal 
Background and objective
Morrisons, an established chain of supermarkets in the UK, has an online shopping portal. This portal allows its customers to buy products online and get them delivered to their address. As a part of the Morrisons’ selection process for the UX designer’s post I was asked to dot a UX review of their grocery shopping website and suggest design changes that will enhance online shopping experience of its customers.
Research and review

As a part of the user research, I created key user personas. For this I reached out to friends and friends of friends; and conducted some informal interviews. The two key user archetypes that emerged through the study were— Family shopper and Personal shopper. This exercise offered some insights into the needs and pain-points of both user archetypes. It also highlighted some unique behaviours and expectations. The aim of this exercise was to establish areas of focus for UX review and redesign.
Further, armed with insights from the persona creation, a UX review of the current website of Morrisons Groceries was carried out. This cognitive walkthrough helped evaluate and determine the level of usability through a contextual lens. A number of severe issues were identified; and redesign recommendations were made to address them.
 Create user/shopper types
Shopping habits of different user groups, as identified during the research, vary greatly; and all users would like an online shopping experience optimised for them. Create presets of a few (3 to 4) user groups and let users choose the category they belong to.  
 Create user buckets
Gather more details about the users in order to create user buckets, which then can help identify and analyse user needs and behaviour
 Curate content based on user type
Based on the category chosen by the user and her past shopping habits, curate content that’s most relevant to her.
 Redesign basket / shopping cart experience
The current basket has major usability issues with it. Redesign should allow users to clearly see the contents in the basket, as well as easily make changes
 Redesign navigation menus
The main product categories are buried under a tab—bring them upfront. Make it obvious as to what categories users are exploring / interacting with. Visually differentiate the navigation menu from the rest of the content.  
 Bring in more visual coherence to the layout
Multiple visual styles, inconsistent grid application, and poor utility of screen real estate make the website displeasing and hamper the usability. Create a consistent look for the whole website; and introduce visual hierarchy to guide the eye.
 Create a consistent product card experience
The product cards are a key element of the website. The cards lack consistency and intuitiveness. Design a structure for the product cards; make them flexible to be used in various sizes.  

For family shopper (User story 1)

For personal shopper (User story 1)

Shopping categories brought upfront (User story 2)

Redesigned shopping basket
(User story 3,4,5 & 6)

The user interface design maintains the key attributes of the Morrisons’ brand through colours and visual treatment. The interface is designed to give prominence to the key content and interactive elements over other components. The clean and crisp look of the website enhances findability, and ensures a hassle-free experience.​​​​​​​
Redesigned homepage

Mega-navigation bar
Key categories made visible upfront. Typography and colour variation to highlight different hierarchy-levels
Grid structure
Product cards
Modular cards that fit within the grid layout. Designed to highlight products


Translating the design to mobile version
Navigation menu for mobile: Intuitive multi toggle 3-tier deep navigation menu 
Morrisons Groceries Website

Morrisons Groceries Website


Creative Fields