UI UX case study for mobile app UI UX by Harshana Gamage

Finding trustworthy and reliable pet sitters, losing dogs and never finding them, pet foods not being delivered on time, and the quality of goods being questionable.

girl has a problem with this - Harshana Gamage UI UX portfolio
Where
Jönköping, Sweden
What
Android and iOS App UI design
Why
Provide a single platform
Role
Designer, researcher
Category
E-commerce, Pet tracking
When
Nov 2023 - Dec 2023

A game-changer for pet owners in Sweden! 🐾

This project aims to make pet ownership a breeze. Here’s how:

1. Easy Ordering: pet owners can order pet toys and essentials with just a few taps.

2. Seamless Management: From order placement to delivery, our system handles everything smoothly.

3. Find the Perfect Sitter: App helps you find trustworthy caregivers for your furry friends.

4. Stay Connected: Create a profile for the pet and track their location if they wander off.

5. Share the Love: Share stories and adorable pet pics to build a vibrant community.

In a nutshell, this app is your one-stop solution for all things pet-related. Making pet ownership simpler and more enjoyable for everyone! 🐶🐱

found-the-solution-

Market research​

Objective

Understand the pet market in Europe, with a focus on Sweden, and identify opportunities for developing a mobile app for pet care.

Specific goals:

  1. Investigate trends in the pet market over the past 8 years.
  2. Analyze the diversity in age demographics among pet owners.
  3. Assess the demand for online pet food ordering.
  4. Explore issues related to pet loss.
  5. Explore issues related to pet sitting services.

Target Audience

Pet owners in Sweden, particularly those aged 25 to 65 years old, usually use mobile phones in their daily lives.
research-for-pet-owners-in-sweden-

Research method (secondary research)

Market Reports: Gather data from existing market reports on the pet industry in Sweden and Europe.

Online Research: Review online articles, government publications, and industry publications related to pet ownership trends, online pet food ordering, and pet care services.

Analyze demographic data and current pet ownership demand in Sweden.

Analyze demographic data and current pet ownership

The initial phase involves the collection and analysis of demographic data and current demand concerning pet ownership in Sweden. This encompasses factors such as the quantity of households owning a pet and the average number of pets per household. 

Findings:

  1. Number of pet owners in Sweden has been increasing significantly over the past 7 years.
  2. Current estimate stands at around 1.1 million pet owners.
  3. Projection suggests a rise to approximately 1.6 million by 2026.

Implication:
Indicates a substantial market opportunity for the pet industry.

Diversity in age demographics among pet owners

In our market analysis, we segmented the market into distinct age ranges to determine the predominant demographic group associated with pet ownership.
  • Most people who own pets are between 45 and 65 years old, making up about 62% of all pet owners.
  • There are fewer pet owners who are older than 65, about 7.4%.
  • People under 30 only make up about 13.2% of pet owners, and those aged 30 to 40 make up about 17.4%.
  • So, most pet owners are in their middle to senior years.

Key finding: A significant portion, 69.4%, of individuals over 45 years old struggle with caring for their pets, indicating a demand for reliable pet sitters to assist them in pet care responsibilities.

Annual sales volume of pet food products in Europe from 2015 to 2022

We conducted an analysis of the pet food market in Europe and observed a slight increase in demand over the past few years.

Market data:

  1. Market volume in 2020: 10 million tons.
  2. Market volume in 2021: Increased to 10.4 million tons.
  3. Market volume in current year: Slightly increased to 10.5 million tons.

Trend analysis:
Graph indicates a slight decrease in growth rate over time.

In 2021, the worldwide Pet Care market was worth a whopping USD 67.4 billion. It’s set to grow at a rate of 5.68%, reaching an even more impressive USD 93.9 billion by 2027.

Identified Trends and Patterns from the secondary research.

👉 Identify trends in pet ownership growth in Sweden over the past 8 years.

👉 Analyze the diversity in age demographics among pet owners, focusing on the dominant age group of 45-65 years old.

👉 Assess the demand for online pet food ordering and identify challenges in the current delivery system.

👉 Explore issues related to pet loss and pet sitting services, such as the lack of trustworthy pet sitters and tracking facilities.

Identified Trends and Patterns​

Competitive analysis

I conducted an analysis of the four most popular pet related apps and websites in Europe. This examination included an assessment of the ordering experience for pet foods and toys, the effectiveness of pet sitter searches, the functionality of dog trackers, and an examination of negative comments on both app stores to identify recurring patterns.
"Rover Dog Walking" app features.
  • Extensive Network: Connects dog owners with a large pool of sitters and walkers for optimal matches.
  • Comprehensive Services: Provides a range of dog care options, from walks to boarding, addressing diverse needs.
  • Informed Choices: Access detailed sitter profiles, including experience, photos, reviews, and videos for decision-making.
  • Easy Booking: Streamlines the booking process through the app, ensuring convenience and secure payment options.
