
Bruno's best friend
case study
Bruno's Best Friend is a UI design concept for a location-based dog walking website that allows dog owners to select walkers in their area and schedule them to walk their dogs.

Project Background
Bruno's Best Friend website is looking to
expand on the UX research that has been
conducted and completed the UI design of
their website. After completing personas and
low-fi wireframing, the UX team continued to
work on desk research, User Interviews,
Ideation, Concept Design, Hi-Fidelity
Wireframing and User Testing.
Project duration
July 2022– August 2022
Objectives and Goal
To build a high-fidelity prototype of a mobile-first responsive website that allows dog owners to book a dog walker either on short notice or regularly. The flexibility of booking is the key element to the success of the website.
To build a high-fidelity prototype of a mobile-first responsive website that allows dog owners to book a dog walker either on short notice or regularly. The flexibility of booking is the key element to the success of the website.
tool
Figma

mood board
After getting a good understanding of the brief, I started the design process by curating a mood board while keeping in mind that busy parents and working professionals are the target audience of Bruno's best friend. I designed this mood board to feel clean, expressive, friendly, beautiful, and fun.
In the pet world, I notice a lot of bright, vibrant colors that breathe life into the design with fun bursts of energy. Adjectives like playful, friendly, warm, reliable, happy, and healthy along with tinted-warm color palettes and imagery were used to gather inspiration for the project.







UI flow
I mapped out all routes in the UI flow that a user might take through the website in order to achieve the goal of finding a dog walker anytime, anywhere, plus 5 states of UI stack -ideal, error, loading, empty and partial were also included. The route starts at the homepage and covers all the steps that the user might or must take in order to book a walk.

component library
After exploring the methodology of atomic design, the first set of UI component library was created. Various UI elements have been created in order to create a cohesive product image. Rounded corners, simple subtle icons, tag-like and pop-up effects are just some of a few elements that were considered and carefully planned out to compliment and encourage action.







iterations



ui states
Blank State

Loading State

Partial State

Error State

user testing
Interview Questions
Q1
What would you do when you first open this website?
​
Q2
Can you show me how to find and book a walker?
​
Q3
How would you like to log in and sign up?
​
Q4
What do you think of the payment process? Is there anything important missing from your point of view?
​
Q5
As a new customer, you want to know more about our business, what would you do?
​
Q6
How well do you like the color overall? Did you find any reading difficulty in terms of font size and color?
affinity mapping

page design
Based on the insights from the user testing findings, the final design was iterated and updated with all the recommendations needed for the minimum viable product. Besides, tablet and desktop versions of the selected design were also created for the homepage and find a walker page to reinforce the responsiveness.
![]() | ![]() | ![]() | ![]() |
---|---|---|---|
![]() | ![]() |
key insights & changes
Side Bar
-
Link the "become a walker" with the "sign up" page.
-
add footer contents
-
add icons to make it better-visualized
-
add notification icon at the top
Homepage & Find a walker
-
make click areas bigger for better usability
Payment Process
-
add promo code input field
-
add options to add new cards
-
add booking details before payment
-
highlight which payment method has been
-
chosen
Book a walker
​
-
add booking confirmation at the end
-
add walker's availability in the calendar