← Back to work

Case Study · Well · February – April 2022

A sign-up experience that makes users want to download.

Multi-month project spanning illustration, responsive design, and real lessons in designing within business constraints.

Web Onboarding — Final Mockup

Role

UX/UI Designer · Illustrator

Timeline

Feb – Apr 2022

Team

Andrew Schwint · Colleen Curtis · Sebastian Vergara

Tools

Figma · Jira · Confluence

This was the first project I worked on at Well — and it set the tone for how I'd approach the rest of my co-op. Product managers wanted a web-based sign-up flow to increase engagement and reach users who hadn't yet downloaded the app. What started as ‘turn these wireframes into hi-fi designs’ quickly became a multi-month project spanning illustration, responsive design, and some real lessons in designing within business constraints.

Where it started

How do we create a sign-up that doesn't require downloading the app — and actually makes users want to?

Product managers at Well wanted a web-based path to sign-up — a way to reach users who hadn't yet downloaded the app and convert them without requiring an install first.

Dissecting the brief

Lo-fi wireframes, a clear flow, and one open-ended brief.

The PMs came in with lo-fi wireframes and a defined flow. My job was to translate those into production-ready hi-fi designs and work directly with developers on what was technically feasible.

Requirements

THE BRIEF

What I was asked to do

— Translate lo-fi PM wireframes into hi-fi designs

— Mirror the mobile app sign-up process with minimal steps

— Create an original illustration that embodies Well's mission

That third requirement — the illustration — turned out to be the most challenging and most rewarding part of the entire project.

Teaching myself

Responsive design — documented for the whole team.

This was my first time designing for responsive breakpoints. Rather than just figuring it out as I went, I spent time doing extensive research on breakpoint systems and responsive design principles — then documented everything I learned in Confluence for the broader design team's library.

Learning in public — sharing what you figure out rather than keeping it to yourself — is one of the most valuable things a junior designer can do.

— Personal reflection, Well co-op

That documentation became a reference resource for the team. It was one of the first times I understood that the work you do to help yourself learn has value beyond you.

The craft

A month of illustration, iteration, and storytelling.

The brief asked for something that ‘embodies Well's mission.’ That's an open-ended prompt — which meant I had a real creative opportunity, and real pressure to get it right.

The Illustration

I spent a full month creating, testing, and iterating on the illustration before my team and I were satisfied. The final design tells the story of a user moving forward through their health journey — stepping through a series of panels, each representing a different dimension of wellbeing: sleep, nutrition, habits, rewards. The figure moves through them with momentum, forward-facing, progressing toward their goals.

DESIGN INTENT

Well isn't a destination. It's a journey.

The metaphor was intentional. The illustration needed to feel active — not aspirational in a passive way. The figure doesn't arrive somewhere. They're always moving.

Illustration Iterations

Iteration 1

Iteration 2

Iteration 3

Iteration 4

Final illustration — Desktop 22

Design reality

Good design isn't always the most elegant solution.

Over two months I was in constant conversation with PMs, developers, and the design team about what we could actually build. The biggest tension point: how do users get from the web onboarding to the app?

The Tension

The ideal solution would have been a mobile deep link — tap a button, open the app. But that technology hadn't been developed yet, and there were security constraints that ruled it out. I explored a few alternatives before landing on the QR code approach the PMs had proposed. It wasn't my first choice aesthetically, but it was the right call given the constraints — it kept users from getting stuck on web without requiring infrastructure we didn't have.

DESIGN PRINCIPLE

Sometimes good design is the honest solution.

Not the most elegant one — the most truthful one. The QR code told users exactly what the product could do right now. That's not a compromise. That's a decision.

Final output

Desktop, tablet, and mobile — fully responsive.

I delivered fully responsive designs across three breakpoints — desktop, tablet (iPad Pro 11”), and mobile (iPhone X) — along with the final illustration.

Desktop screens

Tablet screens

Mobile screens

The web onboarding shipped and was received positively. Looking back, the constraint that felt most frustrating at the time — the QR code — turned out to be the most clarifying design decision of the project. It forced me to ask: what does honesty look like in a product experience? The answer was simpler than I expected.

Skills & Tools
UX/UI DesignResponsive DesignIllustrationInformation ArchitectureCross-functional CollaborationFigmaJiraConfluence