Sherin George
Product Designer

SKIN SENSE

A native mobile skin and mental health progress
tracking app providing users access to specialized
professional support.

High Fidelity prototype

High Fidelity prototype

INTRODUCTION

Skin Sense is a mobile application designed as a part of my case study for the duration of my boot camp at BrainStation.

An app that addresses the mind and skin connection. Using the double diamond process, I developed an app that helps users to keep track of their personal goals and accomplishments relating to their skin and mental health without losing motivation or feeling overwhelmed.

Feel free to play around with the high-fidelity interactive prototype by clicking the button below. 👇

ROLE AND PROJECT TIMELINE

UX designer

Week 1 - 2 - Defined problem space, conducted secondary research, preliminary research, and hypothesis. Consolidated research findings to develop a user persona and visualized an experience map.

Week 3 - 5 - User stories and epics, task flow diagram, UI inspiration board, analog sketches, grayscale wireframes, and prototypes. Conducted 2 rounds of user testing based on which the prototype was modified.

Week 6 - 8 - Brand development, mobile app design, UI Library

Problem Space

Why?

The mind-body connection has been something that’s been discussed for centuries. Somewhere along the lines in Western medicine, we lost this connection, focusing instead on philosophies that treated the body as a separate entity from the mind.

What?

Stress can trigger a breakout but acne can also cause social anxiety and depression due to visible scarring. Psychodermatology is a relatively new field, leaving many without the option for integrative treatment.

Goal?

To help individuals feel empowered and confident in their own skin by providing them with the tools to communicate easily with mind and skin specialists and educate them on stress-reduction techniques.

Design Roadmap

My creative process was visualized using the double diamond process

The process involved 4 phases

Phase 1: Discover through extensive research

Phase 2: Define patterns and insights

Phase 3: Develop a solution through iteration and testing

Phase 4: Deliver a finalized design

Double diamond developed by the British Design Council in 2005

Double diamond developed by the British Design Council in 2005

Phase 1: Discover
SECONDARY RESEARCH
Case Study: Skin Sense
PRIMARY RESEARCH
Case Study: Skin Sense

Key Theme: Access to mental health support

The beauty industry is saturated and may seem intimidating and overwhelming to people battling skin issues.

But is there sufficient discussion and access to mental health support?
Studies show that a combination of mindfulness, meditation, positive thinking, social support, and cognitive behavioral therapy can have a positive impact on skin conditions and related emotional issues.

My design challenge prompted me to ask the question,

"How Might We help educate individuals for whom stress is contributing to skincare issues and vice versa about the benefits of having access to mental health support as a critical part of their skincare routine?"

Phase 2: Define
PERSONA DEVELOPMENT

Understanding and empathizing with the target users can have a great impact on design decisions. Archetypes are steeped in user behavior and provide customer behavioral insights.

Based on the user interviews, meet my user persona, Zoe representing the archetype 'The Creative'. I ensured that I referred to her throughout the product development process.

User Persona - Zoe James

User Persona - Zoe James

USER STORIES AND EPICS

User Stories

Understanding the needs of my persona, Zoe James is a key part of the Agile methodology and was visualized using 29 unique user stories.

Core Epic

‘Choose and consult with a skin and mind expert’

From my user interview findings, it was clear that a majority of the users were not happy with the one-sided course of treatment taken on by dermatologists and wanted access to a holistic approach with a clear focus on related emotional issues.

Case Study: Skin Sense

Task Flow Objective
The purpose of developing a task flow for Zoe James is to visualize a step-by-step view of how she would achieve her end goal.


Primary Task
To find and book a consultation with a psychodermatologist.

Task Flow diagram

Task Flow diagram

Phase 3 - Develop
SKETCHES AND WIREFRAMES
Exploratory analog sketches

Exploratory analog sketches

Non-linear process

The design process is never linear. While designing my wireframes, I saw myself moving away from my solution sketches for certain screens. I justified these decisions based on improved functionality and adding a personal touch to my design.

Below are the low-fidelity screens I fleshed out based on my solution sketches.

USER TESTING
Case Study: Skin Sense

Gathering and Implementing Feedback

