SEZI'S STUDIO
SEZI'S STUDIO

Sezi's Studio

The fresh new website for everything hair-related in the Vancouver Downtown area, according to Sezi

Sezi’s Studio is an e-commerce website for Sezi and their high-end hair design studio based in Vancouver Downtown. The client and owner, Sezi, needed a website to display services, stylists’ portfolios and more about the studio. They also needed an online store for their own branded hair products as well as other brands.

Roles

  • UX/UI Designer
  • Front-End Developer

Contributions

  • User Research
  • Information Architecture
  • Wireframes
  • Prototyping
  • Design Systems

Tools

  • Figma
  • Adobe Creative Suite
  • Wordpress

Context

This website was a course project where we learned how to work with clients and achieve the main goal of creating a website that satisfied them and their needs. In this case, Sezi was a fictional client played by our teacher. We were given a list of specific requirements that needed to be met at the beginning of the project. We were meeting weekly or bi-weekly with the client to present the progress made on the website.

Timeline

February 2021

  • Initial meeting
  • Research

March

  • Research
  • Design

April

  • Prototyping
  • Development
  • Improvements

May

  • Final touches
  • Improvements
  • Presentation

Overview

Scenario

The studio located in Vancouver Downtown caters high-end services to women mostly, although men are welcome as well. The studio has over 30 staff and sports a clean ultra-modern interior.

Style keywords

FRESH • FUNKY • YOUNG • FUN • CREATIVE

Requirements

  1. An online appointment booking system, with availability visible to clients
  2. An online shop that sells Sezi's branded hair and styling products
  3. A client area with login to set up appointments and other information only available to clients
  4. A testimonials section
  5. A page showing off Sezi's worldwide award winning hair design, updatable
  6. Various static pages, including a contact page and an about page
  7. Must pay special attention to Sezi's about page
  8. A media-rich studio interior showcase page
  9. All photos and galleries must be updatable
  10. Full branding and design freedom, pending Sezi's approval, regarding everything from the website, logo, products, etc.
Research & Analysis
Ideation
design process
validation
final version
RESEARCH
& ANALYSIS
Ideation
Design
Process
Validation
Final
version
01

Research & Analysis

Research

With the help of the information that was given to us by Sezi, we were able to create a user survey to get more information on what the customers might want or not want in the website. We created a 27-questions survey in the hopes of getting to learn more about how customers would complete different tasks and their preferences regarding their salon’s website. Based on their feedback, we would then be able to design the first prototype.

Major commonalities

  • Book appointment online
  • Booking process is quick (5 min or less)
  • Found their stylist/salon through word-of-mouth
  • Appreciate booking on their own time (online is easier)
  • Images/portfolios are a must

Minor commonalities

  • Happy with their salon's website
  • Found their stylist/salon through local media/social media
  • Many salons' websites are either boring, outdated, or both
  • Appreciate a unique brand feel

Pain points

  • Booking process is hard to navigate
  • Not being able to see their booking
  • Service mixup from booking online VS on arrival
  • Having to book appointments on salon's open hours only
  • Confusing jargon used
  • Difficult to see if the stylist would be a good fit because of lack of pictures/portfolio
  • Navigation not being intuitive and elements malfunctions

Other findings

  • Some users prefer to call to book
  • Customers would enjoy more details surrounding services
  • Customers would be interested in having a stylist recommended to them based on the service they are looking for (specialist)
  • Pricing should be upfront and viewable on the website
  • Some customers pointed out the lack of diversity (BIPOC, male, hair texture/variety) in pictures/portfolio

Analysis

Based on the feedback we gathered from the user survey, we created a list of must-haves for Sezi’s website. All these elements had to be present in the final version of the website.

  1. A booking system that is intuitive
  2. A tab on their account's page to find all their appointments (upcoming and past)
  3. A portfolio with pictures for every stylist and their work
  4. More information on each of the services provided at the salon
  5. A page showcasing all of the services offered and the cost
  6. Must pay attention to the branding of the website (fresh and young)
  7. Must pay attention to include more diversity in pictures
  8. Whole navigation of the website should be easy to do
02

Ideation

Site Map

After establishing the key pages and elements that we needed for Sezi’s new website, we created a site map to help us visualize what each path between pages would look like. It helped us streamline the process of navigating the website and remove any unnecessary page or element.

Site Map of the website designed for Sezi's Salon. There are 5 tiers. First is the homepage. Second contains the booking page, the stylists page, the services page, the shop page, the about us page, and the account page. Third and fourth tiers are showing different paths that could be taken to book an appointment or buy a product.

Wireframes

The second step into designing the user interface for Sezi’s website was grey-scale wireframes. We created a mid-high fidelity prototype for the website where we were able to do a first round of user testing and validate our ideas with users.

Screen captures of 3 pages of the wireframes designed for Sezi's Salon: the homepage, the portfolio page, and the online shop page.
03

Design Process

Logo Design

Final Design

Styleguide

Typography

Aa
Poppins
H1 Poppins
42px
Heading One
Headings
H2 Poppins
36px
Heading Two
Headings
H3 Poppins
28px
Heading Three
Headings
H4 Poppins
24px
Heading Four
Buttons,
Links
H5 Poppins
20px
Heading Five
Subheaders,
Links
H6 Poppins
16px
Heading Six
Buttons,
Subheaders
P Poppins
16px
Paragraph Text
Body Text
Captions Poppins
14px
Captions
Navigation Bar

Color palette

Primary

Sea Blue
#609DBF
Light Pink
#FCF3F2
Burnt Orange
#E6483A
Pattern "Z" – Fair
Background – Light Pink

Secondary

Light Blue
#CDEDFF
Fair
#FAE3E1

Neutral

White
‍#FF
Black
#000000

Interactive elements

Book Appointment
12:00 PM
1:00 PM

Iconography

Imagery

04

Validation

Following our research and ideation process, we jumped into user testing. We conducted these testing sessions with our target audience to gather their thoughts on the experience of navigating Sezi’s new website. We applied the changes that were pointed to us to create the best version that we could build for the website. Before sending off our design to our client, we did a final round of user testing to validate all of our ideas and confirm what we had created.

Navigation bar

Some of the names that we were using for the tabs in the navigation bar were confusing to some users. We initially had a tab dedicated to Sezi’s portfolio, but it was too confusing with the other tabs we have. Then, we had a “store” tab and a “products” tab. Users thought they were the same, so we had to change them to “about us” and “shop” instead.

Booking process

During our usability testing, a few users mentioned that they would like a way to start the booking process directly from a stylist’s portfolio page. Initially, the user had to go through the “services” or “book now” pages to book an appointment, but now they can do it from any stylist’s portfolio.

"Get help" touchpoints

In our last usability testing session, some users pointed out that some new clients may be unfamiliar with salon jargon and they thought having some touchpoints would be helpful. To prevent too much text overwhelming our users, we decided to add a prompt to suggest contacting the salon for advice.

05

Final Version

After validation from our users and all this hard work, we were able to create a successful website for Sezi's Salon. The client ended up being highly satisfied with the work. We even got picked as the best website for Sezi out of multiple groups that were creating a proposal for them.

View final version