Double diamond developed by the British Design Council in 2005
Role - UX/UI designer
Week 1 - 2 - Defined problem space, and 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
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.
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.
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.
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.
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
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?"
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.
Understanding the needs of my persona, Zoe James is a key part of the Agile methodology and was visualized using 29 unique user stories.
‘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.
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.
To find and book a consultation with a psychodermatologist.
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.
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 wire frames based on user testing results. Also, are 3 major changes that the app screens went through.
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.
Using the brand adjectives, I crafted my visual identity mood board, color palette, and typography.
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.
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.
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 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.
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.
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.
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.
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.
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.