One Person One Dog
Design Prompt Challenge
I was given a challenge to design a compelling website to educate, guide, recommend and bridge opportunities between a seller (breeder, shelter) and a buyer (individual looking to adopt a dog). The client wanted a simple and minimal aesthetic that was engaging and attention grabbing.
I was also tasked to create wireframes in both dark and light mode, for desktop and mobile.
Deliverables
Client Interviews
Personas
Site Map
User Flows
UI Assets and StyleGuide
Low Fidelity Mockups
High Fidelity Mockups
Phase 1: Research and Discovery
It's crucial to gather information that will help me define the problem, understand the users and identify the solution.
Interview Client
To properly understand pain points, Its important to conduct interviews - in this case, I was able to interview the client which helped me understand his unique business goals and pain points. I used open ended questions to encourage him to share as much information as possible.
Interview Questions:
Business Questions
-
What are the problems we are aiming to solve?
-
What is the business opportunity / how do you make money?
-
Do we offer discounts or referrals from clients using this site?
-
How will we define success for this project?
-
Who is our targeted user?
-
Are there any current competitors?
End User Questions
-
What does the ideal end user look like?
-
What are their current pain points when it comes to finding a dog?
-
Does the end user have any benefits using this site vs. traditional ways?
-
Ideally, how did this end user find out about the app?
-
When does the end user need to create an account?
Seller Questions
-
What does the ideal seller look like?
-
What motivates the seller to advertise their dog or dogs on this app?
-
What are their current pain points when it comes to selling a dog?
-
What benefits do you see the seller receiving for using this app?
-
Do the sellers need to be verified?
UI Questions
-
Do you have any specific colors you want to see in the app?
-
Do you have any colors you don't want to see in the app?
-
What is a website or app that you really like the design of and why?
-
What is a website or app that you really hate the design of and why?
Define Users
After analyzing the clients research, I was able to make some assumptions that would help me create two distinct personas that represent the needs of the most important user groups. The client asked to focus on the end user, not the seller, so the personas reflect two types of visitors on the site - one that knows exactly what kind of dog they want, the other that just is browsing and hoping to be educated on which kind of dog they should get.
Phase 2: Define
Business and User Goals
I wanted to make sure that the clients business goals from our initial meeting and our user goals from assumptions were aligned. I also included technology goals as technical considerations should always be included to ensure successful product delivery.
After this exercise was completed, I was able to identify the mutual goals: easily and quickly match dogs and owners, and access website or app from any device.
Site Map
Due to time constraints, I decided to skip card sorting for now and rather create a basic site map based off of discussions with the client. This sitemap includes all proposed screens but can be added to later once we have the capacity to conduct card sorting with a test group. This sitemap will help understand the structure of the site as well as show the relationships within content on the site.
Phase 3: Ideate
This phase incorporates information architecture and helps define how a product will behave. Having detailed information architecture is crucial to bring a product to life.
User Flow
I created the user flow to help identify different paths that a user could take from start to finish. I asked myself several questions along this journey - What is their point of entry? What is their main goal? What is going on in their head when they land on our site?
Low Fidelity Wireframes
I always like to use paper and pencil for the initial low fidelity wireframes - it not only helps me sort through my own ideas but allows for rapid wire framing and forces me to not focus on the pixel perfect details, but rather the structure. I started with the mobile designs for the homepage and search.
User Interface Design
The client wanted their brand to be simple and modern. They also wanted their site and app to be available on dark and light mode, so when choosing a brand color, I needed to select something that would show up on both surfaces. Using color psychology, I selected a nice yellow - yellow is a gender neutral color that reflects happiness and joy, both emotions that are tied with being matched with your dog.
Phase 4: Prototype
After creating the Low-Mid Fidelity prototypes, we would typically test with clients to make sure that our designs were intuitive. For this case, the client wanted to see the High Fidelity Mockups to inspect the branding and design, so once this is approved, we would go back and test.
High Fidelity Mockups
I created these high-fidelity mockups with Figma.
**I do not own the images of the dogs**.
User Flow : Ryan
Ryan Knows exactly what he wants, so he can quickly go through the search to find Golden Retrievers near him.
User Flow : Sarah
Sarah just knows she might want a dog, so our search will help her narrow down her results based on characteristics and filters she sets.
Desktop
These wireframes show the desktop, light surface mockups.
