Spot Mobile App

A mobile app that allows dog owners to easily "spot" unhealthy ingredients in dog food.

Yes, this project is 100% inspired by my love and obsession for dogs 🐕.

role:
UX Researcher, UX/UI Designer
Timeline:
2 weeks
Project type:
Mobile app design
Preview of the Spot mobile app

Background

How might we help dog owners find healthy dog food for their canine BFFs?

Based on my own experience from being a dog owner, I realized how difficult it can be to find dog food that is truly healthy for our canine BFFs. There are countless options available in the market, with many claiming all sorts of health benefits. But are all the products truly healthy?

My dog: Andi

research

Conducting surveys

I surveyed 15 dog owners to see how they feel about the dog food industry. What does "healthy" dog food mean to them? Do they care about ingredients in dog food? What else do they care about when buying dog food?

Based on the survey results, the top factor that dog owners care about when buying dog food is ingredients, followed by the nutritional content. Surprisingly, 86% of the participants do not understand all the ingredients in the food they give to their dog.

Pie chart showing 86%

86% believe ingredients are important. However, they also don't understand all the ingredients listed on the packaging.

Pie chart showing 80%

80% feel sort of confident that the food they give to their dog is healthy.

Pie chart showing 7%

7% believe there is sufficient transparency in the dog food industry.

Person with frustrated expression
"I didn't like any part of the vaccine booking experience. It was hard to find information on where and how to book an appointment. Even when I do find information, it seems to conflict with other sources."
Person with disappointed expression
"My appointment booking experience was not great. There was no centralized portal. Information provided from one website can be different from one another, so that can be frustrating."

Talking to experienced dog owners

In addition to the survey, I conducted user interviews with 4 dog owners to identify user motivation, habits and pain points. I was able to uncover a lot:

100% mentioned ingredients are important but it's difficult to understand chemical ingredients

75% also look at product reviews and nutritional content when picking dog food

75% indicated there is a lack of educational resources for finding healthy dog food

75% have had poor experiences with a dog food product due to health concerns

Customers pick Bikechain over other bike shops because of positive google reviews, reasonable pricing and convenient location

Design opportunity: highlight factors above in the home page

Customers prefer to book bike repair appointments online due to convenience

Design opportunity: Add a clear CTA for bike repair appointments

Participants want to know pricing for bike repair services before booking an appointment

Design opportunity: The service offering page should easily be discoverable with pricing details captured

Pie chart

80% indicated vaccine appointments were not centralized which made it difficult to find available appointments

Pie chart

80% did not feel informed when booking an appointment. They would like to know the following information: type of vaccine, eligibility criteria, potential side effects

Pie chart showing 100%

100% had to rely on sources that are not affiliated with the provincial healthcare system to find available appointments (i.e. Twitter, word-of-mouth)

Connecting the Dots

Define

Based on the research insights, there is a need for dog owners to understand ingredients in dog food so they can make an informed decision about what to feed their dog. With the insights gathered, I was also able to identify one distinct persona group: Sam, a health conscious dog-owner.

Problem statement:  

Sam, a health-conscious dog owner, needs a way to understand dog food ingredients so she can feel confident and informed when picking the right food for her dog. Our solution should allow Sam to learn about any potential health risks with the ingredients used in dog food.

Persona

ideate

With the persona and problem statement in mind, I used simple sketches to translate my ideas into a storyboard. With the persona’s goal in mind, I was able to visualize the user’s ideal journey when using the mobile app.

Some of the key features defined in the storyboard includes:

Spot storyboard

wireframes

From here, I went ahead and created the mid-fidelity wireframes in Figma. With support from my mentor, I was able to gather feedback and iterate early on in the process.

View mid-fidelity wireframes in Figma

Wireframe for the home screenWireframe for the product detail screenWireframe for the search results screen
Wireframe of home page

Home Page

  • Added a clear CTA for booking a bike repair service appointment
  • Included a “Why Bikechain” section to highlight Bikechain’s mission and values as a non-profit organization
  • Highlighted services available at Bikechain
  • Added a testimonial section to highlight Google reviews
Wireframe of service detail page

Service Offering Page

  • Added a clear CTA for booking a bike repair service appointment
  • Provided an overview of all the types of bike repair services available
  • Explained how pricing works for each services
Wireframe

Appointment Booking Form

  • Added progress bar at the top to guide visitors through the appointment booking process
  • Added a back button so users can go back anytime and update the appointment details as needed
  • Added a step for the user to review their appointment information prior to finalizing the booking

Branding

Drawing inspiration from  “Adventures of Spot” (my favourite childhood book series), I named the app after the main character “Spot”.


Inspired by the character Spot, I chose a yellow shade as the accent colour.  I want the brand of the app to be fun, modern and reliable.

Spot style guide

usability testing

I created a high-fidelity prototype in Figma and recruited 4 dog owners for usability testing. Participants were asked to complete a series of tasks. The goal was to test the discoverability and usability of the app’s features and its overall experience.

Measuring Success

The app concept was proven to be successful based on feedback gathered from usability testing:

Participants described the app as modern, clean and user friendly which aligns with the brand’s adjectives. In addition, participants provided some valuable feedback to further improve the user experience for the final design.

final design

With the user feedback gathered from usability testing, I was able to revise my prototype to further improve the user experience of the app.

View the final prototype in Figma or scroll down to see the design highlights.

Onboarding screen

Onboarding

Get familiarize with the app’s features with an optional onboarding tutorial.
Quick search screen

Quick Search

Scan the product barcode or type in the product name to easily look up any dog food products.
Ingredients breakdown screen

Ingredients Breakdown

Uncover the truth behind the ingredients used in dog food and learn how each ingredient impacts your dog's health.
COVID Alert mobile app home screen

Quick access to vaccine resources

Need more vaccine resources? Tap on the vaccine option on the navigation bar to learn more about the vaccine side effects and how to prepare for the vaccine.
COVID Alert app vaccine resource screen

Find out where to get vaccinated

Provide your address in the search bar to find the closest vaccine locations.
COVID Alert app results filter screen

Narrow down the results

Option to use filters to narrow down the results based on personal preference. Option to filter by the location type and/or vaccine type.

reflection

Achievements

Proposing concepts and validating with research:  This project gave me the learning opportunity to work with a blank canvas. I really enjoyed talking to users and dissecting research data to guide and inform my design decisions.

End-to-end design with a time constraint:  As the sole Product Designer, it was challenging to design an end-to-end app within two weeks. However, I learned to prioritize and focus on the bigger picture. I was able to gain a holistic view of designing a mobile application from beginning to end.

Future Considerations

There are a few things I would do differently if I had additional time:

Other Projects

Preview of the website redesign for BikechainPreview of the website redesign for Bikechain
Bikechain Website Redesign
Preview of the new design features for the COVID Alert mobile appPreview of the new design features for the COVID Alert mobile app
COVID Alert Mobile App