top of page
Book_Style_Hero-BG.png

Designing a Native IOs & Android app

Book_Style_logo_white.png

Overview

With so many barbers not having a reliable website for booking appointments, there’s a need for an all-in-one app that can be used for booking and paying. As a consumer, wouldn’t it be nice to have an app that helps you find a local barber when traveling, or to have a backup plan when your usual barber isn’t available? 

The Problem

There are numerous salon booking apps on the market that offer a lot of features, but they are very hard to navigate. The experience of booking a good barber or finding a new barbershop can be discouraging and time-consuming. Most consumers need an app they can trust.

The Solution

To solve this problem, I designed Book&Style, a barbershop booking app built for busy, on-to go users that don’t want to spend a lot of time planning their next hair appointment. Book&Style is a native mobile app that can be used to discover new barhops, read reviews, or easily book appointments with your favorite barber.

My Role

Competitive Analysis

Wireframes

Illustration/Icon Design   Usability Testing

UI Design & Prototyping 

Competitive
Analysis

I made it a priority to conduct extensive competitive research and analysis to identify what solutions exist, what’s working for others in the market, and where we might be able to improve.

Analysis: Mobile Design Patterns
of the Booksy App

Book_Style_Competitive_Analysis_01.png
Book_Style_Competitive_Analysis_02.png

Observations

  • Navigation: I like how Booksy tabs break out the barber, reviews, portfolio, and details.
    The calendar labeled appointments.

  • Data Management: I like how services are broken out into ‘popular’ and ‘other’.

  • Miscellaneous: I like the carousel time labels when choosing a time.

Analysis Mobile Design Patterns
of the StyleSeat App

Book_Style_Competitive_Analysis_03.png
Book_Style_Competitive_Analysis_04.png

Observations​

Overall, I feel the design of this app is very busy and a bit overwhelming.

  • Miscellaneous: I like the option to filter by date of the desired service, by best match, and other categories.

  • I like the carousel time labels when choosing a time and option to call for the evening time slot.

  • Social: I like the ability to share the barber’s details within the app.

  • Gather Data: For the pricey services, I like the prompt to gather payment info for the deposit before booking.

User Stories

User Story One

As a user, I want to search for a specific barbershop and book an appointment.

User Story Two

As a user, I want to see a recommended list of barbers or barbershops near me, without leaving the app.

User Story Three

As a user, I want to have access to advanced filtering options so that I don’t have to browse through a lot of barbers or barbershops. 

User Flows

With so many key features that will set Book&Style apart from its competitors, I focused on Users Story One - designing an aesthetically pleasing and intuitive user experience when booking an appointment.
 

As a customer, I want there to be a variety of payment options, so that I can choose the payment method that suits me best.

Success Criteria

Booking an appointment with a specific barbershop

Task List

1. Home Screen

2. Search Results

3. Barbershop Details    

Entry Point

Home Screen


4. Select Date and Time

5. Confirm Appointment

6. Home Screen

Requirements From User Story

Easy to find search

Date and time selector 

Book_and_Style_User_Flow.png

Wireframes

After developing user flows, I began sketching ideas and creating low-fidelity paper mockups. Then I refined sketches into mid and high-fidelity mockups.

Low-Fideltiy

IOS low-fidelity wire frames drawn on paper

Home

Search Results

Book_Style_Low_Fi_01.png

Barbershop Details

Select Date & Time

Book_Style_Low_Fi_02.png

Confirm Appt.

Appt. Confirmed

Book_Style_Low_Fi_03.png

IOS low-fidelity wire frames drawn on paper

Home

Search Results

Book_Style_Low_Fi_04.png

Barbershop Details

Select Date & Time

Book_Style_Low_Fi_05.png

Confirm Appt.

Appt. Confirmed

Book_Style_Low_Fi_06.png

Mid-Fideltiy

IOS mid-fidelity wire frames designed in Sketch

Home

