FaceGenius

— Product Design

FaceGenius is an innovation by FitSkin that gives customers a detailed skin analysis and a complete personalized skincare regimen right to the doorstep.

The Offering

The subscription comes with the SkinScanner, a tool that lets you take 30x magnified images with your smartphone camera, just like a dermascope.

Advanced algorithms then analyze lines, pores, moisture and oil.

Based on the analysis, in-house dermatologists put together a regimen of a cleanser, serum and moisturizer from 50+ partner brands.

pic

Images courtesy of FaceGenius by FitSkin

My Role

I was trusted as sole designer to spearhead the design of the mobile app and website. I worked closely with founder and CEO Sergio, and with a talented distributed dev team of 4 (Justinas, Justinas, Dan and Maria), from wireframing to QA.

Branding and packaging was created by Lyndsay at The Cult Creatives.

Design Process

We set out to design an app that primarily would:

— Onboard users with a skin questionnaire
— Guide through the scanning of the forehead, cheek and eye area
— Present scan results and analyzed images
— Display regimen details and serum rotation schedule

I started with mapping out the happy path (and some detours).

pic

Service Blueprint

pic

The sign in flow

pic

The onboarding flow for new users. The user completes a skin questionnaire, pairs the scanner via Bluetooth and then is guided through scanner alignment and color calibration. The focused section depicts the pairing of the scanner.

pic

The scan flow where the user scans the forehead, chin, eye area and takes an optional selfie. First time users are then asked to allow notifications (to get scan reminders) and to share location (to get weather data).

pic

The overall information architecture of the dashboard experience. The key elements to include was a dashboard summary, scan results and regimen details.

Rapid wireframing (in Sketch) and prototyping (in InVision) followed by testing (internally) the various user flows.

pic

A selection of early wires

The goal with the visual UI was to resonate with the brand pillars:

Trustworthy|Scientific|Dermatology|Convenience|Skin Health

I ran a quant test to gauge the perception of the drafted UI of the dashboard in three color variations. Variation #2 was viewed most favorably with #3 as a close runner-up. We opted for variation #3 for its vibrant orange hue to stand out in the skincare space and to jam with the holographic packaging design.

pic

It’s a Wrap!

After a few months of work, the app was successfully released to the AppStore.

pic

The 3 parent screens: A dashboard, the scan results and the regimen details

pic

A selection of screens throughout the app

Landing Page

We also needed a landing page to promote the offering.

pic

Interface Library

As the work progressed, I assembled a component library to keep things organized.

pic

Ending Words

FaceGenius launched its offering in early 2020 and was received well by press and reviewers.

We later added scan history and a side-by-side image comparison, and a flow to measure the performance of the regimen products.

I learned a lot through all the phases of the project, for example:

– Take a step back and consider what features and behaviors can be moved to a v2.
– Don’t get the blues when those things get pushed and never built.

I also learned a lot about skin and skincare and now consider myself an expert (at least among my friends). Did you know that the skin gets used to certain ingredients and you need to switch up your routine every once in a while?

Thanks for viewing!

Let's create something