A mobile app for ordering pet food with information on ingredients and nutrients
UX/UI Design
Project Type
Personal Project
My Role
Product Designer
UX Researcher
Timeline
Apr - July 2023
Tools
Figma, Illustrator
OVERVIEW
This was my first project in the Google UX Design Professional Certificate program, where I gained primary insights into UX projects. It helped me differentiate between graphic design and UX design, realize my transferable skills, and identify areas for growth.
As a pet lover and owner of a six-year-old toy poodle, I chose to optimize the pet food ordering process from a selection of themes in the course. This topic resonated with me and ignited my passion for creating a seamless experience for fellow pet owners.
How might we make it easier for pet owners to select the most suitable pet food for their pets?
PROBLEM
Petfood caters to customers with pets of all ages, offering a nourishing diet for their well-being.
TARGET USER
The app Petfood has been designed to deliver nutritionally balanced and wholesome pet food to our beloved fur babies. Users can easily access information about ingredients and nutrition within the app while selecting pet food. Moreover, the app offers pet-care tips to assist pet parents in understanding their pets’ specific dietary needs based on their conditions.
OUTCOME
UNCOVERING ISSUES
While ordering pet food online, pet owners have limited access to ingredient information and nutrition analysis. Also, selecting pet food is not easy for owners without pet-care knowledge. These problems prevent pet owners from choosing the most appropriate food for their fur babies.
To establish a comprehensive understanding of the users I was designing for and their needs, I conducted three interviews with pet owners of varying ages, genders, and pet breeds, ensuring a well-rounded baseline for my later design. Two major pain points were uncovered through the interviews.
PAIN POINTS
Participants had difficulties accessing information about the ingredients and nutrients contained in each pet food product.
Pet owners, especially newbies, had limited knowledge of specific ingredients and nutrients needed for pets of varying ages and body conditions.
To foster stronger empathy with users, I developed two personas that vividly illustrate the characteristics and needs of our target users. Each persona embodies one of the identified pain points. These personas serve as a valuable tool for understanding the users and guiding my design decisions.
PERSONA DEVELOPMENT
MAIN USER FLOW
When and how can we intervene in the ordering process to overcome their difficulties?
Before embarking on the design process, I crafted a user flow chart to visually depict the key task flow from the users’ perspective. This allowed me to comprehensively understand the user journey and identify potential areas for optimization in the design process.
LOW-FIDELITY DESIGN
Solve the key problem: display ingredients and nutrition information in product details.
As I entered the design phase, I integrated all the insights I had gathered so far: personas, their pain points, and the user flow. With these in mind, I began visualizing ideas by sketching various concepts. Then, I evaluated and selected the most effective elements from these initial sketches to form cohesive wireframes.
WIREFRAME SKETCHING
Following the initial sketches, I translated my ideas into digital wireframes and developed a low-fidelity prototype for the key task flow. This allowed me to construct interactions and flows, which were then tested with users to gather valuable feedback as early as possible.
LOW-FIDELITY PROTOTYPE
ITERATIONS
Two rounds of usability studies (with lo-fi and hi-fi prototypes, respectively) to inform iterations and ensure an informative and smooth ordering experience.
The two rounds of usability testing involved three participants each. Findings from the first study played a crucial role in guiding the transition from the low-fidelity prototype to more refined mockups. In the second study, a high-fidelity prototype was utilized, uncovering specific areas that required further refinement. These are the insights gained from the studies providing actionable steps for improvement:
USABILITY TESTING
Round 1 Findings
Unable to add to cart or save to favorite directly
Unable to check the favorite product list
Unable to double-confirm orders before making a payment to avoid accidental purchases
Round 2 Findings
Unable to check the benefits of different ingredients
Unable to select a payment method and address while checking out
Confusing between the “favorite” icon and the “save” icon
Design iterations were implemented following each round of usability testing, incorporating the insights gained from the studies. Here are two examples of iterations that addressed some of the findings from the two rounds of usability testing.
DESIGN REFINEMENTS
Adding Benefits of Each Ingredient
Only the nutrient ratio and ingredient list were displayed in the early design. Participants expressed a desire for additional information regarding the benefits of each ingredient, which was later incorporated into the final design.
Adding Confirmation of Delivery Address and Payment Method
In the early design, participants could not select a payment method and delivery address while checking out. So, in the final design, two overlays were added in between for users to select their preferred payment method and delivery address.
FINAL DESIGN
An informative pet food ordering app with ingredient information, nutrition analysis, and pet-care tips.
Comprehensive Product Information on Ingredients and Nutrition
With this information, pet owners can choose the most appropriate food for their adored fur babies according to their nutrient needs.
Pet-Care Tips Shared by Professionals
The all-in-one ordering app offers pet-care tips to pet owners, including customized nutrient recommendations tailored to their beloved furry companions' specific breeds and ages.
Customers can track the real-time status of their orders, alleviating any concerns about delays or missing parcels.
Real-Time Order Status Updates
