UX Design
As a UX Designer I craft solutions and ideas using a Human Centred-Design approach to dig deep.
UX Design
As a UX Designer I craft solutions and ideas using a Human Centred-Design approach to dive deep.
Clara Cherfils
Yoga | Surf | Windsurf | Kitesurf
Clara Cherfils
Clara Cherfils
Yoga | Surf | Windsurf | Kitesurf
Yoga | Surf | Windsurf | Kitesurf
Design Deliverables
These are presented on devices.
The full UI mock-ups of this project.
(In Portuguese)
You can find more in depth details on the this UX design case in this here.
The full case study presentation
Design Deliverables
These are presented on devices.
The full UI mock-ups of this project.
(In Portuguese)
You can find more in depth details on the this UX design case in this here.
The full case study presentation
Bringing people together through practise and dedication.
Bringing people together through practise and dedication.
The Problem
The Problem
Within the wellness and surfing communities, people are currently using multiple platforms to: track, observe and maintain their personal growth goals, receive professional advice, and to share their personal journey of growth.
The Objective
The Objective
To create a community-focused experience which provides access to wellness classes, tuition and information. Also, the goal is to provide these passionate people with a collection of tools in one place that will help them in their everyday practices and their way into the future.
This is a brand-new product, so an additional objective here increase brand awareness to reach out to more passionate people, and build upon the existing social presence and in-person referrals to the brand as a source of community value and education.
The Product Goal
The Product Goal
It brings together people who share a passion for the wellness space, including yoga and surfing to enable them to connect with others through community-based resources and to guide them with their self-improvement within the need to use multiple apps.
Are you viewing this on a small device?
You can find more in depth details on the this UX design case in this here.
Research Deliverables
Full case study stakeholder presentation
My Roles
UX Researcher
(two month research period)
UI/Visual Designer
Storyboarding
Wireframes
UI Mock-ups
Visual concept design
Logo design
Website UI design
Additional tools
Figma, Adobe XD, Photoshop,
Lightroom, Midjourney, Notion,
VS Code, Framer.
My Roles
UX Researcher
(two month research period)
UI/Visual Designer
Storyboarding
Wireframes
UI Mock-ups
Visual concept design
Logo design
Website UI design
Tools That Helped
Figma, Adobe XD/ Lightroom,
Midjourney, Notion,
VS Code, Framer.
My Roles
UX Researcher
(two month research period)
UI/Visual Designer
Storyboarding
Wireframes
UI Mock-ups
Visual concept design
Logo design
Website UI design
Tools That Helped
Figma, Adobe XD/ Lightroom,
Midjourney, Notion,
VS Code, Framer.
UX Research Methods
User archetypes
Online surveys (20 people)
User interviews (15 people)
Competitor analysis - UX/UI
Competitor analysis - Web analytics
Affinity mapping
Customer journey mapping
User personas
Empathy mapping
Research Deliverables
Full case study stakeholder presentation
Design Deliverables
The full UI mock-ups of this project.
(In Portuguese)
UX Research
User archetypes
Online surveys
User interviews
Competitor analysis - UX/UI
Affinity mapping
User personas
Empathy mapping
Customer journey
mapping
UX Research Methods
User archetypes
Online surveys
User interviews
Competitor analysis - UX/UI
Competitor analysis - Web analytics
Competitor analysis - Social media leverage
Affinity mapping
Customer journey mapping
User personas
Empathy mapping
Why create user archetypes first?
Why user archetypes?
The stakeholders had an idea of the ideal people that would best resonate with their product through previous experience, so creating user archetypes first helped to define the focus of user research further.
I found participates through social media groups, local activity groups and through a community of friends who shared similar interests to that of the product. Interviews and surveys were conducted to collect behavioural and attitudinal research.
Online Surveys and User Interviews:
These surveys were used to gather attitudinal research of users' preconceived attitudes and feelings toward an experiences in related to the wellness space (yoga, breathwork etc) and surfing.
I found that when interviewing people in person or online some of their opinions were slightly different.
In-Person Interview : Sharing stories of the sensory and physical experiences of being in the ocean, emphasising the feeling of connection to nature, the sound of waves, and the taste of saltwater.
Online Interview: Describing the practical challenges of accessing a beach for surfing and the anticipation of the activity itself, focusing on the excitement of catching waves and the camaraderie with fellow surfers.
Online Surveys: Even though I offered open ended questions in the surveys, most of the data collected in these areas weren't as descriptive when compared to the user interviews. But the online surveys were good to collect demographic data.
The Competitors
Who are the users?
Where are the users?
How are users referred to the competitors?
Webpage metrics: page visits, bonce rates etc..
UX/UI Competitor analysis
Value propositions, product offerings, user demographics, location, pricing, business size and social media. Ten direct and indirect competitors.
UX/ UI aspects (mobile and desktop)
Impressions of UX/UI, website interaction, user navigation, user flow, features, visual design, website content, brand identity, communication tone and accessibility were all compared (positive & negatives) to draw further insights for this product.
Who are the users?
Where are the users?
How are users referred to the competitors?
Webpage metrics: page visits, bonce rates etc..
UX/UI Competitor analysis
Value propositions, product offerings, user demographics, location, pricing, business size and social media. Ten direct and indirect competitors.
UX/ UI aspects (mobile and desktop)
Impressions of UX/UI, website interaction, user navigation, user flow, features, visual design, website content, brand identity, communication tone and accessibility were all compared (positive & negatives) to draw further insights for this product.
The Competitors
Why create archetypes?
Online Surveys and User Interviews:
These surveys were used to gather attitudinal research of users' preconceived attitudes and feelings toward an experiences in related to the wellness space (yoga, breathwork etc) and surfing.
I found that when interviewing people in person or online some of their opinions were slightly different.
In-Person Interview : Sharing stories of the sensory and physical experiences of being in the ocean, emphasising the feeling of connection to nature, the sound of waves, and the taste of saltwater.
The stakeholders had an idea of the ideal people that would best resonate with their product through previous experience but they wanted to re-scope, so creating user archetypes first helped to define the focus of user research further.
I found participates through social media groups, local activity groups and through a community of friends who shared similar interests to that of the product. Interviews and surveys were conducted to collect behavioural and attitudinal research.
Overall Research Insights
Overall Research Insights
Overall Research Insights
Overall Research Insights
Online Surveys insights
People value real time data
They want social connection
Most responses were from very frequent users (20 people in total).
Attitudinal research
Online Surveys insights
People value real time data
They want social connection
Most responses were from very frequent users (20 people in total).
Attitudinal research
Online Surveys insights
People value real time data
They want social connection
Most responses were from very frequent users.
Attitudinal research
Online Surveys insights
People value real time data
They want social connection
Most responses were from very frequent users (20 people in total).
Attitudinal research
User interviews insights
Users want to access real-time data
Information in other languages
Website performance when used on a mobile needs to be good
What are your primary reasons for using apps/ websites like this?
What features do you most value from an website/app?
What has been a difficulty when using websites/apps?
Behavioural research
User interviews insights
Users want to access real-time data
Information in other languages
Website performance when used on a mobile needs to be good
What are your primary reasons for using apps/ websites like this?
What features do you most value from an website/app?
What has been a difficulty when using websites/apps?
Behavioural research
User interviews insights
Users want to access real-time data
Information in other languages
Website performance when used on a mobile needs to be good
What are your primary reasons for using apps/ websites like this?
What features do you most value from an website/app?
What has been a difficulty when using websites/apps?
Behavioural research
User interviews insights
Users want to access real-time data
Information in other languages
Website performance when used on a mobile needs to be good
What are your primary reasons for using apps/ websites like this?
What features do you most value from an website/app?
What has been a difficulty when using websites/apps?
Behavioural research
UI Mock-ups
Mock up for 3-5 mobile devices (new and old) because of hardware influences on UI
Language translations alter typography elements of UI, also copy should also externally verified to ensure accuracy
Dark/light mode switch UI considerations
UI Mock-ups
Mock up for 3-5 mobile devices (new and old) because of hardware influences on UI
Language translations alter typography elements of UI, also copy should also externally verified to ensure accuracy
Dark/light mode switch UI considerations
UI Mock-ups
Mock up for 3-5 mobile devices (new and old) because of hardware influences on UI
Language translations alter typography elements of UI, also copy should also externally verified to ensure accuracy
Dark/light mode switch UI considerations
UI Mock-ups
Mock up for 3-5 mobile devices (new and old) because of hardware influences on UI
Language translations alter typography elements of UI, also copy should also externally verified to ensure accuracy
Dark/light mode switch UI considerations
Overall key insights
Information should be easy to find, and automated where possible
To offer a multilingual product
To centralise offerings on to one platform, as well as any third party API
Overall key insights
Information should be easy to find, and automated where possible
To offer a multilingual product
To centralise offerings on to one platform, as well as any third party API
Overall key insights
Information should be easy to find, and automated where possible
To offer a multilingual product
To centralise offerings on to one platform, as well as any third party API
Outcomes of UX/UI Design
To drive traffic from social media channels in a sales funnel Increased social media appeal
Increased conversion rate.
A catalyst for the branding and marketing strategy into the future campaigns
Outcomes of UX/UI Design
To drive traffic from social media channels in a sales funnel Increased social media appeal
Increased conversion rate.
A catalyst for the branding and marketing strategy into the future campaigns
Outcomes of UX/UI Design
To drive traffic from social media channels in a sales funnel Increased social media appeal
Increased conversion rate.
A catalyst for the branding and marketing strategy into the future campaigns
Outcomes of UX/UI Design
To drive traffic from social media channels in a sales funnel Increased social media appeal
Increased conversion rate.
A catalyst for the branding and marketing strategy into the future campaigns
Web Traffic Research
Web Traffic Research
I analysed the top direct/indirect competitors’ website traffic, SEO and other analytics.
The goal here was to establish a deeper understanding about the demographic of the competitors’ users.
Total website traffic
Competitors
Breath and Flow
Ahoy Surf House
Soul & Surf
Little Yoga Space
Channel referrals
The biggest competitors’ websites traffic were analysed to determine the total website traffic from external referrals.
Referrals from social media
The top direct/indirect competitors’ websites traffic were analysed. This helped to determine the biggest traffic funnel to their websites from social media campaigns and email marketing.
Youtube
Email / Other
Breath and Flow
Ahoy Surf House
Soul & Surf
Little Yoga Space
0
25
50
75
100
This indicated the importance of how a social presence can draw people into a sales funnel, and also how SEO can do this too.These metrics can be observed to monitor improvements in both areas.
Overall key insights
Information should be easy to find, and automated where possible
To offer a multilingual product
To centralise offerings on to one platform, as well as any third party API
Overall key insights
Information should be easy to find, and automated where possible
To offer a multilingual product
To centralise offerings on to one platform, as well as any third party API
Web Traffic Insights
Web Traffic Insights
Key demographic is aged 25-34
The biggest traffic referrals were from Youtube, Instagram and Facebook
Gender of demographic is at Male 55% / Female 45%.
Visual Designs
Visual Designs
Visual Designs
A brand new website dedicated to the wellness and surfing communities.
A brand new website dedicated to the wellness and other related communities such as surfing.
A brand new website dedicated to the wellness and surfing communities.
Design Deliverables
The full UI mock-ups of this project.
(In Portuguese)
You can find more in depth details on the this UX design case in this here.
Content for All
Design Deliverables
The full UI mock-ups of this project.
(In Portuguese)
You can find more in depth details on the this UX design case in this here.
The full case study presentation
Design Deliverables
The full UI mock-ups of this project.
(In Portuguese)
You can find more in depth details on the this UX design case in this here.
The full case study presentation
Design Deliverables
The full UI mock-ups of this project.
(In Portuguese)
You can find more in depth details on the this UX design case in this here.
The full case study presentation