Sezi's Studio

Sezi's studio is a high-end hair design studio along with its own online shop. This was a course project where I created an e-commerce hair salon website based on mock client requirements and feedback.

Year

Completed in 2021
Redesigned in 2023

Tools

Figma, Illustrator, WordPress

Project Types

Website Design, UX/UI, WordPress

Roles

UX/UI Designer

Reshare thumbnail

Overview

Satisfy the client and achieve their goals with an e-commerce website.

High-quality client interactions and satisfaction.
Project Overview

This project gave me an opportunity to work closely with a mock client named Sezi who runs a Vancouver-based high-end hair design studio and online shop. To ensure effective communication, weekly check-in meetings were set up to resolve any questions or confusion. The primary objective was to create a user-friendly website that meets the client's specific requirements. As the designer, my aim was to ensure that all the client's needs were met and they were satisfied with the final outcome.

Process

02
Analysis

03
Ideation

04
Design

05
Validation

View Final Solution

01

Research

Getting to know the client was essential to achieving our objectives. Therefore, we conducted research on the client Sezi and his goals before the first client meeting, with the intent of gathering and clarifying information. To further understand the client's requirements, we developed a questionnaire which was used to guide the discussion. In addition, we performed research on the targeted users andent a questionnaire to this group to determine their pain points and goals.

Client Requirements · User Survey
Focus Areas
01

What are the requirements that the client provides?

02

What are the objectives of the website design according to the client's requirements?

03

Who are the targeted users and what are their expectations and preferences?

04

What are users' commonalities, differences, pain points, and goals?

Client Requirements

Sezi provided a detailed project summary with clear goals and requirements that helped us to understand their preferences and dislikes. With the requirements, we were able to understand our client's dislikes and preferences. It helped us plan out how the website should work and build the project scope appropriately.

User Survey

Sezi provided us with customer information, which we used to create a survey that was sent to the targeted users. The survey included questions related to tasks and competing websites. The results of the survey helped us gain insight into users' preferences and attitudes towards hair salon websites. We were able to identify commonalities, differences, pain points, action points, and recommendations.

Key points

According to the survey results, users prefer simple and fast booking systems over clunky appointment systems that require them to make phone calls instead of booking online. Therefore, it is important to ensure that the user experience design is intuitive and easy to navigate.

Additionally, Sezi and his clients want the website to showcase stylist portfolios with detailed information on their experiences, training, and skill levels. The survey also revealed that users want prices to be upfront and visible on the website.

Users appreciate clean, modern layouts and more details surrounding what services entail (clarification on the jargon).

02

Analysis

Based on the results of the user survey, we developed targeted audience personas to better understand the needs, behaviors, and goals of Sezi's studio website users. By understanding the unique perspectives and priorities of each persona, we were able to prioritize website features and design decisions to ensure the best possible user experience.

Persona
Persona

Since the website is going to be used by both hair salon employees and customers, we built two user personas to identify their goals, motivations, behaviours, and pain points. It helped define who the website is being created for and what is necessary or unnecessary for them from a user-centric point of view.

Customer User Persona
Admin User Persona

03

Ideation

Based on Sezi's requirements and users' preferences, we visualized a hierarchical diagram of a website that shows how pages are prioritized, linked, and labeled with the sitemap. This allowed us to plan usability of the website. With the sitemap, we also created wireframes that served as a blueprint for the entire project, laying the foundation for the visual design, user interface, and user experience design.

Sitemap · Wireframes
Sitemap

The sitemap provided us with a comprehensive overview, enabling us to streamline the website by eliminating unnecessary pages and prioritizing the essential ones.

Wireframes

By building wireframes, we were able to establish a clear and solid foundation for the website's design. This allowed us to ensure that the website's visual design matched its information architecture, resulting in an intuitive and clean user interface.

04

Design

The chosen design for Sezi's website incorporates his style keywords of fresh, funky, young, fun, and creative while also maintaining a professional appearance.

Photography of the stylists’ work will remain of primary importance on the website, so the design will be lively without being overpowering.

Fun colours have been chosen to be used throughout the website to set Sezi’s website apart from the rest. They will be used to colour- code certain elements of the website: bookings, online store, and portfolios.

Simple sans-serif fonts were chosen for readability and contrast with the lighter background, while visual elements and direct pictures of the salon's work and products support the overall design.

Styleguide

05

Validation (testings)

After designing wireframes and creating a style guide, we conducted user testings with our target audience to understand exactly which parts of the design frustrate people and help generate more intuitive user interactions.

Expectancy Testing & Performance Testing
User Testing

We conducted a usability test through Discord voice channels and screen-sharing in order to gain insight into user performance and their needs.

We introduced our mockup to the participants. Our main focus was expectancy testing - we paid close attention to assumptions concerning how to navigate the site, as well as what content the participant expected to find.

We ran participants through five different scenarios for for both our medium-fidelity and high-fidelity mockups with the intent of determining a) if they could complete the task, and b) what their click-path was to successfully achieve their task.

In the first round of testing, 80% of the scenarios were free of critical errors, while the second round achieved a 100% success rate. This allowed us to refine the design and ensure a seamless user experience.

06

Final Design (WIP, coming soon!)

High-Fidelity Prototypes

The final website satisfied Sezi and included everything he requested.

More Work