Hair + Me MVP launch
Creating user flows and designs for an MVP launch of Hair + Me, a sibling brand of Skin + Me
Introduction
Skin + Me is a personalised skincare subscription company that help customers achieve their skin goals, and are based in the UK. As the Senior Product Designer, I was responsible for translating the brand's vision into a cohesive, user-centric digital experience while keeping limitations in mind.
Company
Skin + Me
Teammates
Product Manager, Software Engineers, Stakeholders
My role
Senior Product Designer
Objectives
Help shape the website brand identity, develop the design system for the Hair + Me website, and produce MVP product mockups for desktop and mobile.
Challenges
Hair + Me was a new haircare brand entering the market, focusing on personalised hair treatment solutions. The primary challenge was to create a distinct and trustworthy digital presence that:
Established a unique brand personality that resonated with the target audience.
Dovetailed with the developments in the Skin + Me design evolution and worked with any technical constraints the developers identified.
Provided a clear, intuitive user journey for the consultation flow and purchase of the subscription for the MVP.
Included an MVP logged in experience that would be expanded and iterated upon over time.
Masstige Design System
Prior to the development of Hair + Me, the Skin + Me brand was already undergoing an evolution of its brand into a more premium brand that also worked for the masses, a portmanteau of "Mass" and "Prestige". This raised the question of if Hair + Me would be using the same systems and platform as Skin + Me. While the Tech team were investigating the different approaches, I looked into developing a unified "Masstige Design System" in Figma that would have the same neutral colours but use the brand colours as the major differentiators.
Components developed
Design token colour palette: A set of soothing, natural palette emphasising a friendly but professional tone paired with accents of the brand colours to help make the imagery and other branding stand out.
Typography: Used the same Proxima Nova body typography as Skin + Me but selected a new header font with the Creative team to use across all touchpoints of the business.
Grid and Spacing: Established a standardized 8-point grid system
Core UI Components:
Buttons: Defined different variations of the CTA along with their hover, pressed, and disabled states.
Form Elements: Designed accessible and clear input fields, checkboxes, and radio buttons for the new customer consultation flow and checkout.
Navigation: Created simple but scalable mobile and desktop navigation patterns.
MVP mockups and user Flows
New customer consultation flow
A guided consultation flow which asked both medical and marketing questions of the customer to understand their wants and needs. At the end of the flow, customers would finish the flow. Next, Hair + Me sends them their order every 4 weeks on a subscription basis. I included error states and their messages, working with the copy team throughout the consultation flow to ensure consistency in branding and tone of voice.
In the early stages of development, we used Typeform to test the flow and gather feedback internally.
Logged in customer experience
When a user is signed in, we provided customers information about their order state. We also gave them the ability to change their shipping date, their account information, and cancel their subscription. On the Account page, I made sure to include error states and a detailed breakdown of input fields, the placeholder text (if any), their field type, whether they were required or not, as well as any additional logic the developer should know at hand off.
Hair + Me Logged in area MVP
Hair + Me Logged in area Errors
Change Password feature input field breakdown
Challenges during this phase
Due to time constraints, the designs were very minimal to reduce time spent working with the Creative team to get assets for the website.
The Masstige Design Library was being developed as the Creative team were still deciding on the brand guidelines, leading to inconsistencies between the Masstige Design Library and what ended up being developed on the front end.
These constraints caused us to remove several important features for MVP that became a fast follow, such as the customer's ability to change their billing details after signing up.
Since we knew that the Skin + Me consultation flow had been optimised, we tried to keep the flow similar to ensure Hair + Me's initial launch success. We then iterated and improved upon it after launch.
Launch
When we launched Hair + Me, we only allowed a small amount of traffic to test and improve before marketing more aggressively. This worked in our favour as we were able to quickly develop features to improve the core user experience (such as the customer's ability to change their billing details after signing up). To this day, we continue to iterate on the consultation flow to optimise conversion rate and add new features to the Logged in customer experience.
Learnings
In the end, while the Skin + Me marketing has updated to the new Masstige style branding, the website has not. We decided to update the imagery to keep up with new product launches.
If I were to do this all again with the knowledge I have now, I wouldn't have a Masstige Design Library and instead would create a Hair + Me Design Library on its own. I would have communicated more with the developers when the design library had been updated and tried to push for consistency between the Design Library and the Front End so we didn't have such a long period where the designs didn't match what was in production for the first few months.
Check out some of my other projects
Hair + Me MVP launch
Creating user flows and designs for an MVP launch of Hair + Me, a sibling brand of Skin + Me
Introduction
Skin + Me is a personalised skincare subscription company that help customers achieve their skin goals, and are based in the UK. As the Senior Product Designer, I was responsible for translating the brand's vision into a cohesive, user-centric digital experience while keeping limitations in mind.
Company
Skin + Me
Teammates
Product Manager, Software Engineers, Stakeholders
My role
Senior Product Designer
Objectives
Help shape the website brand identity, develop the design system for the Hair + Me website, and produce MVP product mockups for desktop and mobile.
Challenges
Hair + Me was a new haircare brand entering the market, focusing on personalised hair treatment solutions. The primary challenge was to create a distinct and trustworthy digital presence that:
Established a unique brand personality that resonated with the target audience.
Dovetailed with the developments in the Skin + Me design evolution and worked with any technical constraints the developers identified.
Provided a clear, intuitive user journey for the consultation flow and purchase of the subscription for the MVP.
Included an MVP logged in experience that would be expanded and iterated upon over time.
Masstige Design System
Prior to the development of Hair + Me, the Skin + Me brand was already undergoing an evolution of its brand into a more premium brand that also worked for the masses, a portmanteau of "Mass" and "Prestige". This raised the question of if Hair + Me would be using the same systems and platform as Skin + Me. While the Tech team were investigating the different approaches, I looked into developing a unified "Masstige Design System" in Figma that would have the same neutral colours but use the brand colours as the major differentiators.
Components developed
Design token colour palette: A set of soothing, natural palette emphasising a friendly but professional tone paired with accents of the brand colours to help make the imagery and other branding stand out.
Typography: Used the same Proxima Nova body typography as Skin + Me but selected a new header font with the Creative team to use across all touchpoints of the business.
Grid and Spacing: Established a standardized 8-point grid system
Core UI Components:
Buttons: Defined different variations of the CTA along with their hover, pressed, and disabled states.
Form Elements: Designed accessible and clear input fields, checkboxes, and radio buttons for the new customer consultation flow and checkout.
Navigation: Created simple but scalable mobile and desktop navigation patterns.
MVP mockups and user Flows
New customer consultation flow
A guided consultation flow which asked both medical and marketing questions of the customer to understand their wants and needs. At the end of the flow, customers would finish the flow. Next, Hair + Me sends them their order every 4 weeks on a subscription basis. I included error states and their messages, working with the copy team throughout the consultation flow to ensure consistency in branding and tone of voice.
In the early stages of development, we used Typeform to test the flow and gather feedback internally.
Logged in customer experience
When a user is signed in, we provided customers information about their order state. We also gave them the ability to change their shipping date, their account information, and cancel their subscription. On the Account page, I made sure to include error states and a detailed breakdown of input fields, the placeholder text (if any), their field type, whether they were required or not, as well as any additional logic the developer should know at hand off.
Hair + Me Logged in area MVP
Hair + Me Logged in area Errors
Change Password feature input field breakdown
Challenges during this phase
Due to time constraints, the designs were very minimal to reduce time spent working with the Creative team to get assets for the website.
The Masstige Design Library was being developed as the Creative team were still deciding on the brand guidelines, leading to inconsistencies between the Masstige Design Library and what ended up being developed on the front end.
These constraints caused us to remove several important features for MVP that became a fast follow, such as the customer's ability to change their billing details after signing up.
Since we knew that the Skin + Me consultation flow had been optimised, we tried to keep the flow similar to ensure Hair + Me's initial launch success. We then iterated and improved upon it after launch.
Launch
When we launched Hair + Me, we only allowed a small amount of traffic to test and improve before marketing more aggressively. This worked in our favour as we were able to quickly develop features to improve the core user experience (such as the customer's ability to change their billing details after signing up). To this day, we continue to iterate on the consultation flow to optimise conversion rate and add new features to the Logged in customer experience.
Learnings
In the end, while the Skin + Me marketing has updated to the new Masstige style branding, the website has not. We decided to update the imagery to keep up with new product launches.
If I were to do this all again with the knowledge I have now, I wouldn't have a Masstige Design Library and instead would create a Hair + Me Design Library on its own. I would have communicated more with the developers when the design library had been updated and tried to push for consistency between the Design Library and the Front End so we didn't have such a long period where the designs didn't match what was in production for the first few months.
Check out some of my other projects
Hair + Me MVP launch
Creating user flows and designs for an MVP launch of Hair + Me, a sibling brand of Skin + Me
Introduction
Skin + Me is a personalised skincare subscription company that help customers achieve their skin goals, and are based in the UK. As the Senior Product Designer, I was responsible for translating the brand's vision into a cohesive, user-centric digital experience while keeping limitations in mind.
Company
Skin + Me
Teammates
Product Manager, Software Engineers, Stakeholders
My role
Senior Product Designer
Objectives
Help shape the website brand identity, develop the design system for the Hair + Me website, and produce MVP product mockups for desktop and mobile.
Challenges
Hair + Me was a new haircare brand entering the market, focusing on personalised hair treatment solutions. The primary challenge was to create a distinct and trustworthy digital presence that:
Established a unique brand personality that resonated with the target audience.
Dovetailed with the developments in the Skin + Me design evolution and worked with any technical constraints the developers identified.
Provided a clear, intuitive user journey for the consultation flow and purchase of the subscription for the MVP.
Included an MVP logged in experience that would be expanded and iterated upon over time.
Masstige Design System
Prior to the development of Hair + Me, the Skin + Me brand was already undergoing an evolution of its brand into a more premium brand that also worked for the masses, a portmanteau of "Mass" and "Prestige". This raised the question of if Hair + Me would be using the same systems and platform as Skin + Me. While the Tech team were investigating the different approaches, I looked into developing a unified "Masstige Design System" in Figma that would have the same neutral colours but use the brand colours as the major differentiators.
Components developed
Design token colour palette: A set of soothing, natural palette emphasising a friendly but professional tone paired with accents of the brand colours to help make the imagery and other branding stand out.
Typography: Used the same Proxima Nova body typography as Skin + Me but selected a new header font with the Creative team to use across all touchpoints of the business.
Grid and Spacing: Established a standardized 8-point grid system
Core UI Components:
Buttons: Defined different variations of the CTA along with their hover, pressed, and disabled states.
Form Elements: Designed accessible and clear input fields, checkboxes, and radio buttons for the new customer consultation flow and checkout.
Navigation: Created simple but scalable mobile and desktop navigation patterns.
MVP mockups and user Flows
New customer consultation flow
A guided consultation flow which asked both medical and marketing questions of the customer to understand their wants and needs. At the end of the flow, customers would finish the flow. Next, Hair + Me sends them their order every 4 weeks on a subscription basis. I included error states and their messages, working with the copy team throughout the consultation flow to ensure consistency in branding and tone of voice.
In the early stages of development, we used Typeform to test the flow and gather feedback internally.
Logged in customer experience
When a user is signed in, we provided customers information about their order state. We also gave them the ability to change their shipping date, their account information, and cancel their subscription. On the Account page, I made sure to include error states and a detailed breakdown of input fields, the placeholder text (if any), their field type, whether they were required or not, as well as any additional logic the developer should know at hand off.
Hair + Me Logged in area MVP
Hair + Me Logged in area Errors
Change Password feature input field breakdown
Challenges during this phase
Due to time constraints, the designs were very minimal to reduce time spent working with the Creative team to get assets for the website.
The Masstige Design Library was being developed as the Creative team were still deciding on the brand guidelines, leading to inconsistencies between the Masstige Design Library and what ended up being developed on the front end.
These constraints caused us to remove several important features for MVP that became a fast follow, such as the customer's ability to change their billing details after signing up.
Since we knew that the Skin + Me consultation flow had been optimised, we tried to keep the flow similar to ensure Hair + Me's initial launch success. We then iterated and improved upon it after launch.
Launch
When we launched Hair + Me, we only allowed a small amount of traffic to test and improve before marketing more aggressively. This worked in our favour as we were able to quickly develop features to improve the core user experience (such as the customer's ability to change their billing details after signing up). To this day, we continue to iterate on the consultation flow to optimise conversion rate and add new features to the Logged in customer experience.
Learnings
In the end, while the Skin + Me marketing has updated to the new Masstige style branding, the website has not. We decided to update the imagery to keep up with new product launches.
If I were to do this all again with the knowledge I have now, I wouldn't have a Masstige Design Library and instead would create a Hair + Me Design Library on its own. I would have communicated more with the developers when the design library had been updated and tried to push for consistency between the Design Library and the Front End so we didn't have such a long period where the designs didn't match what was in production for the first few months.