Skip to content
ARAtta RasoolFull-Stack Developer
PROJECT CASE STUDY

Mellii Blends

A product-brand website where the Figma design reference provides the starting point for visual consistency.

Mellii Blends website presentation
ABOUT THE WORK

Mellii Blends: a design-led website for a Tilburg barbershop

My work on Mellii Blends focused on translating a distinct visual direction into a clear business website. The barbershop’s public presentation introduces haircutting, beard care, washing, and waxing services in Tilburg, with pricing information and a direct route to make an appointment.

I approached the experience around the choices a new customer needs to make: understand the style of the business, check the available treatments, see the pricing, and decide whether to book. The website connects those practical tasks with a visual identity suited to a contemporary barbershop.

Business overview and audience

The live site presents Melli Blends as a Tilburg barbershop with an emphasis on personal attention and craftsmanship. Its Dutch-language content introduces both the services and the atmosphere of the business, giving visitors a sense of what to expect before an appointment.

The core services are haircutting, beard trimming and care, washing, and waxing. Each appears within the homepage pricing area, helping customers recognize the relevant treatment without needing to contact the shop for every basic question.

The audience includes people looking for a regular barber, a fresh style, or a particular grooming service. For a local business, the website also needs practical location and contact information so visitors can move from interest to planning a visit.

Project goals and page hierarchy

My focus was on a consistent presentation with a clear relationship between the opening brand message, services, prices, and appointment actions. The project included a Figma design reference, providing a visual starting point for the website’s typography, graphics, and section relationships.

The primary navigation keeps Home, Prices, About, and Contact visible. This compact structure reflects the main visitor questions without creating an unnecessarily complex menu. The opening area then introduces the barbershop and offers both an About route and an appointment action.

That pairing recognizes two levels of readiness. A visitor who already knows the business can continue toward booking, while someone discovering it for the first time can learn more about the shop and its approach.

Services and price presentation

The homepage pricing section gives each treatment a numbered entry, a name, a description, a price, and an appointment link. This makes the offering easy to scan while giving each service enough explanation to be useful.

Haircutting and beard services receive their own descriptions, while washing and waxing appear as separate options. The structure helps avoid ambiguity about what the business offers and gives customers a clear route from a treatment choice to the scheduling destination.

My approach treats pricing as part of the visitor journey rather than a disconnected list. A treatment description should explain the service, its price should be easy to locate, and the next action should sit close enough to use naturally.

Appointment and local-business functionality

Appointment links lead to a Calendly scheduling destination. They appear in the opening area, alongside services, and near the later booking invitation. This gives visitors opportunities to act after different amounts of reading.

The website also provides telephone and email information, a Tilburg address, and a location map area. Social links offer another way to explore the business. These practical details help connect the visual presentation with the real-world visit a customer is considering.

An image carousel and gallery-oriented content introduce the shop’s work and atmosphere. For a barber website, these visuals complement the written service descriptions by helping customers understand the style of the business.

Design and user experience

The desktop opening uses a dark photographic background, a large monogram-style logo, and bold white headline typography. A muted gold appointment action introduces a distinct accent while keeping the overall palette restrained.

The navigation sits within the large opening composition, with a telephone action toward the right. The headline and supporting paragraph establish the brand message, while the About and appointment actions provide clear routes beyond the first screen.

My UX focus was on balancing that expressive introduction with practical content. The imagery establishes mood, but pricing, services, and booking need a clear hierarchy so the website remains useful to someone making a quick decision.

My development approach

A design-led website needs to preserve the intent of the visual reference while making room for real content and different screen widths. My approach connects typography, spacing, imagery, and actions as parts of the same hierarchy rather than treating them as isolated styling choices.

For Mellii Blends, the repeated service entries and appointment links give the page a practical rhythm. Each section adds a different kind of information while keeping the route to booking recognizable. This helps the website communicate both the personality of the business and the details customers need.

The development focus is therefore a coherent local-business experience: introduce the brand, explain the offering, show the work, and make the next step easy to find.

Explore my frontend development services for design-led business websites. The iScale Hub case study offers another example of connecting a visual direction with structured service information.

Conclusion

Mellii Blends brings the barbershop’s identity, treatments, pricing, and appointment journey into one focused website. My work connects the visual direction with the practical needs of customers planning a visit. Explore the Melli Blends website for its current services and booking information.

A SIMILAR CHALLENGE?

Discuss your next web project

Share the business goal, existing website or application and the problem you're trying to solve. I can help plan a practical technical approach.

Start a Conversation
Expanded project screenshot
EmailWhatsAppCall