Summary
I redesigned OdeToBeauty, a beauty e-commerce platform, to balance “different” with “usable.” The redesign improved usability and helped customers discover products by skin type and concerns.
Project Impact
Task Completion Rate
100%
SUS Score
High 80s
Task Time
~2min
Key Achievement
Transformed the site from a "generic marketplace" to a "real brand" that builds trust with social visitors and converts marketing spend into sustainable revenue.
My Role
End-to-end design ownership from research through concept,
UI design, and testing.
Key Responsibilities:
Analytics & heatmap analysis
User testing and research
UI design and prototyping
Design system creation
DL
Design Lead - Me
Requirements & business alignment
D2
Designer #1
Campaign strategy & Testing
D2
Designer #2
Visual design & component creation
Tools Used: Figma, Illustrator, Google Analytics, Hotjar, and simple
moderated usability tests to drive data-informed design decisions.
Problem Framing
The Problem
The existing site felt like a generic marketplace rather than a curated beauty brand. A product experience that didn't convert social visitors.
Unclear navigation and weak hierarchy
Generic marketplace feel vs curated brand
Poor conversion of social traffic
Why It Matters
With these issues, the brand risked continued poor performance from paid campaigns.
High bounce rates from social traffic
Poor marketing ROI due to low conversion
Lack of brand differentiation in marketplace
Key Research Insights
User Clicks
Content Discoverability
Time Duration
Overall Benchmark
Supporting Data
High
bounce rates from social
Low
conversion rates
Poor
product discovery
Old Design
Approach
I combined heuristic evaluation with behavioural analytics (Hotjar) and competitive benchmarking (Soko Glam, Highfy, Vegas.pk, Blume).
Design Strategy
The strategy: keep the brand's boldness, but anchor interactions to recognisable e-commerce patterns so users never have to guess where to click.
Phase 1: Analytics & Research
Heatmap review, drop-off analysis, and moderated user sessions
Phase 2: Ideation & Testing
Trying different approaches, and clickable prototypes for validation
Phase 3: Design System
Typography, color tokens, and reusable components for consistency
Research Methods
Combined quantitative analytics with qualitative insights from lightweight user testing to identify pain points and validate design solutions quickly and confidently.
Analytics & Heatmaps
Tools:
Google Analytics + Hotjar
Focus:
Drop-off points
Moderated Testing
Sessions:
1:1 + guerrilla
Tasks:
Find & purchase
Heuristic Audit
Focus Areas:
Hierarchy & CTAs
Accessibility:
Basic compliance
Heuristic evaluation
Competitive Research
Challenges
Unexpected obstacles that appeared while user testing.
Discoverability Issues
Skin-type filters were not discoverable on the homepage.
Solution:
Created a section of Skin-type where users can find products according to their needs.
Interactions
Out-of-stock items lacked clear labelling. A user didn’t know until they click on Add to Cart.
Solution:
Items that were out-of-stock were placed at the bottom with a clear representation.
Icon and Colours Meaning
Icons were misunderstood (AM/PM mistaken for dark mode).
Solution:
We introduced icon and colour labels so the users don’t have to guess the meaning of these.
Information Display
Ingredient details were dense and off-putting to some users.
Solution:
Organised the content through visual hierarchy and tags.
Key Learnings
Fast, focused research plus analytics provides enough signal to make confident design changes without a long discovery phase. A small amount of visual polish can have outsized effects on perceived brand value and trust for social visitors.
Solution
Redesigned the homepage and product flow for clarity: emphasized discoverability by skin type, relocated and styled CTAs for stronger visibility, simplified ingredient layouts, and introduced consistent typography and color tokens across the site.
Design Principles
Visual-First
Bold, immediate visual impact for social visitors
Trust & Social Proof
Clear signals to reassure social traffic
Simplified Journey
Streamlined path from discovery to purchase
Design System
Key Features
1
Hero & Landing Pages
Bold, visual-first banner with clear CTA and product spotlight
2
Product Cards
Simplified hierarchy: image, benefit line, price, single CTA
3
Navigation & Categories
Reduced categories with clearer labels and improved linking
4
Trust & Social Proof
Shipping info, best-seller badges, and usage hints
5
Micro-copy & CTAs
"Add to bag" changed to "Add to cart", also addd the value added packages like free shipping.
Before & After
Main Section
Product Card
Side-by-Side Comparison
TEST Usability & SUS Snapshot
Moderated remote sessions (Google Meet) with 5 participants using a think-aloud protocol. We as three observers captured notes; tasks and prompts were consistent across sessions. Surveys were collected via Typeform and aggregated in Google Sheets.
100%
Task Completion
Prototype testing achieved full
completion
~2min
Average Task Time
Users complete tasks in under 2 minutes
High 80s
SUS Score
Strong perceived usability improvement
User Impact
Prototype Testing Results
Task Completion
Baseline: 27%
→
100%
Average Task Time
4.2 minutes
→
~2 minutes
SUS Score
Low scores
→
High 80s
User Feedback
"The site now feels like a real brand" and participants found product
options much faster than before.
Business Impact
Early Business Impact
Better Landing Pages
Marketing team has improved destinations for social campaigns
Reduced Friction
Clearer path from social discovery to purchase decision
Brand Perception
Site now feels like a curated beauty brand vs generic marketplace
Next Phase
Live A/B testing planned to measure real-world conversion lift and revenue impact from the new design system.
Next Steps
Planning the next phase to measure live impact and expand the design system
A/B Testing
Measure real conversion lift and revenue
impact
Component Library
Expand to product detail and checkout flows
Mobile Optimization
Continue iterating where social traffic lands