THE SPA PRACTICE
First Time Wire Frame
I created this wireframe by hand prior jumping into Figma for the high-fidelity wireframes. The low-fidelity wireframe did help with the general structure and the big picture of the webpage. It gives me a general idea of how the future product and flows will look like. The constraint for paper wireframe is that the details and functions of the product could not be presented 100%. Yet, it is still a fast and great way to gather ideas.
First Time User Journey
I would like to walk you through the very first user journey of this mobile webpage. I focused on three key touchpoints for users to discover our product value.
- Onboarding experience
- General goal
- Details in tasks
the flow
To achieve a greater user experience, I have simplified the booking process with only a few clicks. There are several goals for approaching this solution -
1. to make the booking process simpler, quicker, and more convenient for all new users;
2. to boost appointments and possibly gift card purchases for the client.
By adding a service description page, users understand what they will get and how the service benefits them.
With the first time user experience in mind, I have focused on the details in user interface, include but not limited to typography, white space, layouts, contents, and color selection, etc.
1. to smooth out the booking process flow, I have used accent colors to emphasize the next step options and eventually leads to confirmation page to complete the booking process;
2. by selecting the right colors with the 60-30-10 rule, I have made sure that the colors maintain consistency with the business brand;
3. it is important to keep a typography consistency;
4. I have left some white space to help users for easy reading and browsing;
5. the layout of the page should always be clean and straightforward;
6. there are multiple confirmation pages to ensure the users understand and complete the booking process without any surprises;
7. the gift card idea gives users an extra option for future services at any time;
8. with contact information at multiple places, users should find it easier to contact the business for inquiries;
Constraints
One of the constraints in this project is the checkout process. What is a fast and convenient flow for payment? I asked myself. After reviewing many of other online shopping websites, I came up with a few pain points solutions.
​
1. Confirmation, confirmation, confirmation.
Our users will want to see a confirmation page on all the details and options that they have put in. This is to double confirm their choices and take notes of what they have ordered.
​
2. The confirmation on the final payment is also very crucial. Adding a final payment confirmation page to inform the users that they will be charged and the service has been ordered.
​
3. I also added a "reschedule and cancel" button at the bottom in case of any orders by mistake. The end users could change the order immediately after the confirmation to reduce hassles.