top of page
all main ui pages.jpg

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

login-payment-booking.jpg

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.

product layout inspiration.png
imagery inpiration.png
Typography inspiration.png
competitor's layouts.png
iconography.png
color palette.png
Button styles.png

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.

ui flow.png

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.

Color Palette.png
Button styles.png
Icon styles.png
Text styles.png
Form fields.png
date picker.png
image styles.png

iterations

ui states

Blank State

Blank state.png

Loading State

Loading state.png

Partial State

Partial State.png

Error State

Error State.png

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

dog walking BBF's affinity map.jpg

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.

pw reset-sign up
login-payment-booking
home-walkers images
3in1
all main ui pages
3in1-2

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

prototype

The prototype was tweaked and fine-tuned to address accessibility issues and the UI component library was also iterated to reflect all new changes.

bottom of page