Search Results

Book_Style_Mid_Fi_01.png

Barbershop Details

Select Date & Time

Book_Style_Mid_Fi_02.png

Confirm Appt.

Appt. Confirmed

Book_Style_Mid_Fi_03.png

Android mid-fidelity wire frames designed in Sketch

Home

Search Results

Book_Style_Mid_Fi_04.png

Barbershop Details

Select Date & Time

Book_Style_Mid_Fi_05.png

Confirm Appt.

Appt. Confirmed

Book_Style_Mid_Fi_06.png

High-Fideltiy

IOS high-fidelity wire frames designed in Sketch

Home

Search Results

Book_Style_High_Fi_01.png

Barbershop Details

Select Date & Time

Book_Style_High_Fi_02.png

Confirm Appt.

Appt. Confirmed

Book_Style_High_Fi_03.png

Android high-fidelity wire frames designed in Sketch

Home

Search Results

Book_Style_High_Fi_04.png

Barbershop Details

Select Date & Time

Book_Style_High_Fi_05.png

Confirm Appt.

Appt. Confirmed

Book_Style_High_Fi_06.png

Usability Testing Feedback

All five users were satisfied with the application and were able to complete the booking task without any hang-ups. I had to explain how every link and screen was not designed for exploration but only the screens to book an appointment. Some of the users liked the design decisions, which they thought stood apart from competitors. One user noticed that one of my user-testing links wasn’t working properly. Another user spotted a few typos and content consistencies. One user complimented the ability to edit your appointment details before confirming. I added an extra screen before the searches sequence before the keyboard for better prototype flow. All information from this feedback was taken into consideration and it helped me finalize my screens.

Final UI

Final UI was further refined in Sketch and I applied Book&Style’s branded style guide.

Book_Style_iphone12_screens.png

IOS

Loading

Sign Up/Sign In

Book_Style_Final_UI_01.png

Create Account 1

Create Account 2

Book_Style_Final_UI_02.png

Home

Search

Book_Style_Final_UI_03.png

Search Suggestions

Search Results

Book_Style_Final_UI_04.png

Barbershop Details

Select Date & Time

Book_Style_Final_UI_05.png

Confirm Appt.

Appt. Confirmed

Book_Style_Final_UI_06.png

Android

Loading

Sign Up/Sign In

Book_Style_Final_UI_07.png

Create Account 1

Create Account 2

Book_Style_Final_UI_08.png

Home

Search

Book_Style_Final_UI_09.png

Search Suggestions

Search Results

Book_Style_Final_UI_10.png

Barbershop Details

Select Date & Time

Book_Style_Final_UI_11.png

Confirm Appt.

Appt. Confirmed

Book_Style_Final_UI_12.png

Style Guide

Book-&-Style-Style-Guide.jpg

Final Takeaways

Roadblocks

Overall, I really enjoyed working on this project because it offered a lot of learning opportunities. The biggest roadblock that I encountered was not being versed on the android platform. This is mainly because I’ve been an iPhone user for over 12 years. Designing for Android required a lot more research. I learned a lot about the Android platform and Material Design through this project. 
 

By not owning an Android phone, it was hard to test my prototypes. I had to rely heavily on user feedback. The best thing about relying heavily on user feedback was that I didn’t approach my design with preconceived biases or opinions about what the design should be.

What I Learned

Without a lot of exposure to the Android platform, I learned a lot about Material Design. 

 

When researching popular apps, I’ve noticed a lot of leveraging of system UI elements. These come in handy when designing large-scale projects.

​

Overall, there are a lot of great resources to use when designing for both iOS and Android.

What I Would Do Differently

Throughout the design process, I learned that Material Design had strict guidelines to adhere to. When tasked to design an app for both iOS and Android, it may be best to leverage some of the Material Design UI elements into your iOS design. This will assist in keeping the overall look and feel of your mobile application looking the same.

bottom of page