Saving Faces Skin is a skincare brand run by two friends, specializing in organic facial treatments, massages, and waxing services. In addition to their personalized skincare services, they offer a range of organic products for sale. The brand is dedicated to natural and holistic skincare solutions, aiming to provide clients with high-quality, organic treatments that cater to various skin needs and preferences.
Project Overview
No one uses the website to call and book services: Users are not using the website to call and book services, indicating issues with the booking system's visibility or convenience.
Users stop finding services in the middle of their search: Users often abandon their search for services midway, suggesting the navigation and search functionality are not user-friendly.
Problem Statement
Business Goals
Categorize services: effectively to improve client accessibility and help users find and purchase services more easily.
Boost Product Sales: Streamline the process for browsing and purchasing organic skincare products.
Display Customer Reviews: Integrate customer reviews to build trust and provide social proof.
Add a Gift Cart: Introduce a feature for users to purchase gift cards.
Introduce Workshops: Offer workshops to engage customers and provide additional value.
Enhance Customer Satisfaction: Improve overall user experience to boost satisfaction and loyalty.
Online Bookings: Implement a functional and user-friendly online booking system.
Design Thinking
Discover
To understand the users pain points and develop effective solutions we employed a comprehensive research approach that consisted of the following methods:
Heuristic Evaluation
Competitive Analysis
Online Survey
1.
2.
3.
Heuristic evaluation is the process in which a team analyzes a website from the point of view of usability, including navigation, clarity of information, consistency, and error prevention. Using these findings, we improved the browsing experience and made it more user-friendly.
Heuristic Evaluation
1.Non-functional "BOOK" button
.The "Book" button at the top of the page is non-functional; it doesn't lead to any action or page.
. No pages are linked to the "Book" button, rendering it completely ineffective.
3.Disorganized Service Navigation
. Disorganized information about services makes it challenging for users to find what they need.
. Users are unable to click on specific services, leading to difficult and frustrating navigation.
2.Visual Content Deficiency
. No pictures or videos to easily showcase services to clients.
.Content is overly long and text-heavy, making it difficult for users to quickly grasp information.
4.Reservation System and Address Visibility
. The reservation system was non-functional, causing issues for users attempting to book services.
. The website lacked address information and a map, making it difficult for users to locate the business.
Visibility of System Status
Aesthetic &Minimalist Design
Consistency and Standards
Error Prevention
Takeaways
The "Book" button is non-functional, leading to no action or page.
Service information is disorganized, with no clickable links to specific services.
The website lacks visual content, such as pictures or videos, to showcase services.
The reservation page is broken, preventing users from booking services.
There is no map or address provided, making it difficult for users to locate the business.
Takeaways
Competitive Analysis
Analyzing our competitors helped us decide what should be on the homepage. It provided
insights into the features, functions, and flows. As a result, we were able to identify
opportunities for creating a product that would differentiate itself from the competition.
Key Missing Features
Online Booking
Shopping Products From Website
Service Categorization
Select providers
FAQ
Reviewing competitors' features helped identify effective navigation strategies for the booking process.
Analyzing competitors' approaches to checkout design informed a streamlined and efficient process.
Examining competitors' review sections highlighted the importance of a well-organized customer review area.
Adopting a minimal and clear design was reinforced as a best practice for creating a user-friendly experience.
Online Survey
To deepen our understanding of user preferences, we conducted a brief survey and collected insights from 83 respondents. Below are some key insights:
Reviews Matter: Participants emphasize the importance of reviews when selecting skincare services, facials, or operators.
Flexible Booking: Users prefer booking skincare services on an as-needed basis, highlighting the need for a user-friendly, on-demand booking system.
Operator Choice: Users value the option to choose their operator, making this a key feature to include.
Define
User Stories & Key Findings
After presenting our Heuristic Evaluation to stakeholders, we further explored the business's social media channels, identifying gaps in the website's content. Our UX research revealed that the business offers skincare products and hosts workshops—neither of which were featured on the existing site. We consulted with the business owner, who welcomed the addition of these elements, along with positive Yelp reviews to enhance credibility.
We integrated these insights into our website redesign, creating User Stories to align with customer and business needs. These stories were organized by priority (high vs. medium) to focus on the most critical aspects first.
Increase Online Bookings:
As a business, I want to simplify the online booking process so that customers can easily schedule appointments, leading to an increase in bookings.Enhance Customer Satisfaction:
As a customer, I want to quickly find the service I need and complete the booking process efficiently so that my experience is smooth and satisfying.
High Priority
Feature Workshops: As a business, I want to prominently feature information about our workshops on the website so that customers are aware of these offerings and can easily sign up.
Add Reviews: As a business, I want to showcase customer reviews on the website so that potential clients can see positive feedback and build trust in our services.
Highlight Skincare Products: As a business, I want to add our skincare products to the website so that customers can view and purchase these items alongside our primary services.
Medium Priority
Journey Map
To conclude our research, we also used a user journey map to analyze the current state of the booking process for facial services.
Persona
The insights I gained from researches leading up to the persona. The main goal is to display those patterns and pain points, which allowed me to further empathize with users.
Information Architecture and Card Sorting
To optimize our website's navigation and improve user experience, we decided to utilize card sorting as a key research method. Initially, we conducted an open card sorting session where participants were asked to freely categorize various content items without any predefined structure. This approach provided a broad perspective on how users naturally group information, but the results were somewhat inconsistent and didn’t fully meet our expectations for a clear site structure.
To address this, we followed up with a closed card sorting exercise. In this phase, we provided participants with specific categories and asked them to place the content items into these groups. This approach yielded more structured and actionable insights. Participants found it easier to categorize content, and their feedback helped us identify logical groupings and any overlaps in our initial design.
The combination of both open and closed card sorting sessions allowed us to refine our information architecture effectively, ensuring that the final design would be both intuitive and aligned with user expectations. This process was instrumental in creating a navigation system that enhanced usability and supported our overall design goals.
Site Map
To ensure our information architecture meets user expectations, we conducted six open card sorting sessions using the Optimal Workshop platform. After the initial exercise, we developed our first version and iteratively refined it based on user testing and competitive analysis.
User Flow and Task Flow
Develop
Ideation and Wireframing
what redesign decisions did we make?
The most important takeaways from our research are challenges and solutions
Challenge 1:
Correct Classification: Ensuring services were accurately categorized.
Avoiding Overload: Preventing users from being overwhelmed with too much detail.
Clear Navigation: Keeping navigation straightforward and intuitive.
Balancing Feedback: Aligning stakeholder feedback with user needs.
Solutions:
Initially, we categorized the services based on the existing descriptions, on the websile. After presenting these categories to the stakeholders, we recived feedback that some of the categories were not accurate. The stakeholder suggested additional categories that were very helpful.
Through Four mectings with the Stakeholder , we refined the Categories. We concluded that the Final categorization, Which addresses the high demand and variety of services on the website, best meets the needs of users and the business.
Challenge 2:
Users often call to confirm if the selected service is appropriate for their needs.
Reduce user uncertainty and improve Confidence in service selection.
Solutions:
Added detailed service descriptions within the booking carts.
Provided extra information to guide users in choosing the most suitable services.
Implemented clear, accessible explanations to ensure users understand their choices.
Challenge 3:
The original website's book button was not functional, making it difficult for users to schedule appointments. Additionally, the button was not easily accessible across different pages, creating frustration for users who wanted to book services quickly.
Solutions:
Placed a functional "Book" button on the navigation bar, ensuring it's prominently displayed and accessible on every page, allowing users to easily book appointments from anywhere on the site.
Challenge 4:
Users needed visible reviews to make informed decisions, and the stakeholder wanted to showcase the website's positive feedback.
Solutions:
Displayed prominent reviews on the main page to enhance visibility and address user feedback.
Added a dedicated space on the website where users can easily write and share their own reviews, enhancing user engagement and providing valuable
"Home Page"
some services were mistakenly categorized as adds-ons Was not approved
some Items fit into two categories. Was not approved
Approved
Mid-Fid Wireframe
Home Page
Color Exploration and Inspiration
The next step for us was Color Exploration. The Saving Faces stakeholders wanted to maintain the dark blue and peach colors that were already on their Salon and product packaging, but were open to exploring new colors and combinations. Our team explored different color palettes, some included their signature colors and others explored a more natural and earthy tone that was popular among other facial brands.
Saving Faces Salon & Product Packaging
UI Kit
We developed a complete UI kit to serve as a reference for templates and components. This kit ensures that interface development is smooth, consistent, and efficient throughout the project.
Deliver
High-Fid Wireframe
Home Page
Prototype
Here is the last prototype, displaying what we've achieved through our design process.
Iteration and Usability Test
Throughout the project, we went through multiple iterations, driven by the insights we gained from usability tests. These tests were instrumental in shaping our decisions and constantly enhancing our project.
Service Page
Booking Page
Choosing Operator Page
Choosing Date & Time Page
Recipient's Information pop up
Confirmation pop up Page
Service Learn More Pop Up
Reflections
What I have Learned?
The crucial role of research in enhancing product effectiveness.
Collaborating within the team ensured timely delivery and meeting deadlines.
Testing and iteration improved user-friendliness.
Developing a UI kit ensured consistency and eased communication.
What Next?
The next steps involve finalizing the mobile version of the design to ensure adaptability.
Following this, we'll enhance the user experience by conducting additional usability testing and iterations to refine the user flow further.