Rebel Nails
Rebel Nails
A re-design of the booking site for Rebel Nails, a nail salon located in The Bronx.
A re-design of the booking site for Rebel Nails, a nail salon located in The Bronx.
Project Details
Project Details
CHALLENGE: To improve site navigation and revamp the existing UX and UI of the nail salon’s booking site.
CHALLENGE: To improve site navigation and revamp the existing UX and UI of the nail salon’s booking site.
MY ROLE
MY ROLE
I worked solo on this project as a UX Researcher and UX/UI Designer.
I worked solo on this project as a UX Researcher and UX/UI Designer.
DELIVERABLES
DELIVERABLES
Card-sorting artifacts, user flows, low-fidelity wireframes, high-fidelity wireframes
Card-sorting artifacts, user flows, low-fidelity wireframes, high-fidelity wireframes
TOOLS
TOOLS
FigJam, Figma, Canva, Notion, Google Calendar
FigJam, Figma, Canva, Notion, Google Calendar
User Research
User Research
Card Sorting
Card Sorting
Due to the lack of a navigation menu on the original website, card sorting was implemented to effectively categorize the nail salon services. All 70 service items were sorted into five main menu options: hands, pedicures, beauty, waxing, and men. A table was then created using the insights from card sorting.
Due to the lack of a navigation menu on the original website, card sorting was implemented to effectively categorize the nail salon services. All 70 service items were sorted into five main menu options: hands, pedicures, beauty, waxing, and men. A table was then created using the insights from card sorting.
Rebel Nails Menu Options
Rebel Nails Menu Options
The above is a table showcasing some of the menu options created after card sorting.
The above is a table showcasing some of the menu options created after card sorting.
The Design Process
The Design Process
User Flow
User Flow
After completing the research phase, the design process began with the creation of a user flow for booking appointments. This diagram served as a guide for determining all components needed for an enriching user experience.
After completing the research phase, the design process began with the creation of a user flow for booking appointments. This diagram served as a guide for determining all components needed for an enriching user experience.
The diagram above shows the user flow for booking an appointment at the nail salon. Click on the diagram to expand.
The diagram above shows the user flow for booking an appointment at the nail salon. Click on the diagram to expand.
Low Fidelity Wireframes
Low Fidelity Wireframes
Low fidelity wireframes were then made using the user flow from above along with a set of digital sketches made using FigJam. Though the wireframes presented are for mobile, low fidelity and high fidelity wireframes were also created for tablet and desktop.
Low fidelity wireframes were then made using the user flow from above along with a set of digital sketches made using FigJam. Though the wireframes presented are for mobile, low fidelity and high fidelity wireframes were also created for tablet and desktop.
Key Features
Key Features
Selecting Services
Selecting Services
The home page of the website features a drop-down menu for showcasing available professionals.
Filter chips were included for quickly searching through the main menu options.
A non-modal pop up was also added to show the number of services added, along with the type of services added, the length of each service, and the approximate cost when expanded.
The home page of the website features a drop-down menu for showcasing available professionals. Filter chips were included for quickly searching through the main menu options. A non-modal pop up was also added to show the number of services added, along with the type of services added, the length of each service, and the approximate cost when expanded.
Selecting Appointment Date & Time
Selecting Appointment Date & Time
After selecting their desired services, users are then prompted to choose the date and time of their appointment.
Users have the option to either scroll through the dates using a horizontal date picker or they can choose a date on the pop up calendar.
Once a date has been chosen, users can select their desired appointment time.
After selecting their desired services, users are then prompted to choose the date and time of their appointment. Users have the option to either scroll through the dates using a horizontal date picker or they can choose a date on the pop up calendar. Once a date has been chosen, users can select their desired appointment time.
Confirming Appointment
Confirming Appointment
Once their appointment date and time has been selected, users are provided a form to enter their information.
Users can then review their appointment details before confirming.
On the confirmation page, users have the option to cancel their appointment, reschedule it, or add it to their Google or Apple Calendar.
Once their appointment date and time has been selected, users are provided a form to enter their information. Users can then review their appointment details before confirming. On the confirmation page, users have the option to cancel their appointment, reschedule it, or add it to their Google or Apple Calendar.
Next Steps
Next Steps
Make adjustments based on business owner's feedback.
Create functional web app for usability testing.
Develop a usability testing plan.
Make final adjustments based on the feedback from usability testing.
Make adjustments based on business owner's feedback.
Create functional web app for usability testing.
Develop a usability testing plan.
Make final adjustments based on the feedback from usability testing.