Project Overview
Background
Alli is a small business owner who owns and operates an eyelash extension studio out of her home. Certified since 2018, she has been slowly building her clientele for the past 6 years relying primarily on word of mouth. She has an existing website that she uses for scheduling client appointments, but would like to expand on the website to include additional features, better serve her current clients, and become a place for attracting new clients as her business grows.
Project Goal
The goal of this project is to design a responsive flow for local business “Lashes by Alli Rae” and implement a cohesive brand identity within the UI.
Discover
Research Plan
I conducted research in order to learn more about the needs of lash extension customers. I wanted to understand what customers looking to receive lash extension services value so that the website can better address the needs of current and future clients
Who
(Target Users)
Current lash clients
First time and potential lash clients
Clients at competitor lash studios
What
(Objectives)
Understand what users value
Understand how services are booked
Identify pain points and unmet user needs
How
(Methods)
Competitive Analysis
Contextual Interviews
User Interviews
Competitive Analysis
I evaluated competitor websites to understand how other lash studios address user needs through features and content prioritization. The top strengths included a clear call to action to book a service, prominent visuals or an image gallery, and clear, concise descriptions of services. Common weakness included a lack of hierarchy, inconsistent visuals, and poor navigation to access content.
User Interviews
I interviewed current clients, first time or prospective clients, and clients of competitors. I found that while their high level needs are the same and all users are looking to book some sort of service, there are differences in what a first time client needs verse what a returning client needs. Returning clients want quick and easy booking with minimal navigation. First time clients need a bit more information.
I’ve been contemplating eyelash extensions for a long time, but I’m nervous. (It would put me at ease) to know more or just some basic info about the service.
– Dina
(Its important) to include info s and a description about all the services. People will skim through and pick based on the descriptions, but they also want to know about the person doing the service
– Danielle
One of the biggest things for me (when finding a lash studio) was being able to see pictures of their work and to see what (the lashes) would look like and also what kind of lashes they do.
– Amanda
Define
User Personas
I decided to create two separate, distinct personas to represent the needs and pain points of both a first time user who may only require a one-off service, and a returning client who will use the site dozens of times.
Site Map & User Flow
Based on the insights from research, user persona needs, and an analysis of the features of competitors, a site map was created to contain relevant content and features to address user needs. Since research showed that users desire a minimal cognitive load, there is minimal navigation required. The layout is simple and straightforward.
The primary need of users is to select and book a service. The user flow follows the booking process and can be initiated from both the home page call to action and the services page. The booking flow contains minimal decision nodes to eliminate possible user error and make the booking process simple and straight forward, while consisting of mainly selections to allow for specific user choices.
Design
Low Fidelity Wireframes
I approached the design of the website layout by utilizing a mobile first approach. I turned research insights into content and features and organized the low fidelity wireframes according to my site map. Since there is a tension between the user need to be informed and the user need for simplicity, I laid out the homepage to contain at a glance highlights to minimize cognitive load, while the other site pages would contain the more in depth information.
Brand Development
Brand Identity
Alli and I had a collaborative session to define elements of the brand identity for the business. Over multiple sessions, we defined brand attributes, emotions, keywords and co-created a vision board.
The brand attributes for Lashes By Alli Rae are approachable, fun, and welcoming. It should echo the owner’s personal brand and establish an environment that makes clients want to come back again. The brand should evoke feelings and an atmosphere that is FLIRTY & FUN, BUBBLY & VIBRANT, PINK & CUTE, CHARISTMATIC & CHARMING, while conveying quality and professionalism.
Typeface
Color Palette
Moodboard
Logo Design
High Fidelity Mockups
I increased the fidelity of my designs and further iterated on the wireframes through the design of cards, buttons, and applying cohesive styling to selected imagery. After co-developing the brand with the client, I applied the chose font, colors, and logo according to the style tile. Shown below are the home page wireframes which serve as highlights of the content of the other pages. Below that are the booking flow wireframes, as booking is the main user goal.
Desktop Homepage
Mobile Homepage
Desktop Booking Flow
Mobile Booking Flow
Usability Testing
Test Plan
I needed to evaluate my designs to assess three main questions based on user goals:
1. Can users easily find basic, need to know information and answer their questions?
2. Can users easily find and book a service?
3. Is the hierarchy of information based on user priority, resulting in minimal cognitive load?
Test Goals
I took 5 participants and the client, Alli, through 3 user flows to assess their ability to complete 3 main tasks. I asked each participant a question and gave them a prompt, and observed them navigate the website on the iPad prototype to answer my question or prompt and complete the task.
The first task was to find basic information, and I asked participants to tell me what the payment policy was.
The second task was to find detailed information, and I asked the difference between a classic, hybrid, and volume lash set.
The final task was to book a service. I gave the prompt to book a 2 week fill for a volume lash set and lash bath add on for a specific date and time.
Test Results
Users were able to successfully find information, complete the booking flow, and obtain information in a quick and straightforward manner. The content is organized in a way that makes information easy to find, with several users able to take different flow paths to find the same information. The booking flow was easy to complete in short, few steps.
Usability testing did reveal the importance of policy information. Policy and hours is need to know information required for both user awareness and completion of booking and accessible in more locations. In addition, the cognitive load could be improved by reducing excess scrolling and clicking when navigating the menu or perusing services.
Deliver
Revisions
The revisions made based on usability testing include:
1. Add a policies page, so the information can be found in a location outside of the home page
2. Add a policies confirmation pop up to the booking flow to prevent errors or missed details
3. Further categorize the services into groups with subheaders to minimize cognitive load
Conclusion
Challenges
This was my first experience working with a client. I was challenged to define the project goals based on both the needs of the users and the needs of the client. This project also taught me the importance of communicating with a client and the ability to articulate design decisions.
Lessons Learned
I was surprised to learn how much information users wanted. I learned how to navigate the tension between users wanting to skim and quickly get answers, but also wanting extra information and questions answered through good design principles of hierarchy.
Takeaways
My main takeaway from this project is the importance of prototyping and mocking up design concepts quickly. The more I was able to prototype, the more I was able to show ideas to the client and get feedback to make decisions.