KELLOGG'S WEBSITE
About The Case Study:
Kellogg's and its relationship with breakfast is almost synonymous. A rebranding was in order as the site possed quite a lot of accesibilty challenges which was the main goal of this case study. Understanding accessibility and its role in making a design elevate is very vital as it helps in scaling the website in the future by keeping the redesign to a minimum which saves cost. So, this case study is a test of finding the perfect ways for a brand to keep their branding intact and creating reusable components that is both accessible and scalable.
Purpose :
Understanding what works in the site and what doesn’t and then creating a solution that fits the purpose is vital in rebranding a website. In this case study, we follow the procedure of rebranding the existing Kellogg’s website without changing the branding guidelines while changing the UI elements to enhance the user experience of the website by focusing on fixing accessibility issues and creating reusable components to provide consistency and scalability.
Existing Problems With The Site :
The typography weights were inconsistent and had no hierarchy to the information that was provided in cards and coloumns. The branding had great colours but were underutilized which results in a dull and non-interactive website. The product layout page was stuck in an e-commerce design system which needs to be reworked to bring out a pop and intrigue. The buttons were looking more like hyperlinks which results in poor CTA placements. Some pages had a lot of negative space and was missing a hero banner which leads to inconsistency in design.
How I Approched The Redesign :
After assessing UX issuees and fixing it using a sitemap, I moved on to inspecting the UI issues that were hindering the user from understanding the main functionalies. After studying the website thoroughly, I selected the main pages that required vital attention that will have a enhanced look after redesigning and then started redesigning the pages while keeping in mind the main usecases of the website. First, addressed the typography issues then followed it with enhnacing the card design by incoporating brand colours and illustrations. Then checked the contrast of all the UI elements to ensure that its accesible. Then created reusable components such as cards, text boxes, product lineup to improve consistency and make it scalable for the future.
Site Map:
The site map provide a brief look into the functionalities of the existing site and also the inner categories of the functionalities which has helped in getting to know the flow and how consistent the design should feel in the various pages under different categories.
Designed and Developed by Navneet Cherukot , 2024
© All rights reserved