Brand identity | Website design | Booking integration | Beauty & wellness studio
Pro Hair Lab
Brand identity and website design for a boutique hair studio, including booking integration and a fully responsive, theme-ready interface.
About the project
A boutique studio specialising in head SPA rituals and advanced hair treatments needed a website that would clearly explain services, build trust, and make booking simple.
I designed the visual identity, website, and booking flow from scratch, and implemented the final site using a low-code workflow.
Recognition
Featured on WebStudio's YouTube channel
Live product
Public website available: https://www.prohairlab.pl
The challenge
The studio offered specialised treatments such as nanoplasty, keratin straightening, and head SPA rituals, but clients often didn’t know which service to choose.
Information was scattered across Instagram, messages, and conversations, which made booking harder and less predictable.
The website needed to:
- explain treatments clearly
- look premium and trustworthy
- work perfectly on mobile
- allow easy booking without building a custom system
- be flexible enough for future updates and campaigns
Before the website — information about services shared across Instagram posts and messages
My role
End-to-end design and implementation
The project was completed in about 6 weeks:
- brand identity and visual style
- information architecture
- UX/UI design
- responsive layouts
- booking integration (Booksy)
- low-code implementation in Webstudio
- reusable style system for future changes
Service structure & UX
Treatments were organised around results and user needs instead of only technical names, so clients could quickly understand what each service does and who it is for.
Clear navigation, simple descriptions, and visible call-to-action buttons make the booking process easy even for first-time visitors.
Hero section
Hair treatments overview
Service details
Booking Experience
Instead of building a custom booking system, the website was integrated with Booksy — a widely used platform with a large user base, familiar to many salon clients, allowing users to:
- check availability
- confirm appointments
- pay online
This makes booking faster, more reliable, and easier to maintain.
A persistent contact widget keeps booking available from any page:
- booking via Booksy
- phone contact
- social media channels
Contact section and widget
Responsive design
Most clients browse salon websites on their phones, so the layout was designed mobile-first and then adapted to larger screens.
The website works smoothly on:
- mobile
- tablet
- desktop
Responsive design
Visual style
The visual design was created to reflect a premium, calm, and professional atmosphere.
The layout uses soft neutral colors, large typography, and spacious composition to make the content easy to read and visually elegant.
All pages follow the same visual rules to keep the experience consistent.
Themes, dark mode, and campaign versions
To make the website flexible, I built the styling using reusable variables and components.
This allows the same design to support multiple visual themes without rebuilding the whole site.
The website includes:
- core (light mode)
- core (dark mode)
- campaign: Pink October (light mode)
- campaign: Pink October (dark mode)
This approach makes it possible to create seasonal versions or marketing campaigns quickly and safely.
Core (light mode)
Core (dark mode)
Campaign: Pink October (light mode)
Campaign: Pink October (dark mode)
Design system for a small website
Even though this is a small business website, I used a structured design system to keep the interface consistent and easy to update.
The system includes:
- typography styles
- color tokens
- spacing rules
- reusable components
- CSS variables used in implementation
Figma - Design Tokens & Components
Figma - variables
Implementation
The website was implemented using Webstudio.
Design variables were translated into CSS variables, which allows the visual style to be changed without rebuilding the layout.
Additional integrations:
- Booksy booking
- Google Analytics
- responsive layout rules
The interface automatically adapts to the user’s system settings, enabling dark mode when the operating system is set to dark theme.
Visual Studio Code - CSS
Webstudio - implementation
Result
The final website gives the studio a clear and professional online presence and makes booking much easier for clients.
- clearer presentation of treatments
- easier booking through Booksy
- consistent experience across devices
- support for dark mode and campaign themes
- flexible structure for future updates
- live website used by real clients
What this project shows:
- full website from idea to launch
- structured, system-based approach
- focus on clarity and usability
- flexible design ready for future changes
- flexible structure for future updates
- experience from enterprise projects applied to small business websites