"Pawshake - Dog & Cat Sitter" app features.
  • Global Network: Find dog sitters, walkers, and boarders worldwide, perfect for travel needs or international connections.
  • Wide Range of Services: From daily walks to overnight stays, Pawshake covers various dog care requirements.
  • Verified Sitters: Background checks and reviews offer a layer of security and trust.
  • Flexible Options: Choose one-off services or create regular schedules based on needs
"Woof" app features.
  • Flexibility Focus: Wooof prioritizes convenience with flexible scheduling, group walks , and convenient drop-in visits.
  • Local Expertise: Focused on Stockholm, Woof features sitters familiar with the city’s dog-friendly parks, routes, and quirks.
  • Real-Time Reassurance: GPS tracking and regular walk updates keep in the loop and put mind at ease while furry friend frolics.
  • Community Connect: Wooof encourages dog-loving interaction through its “Woof” feed and private chat functions.

Analyzing features of competitors

FeatureWoof (Hundvakt)PawshakeRover
FocusLocal, budget friendly Global dog care networkLarge user base, affordability
ServicesWalks, drop-in visits, boardingWalks, sitting, boarding, drop-inWalks, sitting, boarding, drop-in
PricingBudget-friendly, transparentVariable based on service, location, sitterVaried based on service, location, sitter
StrengthsLocally-focused features, flexible scheduling, playful elementsExtensive global user base, wide range of servicesLarge user base, potentially lower cost (before recent hikes)
WeaknessesLimited service variety, less international optionsLimited Swedish features, occasional spamMixed reviews due to recent controversies, reliability concerns
User Praise"Flexible scheduling & Hundis-TV!""Found a great sitter in my city!""Large user base, convenient"
Best ForCity dwellers, budget-conscious ownersFrequent travelers, budget conscious ownerBudget-conscious owners (cautiously), diverse needs

Problems found from the comments

User survey (Primary research)

Conduct a Facebook survey with questions targeting pet owners’ preferences, pain points, and expectations from a pet care mobile app.

Interview pet owners, pet sitters, and industry experts to gather qualitative insights.

Facebook survey

What!

I created a Google form with 10 relevant survey questions. Some of them are multiple-choice questions, while others are free-answer questions.

How?

I shared the survey form in pet lover Facebook groups and boosted a post to garner more results from the targeted audience.

Result

I obtained 142 participants for the survey, and it was deemed a success.

Some of the survey questions (These are 2 selected questions out of 10)

Comments from participants ​

Analyze survey data

Analyze survey responses and interview transcripts to identify common themes and trends.

👉 Many pet owners express dissatisfaction with online pet food delivery services.

👉 Lack of a community app for pet owners to engage with.

👉 Difficulty in finding pet sitters on the current website.

man showing something in my case study

Let's summarize the findings

✅ Age Demographics: Pet owners (45-65 years old) highlights the urgent need for tailored pet services.

✅ Pet Loss: The absence of reliable pet tracking facilities fuels anxiety among pet owners of pet loss.

✅ Community Engagement Platform: There’s a need for a community app to facilitate engagement among pet owners.

✅ Dissatisfaction with Online Delivery: Many pet owners are dissatisfied with current online pet food delivery services, likely due to delivery system issues.

✅ Difficulty in Finding Pet Sitters: The struggle to locate trustworthy pet sitters fuels owners’ frustrations.

Personas

Based on the research data, I created two personas to make it easier to continue the process.

Its time to start the designing!

After diving into all my research data, I was super excited to start mapping out the first flows and creating some initial low-fidelity wireframes. 🚀

Flow diagram

To make sure I covered all the essential features, I whipped up a straightforward flow diagram outlining the main tasks users can do. Take a peek at one of the flows below! 🌟 (Unfortunately, I couldn’t squeeze in the fail statuses here due to space constraints.)

Main client flow.

Low-fidelity wireframes

Once the flow diagram was all set, I dove into crafting low-fidelity wireframes for the key flows. 🎨 Exciting stuff!

Design system

After planning all the flows and structure and low-fi prototypes, I jumped into designing the design system for the ‘My Puppy’ app. The design system will help me maintain visual and functional consistency across the entire app. Additionally, I can reuse most of these components in the scalability stage of the project. I started with defining the colors and fonts that’ll give my app its unique look and feel. 🌈✨

Colors

Accent, primary, secondary, tertiary, background

Other minor colors used

Brand color of "My Puppy"​

Color: light blue
Hex: #1577EA
RGB: rgb(21, 119, 234)
CMYK: (91,49,0,8)

App logo

Designed Components

Plus Jakarta Sans

“Plus Jakarta Sans” font has been used as the typography of the project. Here are the main reasons for using this font style: Plus Jakarta Sans supports all font weights, and I have used Regular, Medium, Semi-Bold, and Bold in suitable ways in the app. This font is clear and readable on smaller-sized screens as well. As for the font sizes, I have used a minimum size of 10pt for footer navigation text and other text sizes such as 12pt, 14pt, 16pt, 18pt, 20pt, 30pt, and 32pt for main headings.

Components

Buttons

