![](https://static.wixstatic.com/media/f77a35_915ce79ae8614f2192cf61450060c512~mv2.png/v1/fill/w_975,h_546,al_c,q_90,usm_0.66_1.00_0.01,enc_avif,quality_auto/f77a35_915ce79ae8614f2192cf61450060c512~mv2.png)
Project Overview
About the project
Petmart is a pet food delivery responsive website which help pet owners to order and purchase food online for their pets. The main goal of the website is to use on any platform or device.
The Problem
In this busy world, many of the pet owners are acquiring a website that can successfully and easily deliver pet food to their homes.
The Solution
Designing a responsive website for pet food delivery. The goal is to deliver the food supplies to their homes with quick and easy accessible.
My Role and Responsibilities
User Research, Wireframing, Designing Mockups, Prototyping
Project Duration
5 weeks
Design Process
I chose design thinking process for this project. Design thinking is a non-linear, iterative process that makes us to understand the users, define their problems and come up with solutions to prototype and test.
Empathize
Define
Ideate
Prototype
Test
User Research
I conducted interviews and created empathy maps to understand the users. A primary user group identified through research was working adults who don’t have time get the food for their pet dogs. The secondary group one to two pets that require bulk food and doesn't own a vehicle and would prefer repeating orders monthly.
Pain points
Lack of time to go and purchase from the store.
Doesn't own a vehicle and prefer online shopping.
Want to order bulk food and get delivered securely.
User Persona
![](https://static.wixstatic.com/media/f77a35_19874565b4ef48828d0f1eb6335f8011~mv2.jpg/v1/crop/x_960,y_26,w_3814,h_3814/fill/w_228,h_228,al_c,q_80,usm_0.66_1.00_0.01,enc_avif,quality_auto/f77a35_19874565b4ef48828d0f1eb6335f8011~mv2.jpg)
"I deeply care about animals and want to give the best for them"
Name : Shreya
Age: 25 years
Location : Hyderabad
Occupation : HR Manager
Shreya is a busy professional working as a HR manager in Hyderabad. She has two lovely dogs Rio and Leo. She prefers to shop food online and order bulk food at a time with easy and safe delivery.
Ideation
Digital Wireframes
Homepage
![](https://static.wixstatic.com/media/f77a35_12e42cab9e804b3fa22f65f6a99427a2~mv2.png/v1/fill/w_317,h_946,al_c,q_85,usm_0.66_1.00_0.01,enc_avif,quality_auto/f77a35_12e42cab9e804b3fa22f65f6a99427a2~mv2.png)
![](https://static.wixstatic.com/media/f77a35_cb029b67081f41eda373ea068bde145e~mv2.png/v1/fill/w_115,h_937,al_c,q_85,usm_0.66_1.00_0.01,enc_avif,quality_auto/f77a35_cb029b67081f41eda373ea068bde145e~mv2.png)
Categories Page
![](https://static.wixstatic.com/media/f77a35_65e0028f92b4434da0142fa723396c02~mv2.png/v1/fill/w_283,h_396,al_c,q_85,usm_0.66_1.00_0.01,enc_avif,quality_auto/f77a35_65e0028f92b4434da0142fa723396c02~mv2.png)
![](https://static.wixstatic.com/media/f77a35_6b09be900d1e40ef943bb9236bf9454b~mv2.png/v1/crop/x_0,y_0,w_428,h_927/fill/w_127,h_275,al_c,q_85,usm_0.66_1.00_0.01,enc_avif,quality_auto/f77a35_6b09be900d1e40ef943bb9236bf9454b~mv2.png)
Individual Product Page
![](https://static.wixstatic.com/media/f77a35_2061aef2048f43b9ac07c7b7719e7775~mv2.png/v1/fill/w_276,h_448,al_c,q_85,usm_0.66_1.00_0.01,enc_avif,quality_auto/f77a35_2061aef2048f43b9ac07c7b7719e7775~mv2.png)
![](https://static.wixstatic.com/media/f77a35_9e0ece589e9045d783bd0e49118a4d09~mv2.png/v1/crop/x_0,y_4,w_428,h_1453/fill/w_129,h_438,al_c,q_85,usm_0.66_1.00_0.01,enc_avif,quality_auto/f77a35_9e0ece589e9045d783bd0e49118a4d09~mv2.png)
Low fidelity prototype
![](https://static.wixstatic.com/media/f77a35_ed5b39d0fb2443f6b9742affc26ded2e~mv2.png/v1/crop/x_48,y_106,w_1157,h_559/fill/w_902,h_436,al_c,q_90,usm_0.66_1.00_0.01,enc_avif,quality_auto/f77a35_ed5b39d0fb2443f6b9742affc26ded2e~mv2.png)
Mockups
Responsive Website Mockups
![](https://static.wixstatic.com/media/f77a35_fa8e416fb50c448cbf65b9caca51dc62~mv2.png/v1/fill/w_469,h_1479,al_c,q_90,usm_0.66_1.00_0.01,enc_avif,quality_auto/f77a35_fa8e416fb50c448cbf65b9caca51dc62~mv2.png)
![](https://static.wixstatic.com/media/f77a35_71c7506afdee4fcdaf7bf7f393e957ec~mv2.png/v1/fill/w_454,h_650,al_c,q_85,usm_0.66_1.00_0.01,enc_avif,quality_auto/f77a35_71c7506afdee4fcdaf7bf7f393e957ec~mv2.png)
![](https://static.wixstatic.com/media/f77a35_2b4468fc31c74b89b755fb7370426fc8~mv2.png/v1/fill/w_454,h_768,al_c,q_85,usm_0.66_1.00_0.01,enc_avif,quality_auto/f77a35_2b4468fc31c74b89b755fb7370426fc8~mv2.png)
Mobile screens
![](https://static.wixstatic.com/media/f77a35_b1e951f0a1754930b528a5919c136399~mv2.png/v1/fill/w_205,h_1288,al_c,q_85,usm_0.66_1.00_0.01,enc_avif,quality_auto/f77a35_b1e951f0a1754930b528a5919c136399~mv2.png)
![](https://static.wixstatic.com/media/f77a35_78f5056c053240309e1614edb3439493~mv2.png/v1/fill/w_268,h_1238,al_c,q_85,usm_0.66_1.00_0.01,enc_avif,quality_auto/f77a35_78f5056c053240309e1614edb3439493~mv2.png)
![](https://static.wixstatic.com/media/f77a35_4ecc1c1e46df416993c83dd4ed32b925~mv2.png/v1/crop/x_0,y_0,w_428,h_924/fill/w_245,h_529,al_c,q_85,usm_0.66_1.00_0.01,enc_avif,quality_auto/f77a35_4ecc1c1e46df416993c83dd4ed32b925~mv2.png)
![](https://static.wixstatic.com/media/f77a35_ee2e703311104e13aa9731222c8d6ea3~mv2.png/v1/fill/w_249,h_539,al_c,q_85,usm_0.66_1.00_0.01,enc_avif,quality_auto/f77a35_ee2e703311104e13aa9731222c8d6ea3~mv2.png)
High- fidelity prototype
![](https://static.wixstatic.com/media/f77a35_732e19f381484ad48e7b1b9c2c48012a~mv2.png/v1/crop/x_58,y_233,w_1145,h_506/fill/w_910,h_402,al_c,q_90,usm_0.66_1.00_0.01,enc_avif,quality_auto/f77a35_732e19f381484ad48e7b1b9c2c48012a~mv2.png)
Accessibility Considerations
-
Color Contrast has been considered and made it accessible for all users. I have used the WCAG tool to check the color contrast for buttons, backgrounds and icons.
-
I have considered the accessibility for Text Sizes, Font Type and Focus Indicators on all the screens.
-
I have made sure that users can navigate through the app and can perform actions even using a screen reader.
Key takeaways and lessons
Well, this is the first case study project where I fulfilled the roles of researcher, UI designer and writer. I have learned so many lessons.​
-
With this being my first time as a UX researcher, I got to practice first hand with interviewing, probing questions and note-taking.
-
Designing for accessibility at the starting of the design process benefits all the users and results in a cleaner design.
-
I have also learnt that usability tests have influenced and affected each iteration of the design and also developed many insights.