#derma
essentials
MFine Derma Essentials
Building a trust-first skincare experience across brand, product and digital.
MFine Derma Essentials was an AI-powered skincare experience designed to connect personalized skin assessment, dermatologist guidance and product discovery.
I worked across brand identity, visual design and product experience, translating user insights and business requirements into a cohesive visual system and iterating the experience through real-world performance data.
PROJECT DURATION
30 days
ROLE
SCOPE
COLLABORATION
Visual &
UI Designer
Brand Identity, Visual
& UI Design, Marketing
Brand, Marketing, Product,
UX and Data Analytics
PROBLEM
Skincare is crowded,
confusing, and difficult to trust.
Consumers were faced with an overwhelming number of products, unclear ingredient information, and claims that didn't always feel credible. At the same time, generic skincare solutions struggled to address individual concerns.
GOAL
Create a skincare experience
that makes personalized recommendations easier to
understand — and easier to trust.
-
Help users understand their skin and choose relevant products
-
Make ingredients, claims, and recommendations more transparent
-
Connect AI-powered assessment with dermatological expertise
-
Guide users from discovery to a personalized skincare routine
IMPACT
• 4.2% peak CTR
(vs ~1.65% benchmark)
• 1.2M+ users reached through AI assessment
• 2.5x benchmark performance
vs. typical Indian healthcare CTR
Use the sections below to navigate through the case study quickly.
Design in Context.
Research & Insights.
Understanding the problem.
Skincare users weren't looking for more choices. They were looking for more confidence in the choices they were making.
We combined market and competitive research with interviews conducted by the Brand and Marketing team across 20 users, covering skincare concerns, purchase behaviour and attitudes towards dermatological consultation.
Four themes emerged.
Too much choice creates uncertainty
72%
of users ignored products with confusing ingredient lists. Users also questioned claims such as “dermatologist-tested” when they couldn't see evidence behind them.
Design Implication: Information needed to be
clearer, more transparent and easier to evaluate.
61%
actively looked for solutions
for acne, dryness and pigmentation.
Personalization needs to feel meaningful
68%
disliked
one-size-fits-all products.
Design Implication: Recommendations needed to
feel relevant to the individual — not mass-produced.
32%
questioned whether online dermatologists were legitimate.
Expertise builds trust
87%
said they would
consult a dermatologist
before buying.
Design Implication: The experience needed to
make expert guidance feel credible and accessible.
For users in smaller cities, virtual consultations
were particularly appealing
93%
reported better skin
within 4–6 weeks when
following guided routines.
Users need to see progress
54%
quit routines
when results didn't appear quickly.
Design Implication: The experience needed to give
users reasons to keep going — not just reasons to start.
Users also expressed a desire for before/after tracking
and visible progress.
What this meant for the experience?
The research pointed towards six core user needs:
Clear, jargon-free information
Make products and ingredients
easier to understand.
Personalized recommendations
Help users find solutions
relevant to their concerns.
Expert guidance
Connect personalized assessment
with credible dermatological expertise.
Progress visibility
Help users understand
whether their routine is working.
Reliable virtual consultation
Make expert access feel
convenient and trustworthy.
Simplified routines
Reduce the guesswork
around what to use and when.
Competitive Landscape.
We looked at Minimalist, Traya and Skinkraft to understand how existing skincare brands approached personalization,
science-backed products, consultation and trust. The analysis revealed different strengths across the category:
Minimalist:
Strong science-led positioning and ingredient transparency, but limited personalization and consultation support.
Skinkraft:
Uses AI-driven customization, but has less emphasis on transparency and expert consultation.
Traya:
Combines Ayurveda and science, but is more
focused on hair care with limited skin personalization.
THE OPPORTUNITY
MFine could bring personalized assessment, dermatological expertise and product discovery
together in one experience — while making the journey feel clear, credible and approachable.
FROM INSIGHT TO EXPERIENCE
These insights gave us a clear direction:
reduce uncertainty, make personalization visible, build trust around expertise, and
help users understand what to do next. The next step was translating those principles
into an experience that connected assessment, consultation and product discovery.
Designing the experience.
The research pointed to a need for a simpler path from understanding a skin concern to finding the right solution. We structured the experience around three connected parts: assessment, expert guidance and product discovery.
UNDERSTAND
Help users
understand their
skin concerns and
skincare needs.
ASSESS
Use AI-powered
skin analysis to build
a more personalized understanding of the user.
GUIDE
Connect users with dermatologist-led recommendations
and consultation.
DISCOVER
Help users explore
relevant products
and understand how
they fit into their routine.
The flow was designed to progressively reduce uncertainty —
starting with the user's concern and moving towards personalized guidance and relevant product discovery.
With the experience framework defined, the next challenge was
making it feel credible, approachable and distinctly MFine.
Defining the visual direction.
The experience needed to feel credible enough to inspire trust, but approachable enough to make skincare feel personal.
I established a visual direction, tone and core brand characteristics for Derma Essentials, translating them into a system that could work across product and marketing touch-points that balanced clinical credibility with a softer, more human skincare aesthetic, while extending
the existing MFine brand DNA into a distinct expression for Derma Essentials.
BRAND PERSONALITY
Modern, Transparent, Science-backed, Personal.
/
Modern
Contemporary,
digital-first
and clean.
/
Science-backed
Grounded in clinical credibility
rather than exaggerated claims.
/
Transparent
Clear communication around products, ingredients and recommendations.
/
Personal
Relevant, human and
tailored to individual needs.
VISUAL IDENTITY
The visual system translated these characteristics into a language that felt clinical without becoming cold, and personal without becoming overly feminine.
LOGO
The soft blue indicates soothing, clinical calmness and MFine’s core identity.
The divider line shows a transition from MFine (platform) to product range (Derma Essentials)
Rendered in uppercase geometric sans-serif
for authority, focus and high readability
The identity retained the recognisable MFine DNA while introducing
a more product-specific expression for Derma Essentials.
COLOR
A clinical palette with a warmer, more human edge.
The colour system balanced clinical blues and neutrals with warmer accents, helping the experience feel credible while remaining approachable.
#2297BE
CLINICAL
CALM
#FFEACE
Primary Color
BLOOM
Neutral
#F2962F
#9CD6EC
#38434E
NECTAR
Accent Color
CLINICAL
INK
SKIN
#9CD6EC
MIST
Secondary Colors
Usage:
PRIMARY: Call-to-action buttons, key navigation highlights, headings
SECONDARY: Backgrounds, cards, and section dividers for warm contrast.
ACCENT: Promo tags, interactive hover states, icons, highlights.
NEUTRAL: Primary text, borders, footer, secondary navigation.
Supporting: Infographics, tooltips, product info, illustration tints.
IMAGERY
Real skin. Real people. Real expertise.
Imagery focused on real skin textures, dermatologists, ingredient textures and natural extracts — moving away from overly polished skincare imagery and towards a more credible, human visual language.
TYPOGRAPHY & DESIGN SYSTEM
Extending MFine DNA.
I extended the existing MFine visual language into a product-specific system for Derma Essentials, maintaining consistency with the parent brand while giving the skincare experience its own character.
ICONOGRAPHY
Rounded forms and consistent line weights create a softer, approachable interface language —perfect for a healthcare product designed to comfort users.
Specialities Icon (36px)
General Icon (24px)
UI COMPONENTS
A reusable component system keeps interactions visually consistent across the experience.
Buttons
Tabs and Form Fields
Designing, measuring and iterating the experience.
From a new skincare experience to a continuously evolving one.
With the visual language established, I translated the system into the product experience — from skin assessment and consultation to product discovery. The interface was designed to make complex skincare information easier to understand while keeping the journey focused on one question: what should I do next?
The first version established Derma Essentials as a clean,
credible and clinically oriented skincare experience, with dermatologist consultation as the primary entry point.
We saw a CTR (Click-through-rate) of almost 9% on
our homepage discovery banner which is quite high
for healthcare apps.
VERSION 01 - LAUNCH
What we learned:
Engagement declined over time, while feedback suggested the experience was too consultation-led and skewed towards a female audience.
Also, we felt the banner only conveyed a dermatologist consultation and does not talk much about the brand and its products.
VERSION 02 - EXPANDING THE PROPOSITION
We broadened the journey to bring together skin assessment, dermatologist consultation, skincare education and product discovery.
A combination of all the services we were trying to promote.
Also, we decided to make the color theme more clinical, clean and less feminine and decided on changing our secondary and accent color.
#2297BE
#F2962F
#38434E
CLINICAL
CALM
#FFEACE
#9CD6EC
NECTAR
CLINICAL
INK
BARE
MIST
Primary Color
Secondary Colors
Accent Color
Neutral
Now, the theme of the homepage banner focused
more on displaying products and giving more real estate to the banner on our homepage.
What the data told us
The biggest opportunity wasn't simply getting users into
the experience. The larger challenge was moving them
from interest to consultation and ultimately purchase.
How many users Started Skin Anslysis
and completed it from (Jan 16 to Mar 14)
How many users directly searching and order the product
How many users takes SA and finished the consultation and post pd order
-
Most of the users dropped off when they saw the result page
-
Out of 11K+ users only 1708 users clicked on consult button
-
Out of this 1708, only 19 completed the flow and purchased the products
Problem assumption:
-
Trust matter may be missed in for consultation button
-
In the stage of Case Forward to Prescription, half of the users dropped off, maybe the consultation with doctor flow need to be changed or enhanced
-
We can improve the PDP (product listing page) page more informative and interactive.
-
The CLP (category listing page) could be more expressive with display of products and inclusion of human faces.
VERSION 03 - MAKING PRODUCT DISCOVERY MORE TANGIBLE
CATEGORY LISTING PAGE
PRODUCT DESCRIPTION PAGE
What we learned:
While engagement with the Skin Test and Dermatologist Consultation remained strong and users were converting to product purchases, overall CTRs and conversions did not return to the levels seen at launch.
At the same time, our social content, performance ads and reels were generating stronger engagement and organic leads. This led us to extend the product’s visual language into these channels and leverage them as additional pathways for discovery and acquisition.
8,454
Skin analysis started
5,837
Completed
1,708
Consultation clicks
19
Completed consultation + purchase
The next iteration shifted focus towards product discovery, making products more visible and providing richer information to help users understand their relevance.
Extending the system.
As the product experience evolved, the same visual language was extended across social, performance marketing and product communication — creating more entry points into the Derma Essentials ecosystem.
SOCIAL CONTENT
Turning skincare education into engagement.
We combined skincare education with product communication to make the content useful before making it promotional.
The “60-Second Cleansing Rule” post reached 35K+ views and generated 61 saves.
PERFORMANCE ADVERTISING
Performance campaigns were structured around the user's skin concern first, gradually introducing the relevant product and its benefits.
Skin concern → Education → Product → Action
PRODUCT & PACKAGING
Extending the experience into the physical product.
The same visual system was carried into product packaging, maintaining consistency between the digital experience and the physical product.
Dominant white background
for a clean, clinical aesthetic.
Teal accents from the logo applied
to highlight key product information.
Typography matches the UI system, maintaining brand consistency.
/
/
/
Across product, social, performance and packaging, the system gave Derma Essentials a consistent visual language — while allowing each touchpoint to communicate in the way that best suited its context.
Impact.
TOP NAVIGATION BANNER : Placed primarily in the app's primary navigation zone, this banner was designed to capture attention and direct users into personalized skincare journeys.
The banner maintained steady impressions (~6K/week) and
delivered CTR between 2.3% and 3.5%, performing well above
the industry benchmark of ~1.5% for healthcare display ads.
Views
~6.2K per week
High visibility with
strong awareness
Clicks
~150 per week
Users actively explored
skincare offerings
CTR Range
2.3% - 3.5%
Visuals and
positioning resonated
DISCOVERY BANNER
Views
~6.1K per week
Campaigns
achieved
high visibility
Clicks
~195 per week
Higher
interaction than
static creatives
CTR Range
3.0% - 4.2%
Up to 2.5× higher
engagement than the
Indian healthcare average.
The banner achieved a CTR peak of 4.2%, nearly 2.5× higher than typical
Indian healthcare benchmarks (~1.65%) as per Meta Healthcare India,
validating the effectiveness of contextual, visually-led messaging.
SOCIAL MEDIA
Views
4.7M+
Reach
5.5M - 6M+
Interactions
24,000
Avg. Engagement Rate
0.4% - 0.5%
Profile Activity
43,000
What the numbers showed
Performance wasn't defined by a single metric. The data helped us understand where users engaged, where they dropped off, and which communication formats created stronger opportunities for discovery.
While product engagement remained meaningful, social and performance content created additional acquisition opportunities — reinforcing the value of treating the visual system as something that could work across the entire customer journey.
Designing with AI
AI became part of my design workflow, helping me explore visual directions and iterate on content more efficiently.
-
Adobe Firefly & Photoshop Generative Fill: Used for product mockups, packaging explorations and background variations.
-
ChatGPT and Deepseek: Used to explore microcopy, button labels and section titles.
Accessibility & Inclusivity.
Accessibility was considered throughout the interface, from contrast and touch targets to imagery and typography.
-
WCAG AA contrast considerations
-
48 × 48dp touch targets
-
Diverse skin tones across imagery
-
Readable typography
-
Considerations for neurodiverse and dyslexic users.
Final Reflection.
The initiative ended in 2024 as part of broader business realignments.
But the project reinforced an important principle in my design practice: trust has to be designed into the experience, not simply communicated through aesthetics.
Working across brand, product and marketing taught me to think beyond individual touchpoints and build systems that could adapt across contexts. More importantly, using real user behaviour to guide iterations reinforced the value of designing, measuring and refining rather than treating the first solution as the final one.
