top of page
.png){kind=logo}
"A mission to give pets a home for life by making the pet purchasing process transparent and convenient"
Project Brief
Beginning-to-end desktop prototype withonboarding workflow
Timeline
Four weeks
My roles
Team
3 Designers
Tools
Figma
Who is HonestDog?
HonestDog is a socially conscious startup
that aims to address irresponsible dog breeding
Around 80,000 dogs in Germany's population end up in animal shelters every year
Honest Dog steps in to facilitate a more reliable and informed adoption process as a solution.
They connect users to certified breeders, and verify everything from vaccinations to the pedigree of the dogs. Successfully lowering rates of illegal puppy-mill sales and promoting lifelong adoptions
The Problems
The viability of Honest Dog's mission rests on its ability to convince users that their site is trustworthy.
Our team of three researchers and designers would need to make their content feel safe and engaging
1
Increase brand legitimacy
2
Reduce applicant drop-off
3
Promote in-site services
The following workflows were requested:
Pet Seekers Onboarding Flow
Homepage + CTAs ​​
Exploring Breeds Page
Profile Exploration Page
Breeder Exploration Page
User Dashboard
The Timeline
Understanding the market
Competitor analysis
Researching the pros and cons of competitor sites helped the team not only draw inspiration, but look for short comings to avoid in our own solutions
Sites like Petfinder and GoodDog provided insights on card styles, search functions, and onboarding processes. Sites like Lemonade.com were analyzed for their use of subscription models
SWOT analysis
A useful thought experiment: We analyzed the current pro's and con's of Honest Dog. A SWOT analysis helped visualize weakness we could address, opportunities to capitalize on and strengths to play up
Secondary research: Freemium to Premium
We looked deeper into the techniques used to make a successful push from free to premium. How could we upsell users to premium without loosing the element of trust that was essential in the project's goal?
User Interviewing
Once we felt we understood the market around HonestDog, we started to unpack the users within it. We couldn't pretend to understand the specific pain points of adopting a dog in Germany, so we reached out to eight people who were in various stages of the buying and selling of dogs
Pet Owner interviews:
The interviewees' journeys varied, but trends regarding bad experiences with breeders and unsatisfactory adoption processes with competitor sites stood out. These interviews appeared to confirm our research and validated the need for a safer and more reliable adoption process
Breeder interviews:
Alongside the pet owners, we also interviewed three dog breeders. One was based in the United States, while the other two were located in Germany. The information gathered from the breeder interviews emphasized the importance of ethical breeding practices and supplied us with pages of data to sort through and reference in the later steps
Grouping themes with affinity mapping
Affinity mapping allowed us to organize key insights from the information collected. This helped us to identify patterns and themes that contributed to our design process
We created groups like 'surprises', that clustered instances of users feeling shocked by some aspect of their adoption process, which proved to be useful as a reference throughout the sketching phase
Condensing insights with empathy mapping
The empathy mapping stage addresses the excess of data by thoughtfully breaking down each user’s interview into “Says”, “Thinks”, “Does”, and “Feels” sections. This distills the information, and was done in parallel with affinity maps that offered deeper interpretations of user statements
1
Says:
“I would have appreciated it a lot more (if I had) some sort of contact or some sort of Progress Tracker or something. Like ‘did you receive my application?’”
2
Does:
Believes that her application was lost and leaves the site for another
3
Thinks:
This service does not care about me, and simply wants to get the puppy off their hands
4
Feels:
Like a product more than a person
Buyer and Breeder personas to reference
Empathy maps fed directly into two ‘personas’ that we would cater our design choices toward
Documenting a typical user as well as a typical breeder’s background goals and frustrations from the empathy and affinity maps further humanized our demographic and gave us the confidence to make decisions for them in the sketching and design phases
User Flows
Mapping the existing site and adding our input
Having a potential user scenario mapped out would help the team visualize the screens that we would need to create. The map we drafted walk through a user’s decision points and the site’s responses to those decisions. Importantly, the buttons and elements we would need to design are documented in this stage
The first flows visualized the current standing onboarding method, and were helpful in deciding which aspects needed to be updated and revised
The second flow includes our team's input, rearranging the content of the onboarding to group logically and flow faster. Keeping in mind the project goals, we included CTAs to other HonestDog resources that catered to the tasks of each step of the process.
For example an Honest Dog breed matching quiz was added to the "Select Your Breed" page to show users that successful and compatible adoptions were prioritized
Sketching the screens
After determining the screens we would need to complete our redesign, we got to work on sketching and visualizing the solutions on paper
The sketches ignore formatting and style but help to visualize solutions and placements of elements before they are wire-framed
Onboarding
Redesigning pages to display information more intuitively
Steps like the ‘Select your preferred breed’, and ‘It’s a match’ page were re-conceptualized. We looked at the method of selecting a dog and found that scrolling through a seemingly endless list was not intuitive, and sketched out a filterable checklist that would display the breeds the user had selected. We also tested out a new method of displaying matched breeders
Homepage
Calls to action that promote further engagement with the product
Variations of the home screen that cater to new-users and signed in users were drafted. The signed in version was personalized to display resources and content that pulled from the user onboarding and application data
Ordering the content with intention
HonestDog's selection of dogs is shown first and then immediately underneath, users are reassured of HD's standards to remind them they are in a trusted site. Articles that discuss the pain-points of adoption are pushed to the forefront of the display to show commitment to users success
Catering to subscribed users
In the signed in version, articles at the front of the carousel discuss getting a second pet, and the rewards of a premium membership are highlighted to guide them toward joining the HD community
Testing variations of premium ads
With the goal of monetization in mind, our team decided displaying HonestDog's Premium feature on the homepage was important, and many iterations of the banner/pop-up were discussed
Through testing with users we found that the pop-up ad was quickly disregarded and often left the users less likely to join. We decided on a banner ad
Dashboard and Explore Page
Curbing applicant drop off
The dashboard presented an opportunity to keep the user on track with their applications. We add a progress bar to the user profile to show users how close to a complete application they were, as well as a messaging feature that would provide breeder communication and updates straight to their page rather than forcing them to check their email
Fun facts sections and community banners also helped provide a feeling of trust and strove to make the user feel more cared for in the process
Breeder Profile
Using verification icons, favoriting and anchor links to enhance the profile
Giving the user the security by showing the breeders verifications and promoting interaction by allowing favoriting were two methods we employed to increase successful adoptions. Adding a selection of anchor links on the left hand side made the page move more smoothly and helped to make dense information more navigable.
Sections like the "Meet the parents" and "Past litters" were pulled straight from user interviews and seen as ways to communicate reliability
Translating to Low-Fi Wireframes
Low fidelity wireframing takes the deliverables one step closer to the final product and helped us think spatially about the choices we made in the sketching phase.
This estimation of the final product was also used to user test with. This was essential to the success of the deliverable, and the insights of both German and American dog owners and breeders informed the edits we made at this stage
1
2
3
4
5
The hero image immediately advertises the two main functions of the site
HD’s standards are displayed prominently and early to differentiate from competitors
Tailored resource cards that keep new users engaged and excited
Verified breeders and their credentials are shown under the HD standards to guide users to the desired outcome
The community and user-review banners placement would later be moved to higher in the scroll after interviews with users highlighted their importance
1
2
3
4
5
Using white space and simplification to make the onboarding less taxing
The use of white space and icon choices in the onboarding were changed to give the whole process a more modern look. We believed the original use of uncorrelated emojis as buttons on the onboarding felt unprofessional, and by unifying the styles and colors we pushed HD to feel more trustworthy.
1
Large simple cards, combine 10 previous steps into 6
2
Progress tracker provides a sense of forward movement
Design System
High Fidelity Prototype
Homepage
The final step was to add in photos, align content, design the buttons and create the layouts of the final cards that the user would interact with
Making HD visually pleasing was important in this stage, we wanted to retain a “fun” aesthetic to translate the research and solutions into a platform that users would want to regularly return to
Onboarding
The onboarding underwent a similar clean up. Consistent and modern screen styles help to carry the user quickly through the process and lower user drop offs
Explore
The explore page saw the incorporation of additional filter options that better cater to the users' needs
Our aim was to captivate prospective owners by presenting visually appealing breeder cards and showcasing a wide variety of dogs and breeders
HonestDog's reaction to our solutions
The most validating aspect of this process was seeing HD actually implement and utilize our original ideas and designs. A couple of weeks after the project proposal was submitted changes to the main site began to appear and it was clear to the team that the CEO appreciated and saw the value in our solutions
Pages like the dashboard the explore sections and premium ads were taken directly from our proposed prototype
Our Pitch
HD Implimentation
bottom of page