top of page
A new way to browse & book for barbershop appointment
CASE STUDY
PROJECT
Vancouver Film School Digital Design Graduation Project
TIMELINE
4 Months
August 2022 - November 2022
MY ROLE
Research, Information Architecture, User Experience, User Interface,
Brand Strategist
Why was HOLIC made?
AS A BARBER/PRODUCT DESIGNER
I want to create an app that allowed clients to browse & book for barbershop with more confidence. Because personally, I traveled 10,818 km from my home town Hanoi to Vancouver for school, and leaving my favorite barber to find a new one in a new city was a big challenge to me. And after doing a lot of research, I found out that I am not the only one facing this problem.
RESEARCHING PHASE
I began with interview my clients that came to me for a haircut, asked them questions related to the project. With all the information that I gathered, I created User Profiles and Data Points to have an idea of who they are and what are their pain points. Form that, I made an Affinity Diagram to have a clear vision of their needs in order to make User Journey Map and Experience Map, which are basically their journey from start to end of getting a haircut. After that, I made a Mental Model to see the where I should focus on to develop in my app which clients are looking for.
INSIGHT #1
70% of interviewees use Google Map when they start looking for a barbershop because it is the only tool that they can find barbershops around them. But only half of them satisfied with their choice because of many reasons like: Pricing, Lack of information, The haircut they got,..
INSIGHT #2
Price and the look of the barbershop are the 2 most important things to consider when comparing barbershop. Reviews and the past works are also important but they are very limited on Google Map.
DESIGNING PHASE
With all the data I got from analyzing in researching phase, I start off Designing Phase with creating a mood board of look I want for my app, with the mood board, I picked colors and typography that fits the overall aesthetic of the app to create the style guide.
MOODBOARD
I want to create the mood board that is BOLD, CLEAN and CONTRAST, which use black and white as the main color palette. Also rounded corner shapes, flat icons, clear Call To Action (CTA) buttons and great use of white space are what I want to have in my design system.
PAPER WIREFRAMES
I like to do both low-fidelity and hi-fidelity wireframes on paper because not only I get more creative when sketching with pencil and paper but also knowing that I cannot make the perfect looking UI in paper so don’t get into the trap of designing while I am in the thinking phase.
DESIGN ELEMENTS
Components play a huge role in UI design with Figma. Every design elements that I use more than one time in my final UI are made with component.
Creating my own set of icons for this project was a very interesting part for me. I started with finding images that represent the services, then simplify and drew illustrations on paper before brought it into Adobe Illustrator to create icons.
FINAL PROTOTYPE
PROJECT SUMMARY
This project is the combination of the two things that I am passionate about: Designing and Cutting Hair. 4 months working on this project was an amazing journey and I am really happy with the end result. Below is the summary of the project and what I have learned.
HIGHLIGHT FUNCTIONS
Highlight Promotion
Promotion is important. That is why it should appear in the way that catches user attention and positions on top of the page.
Inspiration Tab
You know that you need a change, but not sure how exactly it going to be. Inspiration Tab is created to solve that problem for you.
Fast Booking
If you already have your favorite barber/barbershop, fast booking is made to book a fast appointment with only 3 taps.
Add to calendar
Don’t have to worry about forgetting your barber appointment. You can add the appointment to your calendar right after you booked.
LEARNINGS
#1 DESIGN SYSTEMS, COMPONENTS, AUTO LAYOUT,... FIGMA
#1 DESIGN SYSTEMS, COMPONENTS, AUTO LAYOUT,... FIGMA
One of the biggest challenge I set for myself at the beginning of this project is to learn how to use Figma in the most efficient way that matches the industry standard, and I could also share it with people to collaborate and get feedbacks. Having a design systems helps me a lot with making the UI cohesive, components save me a lot of time and auto layout, which is one of the best function in Figma for me, makes layout and spacing so much faster and easier. This is the first big project that I made everything with Figma, having all my files together in a single app helps me a lot in organizing and taking assets from one place to another.
#2 DIFFERENT ROLE, DIFFERENT PERSPECTIVE
One of the most valuable thing I learned from working on this project is to switch role. As a UX/UI Designer, I spend a lot of time in front of my computer, working on all the details, brainstorming ideas, making every pixels perfect,... But when I get off my work station, open that app in my phone, use it as a User, I can see my work in the user’s perspective with an overall image of what I have been working on. By doing it often, it helps me a lot with making the user journey better and also understanding how to create the better flow for the app.
One of the most valuable thing I learned from working on this project is to switch role. As a UX/UI Designer, I spend a lot of time in front of my computer, working on all the details, brainstorming ideas, making every pixels perfect,... But when I get off my work station, open that app in my phone, use it as a User, I can see my work in the user’s perspective with an overall image of what I have been working on. By doing it often, it helps me a lot with making the user journey better and also understanding how to create the better flow for the app.
#3 ENJOY THE PROCESS
The process of creating HOLIC brought me a lot of memorable experiences. The idea of this project has been in my mind for a very long time, not only because it is what I passionate about but it also solves my own problem of finding a good barbershop in the new city. I always believe that in order to solve someone else problem, you have to be able to solve that problem for yourself first. Putting myself in both designer's and user's shoes helps me understand more about the problem itself in order to find the best solution for it. During 4 months of this project, I keep pushing myself everyday, work hard for something that I believe in .Knowing that the journey more important than the destination helps me enjoy the process more!
SHOUT-OUTS
A huge thanks to everyone helped me in the process of making this project. I would like to thank Adam Finley for being a great mentor, Nida Fatima, Bradley Smith, Parastou Heidari, Henry Chu, Ivy Sang for all the support and feedback, Deven and Alice for spending time with me almost everyday in the last month. Thank VFS and DD53 for an amazing year.
bottom of page