Two rounds of usability testing were conducted with a total of 10 users. The participants were tasked with completing specific tasks while navigating through the prototype.
The results and findings from the user testing were used to prioritize and chart the course of designing a suitable variation to each highlighted issue.

Below are my re-iterated wireframes based on user testing results. Also, are 3 major changes that the app screens went through.

Major iterations based on user test results

Major iterations based on user test results

DELIVER
BRANDING

I brainstormed ideas that captured the brand's identity to highlight the feelings, emotions, and sensory reactions that I wanted to evoke in my users when they interacted with the app.

Visual Identity

Using the brand adjectives, I crafted my visual identity mood board, color palette, and typography.

ACCESSIBILITY

Skin Sense is a brand that takes accessibility as a primary point of focus and consideration. I believe that everyone no matter what their situation deserves equal access to various helpful digital resources.

Case Study: Skin Sense
WORDMARK EXPLORATION

I carved out specific time blocks to ensure that I had a clear mindset when going through with my sketches. I explored different styles of text and tried out the addition of lines to divide the two words 'Skin' and 'Sense'.

The finalized logo of the brand signifies a safe place and security for the user.

The upper and lower lines of the app icon represent two hands holding and protecting a heart.

ATOMIC DESIGN SYSTEM
Case Study: Skin Sense

I followed the atomic design methodology to compose my design elements.

Atoms - Elements that can’t be broken down further

Molecules - They are more complex and are built using several single atoms

Organisms - Built using several molecules and atoms

Templates - Outlined blueprints that serve as structures for content filling

Pages - The final stage in the atomic design framework where the templates are filled with actual content.

THE SOLUTION

Final Design

The brand colors were injected into the prototype, different interaction states of the components were considered, and it was ensured that the design was aligned within the grid layout.

After the check-ins, I could confirm that I had my final high-fidelity design.

Case Study: Skin Sense
RESPONSIVE MARKETING WEBSITE
Case Study: Skin Sense

Once my high-fidelity prototype was finalized, I focussed my attention on the marketing aspect of the Skin Sense App.

Developing a responsive marketing website that transitioned smoothly between desktop and mobile was the priority.

Please feel free to interact with the responsive desktop screens and content flow diagrams below.

MULTI-PLATFORM CHALLENGE
Case Study: Skin Sense

Further exploration

I explored the feasibility of using the app on an additional platform. Since Skin Sense has a focus on journaling and booking consultations with experts, I looked into how an Ipad experience would be for users.

I created a potential flow of a user going through with their confirmed video consultation with the expert of their choice.

FUTURE THINKING

Skin Sense looks at progressing the app to focus on creating social connections through a strong community. In the future, I hope to see individuals with related issues help and support each other and thereby promote a kinder space for affected people to grow and flourish in.

The future of Skin Sense also looks to explore convenient ways to encourage journaling habits with a focus on mental health, skincare, and reflection.

Skin positive influencers hope that by normalizing showing their “real” skin, they’ll help others feel seen, feel valued, and have the confidence to come out of the shadows, rather than hide their acne in shame and embarrassment.

KEY INSIGHTS

Non-linear design

Designing keeping a target user in mind makes the process non-linear. Countless iterations and multiple changes to incorporate user feedback led me to feel doubtful many a time on the outcome of the app.

But at the end of the process, I embraced the room that the design process leaves for imperfections and showcasing the ups and downs of taking what was an idea and developing it into an app.

Understanding design systems

Understanding how to build my own design system was key in developing and structuring an app with versatile elements that worked together.

There was a learning curve involved. But a granular level understanding of how each element of the app works essentially like building blocks that are pieced together to bring the app to life completely transformed my perception of the significance of having a strong design system in place.

60/30/10 ratio

I found working with colors both exciting and overwhelming. Understanding the fundamental 60/30/10 color ratio helped immensely to guide my color choices.

Balance is key to ensuring that the brand identity is solid and that the colors translate what the brand stands for.

"This experience and my fresh UX design mindset have forever changed the way I look at apps and digital products."
88
Iterations
60
Screens
120+
cups of matcha latte
Skin Sense is a fabricated brand that was created as an educational project