Modifications to Lo-fi Wireframes
Insight 1: Rewards Icon
Recommendation: Rename the “rewards” icon and make it easier to find coupons
Insight 2 & 4: Home page
Recommendation: Re-work the My Pets section by better illustrating what this feature and the “search using My Pets” button does. Iterate on design to make it so that users use less actions to get to My Pets page
Insight 3: Items Page
Recommendation: Fix the “add to cart” button by making it larger and more distinct
Modifications to Hi-fi Mockups
Insight 1& 2: Pet Profile
Insight 3: Recipe Modification Page
Insight 4: Coupons Button Page
Contact
I'm always looking for new and exciting opportunities. Let's connect!
650-695-9210
Going Forward
Limitations & Constraints
One major limitation was in the large scope of the project and the limited resources I had. Seeing as this was a concept design, I built out a number of very complex features by myself. This meant that much of my effort was put into 2 features: search and filter customization, and recipe customization. These 2 features were crucial in ensuring customers had multiple customization options. This limited my ability to build out other features that would have added to the overall experience of this fictitious product.
Another limitation was that of time. Had there been more time, I would run further user testing to see whether the customization features adequately meet the expectations of customers.
Improvements Going Forward
Page redirection on PDP
This final insight was not addressed because it was marked as P2. To further examine this insight, a usability study should be done specifically to look at whether users want to stay on the same item page when they select “continue shopping” or if they should they be redirected back to the search results page.
Build out other pages
As mentioned in my limitations, much of my time was put into building out the features that allowed for pet food customization. In the future, I would further develop the "rewards & coupons" page and the "reorder" page. By doing so, I could focus on features that would lead to higher customer retention.
Impact & Considerations
Business Impact
Largely the business impact of having customization features to select and purchase pet food will be that there is higher customer satisfaction and lower cart abandonment. The filter and sorting search options, as well as the ability to modify recipes, gives the customer many opportunities to find the product they desire. Other features, like the "rewards & coupons" page provide further areas for customer retention and satisfaction. Unfortunately because this app is a concept design, deducing the full business impact is not possible.
Design Impact
The design impact I had on this project was in the brand creation, building of style guidelines and the design system, and the compelling interaction design for the product. These design choices result in a unique brand experience for customers. The success of the product relied on creating something that was as much functional as it was aesthetically pleasing. In order to find this balance, I built out different components and features that ensured customer's would get value in the customization options.
Accessibility Considerations
Images to aid text: Images have been included beside most items. This will help those with literacy difficulties, but also help all users so that they can find items among text more easily. Images stand out more and break up the page, adding visual clarity.
Minimized gesture controls: To help different types of users, all gesture controls have an alternative option to perform actions. This way the user can choose which method is easiest to use a particular function.
Color Contrast: The contrast between all background and foreground colors has been checked through WebAIM. Each meets the criteria for current accessibility standards, that being 7:1 for normal text and 4.5:1 for large text and icons.
Research & Ideation
User Research
Competitive Analysis
A competitive audit was compiled to evaluate companies with alike product offerings and to see how our product fits into the market. There were 2 goals with my competitive audit:
1. Compare the experience of purchasing water testing (in-home or kits) using different competitor’s websites.
2. Compare competitor’s websites both on desktop and mobile to understand how the process of finding water education information is.
PetPlate
DIRECT COMPETITOR
Sells personalized gourmet meals for dog. Custom meals are based on dog’s size, breed, and allergies. They use 100% human grade ingredients, cooked fresh.
Chewy
INDIRECT COMPETITOR
Offers pet food from over 2000 brands. Allows customers to quickly purchase pet food and get it delivered from hundreds of brands online.
Petco
INDIRECT COMPETITOR
Pet food available from over 776 brands. They have convenient locations and many choices in brands for customers.
Ollie
DIRECT COMPETITOR
They specialize in creating fresh high-quality dog food. All dog food is human-grade with no artificial flavors or fillers.
Petsmart
INDIRECT COMPETITOR
Sells pet food from over 430 featured brands. They have convenient locations and lots of brand and food options.
The Farmer's Dog
DIRECT COMPETITOR
Crafts high-quality fresh dog food. Vet nutritionists create foods that are fresh and balanced meals.
Opportunities
Customization
Provide customizable pet food options where they can choose to add or remove ingredients
Efficient Ordering on App
Provide quality pet food, for a variety of pet types, with fresh ingredients that can be purchased on an app
Incentives
Provide incentives to encourage new and returning customers to create an account
Proposed Solution
Our Pet Food Customization App will let users order pet food quickly with the ability to sort and filter ingredients to build recipes which will effect users whose pets have certain food allergies or specific dietary needs by allowing users to customize meals and streamline the search, purchasing, and delivery process. We will measure effectiveness by tracking orders placed and reading user reviews.
User Flow Map, Storyboards, and Crazy 8 Exercise
Project Overview
Product Duration: March 29, 2021- July 15, 2021
Job Type: Concept design for a pet food customization app
My Role: Lead UX Designer
My Key Contributions
-
User research: Creating problem & goal statements, user stories & personas, user journey mapping, and user flow mapping
-
Competitive audit
-
Creation of research plan
-
Conducted and analyzed data from 2 usability studies
-
Wireframing & prototyping (low & high fidelity)
-
Branding and logo design
-
Established design system in line with the brand
The Goal
Create a dedicated mobile app that lets users order pet food quickly with the ability to sort and filter ingredients to build recipes based on their pet’s dietary needs.
Low Fidelity Designs
Solution
High Fidelity Prototype
To solve the UX issues that were previously defined, the following techniques were implemented to make this design successful:
Efficient ordering process: The ordering process has been made as efficient as possible by having a concise user flow, only directing users to the necessary pages to get them the information they need and want so that they can complete core user tasks. The copy and design of the cart and checkout pages present information in a way that is clear and to the point. The "re-order" page makes this process even faster and convenient for users looking to make subsequent orders.
Great customization options: Pet owners increasingly spend more time and money in selecting food for their pets and want the ability to easily search and buy customized pet food. The Pawfect Eats app I designed addresses these concerns by making it easier for users to find food that their pet needs based on dietary requirements. The filter and search options allow customers to specify food requirements so their search results reflect only the options relevant to their pet’s dietary needs. On the product description page, users can modify ingredients for that particular product recipe. There is also the option in “My Pets” to save these food preferences and allergy info so that pet food recommendations and search results are highly tailored to one’s needs.
Project Highlights
Clear Style Guidelines & Design System
Everything from color, typography, iconography, and buttons and components have been properly documented in the design system. I ensured there were different types of buttons and components for different use cases as well as their different states (such as being inactive, default, or error).
Ingredient Modification Page
One notable feature of the product was having the ability to adjust the ingredients of recipes so that it fit the specific dietary needs of one's pet. I incorporated this feature by displaying the main ingredients of the recipe first. Items with a grey background are core to the recipe and can not be removed. Items in blue can easily be added or removed, with the corresponding "add" and "remove" buttons found to the right side of each ingredient. These 2 buttons have been given different colors to better identify the action. The other optional ingredients are found in the section below, labelled "add ingredients" and are separated into different categories so customers can easily find foods.
Usability Study Findings & Insights
The main component that needed fixing after conducting the second round of usability testing was the pet profile card. The feature of removing a pet was solely gesture controlled and did not take into account users who can’t use swiping motions. Moreover, the remove function was hard for most participants to find and they had a difficult time completing this task. The written copy on the ingredients modification was another consideration to be changed to help users better understand how to use a function. Insight 3 and 4 were minor fixes and not necessary to users completing the main user flow, although modifying these insights would give to a better experience overall.
1
PET PROFILE CARD (P1)
The pet profile card should be redesigned to make actions more intuitive. The “remove pet” function should not solely be gesture controlled.
2
INGREDIENT MODIFICATION (P1)
Word choice for buttons and headings on the ingredient modifications page doesn’t accurately describe what the function is/does and should be changed.
3
COUPON PAGE (P2)
Users should not be re-directed to the cart automatically after adding a coupon to cart.
4
REDIRECTING FROM PDP (P2)
Users who select "continue shopping" should be redirected to the search results page.