“Souliday”
Beauty Salon Booking App
UI/UX DESIGN, BOOKING, PERSONAS, WIREFRAME, RESEARCH, DESIGN SYSTEM, PROTOTYPE, USABILITY TESTING
About The Project
SOULIDAY is a product that helps users to enjoy a ‘soul holiday’. The objective of this project is a beautifully designed app which provides accessible booking service of beauty treatments for local users. The app intends to help users to save time and stay informative.
The Problem
Existing beauty salons use social media app or direct calls for booking and enquiry. While social media app overwhelms users with unnecessary information, direct call is limited to business hours which is inefficient.
Goal
Users can arrange their booking easily in an accessible, straightforward way. To meet this goal, the app will build up an self-serve online booking system, without contacting any cs or concerning about beauty salon’s business hours. Users can also check their purchase value, and get the news of beauty services or promotions.
OVERVIEW
DISCOVERY
I chose two potential competitors and built their marketing profile, SWOT profile and conducted a UX analysis. The goal was to identify what type of problems users face with competitors’ products, as well as understand what the users might expect from my product.
USER RESEARCH
Affinity Map
User Personas
User Journey
To further understand my personas Louise and Erica, I created user flows and task analyses. These flows also served as my starting points to map out the information architecture of my app.
User Flow
IDEATE
Card Sorting
Sitemap
PROTOTYPE
Sketch Wireframes
Low-fidelity Wireframes
High-fidelity Wireframes
TEST
Usability Testing
I completed A/B test on Usability Hub to determine which sign up screen users preferrred. There were 10 participants, females aged 20-40. 70% of participants voted for Version 1.
I went with the 3D illustration design patterns as this would let users get a better overview with high contrast and interesting vibes.
Click Tests
For the login and sign up options, I simplified the options but kept the possibility to login from Apple and Google to reduce bounce rate. Email and mobile number are essential information for the payment and confirmation of the booking procedures, so I made them a one-way register.
To quantitatively review the usability assumptions, I conducted click tests, which confirmed my assumptions except for a few details. First and foremost, I tested the sign up procedure on mobile, the wording of some actions as well as preferences regarding the visual design.
VISUAL DESIGN
Style Guide
The SOULIDAY color palette consists of two colors: Sage and Peach. The colors are harmonious with natural vibes. Sage is the core of the brand identity and symbolizes the Nature; while peach represents the beauty.
I used an 4-point grid system for the project. Below are the typography, icons and components I created. I tried to make it united with cohesive round-corner and minimal icons.
