dermadiary

UX/UI DESIGN – BRANDING
Role
Design Lead
Project Overview
dermadiary is a skincare tracking app that uses AI to identify potential triggers & allergens to give users more control of their skin health. Through daily logging, dermadiary can highlight emerging triggers and trends, simplifying identifying culprits behind skin reactions and assessing the effectiveness of skincare products. 

dermadiary is a passion project born from my own personal experience of struggling to identify the causes behind the sudden onset skin issues. While development has not yet commenced, I aspire to pursue this project in the foreseeable future.

problem

The initial idea for dermadiary stemmed from my personal experience with suddenly developing acne in my 20’s, with no obvious cause and therefore no obvious solution. But there lacked an elegant and intuitive digital tracking solution.
  • No intuitive digital solution to track multi-step skincare routines – I used to manually track and parse data on a spreadsheet
  • No systematic approach to monitor product effectiveness
  • Learning curve to understanding the role of individual ingredients within skincare products

Goal

  • Create a user-friendly platform to help individuals track and optimize their skincare routines
  • Identify triggers and allergens through AI-driven analysis
  • Provide personalised product recommendations based on individual skin concerns with an ingredient-first focus
  • Foster a sense of community by allowing users to share their experiences, insights, and reviews

Discovery & ideation

To understand the needs and frustrations of the target audience, I conducted user interviews and surveys involving over 300 self-proclaimed "skinthusiasts." The primary findings revealed:
  • 94% of participants would use a dedicated skincare tracking app
  • Primary goals for having a skincare routine were to combat aging, acne, and pigmentation issues
  • 80% of participants were unsure about the root causes of their primary skin concerns
  • Users struggled with tracking the effectiveness of products, monitoring allergens, and maintaining consistency in their routine
From my findings I chose to focus on two primary workflows: logging variables that may contribute to skincare health, and browsing ingredient-focused product recommendations from users with similar skin concerns.
High-level product overview

Prototyping & Wireframing

I sketched out variations of initial wireframes for the primary screens, before conducting brief usability testing with paper prototypes to gather feedback and refine the user experience. Frequent testing emphasised the importance of establishing the UX flows before diving into high fidelity visual UI design.

Initial sketches of primary flow

Low-fi wireframes

Visual design & Branding

I aimed to create a welcoming, contemporary, and gender-neutral aesthetic for dermadiary. This vision led me to select violet as the primary color, complemented by vibrant reds and oranges as secondary hues. In departing from the conventional blue and white color schemes often associated with medical interfaces, I wanted to convey an inclusive atmosphere within the app's design.

Colour palette and font stack

Final colour scheme

next steps

My ambition is to continue pursuing and advancing dermadiary in the future. My next steps would include:

  • Further development of remaining user flows and building MVP
  • More comprehensive usability testing – identify specific areas that require improvement, refine the app's functionality, and elevate the overall user experience
  • Accessibility assessment – ensuring the app aligns with WCAG requirements, guaranteeing inclusivity for all users