VIPASHA PATHAK

UX DESIGN

ABOUT

RESUME

UX DESIGN

ABOUT

RESUME

VIPASHA PATHAK

Hair Food - eCommerce platform design

Hair Food - eCommerce platform design

HairFood is a brand selling hair care products & it aims to boost their

customers loyalty and product sales by streamlining their online presence. The goal of this project was to analyze the existing website identify problem areas and customer pain points, integrate eCommerce features allowing online purchase. Along with this also developing a novel feature focussing on wholesome personalized customer experience was developed to retain customer loyalty.


What I Did?:

Secondary Research • User Interviews & Surveys • Diary Studies,

Journey Map, User Personas, 2X2 Matrix • Site Map • Wireframes

Style Guide • High fidelity designs and prototypes for web and mobile •

User testing plan, execution & evaluation

HairFood is a brand selling hair care products & it aims to boost their customers loyalty and product sales by streamlining their online presence. The goal of this project was to analyze the existing website identify problem areas and customer pain points, integrate eCommerce features allowing online purchase. Along with this also developing a novel feature focussing on wholesome personalized customer experience was developed to retain customer loyalty.

UX Designer | Academic Project

TOOLS

Figma, Figjam, Miro, Baymard,

Dovetail, Sketch, Photoshop

DURATION

8 weeks

ROLE

What I Did?:

Secondary Research • User Interviews & Surveys • Diary Studies, Journey Map, User Personas, 2X2 Matrix • Site Map • Wireframes • Style Guide • High fidelity designs and prototypes for web and mobile • User testing plan, execution & evaluation

Problem

Statement

The challenge at hand is that 93.2% of participants prefer online purchases for familiar products and 58% find it challenging to maintain consistent hair care routines and stick with one brand.

The challenge at hand is that 93.2% of participants prefer online purchases for familiar products and 58% find it challenging to maintain consistent hair care routines

and stick with one brand.

How might we offer Hair Food customers a convenient and secure online shopping experience while simultaneously encouraging consistent hair care routines and enabling them to track their hair health through the use of Hair Food products?

How might we encourage users to track their calorie intake to improve their food habits, enhance physical health, and achieve their desired weight goals.

The solution & Impact

A.) Revamping Hair Food's website with integrated eCommerce functionality to enable seamless online purchases.


B.) Developing a Hair Food mobile app empowering customers to track hair health, build personalized routines, and share stories within a supportive community.

Impact: By conducting a heuristic evaluation, we significantly enhanced the website's e-commerce score, elevating it from -3 to an impressive 82. Additionally our redesign incorporates the option to download the new mobile app with its personalized features, enhancing the overall user experience.

Design Outcomes

Design Outcomes

VIEW PROTOTYPE

• Aid customers in online purchases.

• Provide 24/7 access to diverse products at one place.

• Ensure secure transactions.

• Enhance brand visibility by giving    

customers personalized, cost-effective shopping  experience.

• Aid customers in online purchases.

• Provide 24/7 access to diverse products

at one place.

• Ensure secure transactions.

• Enhance brand visibility by giving    

customers personalized, cost-effective shopping  experience.

  1. Built an eCommerce Platform

  1. Built an eCommerce Platform

B. Hair Health Tracker - Mobile App

B. Hair Health Tracker - Mobile App

• Aid customers in online purchases.

• Provide 24/7 access to diverse products at one place.

• Ensure secure transactions.

• Enhance brand visibility by giving    

  customers personalized, cost-effective shopping experience.

VIEW PROTOTYPE

C. Integrating SaaS solution

C. Integrating SaaS solution

• Aid customers in online purchases.

• Provide 24/7 access to diverse products at one place.

• Ensure secure transactions.

• Enhance brand visibility by giving    

  customers personalized, cost-effective shopping experience.

• Aid customers in online purchases.

• Provide 24/7 access to diverse products at one place.

• Ensure secure transactions.

• Enhance brand visibility by giving    

customers personalized, cost-effective shopping experience.

VIEW PROTOTYPE

• Understanding

problem space

  • Defining goals

  • Finalising possible methods

  • Preparing project plan



• Understanding

problem space

  • Defining goals

  • Finalising possible methods

  • Preparing project plan



Project Development Stages



Project Development Stages



Define



Define



01



Research



Research



02



• Secondary research

  • User Interviews (15)

  • Google Survey

• Persona

  • Customer Journey Map

  • Empathy Map

  • 2X2 Matrix

  • Baymard Analysis


• Secondary research

  • User Interviews (15)

  • Google Survey

• Persona

  • Customer Journey Map

  • Empathy Map

  • 2X2 Matrix

  • Baymard Analysis


Design



Design



03



• Site Map

• User Flow

  • Wireframes

  • Style guide

  • High Fidelity UI Design

  • Prototyping

• Site Map

• User Flow

  • Wireframes

  • Style guide

  • High Fidelity UI Design

  • Prototyping

Evaluate



Evaluate



04



• Usability Testing (5)

• Usability Testing (5)

01 Define (Overview on Structured model followed)


Leveraging the Double Diamond Model framework, we navigated the project through four distinct stages: Discover, Define, Develop & Test, and Deliver. This structured approach facilitated the development of a well-defined problem statement, a focused scope, and user-centered solutions. By adhering to the framework, we effectively organized and streamlined the product development workflow.


01 Define (Overview on Structured model followed)


