lgf.design

Case Study — UX/UI Design

Routini Maker
App

A customized skincare routine app for all genders, with AI progress tracking and dermatologist-backed education.

UX Research Mobile App Design
Scroll
Routini Maker app mockup on iPhone

Project Overview

3 wks
Duration
8
User Interviews

01 — Objective

Skincare for Everyone

Background

Discover customized morning and evening routines for your face, body, and beard. Finally, a skincare routine that is easy to follow and realistic to maintain.

The goal was to create an inviting and simple skincare app that allows users to adopt and maintain a customized routine, compare their day-to-day progress, and learn from dermatologists, influencers, and reputable publications.

This was a solo concept project completed in 3 weeks at 40 hours per week, covering all phases from research through final prototype in Figma.

Full App Flow

02 — Research

Competitive and Indirect

  • Analyzed the top skincare routine apps to map common features, gaps, and UI conventions
  • Competitor apps track day-to-day progress but none combine routine creation, tracking, and education in one place
  • Researched indirect markets: Weight Watchers for calendar-based progress tracking, The Magic 5 for AI facial recognition UX
  • Conducted user interviews with 8 participants, ages 25 to 40 (4 men, 4 women)
  • Identified that competitor apps skew feminine in UI, creating an opportunity for gender-neutral design

Most competitor apps have a narrow focus, covering only facial skincare. Routini Maker broadens this to include facial, body, and facial hair routines, making it relevant across genders. The gender-neutral blue and orange palette was a deliberate response to the pink and purple palette conventions dominating the category.

Routine Feels Complicated

All 8 interview participants described skincare as time-consuming and somewhat complicated. A clear and structured routine builder was the most requested feature.

Progress Motivates

All participants agreed that seeing before-and-after progress photos would inspire them to maintain a routine. Men specifically wanted options for body and facial hair tracking, not just face.

Education Builds Trust

Participants were more motivated when they understood the health reasons behind a routine, not just the appearance benefits. Dermatologist-backed content and skin cancer education were highly valued.

Competitive Analysis Skincare app competitive analysis chart
Indirect Market — Weight Watchers Weight Watchers app calendar screen that inspired Routini's progress tracking
Indirect Market — The Magic 5 The Magic 5 app facial recognition screens that inspired Routini's AI selfie scanning

03 — Define

Persona, Flow and Sitemap

Interview findings pointed to a clear user type: someone who wants to build a skincare habit but finds existing options either too complicated, too gendered, or too narrow in scope. I created a male user persona to center an underserved perspective and drive structural decisions.

Key insights

  • Users want routine customization that covers face, body, and facial hair, not just face
  • A daily selfie-based calendar for progress comparison was the most motivating concept tested
  • Icons and language must feel gender-neutral, avoiding symbols or colors associated with one gender
User Persona Routini Maker male user persona
User Flow Routini Maker male user flow diagram
Sitemap Routini Maker app sitemap

04 — Design

Wireframes to Final Flows

UI Kit

The color palette stays away from typical female colors (pinks) and male colors (greens), landing on blue and orange. Icons were chosen for familiarity, mirroring patterns users already know from iOS and Facebook. Sun and moon icons appear throughout to indicate morning and evening routines.

Final Prototype

The final design covers 6 flows: Intro Survey (including AI selfie scanning), Routine, Progress, Products, Profile, and Learn. A high-fidelity Figma prototype was usability tested with 5 participants (3 male, 2 female).

Survey Wireframes v1 Routini Maker initial hand-drawn wireframes of the intro survey flow
All Wireframes Routini Maker digitized wireframes for all app flows
UI Kit Routini Maker UI kit with color palette, typography, and icons

Final App Flows

Intro Survey Flow
Progress Flow
Routine Scroll
Products Scroll
Profile Scroll
Learn Scroll

05 — Conclusion

Simple Yet Effective

All 5 usability test participants responded enthusiastically to the app. They praised the icons and color palette as simple, neutral, and trendy. Every participant said they would actually use Routini Maker if it were a real app.

The gender-neutral aesthetic, the Learn page's educational approach, and the ability to track face, body, and facial hair were called out specifically as differentiators from existing apps. All participants believed the app would motivate them to start and maintain a routine because of its positive health and appearance framing.

Next steps: build out additional flows for evening routines, body, and facial hair, then conduct another round of usability testing to validate and iterate.