Say hi
From chaos to clarity to happiness: Redesigning a food products display site for our client
Project details
Internship Project
My role
UX / UI Design (only designer in the team)
Duration
6 months
Disclaimer
This project was undertaken during my internship at XyloInc. The views expressed here are my own and do not necessarily reflect those of the company or its client.
Context
About the Client
Priyems is a food company specializing in authentic Indian food products, including batter mixes, sambars, and pickles. With a presence across 30 U.S. states, their mission is to deliver safe and joyous food experiences. For their website, they wanted a catalog-style design for users to explore products and locate stores, without e-commerce functionalities like ordering or payments.
The Existing Design
Priyems had an initial design created by an in-house designer, which they wanted to retain for the most part and need a MVP for Wave 1. Development had already started, and certain reusable components were emphasized, limiting the scope for significant changes.
Given design
Wave 1 design
Wave 1 Outcome
  • Made incremental improvements to usability while adhering to the client's preferences.
  • This version is currently live and can be explored here.
The Start of Wave 2 (Now under development)
Research Approach
Although detailed data like heatmaps or click-tracking insights were unavailable, I conducted a heuristic evaluation to identify opportunities for improvement and ensure redesign decisions were grounded in usability principles.
Heuristic Analysis
Pain Points in the Existing Design
Through my evaluation, I identified several issues that impacted the user experience:
  • Lengthy loading times due to excessive animations and text.
  • Carousel navigation was automated, making it hard to view specific products.
  • Bright colors cause visual fatigue and competed for attention.
  • No search functionality, complicating the product discovery process.
  • Technical glitches, such as card animations occasionally crashing and extended loading time.( Even though these are technical issues they affect the UX )
Why so many colors to begin with?
Colors —> kids —> food
Even though it's great from a psychological perspective, the primary user group for the site are not kids.
The Red Colour in Branding
Red is central to Priyems' branding for several reasons:
  • Stimulates appetite, encouraging users to explore food products.
  • Creates urgency, nudging users to act quickly.
  • Conveys passion for food and quality.
  • Grabs attention, ensuring the brand stands out.
While alternative colours were explored, minimalistic designs using monochromatic palette achieved the best balance of aesthetics and functionality.
Design Iterations and Final Outcome
I explored multiple iterations to address the identified issues while staying true to the client’s branding and preferences.
Key Improvements in the Final Design:
  1. Improved navigation: Added manual controls for the carousel and a search bar.
  1. Visual alignment: Standardized layouts and images for consistency.
  1. Enhanced readability: Simplified language and reduced visual noise.
  1. User comfort: Neutralized bold colors for better focus and reduced eye strain.
Top section
Before
After
The carousel
Before
After
The Products section
Before
After
The client expressed satisfaction with the redesign prototype that I made, appreciating the balance between aesthetics and usability.
Key learnings
  • Aligning user experience with client needs.
  • Overcoming constraints like existing designs and unavailable user data with heuristic evaluation and iterative design.
Thanks for going through!
Loved doing this case study as this was totally a roller-coaster ride of a project. Would love to hear your thoughts.
Made with