I designed various buttons for the app, each with distinct shapes and colors to signify their purposes. Colors like brand blue and dark blue represent CAT buttons, while lighter shades are used for secondary buttons. Some buttons include simple icons for additional feedback. Multiple versions of certain buttons were created to assess accessibility and facilitate A/B testing. For instance, the ‘Add to Cart’ button was designed in several styles.

Text fields, drop down, radio buttons, and check boxes

As input fields, I have created these components in the app. Text fields are designed to be easily touched for inputting data. All text fields are validated with feedback messages to enhance user-friendliness and provide feedback to the user. Similar to other components, I have created different versions for some of these components.

Dialog and message boxes

List, cards, modals and popups

Navigation - tab bar

I created a few versions of the tab bar that are suitable for various screen variations. These will be useful for A/B testing and gathering customer feedback on the user experience.

3D look & feel

The stylish touch was achieved by incorporating PNGs of popular pet toys, skillfully adding shadows to impart a delightful 3D appearance.

High-fidelity UI designs

After wrapping up the initial flow, I jumped into the next phase by bringing the high-fidelity screens of the app to life.
high fidelity ui design by Harshana Gamage

I created 93 high-fidelity screens.

I have designed a total of 93 high-fidelity designs for this project! These designs feature not just one, but two unique navigation patterns a cool tab bar and a hamburger menu. Plus, I’ve whipped up various single product screens and intro screens that are perfect for future A/B testing in our design journey.
I have been experimenting with backgrounds – tried a clean white one, an accent color for main screens, and even an aurora-style blurred background on product screens for that extra touch of elegance.

Alignment and grid

I used an 8 point grid for the project and set the margins within groups at 8 and 16, with margins between groups at 24, 32, and 48. This will arrange the entire screen elements in a nice hierarchy.

High-fidelity prototype.

I have linked up all my high-fidelity designs to create a clickable prototype! Now, I’m gearing up to test the app with our first group of users. Super thrilled about this next step in bringing our vision to life!

Adding a product to shopping bag​

Create pet profile & track the pet

Creating a pet profile:

  • Before tracking, the customer must create a pet profile.
  • Details such as name, breed, gender, and pet profile photo can be added to the profile.

GPS tracking technology:

  • GPS tracking is used to track the live location of the pet.
  • The GPS tag of the pet can be paired with the app at this step.

Finding a pet sitter

In the customer app, users can find and book pet sitters. A separate dedicated app is available for pet sitters, allowing them to register and manage bookings and other data.

Prototype validation

I conducted a validation study for my prototype with eight engaged participants. Each focused on specific functions like adding a product, finding a pet sitter, and tracking a lost pet. We aimed to ensure smooth task execution without conflicts. The study utilized Skype and Zoom calls to introduce the app and assess user navigation and task completion. Our goal was to guarantee users could easily use the app to accomplish their goals.

Study results

Notable finding: Among the 8 participants, 25% (2 out of 8) expressed uncertainty regarding using the app to track lost pets.
Quick comprehension: All participants easily understood how to add a product to the cart and find a pet sitter.
Overall success rate: Approximately 80% success rate for the test.
Insights: These findings offer valuable feedback and indicate areas for potential improvement in the app’s features related to tracking lost pets.

Prototype update concept

I’ve improved the “pet tracking” screens by adding more details for better user understanding. These changes make tracking a lost pet simpler and more user-friendly, aligning with feedback from the prototype validation and enhancing the overall user experience.

Previous flow of pet tracking

Updated flow of pet tracking

  • Initial screen: Provides clear guidance, emphasizing the need to create a pet profile. Button says “track” to start.
  • After profile creation: Action button changes to “find,” indicating users can locate their pet.
  • Tracking screen: Displays additional details like real-time GPS status and battery level, along with pet speed and distance from the owner, in a visually appealing format for better user understanding.

Accessibility check

The application was evaluated to meet AA standards of Web Content Accessibility Guidelines (WCAG) for contrast. It was noted that some areas need enhancement to meet standards. Efforts are underway to improve contrast to align with WCAG AA standards, aiming to enhance user experience for individuals with diverse visual needs.

To check the accessibility standards I used Contrast Checker of WebAIM.org website (https://webaim.org/resources/contrastchecker/).

I aimed to distinguish the main “Add to bag” button from other calls-to-action (CTAs), but the chosen color proved to be less accessible. As a result, the background color was adjusted in the final version.

Initial and Improved contrast

My Puppy Project summary

✅ Conducted comprehensive market research and evaluated market.
✅ Carried out a brief online user survey on Facebook.
✅ Performed an online usability study.
✅ Developed a series of low-fidelity wireframes.
✅ Iteratively connected wireframes into a prototype.
✅ Transformed wireframes into high-fidelity, UI designs.
✅ Conducted a thorough quality assurance audit during the final review.
✅ Emphasized consistency and color contrast for enhanced accessibility.

Have any questions about this project?
I would love to talk more about it with you!

any question you have to ask from Harshana
Scroll to Top