SMALL LOCAL BUSINESS
A Mobile First Web Design for a Local Hair Stylist
A visual identity and responsive system that helps a seasoned stylist showcase her work and connect with new clients.
Company
Hair by Heather
tools
Figma, Figjam, Whimsical, Midjourney, Zoom
TIMELINE
4 weeks
DEVICE
Mobile, Desktop
Overview
Hair by Heather is a mobile-first website for a hair stylist specializing in color at Salon One 50 in Alamo, California. The platform highlights her warm personality and provides an online presence, making it easier to maintain and grow her clientele if she changes salons in the future.
My Role
As the solo designer, I led end-to-end UX/UI design, from defining site goals and structure to research, wireframing, prototyping, and brand design.
Impact
While Heather is currently working on getting the site developed, usability testing showed that users could easily navigate, understand services, and feel confident reaching out.
4.5/5 ease of use rating
After usability tests, all users gave th site an ease of use rating of 4.5/5.
80% Booking Intent
4/5 testers said they would reach out after exploring the site, validating its credibility and clarity.
Increased Trust and Credibility
Users perceived the site as professional and welcoming, affirming the design and branding goals.
The Problem
Heather had no digital presence to showcase her work and attract new clients.
When we first spoke, Heather relied solely on word of mouth for new clients. After COVID-19 slowed her business, she needed a way to reach a wider audience, which led us to ask...
HMW
How might we present Heather’s services, skills, and personality in a way that builds trust, and helps new clients feel comfortable reaching out?
Our Solution - Hair by Heather
A modern site that helps clients explore styles and reach out with confidence.
Browse Heather’s work and get inspired.
Browse a curated gallery of Heather’s signature color and styling work.
Tap any photo to view a short description and a quick link to contact Heather.
Understand services at a glance.
Scan clear descriptions, pricing, and estimated timing.
Learn what to expect from each service so booking feels easy and informed.
Reach out in the way that feels most comfortable.
Use a streamlined contact form or text Heather directly.
Select up to three services and attach inspiration photos to start the conversation.
The Process
1. DISCOVER: WHAT DO USERS NEED?
Competitive Analysis
Learning what works (and what doesn’t) in salon websites.
To ground the project in real-world standards, I analyzed four competitors: two salons and two independent stylists. The review revealed patterns that influence trust and decision-making such as polished branding to clear service menus. These insights helped refine the direction of user interviews and inspired early feature ideas.
Validating Assumptions with Users
From clear pricing to social proof, five salon-goers reveal what drives trust and booking decisions.
Through five client interviews, I validated the trust signals users rely on before booking, including photos, reviews, and transparent pricing. These insights informed how I structured and prioritized content and features.
Screenshots of Zoom user interviews to gather insights.
2. DEFINE: Synthesizing Insights
Defining Persona & Needs
User Persona: Jamie, the Creative Color-Seeker.
To embody the data, a user persona was created: Jamie, a creative professional who loves expressive hair but values trust and clarity. Designing with Jamie in mind helped ensure I met the needs of real salon-goers like her.
Balancing Client Constraints
Heather prefers to book by text, but users expect to book online.
While Heather relies on texting for all appointments, research showed that most users expect a simple online booking flow. To balance both needs, I kept texting as the primary call to action and added a lightweight contact form as an alternative. This approach respects Heather’s habits and still meets user expectations.
3. Develop: features and sketching
Feature Prioritization
Prioritizing features that delivered the most value.
After synthesizing interview insights, I prioritized features according to what users and Heather valued most. I prioritized essential elements like a hair gallery and services with clear pricing and details, while online booking was deferred to keep the experience simple and aligned with Heather’s workflow.
Feature prioritization matrix used to guide design decisions by impact and effort.
4. Deliver: FLOWS, BRANDING, & TESTING
Mapping User Flows
Clarifying the paths that lead users to take action.
To ensure the platform felt intuitive and guided users toward booking, I mapped the core user flows to understand how visitors move through the site, whether they explore services, or head straight to contact. This helped confirm that each page supported their decision-making process and guided them toward the final goal: reaching out or booking.
Visual Identity
Crafting a cohesive visual system that supports clarity, trust, and a welcoming brand experience.
Since Heather specializes in color, the visual identity needed to feel both vibrant and welcoming. The palette blends rich purples with soft lavender tones, paired with curated AI-generated imagery from MidJourney for the hero and service sections. Together, the system reflects her craft while creating a warm, trustworthy experience for visitors.
Low-fidelity wireframes
Wireframing with a mobile-first mindset.
Since Heather manages all appointments from her phone and doesn’t use a laptop, I started with mobile wireframes on paper then moved into Whimsical. The pre-built components on Whimsical made it easy to explore layouts quickly, although rebuilding the wires in Figma later added extra time to the process.
Low-fidelity Usability Testing
Testing early mobile wireframes to uncover friction points.
I conducted moderated usability tests with five participants to evaluate the initial mobile layouts.
Testing Goal: Evaluate early layout decisions across key pages (homepage, services, hair gallery, contact) and identify possible friction points before high-fidelity design.
1. Homepage Findings
Users wanted to see services first.
5/5 participants wanted the Services section higher on the page, noting it felt more important than the content above it.
2. Services Page Findings
Participants preferred CTAs after each service.
4/5 participants preferred having a CTA after each service. The pattern felt more familiar and made it easier to contact Heather without scrolling back to the top.
3. Hair Gallery Page Findings
A simple, scannable layout improved exploration.
4/5 participants preferred a 2x5 grid layout over a masonry grid or Instagram-style scroll, finding it cleaner and easier to browse.
4. Contact Page Findings
Participants needed more flexibility when submitting inquiries.
3/5 participants wanted the option to select a service and upload reference photos, which helped them communicate their needs more clearly.
Key Iterations from High Fidelity Usability Testing
A second round of usability testing helped refine the design and add clarity through hierarchy.
To validate layout decisions before handoff, I conducted a second round of usability testing with the same five participants using high-fidelity wireframes. Feedback centered around clarity and scannability, so I refined hierarchy to meet user’s expectations.
1. Iterating the About Page
Improving scannability with Subheaders.
Findings: One participant recommended adding subheaders to break up the About page content and improve scannability. When I validated the idea in follow up interviews, the rest of the users agreed.
2. Iterating the Contact Form
Adding clarity to the service-selection dropdown.
Findings: A couple of participants and senior designers said the service accordion lacked clarity. I added short service descriptions and prices inside the dropdown to give users the context they needed to choose confidently.
Metrics from Usability Testing
Overall, usability testing validated that participants found the site professional, easy to use, and appreciated the alternative methods to book despite the absence of online booking.
FINAL DESIGNS
A clean, responsive site that gives Heather a digital presence, and creates a welcoming experience for new clients who want to book.
Homepage
Services page
Gallery page
Contact page
PROJECT TAKEAWAYS
Outcomes
After four weeks, the final design gave Heather a clear, professional online presence that helped users understand her services and reach out confidently.
Reflection
This project became an exercise in leading with empathy, making independent decisions, and translating user needs into a clear visual experience. With limited client feedback, I took initiative across content, layout, and branding while relying on research to guide each step.
I also balanced user expectations for online booking with Heather’s text-first workflow, offering a clear alternative through a contact form while setting proper expectations. The final design serves her business today while leaving room for future growth.
