Barbosa Appointments Case Study

─ About

This project started as an idea I had a while ago. Back then I wanted to make a UI Kit for online appointments, but recently turned into a project for a workshop, or better said, a design sprint I facilitated. The design thinking process was used and we handled first just the user side of the app, barbershops will have a different interface and functionality but this is part of another design sprint.

─ Context

Shops spend time answering the phone, employees need to step away from what they are doing, they have to look into an agenda to find a good time for them and the customers, it is a back and forth conversation until you get this done. Meantime, you might get another call that awaits you to answer, if it takes too much to answer you might lose that appointment.

You spend time on the phone, which means you don’t make money. A small business might not have a receptionist who can take their calls. Big companies have a receptionist but have to pay that receptionist as well.

Going on a mobile app will help you manage time easily, you will increase customer loyalty, increase your revenue, and decrease costs.

─ Initial request

We need to create an app that will help barbershops easily manage their agenda in a modern and optimized way and help customers to easily get an appointment and pay online for the services.

─ Understand (Empathize)

Understanding our users means to build empathy with human beings who experience the product or service we create. We need to understand what are their needs and what motivates them, in order to create solutions that will solve a problem and improve their experience with the application.

Besides the fact that I always try to adopt a beginner mindset as a way to empathize with the users, for this project I interviewed friends and people around me, asked about their needs, how they usually get an appointment, and what motivates them to make decisions about choosing a barbershop or leaving a tip, and so on.

"In the beginner's mind there are many possibilities, in the expert's mind there are few." - Shunryu Suzuki

Small pieces of information gathered from the interviewed users were placed together onto post-it notes so we can easily move pieces of data around to create patterns and clusters of similar ideas or needs.

─ Define

Affinity diagrams are a great method to group and make sense of all the mixed information we have, and we started to analyze, interpret, and plan everything from the Empathize phase. We want to see what are the user needs and how they are aligned with the business goals.

We can now see what are the main ideas or needs of our users and we can see some points of view to build our “How Might We” (HMW) questions.

─ Solution (Ideate)

At this point we wanted to get ideas quickly and as much as we can. I asked each participant to sketch some ideas for every HMW question we defined in the previous step, then we put them together and vote for the best ideas we assumed to solve our needs and problems.

I start with a Task flow, which is a series of actions a user takes to achieve a meaningful goal, and I do that to focus more on the actual user needs, but also as a better way to communicate ideas with different stakeholders. Additionally, we did some Competitive analysis to see how other applications solved similar problems to ours.

Once we got our sketches done, we’ve used the dot voting system which worked great in sorting our ideas. More than that, we also discovered other good ideas and case corners that we had to consider in the next phase.

─ Prototype

Taking the most voted sketches from the Define phase, I started to do some low fidelity wireframes to provide a visual understanding of the screens but also to create a prototype that will help us to test and validate our ideas and assumptions.

Doing the user flow, we show the logic between each screen, interactions, and what actions are required from a user to achieve a goal. Again, this is a good way to present it to different stakeholders and help us to focus on user needs.

─ Test

Testing the prototype for the first time was a big success, and it seems that putting together more brains to find solutions it’s a great idea. We tested and successfully validated all of our assumptions and flows.

We didn’t have the chance and resources to interview more people except for the ones we live with, so we got help with testing from an online tool: Useberry for Figma, which is a great plugin for testing purposes.

Take a look at the first prototype

─ Final result

The final part is to give our product an identity. I tried to create a meaningful and emotional experience, delivering small delights within the app, from a beautiful interface to micro interactions or fluid transitions between screens.

Another thing i considered is that the interface is there to serve the user so it shouldn't draw attention to itself. Maintaining the consistency reduces the cognitive load, makes the UI learnable, and gives a feeling of familiarity and confidence.

Since this project had learning purposes, there was no need for custom illustrations to help us strengthen the message we want to deliver. ManyPixels come in handy when in need of some great free illustrations. I used a few in this project so all credits and thanks to them.

─ Interactive prototype