• CategoryUX/UI, Branding
  • ClassInteraction Design 1
  • DateSpring 2018

dermadiary

dermadiary is an original concept for a webapp that will allow users to to track their skincare routine and its effectiveness, in order to help find root causes of their skin concerns and improve their general skin health. Users can fill out a skin profile, log their daily skincare routine and condition, and see product recommendations from users with similar skin concerns.

Check out a clickable prototype!

Final web UI

The Problem

There are so many variables that could cause a person's skin to react one way or another – diet, weather, products, stress, hormones – and no easy way to figure out what could be contributing to skin changes.

The Solution

A webapp for tracking various metrics within the user's skincare routine in order to find correlations between lifestyle variables and skin health.

Research & Interviews

While I already had a strong vision of what I wanted dermadiary to be, I conducted individual user interviews and surveyed over 300 self-proclaimed skinthusiasts on a popular skincare forum in order to prioritise potential functionality and narrow down the scope of my project for the course of the semester.

Based on my research, I found that the main motivations for having a skincare routine were solving aging, acne, and pigmentation issues, with 80% of participants saying they were unsure of the root cause of their main skin concerns. Participants also reported not being able to track the effectiveness of products, not knowing how to track possible allergens, and not being consistent in their routines as their main frustrations within their skincare routine.

From my findings I chose to focus on two primary workflows: logging variables that may contribute to skincare health and using collected data to identify possible trends, and browsing ingredient-focused product recommendations from users with similar skin concerns.

benchmarking

I also looked into various routine logging tools to research how they presented their information and workflows.

dermadiary storyboard

Storyboard sketch

User Personas & Storyboarding

While most survey participants had the same goal of wanting to make conclusions based on logged data, not everyone had the same skin concerns and therefore may want to track different variables. I created three user personas based on the most common skin concerns cited from my survey data:

  • Jess has just switched from the birth control pill to an implant, and isn't sure if her sudden breakouts are due to hormones or the change in weather.
  • Linda purchased a new luxury product and wants to monitor whether or not it improves the appearance of fine lines and wrinkles.
  • James grew up struggling with eczema and wants to find out what his triggers may be.

The process of storyboarding was extremely valuable in forcing me to concentrate on the UX of my chosen workflows and not get distracted by other potential features, as well as go through the multiple flows of what different users may want to track.

Initial Wireframes & Testing

I started to sketch out some initial wireframes for the landing page and dashboard while trying to keep the wide variety of use cases in mind.

Inspired by some of the UIs I saw during the benchmarking phase, I decided I wanted to create a customisable dashboard layout so that users are able to see an overview of their data and trends at a glance. The dashboard also serves as a central location to access other functionalities of the app.

Each week we tested paper and digital prototypes with our classmates, allowing us to continuously iterate based on user feedback. It was easy to get caught up in the visual aspects of UI design, so frequent testing helped to keep the UX as a priority and keep myself focused on the process.

Initial web wireframes

Wireframe design progression

Visual Identity

As I continued to refine the overall information architecture and UX through user testing, the visual design and identity became a more prominent aspect of the project. It was both overwhelming and rewarding to be working on a solo project with so many simultaneously moving parts.

Much like the wireframes, all aspects of the brand identity started with quick sketches – initially prioritising quantity over quality in order to try and explore all avenues. I chose to use a wordmark as opposed to creating a graphic logo as I wanted to present a no-frills persona within the brand.

I eventually decided on a monochromatic purple colour palette, as I wanted to stray away from being overly stark and clinical. Purple is a gender neutral colour that still felt modern and approachable.

Identity mark initial sketches and development

Current primary and alternate identity marks