Leveraging the Double Diamond Model framework, we navigated the project through four distinct stages: Discover, Define, Develop & Test, and Deliver. This structured approach facilitated the development of a well-defined problem statement, a focused scope, and user-centered solutions. By adhering to the framework, we effectively organized and streamlined the product development workflow.


02 Research Process Overview


During the research phase, we tried to understand the context of the problem. Through conducting stakeholder interviews, 15 moderated user interviews and surveys, we gathered qualitative and quantitative data. The findings from the research were organized in a 2X2 matrix, which helped in defining the problem space


Finally, we synthesized all of this data into an affinity map to build following research artifacts: user personas & Empathy Map and customer journey map.


Research Synthesis​

The common concern voiced by a majority of our respondents was the difficulty in maintaining patience while waiting for noticeable changes when using products from a single brand. Additionally, staying motivated throughout their haircare journey and placing trust in a single brand posed a challenge for them.

02 Research Process Overview

During the research phase, we tried to understand the context of the problem. Through conducting stakeholder interviews, 15 moderated user interviews and surveys, we gathered qualitative and quantitative data. The findings from the research were organized in a 2X2 matrix, which helped in defining the problem space


Finally, we synthesized all of this data into an affinity map to build following research artifacts: user personas & Empathy Map and customer journey map.


Research Synthesis​

The common concern voiced by a majority of our respondents was the difficulty in maintaining patience while waiting for noticeable changes when using products from a single brand. Additionally, staying motivated throughout their haircare journey and placing trust in a single brand posed a challenge for them.

User Interviews & Survey Insights

During 15 semi-structured interviews and surveys, 4 key data insights emerged from the user research.

INTERVIEW SYNTHESIS

SURVEY SYNTHESIS

INTERVIEW SYNTHESIS

User Interviews & Survey Insights

During 15 semi-structured interviews and surveys, 4 key data insights emerged from
the user research.

Persona & Empathy Map

Persona & Empathy Map

Persona & Empathy Map

Customer Journey Map

Customer Journey Map

Customer Journey Map

2X2 Matrix

2X2 Matrix


© Designed by Vipasha Pathak

03 Design


During the primary research phase, we tried to understand the context of the problem, conducted stakeholder interviews, defined problem statements, and framed possible solution areas. Additionally, we conducted thorough secondary research to understand the brand’s history, study its competitors, and gain an understanding of the hair and beauty category.

03 Design

During the primary research phase, we tried to understand the context of the problem, conducted stakeholder interviews, defined problem statements, and framed possible solution areas. Additionally, we conducted thorough secondary research to understand the brand’s history, study its competitors, and gain an understanding of the hair and beauty category.

Site Map

Site Map

Style Guide

Style Guide

Style Guide

Wire frames

Wire frames

04 Evaluate - Usability Testing


To assess the mobile application & eCommrce prototype, I organized a moderated usability test with 8 female participants encompassing diverse age groups. This was followed by a qualitative survey where participants were prompted to articulate their thought process while undertaking the tasks.

​

Here’s a brief overview of the process:

• Developing the Usability Test Plan

• Recruiting Participants

• Conducting Usability Tests. 

• Analyse the findings and derive common patterns in the data.

• Iterate designs based on the new insights.

04 Evaluate - Usability Testing


To assess the mobile application & eCommrce prototype, I organized a moderated usability test with 8 female participants encompassing diverse age groups. This was followed by a qualitative survey where participants were prompted to articulate their thought process while undertaking the tasks.

​

Here’s a brief overview of the process:

• Developing the Usability Test Plan

• Recruiting Participants

• Conducting Usability Tests. 

• Analyse the findings and derive common patterns in the data.

• Iterate designs based on the new insights.

Received Feedback

Received Feedback

Feedback Incorporated

Feedback Incorporated

Reflections


• This project offered valuable experience using a structured framework to handle both the UX research and design aspects of the process.

• Using diverse methods like user interviews and diary studies, we were able to develop a focused understanding

of the core problem area, ensuring we didn't get sidetracked by irrelevant concerns.

•. Developing an eCommerce Website Design which is adaptable in various formats while keeping accessibility standards in mind gives an efficient approach to the solution.

•. The experience of working collaboratively emphasized the significance of cohesive teamwork, efficient project management, and leveraging each team member's unique strengths to achieve common goals.

Reflections


• This project offered valuable experience using a structured framework to handle both the UX research and design aspects of the process.

• Using diverse methods like user interviews and diary studies, we were able to develop a focused understanding of the core problem area, ensuring we didn't get sidetracked by irrelevant concerns.

•. Developing an eCommerce Website Design which is adaptable in various formats while keeping accessibility standards in mind gives an efficient approach to the solution.

•. The experience of working collaboratively emphasized the significance of cohesive teamwork, efficient project management, and leveraging each team member's unique strengths to achieve common goals.

CASE STUDIES

Cincom

Summer'24 - UX Design Internship

UX Design • UX Research • B2B Product Design •  User Testing • User Flows • Information Architecture • User Interviews •
Report Designs • Rapid Prototyping

Explore

Explore

Threadnote

Spring'23 - 3 months UX Design Internship

UX Design • Semi-Structured Interviews • User Flows • Site mapping • Wireframing • User Journey Mapping • High Fidelity Design Rapid Prototyping • User Testing & Analysis…

Nutritrack

Habit Forming Mobile App Development

UX Design • Nir Eyal's Hooked Model • Empathy Mapping • QOC Models • User Flow & Style Guide • Wire framing • UX Laws & High Fidelity UI Design • Prototyping…

Explore

Explore

CASE STUDIES