Jin Xiong
microsoft challenge: grocery app
Grocery App- 2024, 2025
OVERVIEW
A responsive grocery app that's catered towards Urban user with ease of access to their groceries as well as balancing their lifestyles.
My central focus during the design process was to develop components, wireframe and prototype the online assignment application
ROLE
ROLE
UI Designer
UX Researcher
UX Designer
TOOLS
Figma
Miro
Canva
TIMEFRAME
3 Months
November 2024 - January 2025
PROBLEM STATEMENT
Laila is a Marketing Manager that struggles to find easy-to-rely options for her streamlined lifestyle style. She tried many different apps but has a hard time to find reliable recipes and would often relies on convenience food during busy week.
HYPOTHESIS STATEMENT
We believe that by creating an on-the-go app with features such as auditory, visual images, search engines, easy-to-follow recipe guides, etc. That for Laila, we will achieve a faster method to follow recipes reliably and personalized her meal plans to support her streamlined lifestyle.
USER PERSONA
Laila is a potential user who likes to rely on meal service but finds it difficult to find reliable easy-to-follow recipe guides or tools that streamlines her busy lifestyles.
CONCEPTUALIZATION
USER JOURNEY
These two user stories were merged to create the user flows. Where my prototype includes a redesigned dashboard, resources, prompt and grading students can look at with ease.
USER STORIES
-
As a user, I want to have the ease of access without taking too much time to understand the UI
-
As a user, I want to be able to find the resources without having the website unresponsive
-
As a user, I want an app that prioritize both my healthy eating habit while planning my meals efficiently during a busy week
-
As a user, I need a way to seamlessly purchase groceries directly with the app, eliminating the need for a separate shopping trip.
WIREFRAMES
LOW-FIDELITY
The low-fidelity wireframes were then created and later digitalized on Figma for the mid-fidelity prototype with placeholder text, images, and icons.
MID-FIDELITY
The low-fidelity wireframes were then created and later digitalized on Figma for the mid-fidelity prototype with placeholder text, images, and icons.
MATERIALIZE
USABILITY TESTING
The grocery shopping app has gone through several iterations. As part of my latest iteration, improvements were based on issues my participants faced while taking part in interviews and surveys. In addition, these tests have allowed my participants to give me suggestions for what I can include in improving my application.
DESIGN
MOOD BOARD
I approached my iteration of high-fidelity prototypes by making a mood board with a few icons and images of relevant, small-scale, and relevant information.
This mood board was later incorporated into the style guide, with includes logos, typography, images, icons, UI elements, and so on.
REFLECTION
Throughout the process, I encountered difficulties in several areas of my research. Among them was the user interviews, and usability testing. In which I struggled to find questions that resulted in short responses or information that I was unable to apply to my studies from inconclusive results. However, this was my first solo UX design project, and I have come to learn a multitude of skills and gained experience that I can implement into this application.
The following step will be to do more usability test, which will then undergo virtual or in-person usability testing. This way, I can observe how my participants interact with the application and provide a thorough explanation or address any questions they may have in the future.
THANK YOU FOR TAKING THE TIME TO VIEW MY CASE STUDY!!
If you're interested, you can view some of my other work here:
