Raymond Hair Salon

Solution

My solution for this challenge is to build an application that allows Raymond to engage customers and provide better service. I concluded on three primary goals I followed during this design process.

Accessibility

Accurate hours of operation and location

Conciseness

Clear information that avoids overwhelming customers

Simplicity

Seamless interface for new and returning users

Competitive Analysis

I analyzed two direct and two indirect scheduling apps to evaluate their features. Their focus on functionality over design led to readability issues, missing information, and difficulty locating features.

Square and Calendly scheduling with ambiguous information and inefficient flow.

Microsoft and Peloton with streamlined scheduling process, but inconsistent UI appearance.

Research

Who are my audience?

I conducted in-person research and virtual interviews with long-term and short-term customers that visit the salon. I organized groups based on their age as it heavily biases the way we design the app. According to user feedback, affordable pricing, expert craftsmanship, and positive customer service are the three main reasons why Raymond maintains a loyal customer base. During my user interviews, I also witnessed some complaints and areas that the business that could be improved:

From these findings, I was aware that we needed to split up and group together customers with similar pain points. The business attracts two main personas: short-term and long-term loyal customers.

Customer A:

"If they would place the pricing of each service I would understand how much I'll be paying for the haircut."

Customer B:

"I would like that my phone calls were answered more consistently and updated address when the business moves."

User Journey

The homepage is built around four essential sub-pages designed to focus on the features users visit most frequently. The contact information page received the most interest, as users liked the streamlined experience to connect with the barber directly.

User flow map to identify key areas to prioritize and a clear step-by-step visualization.

Ideation

We concluded that our biggest priority was to create an app that was easy to navigate with no technical bugs. His biggest concern was that his older audience is less inclined to use the app to book appointments because they're a lot less tech-savvy than younger customers. Considering that the customer demographic skews more towards the older generation, I wanted the design to be approachable and user-friendly.

My objective was to allow users who are less hands-on with technology to easily pick up the app and begin using it. I brainstormed ideas and filtered which designs suit the business and concluded that the last frame was the most user-friendly that provide important information like service, location, hours, contact, and appointment booking.

Initial paper wireframe on seven different homepage designs before deciding on the last screen.

Mid-Fidelity

After conducting five user tests, many users had difficulty understanding why disabled buttons didn't allow them to proceed next steps after "completing" a specific stage. I didn't utilized the schedule and contact us features the most, search bar, and purchased at maximum of 3 services through the scheduling process.

My focus on prioritizing a modern and sleek visual design disregarded the basic needs of providing a good user experience for older customers using the app. I found that a few of my designs were not WCAG-friendly and contained inconsistent design patterns such as typography, icons, colors, and features like the search bar can be removed for lower development cost and mobile optimization.

Web app's design lacked consistency, with irregular spacing, oversized and mismatched icons, and unnecessary search engine.

Design features an oversized buttons that disrupts font alignment, inconsistent frame sizes, insufficient color contrast for older users, and unclear disabled buttons that leave users uncertain.

Iterations

Re-visiting who and what we’re trying to build

I initially focused on functional designs with simple navigation but missed key elements such as an unnecessary add-to-cart option for users who only visit to schedule, and buttons placed too far for easy reach.

I began brainstorming options for a smoother flow and reduce the time users spent searching throughout the app.

The entry point includes options for booking, calling, messaging, and checking location and hours, all designed for quick, easy scanning. The default screen is set to services for immediate access.

Appointment selection with clear and straightforward view of available date and time.

Cohesive confirmation flow with easy personal information entry and options to add to calendar, cancel, or reschedule.

Final Designs

Enhanced intuitive design and google integration

The final design showcases an enhanced scheduling process that's intuitive yet familiar for both existing and newly onboarded users. Establishing a hierarchal design format from most to least important information minimizes frustration associated with continuous searching and facilitates users in reaching their objectives expeditiously.

The incorporation of Google's API features ensures a seamless means for users to receive timely reminders of upcoming appointments, thereby mitigating potential conflicts and miscommunications between the business owner and users.

View Prototype ↗

View Design File ↗

Final documentation of the full design, annotations, design system, and prototype for easy and quick reference.

Final design tailored for both new and returning customers.

Design system consists of colors, typography, and component library.

Reflection

Learnings

This project was special because I got to sit down and interview with my client’s customers. These face-to-face interviews helped me understand their needs, allowing my client to focus on what he does best — cutting hair — while also reducing any frustrations his customers might have.

Next steps

Moving forward, I would conduct more research on how I could provide a better application accessibility for visually impaired individuals. I would like to partner with developers to bring this to life and brainstorm additional ways to boost customer retention.