Flo Cutters

Project:
Flo Cutters
Duration:
Spring 2021 (Feb - April)

Project overview

Description

Flo cutters is one integrated mobile application solution that enables users to book their preferred salon and stylist for their required salon services.

Users can choose their favorite salon upon the ratings and reviews. they  can book anytime anywhere and pay instantly on their preferred date and time

My role

Design process

Empathize

Conduct user interview
Identify user pain points
Create empathy map

Define

Create personas
Craft user stories
Build user journey maps
Create problem statements

Ideate

Outline User flows,
Information Architecture
Create storyboards

Prototype

Create wireframe
Build UI style guide
Create mockup
Create lo-fi & hi-fi Prototype

Test

Conduct a usability study

Qualitative research

Interview Goals

I want to under stand common challenges people face trying to manage a busy schedule and meal planning.I want to identify frustrations people experience during the process of ordering from a restaurant.

Interview Questions
  • How often do you visit a Salon?
  • Do you always visit nearby Salon?
  • How do you book your salon?
  • What services do you use in a salon?
  • What was very important to select your salon?
  • What factor would you consider in switching to another salon?
Target participant characteristics
  • Ages 12-52
  • Lives in Hanoi
  • People who get haircuts at least once a week
  • Include participants of different genders
  • Include participants with different abilities
User Research: Pain points
  • People waste lots of their time and effort to find a good salon and stylist.
  • People don’t know how many salons are in that area or location have the availability on that particular time and how many stylists are working on that salon?
  • People always not aware of the best offers and packages according to their need.
User Research: Summary

With the help of qualitative research, i got some important information.

  • User visit frequently on their preferred salons.
  • User can wait if their stylist is busy with another customer.
  • Mostly take services from the same stylist.
  • People mostly search salon nearby their home.
  • Don’t know about Salon details.
  • Physically exploring nearby areas for salon take alot of time, difficult for auser with busy schedule.
  • User doesn’t know about all salon offers and packages.

Empathy map

An emphathy map is an easily understood chart that explains everything designers have learned about a type of user. An empathy map consists of four shapes, which show what the user says, does, thinks, and feels. The word user goes in the middle.

SAYS
  • How long do I have to wait?
  • What’s the price?
  • My stylist will be available or not?
  • What time it will open the salon?
THINKS
  • What time it will open the salon?
  • How many stylists will be there?
  • How many customers will be there.
  • I think i have to wait for long time today!
DOES
  • I’ll come some other time.
  • Has difficulty interacting with interface of apps.
  • Do a undercut with a light shade please.
FEELS
  • Feel annoyed about the waiting time.
  • Dissatisfied with scrolling to find phone number.
  • Feeling bored.
  • I feel like he is not a good stylist

Personas

Persona are fictional users whose goals and characteristics repersent the needs of a larger group of users. Personas can help us identify patterns of behavior in users. These patterns might point to a common pain point that a group of users experiences.

User journey map

A journey map is just what it souds like, an illustration of what the user goes through to achieve their goals. A user journey is the series of experiences a user has as they achieve a specific goal. User journey built off the personas and stories that have been already created.

User flow

User flow is a type of diagram used in UX design, It represents the workflow or process form users perspective. In the basic form, User Flow represents the task in form of picture with blocks connected by arrows. Diagram does not have to belinear, just like taks in the application. It may have alternative paths, loops, etc.

Information Architecture

Information Architecture (IA) is a process that forcuses on the structure and organazation of content within a digital product.
The goal of information architecture is to organize content in a way that makes it easy for users to learn, adapt to, and navigate a product quickly and with mininal difficulty

Paper Wireframe

A wireframe is a two-dimensional illustration of a page's interface that specifically focuses on space allocation and prioritization of content, functionalities available, and intended behaviors. For these reasons, wireframes typically do not include any styling, color, or graphics.

First, I sketch the low-wireframes on papers and then, I transition from paper to digital wireframes.

Digital wireframe

After i've explored multiple ideas for wireframes on paper, and i understand which wireframe elements will provide the best user experience, it's time to bring my paper wireframe to life digitally. While drawing wireframes on paper is fast and inexpensive, things get a little trickier when i move to digital wireframes.

Design token

Design tokens represent the small, repeated design decisions that make up a design system's visual style. Tokens replace static values, such as hex codes for color, with self-explanatory names.

Example of a reference token and its associated color value.

Style guide

To ensure the consistency between design and coding, i have to build a basic guideline for the dev team,
providing all necessary specs for UI coding.

Digital mockup

Based on the digital wireframe high fidelity mockup for the most important screens has been designed. All screens have been connected into high fidelity prototype

Let’s connect!

Thank you for your time reviewing my work! If you’d like to
see more or get in touch, my contact information is provided below.

Email: