All Handmade Barberia

Role
UX & UI Design
Type
Website & Brand Identity
Result
Increased online bookings

Overview

All Handmade Barberia is a barber shop in Bogota with a strong physical presence, but no digital identity to match. I was brought in to develop their online brand and design a website that could grow with the business.

Image showing screenshots of All Handmade website

The problem

A physical brand in need of a digital counterpart

All Handmade is a barber shop in Bogota with a plan to expand beyond haircuts, into clothing and education. The website needed to cover four main objectives: promoting the barber shop, facilitating the booking process, showcasing the products they have for sale, and establishing a digital presence strong enough to support a growing brand.

Although they had a strong, distinctive presence in their physical store, there was no digital brand to match. The challenge was to develop their identity, laying the foundation for a future clothing brand and a barber academy for training new talent.

My approach

Client brief to final build

I approached this project with 6 main stages. First I met with the client to understand their needs and ambitions, before researching competitor barber websites to identify potential opportunities. From there I moved into wireframing, mapping out structure and user flows before any visual decisions were made. Once the UX foundations were in place, I developed the brand identity and UI, before working directly alongside the developer during the build to ensure the finished website matched the designs precisely.

Image displaying screenshots of competitor research Image showing wireframes of All Handmade homepage

01

Client discovery

Understanding their needs and brand vision

02

Competitor research

Researching other barber websites to identify opportunities

03

Wireframing

Mapping out structure and layout before any visual decision

04

Brand development

Exploring visual direction and style for the digital identity

05

UI design

Creating the final high-fidelity deigns

06

Dev collaboration

Providing design assistance and feedback through the build

Brand identity

Designing a digital identity rooted in the physical space

All Handmade had a strong, distinctive aesthetic in their physical store, but no digital equivalent. Rather than starting from scratch, I looked to what already existed and asked how it could be translated onto screen.

The store’s black and white checked and grid patterns became a central reference point, informing the graphic language of the site. Their logo also provided a source of inspiration, with lines breaking beyond their boundaries — details that spoke to an edgy, boundary-pushing attitude.

That spirit carried through into the UI details: subtle animations and staggered images give the page a sense of movement, and button underlines that extend beyond their boundaries are a direct nod to the logo and the brand’s character.

Image of All Handmade physical store displaying black and white checkered and pinstripe patterns Photo of outside of All Handmade barber shop Image showing a few examples of components from the UI library Image that shows the staggered images on All Handmade website

Design & Development

Seeing it through to the build

Once the designs were finalised, my involvement didn’t stop there. I used my knowledge of front-end development to work directly alongside the developer throughout the build — maintaining an ongoing dialogue to ensure the implementation stayed true to the design, and conducting design reviews at key stages to catch and resolve any deviations.

This close collaboration between design and development is something I consider essential to delivering a finished product that genuinely reflects the original vision.

Screenshots displaying code editor

The outcome

A digital identity that reflects the physical one

The finished website gave All Handmade a digital presence that finally matched the quality and character of their physical space, something the client was genuinely proud of.

Integrating a booking management system made the appointment process significantly easier for customers, leading to an increase in online bookings and reducing the admin burden on the team.

Visit the website
Screenshot of the All Handmade homepage

Client feedback

The client was very impressed with both the design and the finished website — a result that matched the quality and character that they offer in store.