UI Design Project

BBF

Brunos Best Friend

The Brief

This project for creating a dog walker app was provided by RMIT Online University.

The UX research has been validated, and we were given the user knowledge from the first round of research. My task was to prepare for the next iteration and start the UI process.

Let's get ready to start designing !!

Moodboard

Before designing, I created a mood board to help get ideas flowing.

- I went for a playful and fun theme.

- Used blue colour as it evokes a sense of calmness, and that's how I want users to feel when interacting with the app

- Used orange as a secondary colour and it adds nice pop of colour

User Flow

Next, I created a user flow with UI states in mind to help envision what this app would look like for the user.

- During this process, I found myself coming back to the user flow to help make sure I was on the right track.

Components

Next was creating components!

-Made sure the colours passed the accessibility guidelines.

Illustrations used

Design Iterations

Mid-Fi Designs

When creating Mid-fi designs, I started to think about the UI states I should be considering and where I could show this in my design.

High-Fi Designs

When creating High-fi designs, I created more screens to guide the users in their journey, as well as added all the different UI states.

- Added Payment + Confirmation screens

- Included all 4 UI states

Usability Testing

I completed user testing with three different users who all owned 1-2 dogs and put the observations onto sticky notes. I then grouped them into themes and selected insights based on priority levels.

All users were able to successfully book a dog walker for their dog, so priority issues were mainly problems that confused and worried the user.

Changes made based on user testing

Final Design and Prototype

Click here to view Prototype