gel-x by gina
Balancing user and client needs through brand strategy and usability
Skills: User interviews, Usability testing, Personas, UI design
My role
User research lead
UX designer
UI designer
Timeline
Jan- March 2024
10 weeks
Deliverable
High fidelity prototype
The Problem
The Problem
My client Gel-X by Gina was running her nail technician business off of Instagram, and she needed a website to better communicate her services and brand image.
My client Gel-X by Gina was running her nail technician business off of Instagram, and she needed a website to better communicate her services and brand image.
The Solution
The Solution
My team and I built a high fidelity prototype by continuously iterating on our design and using research to inform our design. Our goal from the start of the project was to balance both our client’s and the users’ needs. We ensured that users were able to navigate the website with ease and that they were able to easily access all necessary information when booking an appointment. Simultaneously, we had to ensure that we were meeting the client’s needs both aesthetically and functionally.
My team and I built a high fidelity prototype by continuously iterating on our design and using research to inform our design. Our goal from the start of the project was to balance both our client’s and the users’ needs. We ensured that users were able to navigate the website with ease and that they were able to easily access all necessary information when booking an appointment. Simultaneously, we had to ensure that we were meeting the client’s needs both aesthetically and functionally.
The Impact
The Impact
Users
Users
25%
increase in product usability
increase in
product usability
20%
increase in user satisfaction
Client
Client
Client Approval
Client Approval
on branding and aesthetics
on branding and aesthetics
High Potential
High Potential
to increase bookings
to increase bookings
Note: Since the deliverable for this project was only a high-fidelity prototype, we didn’t implement this design. See next steps to see how we would move forward to measure KPIs.
Note: Since the deliverable for this project was only a high-fidelity prototype, we didn’t implement this design. See next steps to see how we would move forward to measure KPIs.
Our Design Process
Our Design Process
Discover
Discover
User interviews
User interviews
Competitive analysis
Competitive analysis
Client interviews
Client interviews
Define
Define
Personas
Personas
Use case
scenarios
Use case
scenarios
Use case summary
Use case
summary
Features and functionality
Features and
functionality
Deliver
Deliver
Final presentation
Final presentation
Deliver to client
Deliver to client
Test
Test
Usability testing
Usability testing
A/B testing
A/B testing
Critique sessions
Critique sessions
Design
Design
Ideation
Ideation
User flow
User flow
Wireframing
Wireframing
Prototyping
Prototyping
Discover
User interviews
Competitive analysis
Client interviews
Define
Personas
Use case
scenarios
Use case summary
Features and functionality
Deliver
Final presentation
Deliver to client
Test
Usability testing
A/B testing
Critique sessions
Design
Ideation
User flow
Wireframing
Prototyping
Discover
Discover
Competitive Analysis
Competitive Analysis
We assessed several other websites within the beauty industry to identify branding or design strategies that worked for them. We carried this analysis into our own branding and design process when we began to strategize our website.
We assessed several other websites within the beauty industry to identify branding or design strategies that worked for them. We carried this analysis into our own branding and design process when we began to strategize our website.
As the user research lead on this project, I was responsible for leading discussions about how and why we would interview our users
As the user research lead on this project, I was responsible for leading discussions about how and why we would interview our users
As the user research lead on this project, I was responsible for leading discussions about how and why we would interview our users
Discover
Discover
User Interviews
User Interviews
Objectives going into the research process:
Objectives going into the research process:
Objectives going into the research process:
understand what users value most throughout their nail care experience
understand what users value most throughout their nail care experience
understand what users value most throughout their nail care experience
identify specific information that users seek when booking an appointment with a new nail technician
identify specific information that users seek when booking an appointment with a new nail technician
identify specific information that users seek when booking an appointment with a new nail technician
learn how users feel about their past experiences with booking and receiving nail care services
learn how users feel about their past experiences with booking and receiving nail care services
learn how users feel about their past experiences with booking and receiving nail care services
We conducted 9 initial interviews with 20 open ended questions
We conducted 9 initial interviews with 20 open ended questions
We conducted 9 initial interviews with 20 open ended questions
Key insights from user interviews:
Key insights from user interviews:
Key insights from user interviews:
users prioritize viewing past work and browsing prices the most when considering booking a nail service
users prioritize viewing past work and browsing prices the most when considering booking a nail service
users prioritize viewing past work and browsing prices the most when considering booking a nail service
7/9 users expressed wanting to book appointments directly through the website rather than calling or messaging
7/9 users expressed wanting to book appointments directly through the website rather than calling or messaging
7/9 users expressed wanting to book appointments directly through the website rather than calling or messaging
users value the nail service itself just as much as the end product
users value the nail service itself just as much as the end product
users value the nail service itself just as much as the end product
This lead to the creation of our....
This lead to the creation of our....
This lead to the creation of our....
Define
Define
User Personas
User Personas
3
User personas
Frequent customer
Prospective customer
Secondary user
Define
Define
Use Case Scenarios & Features
Use Case Scenarios & Features
Our use case scenarios are goal-oriented, web-directed slices of life within the context of our personas that help us envision how our personas would interact with the product.
Our use case scenarios are goal-oriented, web-directed slices of life within the context of our personas that help us envision how our personas would interact with the product.
Our use case scenarios are goal-oriented, web-directed slices of life within the context of our personas that help us envision how our personas would interact with the product.
Our use case scenarios are goal-oriented, web-directed slices of life within the context of our personas that help us envision how our personas would interact with the product.
Our use case scenarios are goal-oriented, web-directed slices of life within the context of our personas that help us envision how our personas would interact with the product.
Our use case scenarios are goal-oriented, web-directed slices of life within the context of our personas that help us envision how our personas would interact with the product.
Design
Design
Prototype 1
Prototype 1
We created a brand identity that reflected Gina's emphasis on:
We created a brand identity that reflected Gina's emphasis on:
Professionalism
Professionalism
Expertise
Expertise
High quality service
High quality service
Key design choices:
Key design choices:
We chose a clean and easily readable font that balances a modern aesthetic with a touch of warmth.
We chose a clean and easily readable font that balances a modern aesthetic with a touch of warmth.
We highlighted Gina's personalized approach to nail care by infusing the tone with a sense of individuality and attentiveness. We believe that clients should feel valued and understood, knowing that Gina tailors her services to meet their unique needs and preferences.
We highlighted Gina's personalized approach to nail care by infusing the tone with a sense of individuality and attentiveness. We believe that clients should feel valued and understood, knowing that Gina tailors her services to meet their unique needs and preferences.
In addition to maintaining the brand identity throughout the site, we ensured that we kept the users' needs in mind throughout the design process. We did this by showcasing Gina's previous work throughout the site, displaying pricing for each service, and including testimonials from previous clients.
In addition to maintaining the brand identity throughout the site, we ensured that we kept the users' needs in mind throughout the design process. We did this by showcasing Gina's previous work throughout the site, displaying pricing for each service, and including testimonials from previous clients.
Test
Test
Usability Testing
Usability Testing
We conducted 20 usability tests and these are the changes we made:
We conducted 20 usability tests and these
are the changes we made:
We conducted 20 usability tests and these are the changes we made:
We conducted 20 usability tests and these are the changes we made:
Change 1
Change 1
Linking the logo to the homepage on the desktop interface. Many times users would try to navigate back to the home page by pressing the logo, which is larger and easier to spot than the "Home" button.
Change 2
Change 2
The service menu page can combine gel-x and gel overlay services on the same page. Users reported feeling confused having "Polishes" as a drop down while "add-ons"and "removals" are by themselves. By including more content on each page, we reduce the total number of frames, which reduces website load time for the user while also reducing cognitive load.
Change 3
Change 3
The menu bar says "FAQ/Policies", but once you click into it, Policies is on the left side by default, while FAQ is on the right side. The original design is slightly against intuition, as FAQ is listed first in the hamburger menu. Also, most people navigate to this page with questions about gel-x and gel overlay in mind. Furthermore, content in the FAQ section is more likely to inspire users to book appointments in comparison to content in the Policies section.
These changes were implemented in...
These changes were implemented in...
These changes were implemented in...
Design
Design
Prototype 2
Prototype 2
I created a second mobile prototype to improve upon the general UI and the color scheme.
I followed the 60-30-10 color rule to create a cohesive color scheme that enhances readability and usability. I also chose a new font (Figtree) for its simplicity and adaptability.
I created a second mobile prototype to improve upon the general UI and the color scheme.
I followed the 60-30-10 color rule to create a cohesive color scheme that enhances readability and usability. I also chose a new font (Figtree) for its simplicity and adaptability.
Design
Design
Improvements
Improvements
Italics are distracting and lead to a lack of cohesion throughout the design
Italics are distracting and lead to a lack of cohesion throughout the design
Italics are distracting and lead to a lack of cohesion throughout the design
The visual hierarchy Is unclear and the Information Is not organized well
The visual hierarchy Is unclear and the Information Is not organized well
The visual hierarchy Is unclear and the Information Is not organized well
Color Is used to emphasize the most Important Info: price and time. This decreases cognitive load
Color Is used to emphasize the most Important Info: price and time. This decreases cognitive load
Color Is used to emphasize the most Important Info: price and time. This decreases cognitive load
Text has a clear visual hierarchy without needing the Italics.
Text has a clear visual hierarchy without needing the Italics.
Text has a clear visual hierarchy without needing the Italics.
Cohesive color palette where color Is used with purpose.
Cohesive color palette where color Is used with purpose.
Cohesive color palette where color Is used with purpose.
Related elements are grouped together and unrelated elements are spaced out
Related elements are grouped together and unrelated elements are spaced out
Related elements are grouped together and unrelated elements are spaced out
Background color Is a beige-gray color which Is displeasing to the eye
Background color Is a beige-gray color which Is displeasing to the eye
Background color Is a beige-gray color which Is displeasing to the eye
Sections are very close together which Increases cognitive load
Sections are very close together which Increases cognitive load
Sections are very close together which Increases cognitive load
Buttons have a very small target area
Buttons have a very small target area
Buttons have a very small target area
Cohesive color palette where color Is used with purpose.
Cohesive color palette where color Is used with purpose.
Cohesive color palette where color Is used with purpose.
Target size Is bigger which minimizes Interaction cost (Fitts’s Law)
Target size Is bigger which minimizes Interaction cost (Fitts’s Law)
Target size Is bigger which minimizes Interaction cost (Fitts’s Law)
More space between sections groups related elements (Gestalt principles)
More space between sections groups related elements (Gestalt principles)
More space between sections groups related elements (Gestalt principles)
Test
Test
Measuring Impact
Measuring Impact
We conducted 20 interviews with the goal to measure how the prototype and user experience improved over the course of the design process.
We conducted 20 interviews with the goal to measure how the prototype and user experience improved over the course of the design process.
25% increase in
product usability
25% increase in product usability
25% increase in product usability
This was measured by telling users to rate the usability of the prototype on a scale of 1 (very poor) to 5 (excellent). In this round of interviews, 20/20 users rated a 4 or a 5 while in the previous round only 15/20 users rated the prototype a 4 or a 5.
This was measured by telling users to rate the usability of the prototype on a scale of 1 (very poor) to 5 (excellent). In this round of interviews, 20/20 users rated a 4 or a 5 while in the previous round only 15/20 users rated the prototype a 4 or a 5.
This was measured by telling users to rate the usability of the prototype on a scale of 1 (very poor) to 5 (excellent). In this round of interviews, 20/20 users rated a 4 or a 5 while in the previous round only 15/20 users rated the prototype a 4 or a 5.
20% increase in
user satisfaction
20% increase in user satisfaction
20% increase in user satisfaction
This was measured by asking users to “How satisfied were you with your overall experience using this prototype?” on a scale of 1 (not satisfied at all to 5 (very satisfied). In this round of interviews, 20/20 users rated a 4 or a 5 while in the previous round only 16/20 users rated the prototype a 4 or a 5.
This was measured by asking users to “How satisfied were you with your overall experience using this prototype?” on a scale of 1 (not satisfied at all to 5 (very satisfied). In this round of interviews, 20/20 users rated a 4 or a 5 while in the previous round only 16/20 users rated the prototype a 4 or a 5.
100% of users preferred prototype 2
100% of users preferred prototype 2
After conducting A/B testing on the booking section of the website, 20/20 users preferred the UI of the second prototype, demonstrating my abilities to identify opportunities for growth and to follow through on those opportunities via iterative design.
After conducting A/B testing on the booking section of the website, 20/20 users preferred the UI of the second prototype, demonstrating my abilities to identify opportunities for growth and to follow through on those opportunities via iterative design.
Deliver
Deliver
Figma File
Figma File
Learnings
This project taught me how to incorporate brand identity into concrete design strategies, how to draw inspiration from similar and different business, and how to continuously iterate on a design to achieve maximum improvement. My professor, David Kirsh, played a large role in guiding us throughout the design process and providing us with helpful feedback.
This project taught me how to incorporate brand identity into concrete design strategies, how to draw inspiration from similar and different business, and how to continuously iterate on a design to achieve maximum improvement. My professor, David Kirsh, played a large role in guiding us throughout the design process and providing us with helpful feedback.
Next Steps
Our next steps would be to find a team of developers to turn the prototype into a functioning website. Then, we would implement of SEO and online marketing strategies to increase traffic to her website. Next, we would measure the impact that the website has had on Gina's business by measuring conversion rates and bounce rates.
Our next steps would be to find a team of developers to turn the prototype into a functioning website. Then, we would implement of SEO and online marketing strategies to increase traffic to her website. Next, we would measure the impact that the website has had on Gina's business by measuring conversion rates and bounce rates.
Olivia Courvelle
Olivia Courvelle
Olivia Courvelle