Redesigning first impressions through clear onboarding and a unified design system

ROLE
Product Design Intern, Design Systems, UX Writing, UX Research

TIMELINE
8 Weeks

TEAM
Abhi Saha (Senior Product Designer)
Gatsby Frimpong (Product Manager)
Brandon Saltzman (Data Analyst)

TOOLS
Figma, Adobe CC, Mixpanel

Challenge

The startup Gatsby had recently rebranded as a social app, but members didn’t see it that way. User data showed a steep drop-off during onboarding, and interviews revealed that most people still came for movie recommendations. The app also lacked a clear visual and language identity, leading to confusion about what Gatsby actually did.

Outcome

I redesigned Gatsby’s onboarding flow by consolidating the most essential screens and clarifying the UX writing, and overhauled the visual design system to create a stronger identity. These changes resulted in a 43% increase in user acquisition (9,300 new installs in 2 months) and a 38% rise in monthly active users (1,580 to 4,081). In my own time, I proposed a new mood-based AI-powered recommendation quiz to further lean into Gatsby’s core value of providing users personalized discovery.

Solutions Overview

Streamlined onboarding from 10 to 3 screens

A new design system to establish visual identity

A new design system to establish visual identity

Investigating the drop-off:

“I would’ve deleted this if you weren’t interviewing me”

I was given the autonomy to approach my tasks how I saw fit, so my instinct was to ask: Why is onboarding losing people so early? I partnered with our data analyst and set up a Mixpanel dashboard to isolate each tap and exit.

The first red flag was that nearly 30% of users dropped off on Screen 2, the screen that asked them to choose their streaming services.

Then, our customer feedback log was filled with quotes like:

  • “Can’t watch for free”

  • “I thought this was streaming”

  • “Not sure what this is for”

This prompted me to conduct 11 rapid interviews with friends-of-friends and ask them to think aloud while navigating the app. Watching them confirmed what the data hinted at: that people genuinely didn’t understand what Gatsby was.

The UI also felt overwhelming, where people felt “unclear where to go next” because there was no sense of progress. And at worst, they found the grid of options “anxiety-inducing.”

This drop-off was about miscommunication. People didn’t understand the product because the copy mirrored a streaming service, and the actions weren’t framed with any purpose. Combine this with a lack of visual identity, and users felt like they didn’t get any value out of Gatsby. So my focus shifted to reducing overwhelm and emphasizing clarity and value.

Redesigning the Onboarding

To reduce cognitive load, I condensed the onboarding flow from 10 screens into the 3 most essential screens, shifting everything else into in-app tooltips that appear when users need them.

I tightened the core copy to focus on familiar language and motivation. Here are three examples.

Text explanation here.

Text explanation here.

Text explanation here.

The home screen presented a stack of unlabeled lists, causing users to freeze. To address this, I added contextual tooltips to map every action to a benefit. Users said they felt more guided.

Rebuilding the Visual Identity

While users thought the onboarding was now sharper, I still heard: “It still feels like a streaming app.” This signaled to me that Gatsby had no visual personality. The startup had so far been built with a color scheme of 5 colors, with no rationale for its visual choices. I worked with the founders to establish a visual system.

To reposition Gatsby as your movie wingman, I rebuilt the entire visual language: typography, color, components, and interaction states to support curiosity and discovery. Here are the core building blocks we designed.

BUTTONS AND ICONS

TYPOGRAPHY

COLOR PALETTE

OTHER COMPONENTS

GRID SYSTEMS

Repositioning Gatsby with an AI-Powered Quiz

As I continued user testing, I found that users didn’t want another infinite scroll. They wanted help deciding what to watch tonight, and they needed it quickly. Our core user grew skewed millennials — the same group that grew up loving BuzzFeed quizzes and personality-driven discovery. Most interviewees weren’t huge film buffs either, but people who just wanted to watch something to unwind with at night and not have to go through another thirty minutes of decision paralysis.

I thought there was a huge opportunity to capitalize on this behavior, given the excitement around AI and personalization.

I prototyped a mood-based quiz for when a user enters the app that:

  1. Asks you a short series of playful questions

  2. Cross-references your streaming subscriptions

  3. Suggests a movie or show that fits your energy

  4. Uses GPT-powered logic to match you with a movie or TV show

This personalized discovery would give Gatsby a unique interaction. When I presented the prototype, the founders were excited about how it aligned with our product direction and expressed interest in building it into the roadmap. 

Takeaways🥡

Working in a startup means being scrappy and versatile.

The startup environment was new to me. Unlike larger teams with longer feedback cycles, it required me to switch between writing, strategy, UI design, and testing, sometimes all in the same afternoon. I learned how to validate my ideas with limited resources and quickly build better alignment across the teams. Wearing multiple hats made the work sharper.

Systems lay the ground for screens to work.

Rebuilding Gatsby’s visual identity taught me that long-term clarity comes from having a strong foundation to build from. Once the design system became coherent, everything else felt more intentional from a design and product perspective. Even though I had to work faster, I also needed to step back multiple times to question the purpose of each decision I was making, and whether it fit with Gatsby’s bigger picture.

Clarity creates confidence.

Across onboarding and the broader product experience, I learned how much confusion comes from unclear framing, especially through unclear UX writing. Rewriting microcopy and simplifying tasks eliminated ambiguous parts. The biggest wins came from helping users understand why they were doing something.