Lutherie Esprit Bois
Role
Duration
Team
UI/UX Designer
User Reaserch
Front-end Developer
July 2025
Solo project
Tools Used
Figma
HTML
CSS
JavaScript
Lutherie Esprit Bois is a responsive website for an artisan luthier that helps users easily explore, learn about, and purchase handcrafted guitars while showcasing the craftsman's expertise and passion.
TL;TR
The problem
Traditional luthiers struggle to establish an online presence that reflects their craftsmanship quality, lacks professional credibility, and fails to effectively showcase their services to reach new customers.
The solution
A modern, intuitive website that showcases artisan craftsmanship with a clean, professional design that builds trust while making it easy for customers to discover services and contact the luthier.
The outcome
A fully functional, responsive website that successfully represents the luthier's brand, improves online visibility, and provides a seamless user experience across all devices.
Understanding the Users
| Context
My friend, a passionate luthier, needed a professional website to sell his handcrafted guitars, promote his repair services, and establish his place in the market. He was struggling with online visibility and lacked a platform to showcase his exceptional craftsmanship.
| Key findings
To better understand the market and user needs, I conducted competitive research on existing luthier websites, analyzed their strengths and weaknesses, and had detailed discussions with the luthier about his vision and target customers.
I discovered sevral pain points :
1
Lack of Service Clarity
Many websites fail to clearly explain different services (sales, repairs, custom work), leaving customers confused about offerings and pricing.
2
Missing Emotional Connection
Existing sites don't capture the passion and story behind the craftsmanship, which is crucial for artisan businesses to differentiate from mass production.
3
Poor Online Representation
Most artisan luthiers have outdated websites that don't reflect the quality of their craftsmanship, missing the opportunity to build trust with potential customers.
| Users
I identified three distinct user groups who represent the core target audience for artisan guitar services. Each group has different motivations, budgets, and levels of expertise, but they all share a common appreciation for quality craftsmanship over mass-produced instruments. Understanding these user segments was crucial for designing a website that could effectively communicate value to each group while maintaining a cohesive brand experience. To further refine the design direction, I created personas those insights.
Lucas – Beginner Musician 22, Music Student, Lyon
Goals: Find an affordable first guitar with expert guidance and support for learning.
Pain Points: Overwhelmed by online options, needs personal advice, limited budget, wants to ensure good value for money.
Sophie – Professional Musician 35, Session Guitarist, Paris
Goals: Discover unique, high-quality instruments that stand out in professional settings.
Pain Points: Limited time for research, needs reliable instruments for performances, values craftsmanship and sound quality over price.
Pierre – Guitar Collector & Enthusiast 52, Engineer and Hobbyist, Bordeaux
Goals: Find authentic, artisan-made instruments with interesting stories and craftsmanship details.
Pain Points: Seeks genuinely handcrafted instruments, wants to support local artisans, values tradition and authenticity over trends.
Following this research, I identified a clear direction:
Problem statement
Currently, artisan luthiers lack professional online presence that effectively showcases their craftsmanship, explains their services clearly, and builds trust with potential customers. This results in missed opportunities and difficulty competing with larger guitar retailers.
Goal statement
The goal of this project is to create a professional, trustworthy website that showcases the luthier's craftsmanship, clearly presents services, and provides an enjoyable user experience that converts visitors into customers.
This raises importants questions:
How might we design a website that…
✔️ Builds immediate trust and showcases craftsmanship quality?
✔️ Clearly presents services without overwhelming users?
✔️ Creates an emotional connection with the artisan's story?
Ideation and Prototyping
| Structure
To ensure a logical and intuitive user experience, I started by planning the site architecture and user flow . The goal was to create a clear information hierarchy that guides users naturally through the luthier's story, services, and contact information.
Homepage: with hero section showcasing the workshop atmosphere.
-
Hero section with workshop imagery
-
Service overview with clear call-to-actions
-
Luthier story section
-
Complete contact information
Services section: clearly explaining three main offerings: sales, repairs, custom work.
About the Luthier section: to create personal connection and trust.
Contact section: with location, hours, and multiple contact methods.
Catalogue page: showcasing available guitars with detailed specifications and pricing.
-
Available guitar showcase
-
Detailed specifications
-
Professional product photography
-
Direct contact for purchases
Services page: with in-depth explanations of each service offering.
-
Detailed explanation of each service
-
Process descriptions and guarantees
-
Customer testimonials
-
Clear pricing information
| Creation
I began with low-fidelity wireframes and prototyping using Figma to explore different layout concepts, focusing on how to best present the artisan's work.
homepage
Some key psychological and UX/UI principles guiding this phase:
Cognitive Load Theory
(Cognitive Psychology)
Why?
Prevent overwhelming users with complex guitar specifications.
Implementation:
Clear service categories, progressive information disclosure, simplified navigation.
Social Proof
(Social Psychology)
Why?
Customers need validation when purchasing high-value artisan instruments.
Implementation:
Luthier credentials, workshop photos, craftsmanship guarantees.
Jakob's Law
(UX Psychology)
Why?
Users expect familiar e-commerce patterns for comfortable browsing.
Implementation:
Standard navigation, recognizable contact methods, conventional product layout.
| Design System
Based on the established wireframes, I made some tests on mockups , and ended up following this design system:
Logo & Branding
Clean, professional typography "Lutherie EB" that suggests craftsmanship and tradition while remaining modern and accessible.
Color Palette
-
Warm browns (#684F3E, #bc6c25) to evoke wood and craftsmanship
-
Cream (#fefae0) for elegance and readability
-
Gold accents (#dda15e) for premium feel and call-to-actions
Typography & UI
-
Playfair Display for headings (elegant, traditional)
-
Roboto for body text (clean, readable)
-
Clear hierarchy ensuring accessibility across devices
Design Philosophy
"Authentic craftsmanship meets modern accessibility." The visual language balances traditional lutherie heritage with contemporary web standards to build trust and showcase quality.
I then started coding the website using VSCode, using UTML, CSS, and a little bit of JavaScript.
Key Features Implemented
Responsive Design Mobile-first approach ensuring perfect experience on all devices, crucial for modern web users.
Image Carousel Showcasing workshop atmosphere and guitar details to immediately communicate quality and passion.
Clear Service Presentation Three distinct service cards (Sales, Repairs, Custom Work) with clear descriptions and call-to-actions.
Trust Elements
-
Professional photography
-
Detailed service descriptions
-
Clear contact information
-
Workshop location with map
-
Craftsmanship guarantees
Interactive Elements
-
Smooth scrolling navigation
-
Hover effects on service cards
-
Parallax hero background
-
Floating social media bar
Final Design
Desktop Experience
Clean, professional layout with large hero image showcasing workshop atmosphere. Services are presented in an organized grid with clear imagery and descriptions. The about section builds personal connection with the luthier's story.
Mobile Experience
Fully responsive design that maintains visual hierarchy and functionality on smaller screens. Touch-friendly buttons and optimized image sizing ensure smooth mobile interaction.
Accessibility considerations
Before the final design, I prioritized accessibility to ensure inclusivity:
Clear Visual Hierarchy
Why?
Helps all users, including those with cognitive disabilities, navigate efficiently.
Implementation:
-
Distinct headings and subheadings
-
Logical content flow
-
Scannable sections with clear purposes
High Color Contrast
Why?
Ensures readability for users with visual impairments.
Implementation:
-
WCAG AA compliant color combinations
-
Sufficient contrast ratios for all text
-
Clear distinction between interactive elements
Readable Typography
Why?
Essential for accessibility and user comfort.
Implementation:
-
Appropriate font sizes for all devices
-
Clear font choices with good readability
-
Adequate line spacing and character spacing
Key Takeaways and Learnings
Designing Lutherie Esprit Bois taught me the importance of storytelling in artisan businesses and how design can build trust and emotional connection. Balancing professional credibility with personal craftsmanship story was key to creating an effective business website. I learned that small details in typography, color, and imagery significantly impact user perception of quality and trustworthiness.
| Next steps
-
Conduct User Testing
Test the website with potential customers to measure usability, trust-building effectiveness, and conversion potential.
-
Add E-commerce Functionality
Implement online purchasing capabilities for available guitars and service booking system.
-
SEO Optimization
Improve search engine visibility to help the luthier reach more potential customers in his region.
-
Analytics Implementation
Add tracking to measure user behavior, popular services, and conversion rates to continuously improve the experience.