Onboarding and reveal for warmer.

warmer. is an iOS app for keeping friendships going. A twelve question quiz sorts you into a friendship archetype and the app builds its prompts around it. I designed the first run: splash, signup, quiz, reveal. Four coded review builds.

iOS product design Form and survey UX Interaction design Coded prototypes
Splash

Live prototype, running in the frame.

Role
UX and UI consultant
Scope
Splash, onboarding, quiz, reveal
Deliverable
Coded prototypes, four review builds
Platform
iOS app

Part 01

Onboarding

Splash

The seven dimensions draw themselves in.

Sign up

Google, Apple or email.

How it works

Three slides, skippable from the first.

Begin

The screen that says how long this takes.

Splash
Splash
Sign up
Sign up
How it works
How it works
Begin
Begin your analysis

Live prototypes. Tap through them here.

The promise the start screen makes

12 questions
3 minutes
7 dimensions measured

Part 02

The quiz

One percentageNo question counter and no section names.
One question per screenNothing below the fold.
Back arrow onlyNo exit button sitting there all quiz.
Friendship quiz

Playable. Answer Q1 and keep going.

Playfair for the questionInter for every label and button.
The input changesSix ways to answer across twelve questions.
Swipe cards auto advanceNo confirm tap. Four saved.

The six input types

Q1
Typed answer
Q2
Age pills
Q3
Dial
Q4
Swipe card
Q6
Options
Q11
Analysis

All six are live, each running its own interaction.

Part 03

The reveal

1
The archetype

Its own screen. Confetti lands a second after the name.

2
What it means

The description appears word by word.

3
Strengths and blind spots

Five cards, staggered. Headlines only.

4
Growth opportunities

Four items cascading down a line.

5
Share

The ask comes last, not first.

The reveal

Part 04

An earlier version

The quiz started out framed as a clinical assessment, on navy, with the research named under each question. These were the working ideas from that round.

Dial prototype on navy
DialRotate to a value on a twelve point scale. Used for questions 3 and 7.
Image grid prototype on navy
Image gridPick the setting that fits you.
Vibe check prototype on navy
Vibe checkHow the same scene made you feel.

What changed

  • Navy→Black
  • Science-backed analysis→Friendship style
  • Citation under each question→Question only
  • Counter, bar and percentage→Percentage only
  • Back arrow and an X to quit→Back arrow only

Part 05

Design system

Background#000000
Coral#FB923C
Pink#FB7185
Purple#A78BFA
Blue#60A5FA
Teal#34D399
  • Playfair Display for the questions, Inter for everything else.
  • Blurred gradient shapes instead of cards and borders.
  • Gradient buttons only in the reveal.