![](https://static.wixstatic.com/media/f77a35_f8f90448d9ff4ea4b4530c406b8c88b5~mv2.png/v1/fill/w_978,h_549,al_c,q_90,usm_0.66_1.00_0.01,enc_avif,quality_auto/f77a35_f8f90448d9ff4ea4b4530c406b8c88b5~mv2.png)
Project Overview
About the project
Online grocery mart is an application where the user can order and purchase their daily need groceries through online and get delivered directly to their homes.
The Problem
In today’s busy world everyone seek their work to be done very easy and quick. They also often forget about their daily household needs to be purchased. Some people do not have time to go out and some of them live far away from the grocery shops.
The Goal
Designing an application that provide fresh and affordable groceries through an app and get delivered promptly in little amount of time.
My Role & Responsibilities
User Researcher, Visual & Interaction
Conducting interviews, paper and digital wireframing, low and high-fidelity prototyping, conducting usability studies, accounting for accessibility, iterating on designs.
Project Duration
8 weeks
User Research
User Persona
![](https://static.wixstatic.com/media/f77a35_f39fc234afe5438781c5e9c4f44ef86c~mv2.png/v1/crop/x_465,y_240,w_911,h_502/fill/w_911,h_502,al_c,q_90,enc_avif,quality_auto/f77a35_f39fc234afe5438781c5e9c4f44ef86c~mv2.png)
![](https://static.wixstatic.com/media/f77a35_570b7cb6a1894ce393fdbf968f0675c7~mv2.png/v1/crop/x_469,y_231,w_913,h_510/fill/w_913,h_510,al_c,q_90,enc_avif,quality_auto/f77a35_570b7cb6a1894ce393fdbf968f0675c7~mv2.png)
Ideation
Paper wireframes
![](https://static.wixstatic.com/media/f77a35_07e07a33f2fd4b58a9e8739dba894993~mv2.jpeg/v1/fill/w_450,h_450,al_c,q_80,usm_0.66_1.00_0.01,enc_avif,quality_auto/f77a35_07e07a33f2fd4b58a9e8739dba894993~mv2.jpeg)
![](https://static.wixstatic.com/media/f77a35_e14002f41bae4cb28ce4bb159a255c99~mv2.jpeg/v1/fill/w_450,h_450,al_c,q_80,usm_0.66_1.00_0.01,enc_avif,quality_auto/f77a35_e14002f41bae4cb28ce4bb159a255c99~mv2.jpeg)
Information Architecture - Sitemap
![](https://static.wixstatic.com/media/f77a35_ab46435353294d0ea03bf6a1ac946244~mv2.png/v1/crop/x_46,y_112,w_1826,h_834/fill/w_925,h_422,al_c,q_90,usm_0.66_1.00_0.01,enc_avif,quality_auto/f77a35_ab46435353294d0ea03bf6a1ac946244~mv2.png)
Digital wireframes
![](https://static.wixstatic.com/media/f77a35_cd3d776752cb45e595c9b32350a5b199~mv2.png/v1/crop/x_43,y_23,w_1976,h_1071/fill/w_821,h_445,al_c,q_90,usm_0.66_1.00_0.01,enc_avif,quality_auto/f77a35_cd3d776752cb45e595c9b32350a5b199~mv2.png)
Low-fidelity prototype
![](https://static.wixstatic.com/media/f77a35_55abf8236f184a4288430baa575e4a39~mv2.png/v1/crop/x_350,y_77,w_756,h_806/fill/w_725,h_773,al_c,q_90,usm_0.66_1.00_0.01,enc_avif,quality_auto/f77a35_55abf8236f184a4288430baa575e4a39~mv2.png)
Mockups
![](https://static.wixstatic.com/media/f77a35_ccc6aa9a06f6440aab842349b3d01f19~mv2.png/v1/crop/x_0,y_0,w_1920,h_1050/fill/w_976,h_534,al_c,q_90,usm_0.66_1.00_0.01,enc_avif,quality_auto/f77a35_ccc6aa9a06f6440aab842349b3d01f19~mv2.png)
High- fidelity prototype
![](https://static.wixstatic.com/media/f77a35_636c6a616ffe4745ad245b03eb8196c0~mv2.png/v1/crop/x_329,y_163,w_845,h_691/fill/w_818,h_669,al_c,q_90,usm_0.66_1.00_0.01,enc_avif,quality_auto/f77a35_636c6a616ffe4745ad245b03eb8196c0~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.
Responsive Design
![](https://static.wixstatic.com/media/f77a35_fde22e740bc641be80fc67a48ba28f1d~mv2.png/v1/fill/w_563,h_635,al_c,q_85,usm_0.66_1.00_0.01,enc_avif,quality_auto/f77a35_fde22e740bc641be80fc67a48ba28f1d~mv2.png)
![](https://static.wixstatic.com/media/f77a35_dc4ff61e16944333a9e7065e1750200a~mv2.png/v1/fill/w_369,h_492,al_c,q_85,usm_0.66_1.00_0.01,enc_avif,quality_auto/f77a35_dc4ff61e16944333a9e7065e1750200a~mv2.png)
Tablet Screen
Desktop Screen
Take aways
Impact
Users shared many good comments on the Online Grocery Mart app. Everyone loved the application as it helped their grocery shopping finished in lesser time.
What I learned
I learned that even though the problem I was trying to solve was a big one, diligently going through each step of the design process and aligning with specific user needs helped me come up with solutions that were both feasible and useful.