MY PERSONAL JOURNEY
After an exhaustive search and online quizzes, I finally found my pup, Mya, from an ethical breeder after a month and a half. The process was tedious, but it made me realize the need for a better way to find the perfect dog. This inspired the idea of Purebreds - a platform to connect with the local dog owner community beyond just the nearby dog park, especially being in town.
Our first week together (Oct 2017)
Problem
-
Researching dog breeds is challenging for most, as it can be arduous and not intuitive.
-
Finding a reputable breeder can be tedious, relying on word-of-mouth or online reviews.
-
Similarly, when it comes to finding other dog owners, users typically either have to search for nearby parks or join online groups.
All of these methods require a significant amount of energy and time investment, which can be overwhelming.
Solution
A 3-in-1 platform that takes you from A to Z that will:
-
Give you a proper character quiz with matching results for first time dog owners.
-
People looking to buy a dog can find registered and verified breeders on the app with reliable ratings.
-
To find other dog owners, users may narrow down the scope of their search through a filtering process.
My solutions will mostly be on creating Red Routes for #2 and #3
Keep scrolling...
MY DESIGN PROCESS
TOOLS
-
Figma
-
Pinterest
-
Marvel
-
Slack
-
Miro
-
Zoom
TEAM
-
1 UX designer
-
My mentor's guide
MY ROLE
-
UX research
-
Script writer
-
Information architecture
-
Sketcher
-
UX/UI design
LEARN
01 COMPETITIVE ANALYSIS
Like dating platforms, mine uses the same matching model to connect users with dog breeds that match their preferences and connect with like-minded dog owners. For reference, I conducted research by analyzing data from two popular dating sites and one a pet-related platform.
I only found aspects of my 3-in-1 concept available in the market.
"Like owner, like dog!" - My Mother
02 USER TYPES
I needed a different perspective than my own. With 9 user personas from my social circle consisting of 3 types of user profiles for my site, I was able to gather various different pain points and goals to understand the market need of
-
Dog Owners
-
Breeders
-
Soon-To-Be Dog Owners
See interview 👉🏼 here 👈🏼
03 AFFINITY MAP
With the findings of the interviews I had, I ran a brainstorming session with a few of my friends to turn my cluster of highlights into organized categories, creating my Affinity Map.
For a clearer and closer look, I have replicated my affinity map in digital form
👉🏼 HERE 👈🏼
PLAN
04 HOW MIGHT WE ... ?
Identifying user difficulties led to reframing findings as innovation opportunities to address problems. So I ask HOW MIGHT WE...
-
... find the right breed match for future dog-owners?
-
... verify breeders' responsibility and ethics?
-
... allow breeders to seek assurance of sending puppies to loving homes?
-
... create a sense of community for all three users?
TO THE IDEATION BOARD! ✨✨🚀
05 IDEATION
After the user enters their personal information, there will be a user type selection.
-
Dog owner
-
Soon-to-be dog owner
-
Breeder
I then created an MVP with essential features based on my affinity map, to make the site functional for early customers and aid in product development for each user type - subject to future modifications.
06 MINIMUM VIABLE PRODUCT (MVP)
I created a chart to help me see the foundational needs of all 3 of Purebred's user types that includes key features and functionalities.
07 USERFLOW
It was then time to create a visual flow chart for the user's journey on the site.
Starting from the YELLOW rectangle on the left for Sign Up or Sign In, the user flow includes password creation and profile description selection during sign-up.
Consistent color scheme from MVP is used throughout the journey. User paths are represented with color-coded directional arrows.
Potential dog owners (pink) most own a dog in order to Sign Up as a "Dog Owner" and access the site.
Click 👉🏼 HERE 👈🏼 to view Userflow on Miro
DESIGN
08 SKETCHES
Before I could begin designing my Wireframes, I had to first solve my design problem by taking my initial Sketch steps as it is a critical part of visualizing my design process.
Here is a slide of six of them, to name but a few ...
09 WIREFRAMES
My goal was to create a user-friendly sign-up process for people of all ages, experience levels, and knowledge backgrounds.
I aimed to make my website easy to use with minimal effort.
10 MOODBOARD
Next, I brought my project to life by curating photos and colors for inspiration. This collection effectively conveyed the tone, style, direction, and mood of PUREBREDS brand.
11 STYLE GUIDES & FONTS
The interface primarily features deep yellow with shades and hues for components like chat boxes, buttons, and backgrounds, representing happiness and joy associated with dogs. The accent color is bubblegum blue, symbolizing trust and loyalty, and complementing the main color. I chose dark blue instead of black to create a softer and more approachable look that is easier on the eyes.
-
Choosing the right typeface was crucial for my interface to create the desired perception. I opted for Work Sans, which strikes a balance between serious and playful.
-
Although the recommended smallest text size is 16, I made exceptions for icons or alerts as they appeared fine on Figma Mirror.
12 UI ELEMENTS & ICONS
These elements are the building blocks of my interface: buttons, alerts, drop-downs, forms, button group, and colors used. I like the shapes to have rounded edges to create a softer and more approachable look.
I had trouble finding the icons I wanted, so I resized, reorganized, or redesigned them myself trying to make them as intuitive as possible.
BUILD
13 LOW-FI SCREENS
-
Sketched "Red Routes" for feedback on design, functionality, and message before creating detailed screens
-
Interviewed passerbyers for low fidelity screens feedback
-
Created more detailed screens with changes including simplified input requirements, larger input boxes, modernized progress bar and CTA buttons.
Signing up and Logging In
Feedback came from passerbyers, or friends
SLAVA
LARA
CLÉMENTINE
NEAL
When creating low-fidelity and high-fidelity interfaces for choosing a user's profile description, I learned to be alright with completely altering the design for a more modern feel.
I simplified the prompt to "What best describes you?" because the previous version had too much going on. Less is more!
What profile describes you best?
I learned that:
The original concept was flawed so I made major changes to Homepage design.
I removed unnecessary services and confusing elements
Some changes had to be made including moving menu bar location to the bottom, completely removing payment section, change order of icons, and adding map on homepage.
Home Page
14 HIGH-FIDELITY SCREENS
-
Choose "I don't have a dog yet" to take quiz for breed results
-
Select desired breed and find nearby breeders on map
-
Go back to app, select "I am a dog owner" to start sign-up process
Sign Up
I'm a dog owner
Upload a photo
Fill your information
Fill your dog's information
Tap "Dog Owners"
Tap "Breeders"
Friends' list
Chat with others
Edit profile
My Challenges & Takeaways
Embarking on this project from scratch to High-Fidelity prototype was truly transformative. Even though I was nervous, having my mentor Rebekka provide me with invaluable guidance makes me confident going into the real world. I was able to play diverse roles in the UX process, gaining insights in problem-solving.
The process with opportunities for new skill acquisitions was energizing and my final screens brought me pride and satisfaction as I developed user-centered vision, flexibility, determination, and confidence for my very first UX Design project.
PUREBRED'S PROTOTYPE 👉🏼 HERE 👈🏼
As somebody who loves dogs, I would love to see an app like this with this 3-in-1 concept on the market so the right family can find the right dog.