Case Study | UX • UI Design
With Your Pet
Pet Supplies & Pet Services E-commerce Mobile APP
Time Line: Aug 2022- Jan 2023
Tools: Figma, Adobe Illustrator, Photoshop
Capacity: Product Designer
![[복제] Main_image.png](https://static.wixstatic.com/media/e72671_579cfe4b5ed645e998556a0f1e1d3f0f~mv2.png/v1/fill/w_1000,h_523,al_c,q_90,usm_0.66_1.00_0.01,enc_avif,quality_auto/%5B%EB%B3%B5%EC%A0%9C%5D%20Main_image.png)
![[복제] Mobile.png](https://static.wixstatic.com/media/e72671_b6742be392cf470f90b25987cb99088a~mv2.png/v1/fill/w_379,h_675,al_c,q_85,usm_0.66_1.00_0.01,enc_avif,quality_auto/%5B%EB%B3%B5%EC%A0%9C%5D%20Mobile.png)
![[복제] Ball.png](https://static.wixstatic.com/media/e72671_bb78bcc3b32c41f787cb721b3501b896~mv2.png/v1/fill/w_80,h_73,al_c,q_85,usm_0.66_1.00_0.01,enc_avif,quality_auto/%5B%EB%B3%B5%EC%A0%9C%5D%20Ball.png)
![[복제] Fish.png](https://static.wixstatic.com/media/e72671_a4964d7159e0429590972bba76459655~mv2.png/v1/fill/w_80,h_52,al_c,q_85,usm_0.66_1.00_0.01,enc_avif,quality_auto/%5B%EB%B3%B5%EC%A0%9C%5D%20Fish.png)
![[복제] Toy.png](https://static.wixstatic.com/media/e72671_7210cee98d1644cab00d9448a0166391~mv2.png/v1/fill/w_60,h_59,al_c,q_85,usm_0.66_1.00_0.01,enc_avif,quality_auto/%5B%EB%B3%B5%EC%A0%9C%5D%20Toy.png)
Pet Supplies &
Pet Services Application
"Better Products, Better Solutions"
I immigrated to Canada during the Pandemic with my two cats. I needed to buy some supplies but during that time, people avoided visiting stores and so did I. So I tried to find pet supply applications, but there are very few in the current online market. I researched more about the pet industry and thought of what a proper pet shopping mobile application can be and what services it can provide.
My Role
-
Created a holistic product idea.
-
On the UX side, conducted research on project management and both short and long-term goals.
-
On the UI side, implemented wireframes, created prototypes and defined UI and design specifications.
Problems
-
In this digital market, many brands don’t have their own mobile application. So the users have to go to their website, but they feel outdated and unoptimized.
-
The number of users interested in Healthier food choices and Health care products for pets is increasing, But there is no interface that helps user’s find products directly catered to their pet’s health or dietary needs.
-
77% of pet parents in Canada rely on an in-person pet store.
-
In general, current businesses have mobile design interfaces that are not interesting to new users.
Design Process
Survey
My research was on competitive analysis, general pet market trends, and visiting other stores, both in-person and online. Through these activities, I tried to find out ways to improve the customer experience for online shopping. Also through the research and survey, I validated the user pain points and user needs.
Findings from research
Ontario has the largest number of pet supply stores in Canada, more than 750.
77% of Canadian pet owners buy food in-store.
The Canadian Animal Health Institute (CAHI) released the results of its 2022 Pet Population Survey on Sept. 22, detailing rising pet ownership throughout the country.
5% of Canadians are willing to pay more for healthy pet food. 35.6% were unsure, while 21.9% said that they wouldn’t switch foods.
There is intense competition in the pet care, pet food, and pet supply niches, particularly by mass merchandisers that profit from high-volume, low-price sales.
The biggest challenges currently faced within the Canadian pet industry are competition from e-commerce-only retailers, industry consolidation, and increased demand for healthy food options. Pet owners are looking for more food variety for their pets, particularly foods that are designed to address health concerns.
Nearly one in five pet owners wanted or needed preventative care in the past 12 months but were not able to access it due to affordability or the inability to get an appointment, among other reasons.
The Canadian pet market has a net worth of US$7 billion. This is expected to grow at an annual rate of 4.3% by 2025. (Government of Canada)
User Persona
Julie Delo, 25
University Student
Daily Activities
Meet friends, Walk with her dog
Pain Points
Bad mobile system
Delivery fee
Lack of medical products
Needs
Cheaper delivery fee
Mobile app
Various medical products
Chris Carlson, 45
Program Engineer
Daily Activities
Play games with his friends, Read books
Pain Points
Lack of recommended products
Paying process
Refunding or exchanging products
Needs
Easy shopping process
List/Section for suggesting products
Supplements for dog
Target Users
User Needs
-
Ages: 18-65
-
Canadians
-
Pet Owners
Proper UI Design:
Users need a better interface for enjoying mobile shopping
Local AD:
Users who visit a store can check weekly flyers on mobile apps
Offers:
Free delivery coupon and 20% off coupon
Pet Services:
Consult a problem with a vet and Love Back - Adopt a Pet
Idea Sketch
I quickly sketched ideas for mobile pages and developed them into real pages. The pictures below show a few parts of them and how I designed them at first.
User Flows
I developed the app flows to facilitate user tasks and defined how the user interacted with site functionality.
Sitemap
This sitemap provides mobile information that easily shows team members, such as designers and programmers, each page and the relationships between them.
Lo-Fi Wireframe User Flows
Mid-Fi Prototype
Mid-Fi
Prototype Video
Once the lo-fi wireframe is created, I prototyped it and conducted usability testing to validate the design.
After the test, fixing the details
01. Home
02. Product Detail
Before
1) A hectic design because of too much colour
2) Too many categories
After
1) Reduced overall colour to make icons more clear
2) Reduced the number of categories
3) Changed category pictures to icons
4) Added Live Chat
Before
1) No notice about free shipping
2) No select box for ‘Ship to me’ or ‘Pick-up at’ sections
3) No select box for ‘Autoship’ section
After
1) Added a notice for ‘Free Shipping Fee’ under the Quantity Box
2) Added a notice for stock availability
3) Enhanced select button responsiveness
4) Added Autoship check box and options
03. Pick-up At
Before
1) Lack of store details
2)Too much spaced used by cards
After
1) A simpler list of stores with more information
2) After clicking the select button, moves to a product detail page (if the user checks ‘pick-up at’ in product details)
04. Menu
Before
1) Too much spaced used for buttons, have to scroll to find right category
2) Buttons are too big
After
1) Simpler list with all categories immediately viewable
2) Connects to the login page (it will be a more useful way to log in)
UI Interface
From Launch Screen
Final Design
to
Product Screen
From
Pet Services to Payment Screen
