Work

About

Mark Dela Rosa

Resume

Linkedin

Overview

Problem

Design Decisions

Outcomes

Reflection

Case Study

Concept Project

A cleaner cut

A cleaner cut

Redesigning the 028 Barbershop booking experience

028 Barbershop doesn't currently have a mobile booking app. This is a self-initiated concept project exploring what that experience could and should look like, then iterating on it to get the visual design right.

028 Barbershop doesn't currently have a mobile booking app. This is a self-initiated concept project exploring what that experience could and should look like, then iterating on it to get the visual design right.

Role

Visual/UX Designer

Visual/UX Designer

Tools

Figma

Figma

Duration

Feb - March 2025

Feb - March 2025

Type

Self Initiated Concept

Self Initiated Concept

01 - Overview

Why this project

Most local barbershops rely on Instagram DMs, phone calls, or third-party booking platforms with generic interfaces that feel disconnected from the brand. I wanted to explore what a purpose built booking experience for 028 Barbershop could look like. One that felt as sharp and intentional as the service itself.


I started by designing the initial flow end to end: barber selection, date and time, service choice, and a confirmation summary. Once the structure was in place, I took a step back, identified where the visual design was letting the experience down, and redesigned it, treating that iteration as its own design challenge.

Most local barbershops rely on Instagram DMs, phone calls, or third-party booking platforms with generic interfaces that feel disconnected from the brand. I wanted to explore what a purpose built booking experience for 028 Barbershop could look like. One that felt as sharp and intentional as the service itself.


I started by designing the initial flow end to end: barber selection, date and time, service choice, and a confirmation summary. Once the structure was in place, I took a step back, identified where the visual design was letting the experience down, and redesigned it, treating that iteration as its own design challenge.

This case study covers both phases: the initial concept and the visual redesign that followed. The goal wasn't to start over — it was to make the same flow feel clearer, more trustworthy, and easier to move through.

This case study covers both phases: the initial concept and the visual redesign that followed. The goal wasn't to start over — it was to make the same flow feel clearer, more trustworthy, and easier to move through.

Figma

Mobile UI

Booking Flow

Visual systems

Concept project

Figma

Visual systems

Mobile UI

Concept project

Booking Flow

02 - Problem

What wasn't working

After completing the initial design, I audited my own work with fresh eyes. Four problems stood out each one adding friction to what should be a simple, confident booking experience.

After completing the initial design, I audited my own work with fresh eyes. Four problems stood out each one adding friction to what should be a simple, confident booking experience.

No progress feedback

Static nav icons gave no indication of where the user was in the booking journey.

Flat hierarchy

All text was treated at roughly the same visual weight — nothing guided the eye.

Grid layout for barbers

Photo grid made it hard to scan availability and compare options at a glance.

Inconsistent styling

Button styles, colors, and spacing varied across screens with no clear system.

No progress feedback

Static nav icons gave no indication of where the user was in the booking journey.

Flat hierarchy

Text was treated at roughly the same visual weight nothing guided the eye.

No progress feedback

Static nav icons gave no indication of where the user was in the booking journey.

Flat hierarchy

All text was treated at roughly the same visual weight — nothing guided the eye.

Grid layout for barbers

Photo grid made it hard to scan availability and compare options at a glance.

Inconsistent styling

Button styles, colors, and spacing varied across screens with no clear system.

Grid layout for barbers

Photo grid made it hard to scan availability and compare options at a glance.

Inconsistent styling

Button styles, colors, and spacing varied across screens with no clear system.

03 - Design Decisions

What I changed and why

1

Added an active step indicator with checkmarks

Replaced static icons with a linear progress tracker that fills green as steps complete. Users always know where they are and how close they are to done.

2

Introduced bold screen headings

Each screen now leads with a large, conversational headline. This creates immediate context and gives the eye a clear anchor before scanning the content below.

3

Switched barber selection from grid to list

A list layout lets users scan name, availability, and next slot in a single pass — far more efficient than a grid that buries key information under photos.

4

Added service duration to the services screen

Showing "45 min · most popular" alongside price gives users the information they need to book with confidence — reducing hesitation at the final step.

5

Standardized time slot states

Unified the visual treatment of available and unavailable slots so the difference is immediately clear without needing to read every option.

6

Unified the confirm button across all screens

A persistent, consistently placed CTA anchors the user's next action on every screen — no hunting, no hesitation.

04- Outcomes

What improved

Clearer sense of progress through the booking flow

Faster scanning with consistent visual hierarchy

More information per screen without adding clutter

Consistent component system across all four steps

05- Reflection

What I learned

This project reinforced that visual decisions hierarchy, spacing, layout and feedback aren't decoration. They directly shape how confident and capable a user feels moving through a flow. A well-structured experience can still fail if the visuals doesn't carry its weight.


Given more time, I'd validate the barber selection screen with real users to confirm the list layout genuinely reduces time-to-decision — not just visually, but behaviorally. I'd also explore how this concept could extend to push notifications, appointment reminders, and post-visit follow-ups.

This project reinforced that visual decisions hierarchy, spacing, layout and feedback aren't decoration. They directly shape how confident and capable a user feels moving through a flow. A well-structured experience can still fail if the visuals doesn't carry its weight.


Given more time, I'd validate the barber selection screen with real users to confirm the list layout genuinely reduces time-to-decision — not just visually, but behaviorally. I'd also explore how this concept could extend to push notifications, appointment reminders, and post-visit follow-ups.

Mark Dela Rosa