Drag to explore. Scroll or pinch to zoom. Open Help for keyboard controls.

Yan
OPEN
TO WORK
Let’s talk
Yan Fontão Boring view
All work

Case 030Mobile app design

Face Skin Analysis

Result screens for a face skin analysis feature: a bottom sheet that first confirms the analysis is complete, then opens into a summary with a link to the full report.

Contribution
Interface design
Project status
Interface design · Figma archive
Face with a scanning mesh over it and an analysis-complete badge.
Portrait with marked skin points and a score.
Recorded from the Figma prototype. The results sheet drags away from the face mapping and back. The scan finishes on a mesh over the face. Each marked point opens part of the score.

01

My contribution

This small file holds the result screens I designed for a face skin analysis feature. All the figures are sample data.

Result screen with a second portrait.
Results sheet over a purple gradient with a completion message, three headline figures, a card listing smoothness, hydration, sun spots and insights, and a magenta See full report button.
The done state keeps the face on screen. Results: a summary and one way forward. Sample data.

02

Summary first, details on request

Collapsed, the sheet says only that the analysis is complete. Open, it leads with three headline figures, then lists smoothness, hydration, sun spots and insights in a single card. One magenta button, See full report, closes the screen, so the next step is never in doubt.

000

Instructions

Yan Fontão
Tap
Open a screen
Click
Open a screen
Drag
Look around the board
Wheel
Mouse zooms, trackpad moves, pinch zooms
− +
Pull back to see the whole board, or come closer
Arrows
In a case: ↑↓ change case, ←→ change media. On the board: move
Space
Open, or go back
Enter
Open
Esc Backspace
Back
Home
Back to the center, then the introduction
PgUp PgDn
Previous or next channel
Tab
Walk projects and links
R
Random project
0–9
Type a channel, 1–61
?
This page
Shortcuts

Music on the board

Files compressed and levelled for the web.

OPEN
TO WORK
Let’s talk

New message to Yan

Tell me who you are and I’ll get back to you.

000

About Yan

Hello, I’m Yan

Product Designer/ Design Engineer

Most products lose something between design and code. Mine don’t: I research the problem, design the product and ship the interface myself, so what you approve is exactly what your users get.

  • 2018started in software
  • UI + codedesign and implementation

Worked with Motorola · Ambev Tech · Rei do Pitaco · OneTool · CESAR

Brazil · Remote, hybrid or on-site

Portrait of Yan Fontão seated, in a green sweater and glasses, holding a microphone.
OPEN
TO WORK
Let’s talk
OPEN
TO WORK
Let’s talk
000

locked channel

Under NDA

Enter the code

Ask Yan for the code ↗
OPEN
TO WORK
Let’s talk
YAN FONTÃO Case studies