Home

About

Back

est. 3-5 min read

Design handed off

Onboarding Flow Redesign for Social Dining App Boost Initial Engagement

Dave redesigned user onboarding flow for Dynery app, which allows users to sign-up faster and setting up their dining taste profile easier. An overall more intuitive and welcoming experience.

My Role

Product Designer

collaborators

Product Manager

Frontend & Backend Developer

tIME

Initial Design - 6 Weeks

Followed by rounds of continuous iteration

TL;DR

Dynery is Trofimo's customer-facing digital dining app for foodies to explore, dine-in, socialize, and coordinate group dining events.

I joined the team after the MVP beta released for 3 months and user feedbacks were collected.

From data and user feedback, I identified that the previous onboarding flow was complicated and unintuitive, causing high dropping off rate.

By turning data & feedback to insight & actionable items, I define the problem and the team agreed on a flawed onboarding flow would be catastrophic for product's user traction.

Previous onboarding flow in the MVP

📜

Complex and lengthy (12 mandatory screens)

🕵️‍♂️

Too much commitment before engage with the product

❓

Requesting device's permissions with no context given

📉

Analytics showed significant dropped off in this process

In 6 weeks, I redesigned the solution with

🕊️

A simplified modularized flow brings user clarity, efficiency

🗂️

Clearer information hierarchy to reduce user cognitive load

🤝

Meet users where they are & show values before asking

🎯

Tailored flow for invited users better serve users' intent

Skip to See Solution

What I did

  • Create UX Artifacts to facilitate internal communication clarity

  • Iterate design from sketch, wireframes, to high-fidelity prototype

  • Conduct user testings, collecting feedback, and transform insights to actionable design optimizations

  • Compose design doc, feature spec sheet to guarantee a smooth design handover to Devs

The Impact

The optimized new flow not only achieved a 100% completion rate, and over 2X operation time reduction*, but also seamlessly guided new users towards the new group dining planning tools.

Read more on the impact

*Data measured in a controlled testing environment, compared to data from MVP

solution quick glance

What Does the Solution Looks Like

  • Faster

    Simplified onboarding process allow users to start exploring app faster than ever

  • More Personalized

    Exclusive flow for invited users to quickly act on the pending invitations

  • Clearer

    Redesigned visual with clearer information hierarchy made more pleasant user experience

understanding the problem

How Did I Define the Problem

Problem Statement

The current onboarding process is lengthy, confusing, and failed to guide users effectively sometimes. This poor user experience led to significant drop-off and thus losing new users.

Design Question

How might we streamline the process to allow users to finish sign-up process and building user profile as fast & intuitive as possible; for invited users, making them feel special and taking them to where they should be to complete their desired tasks.

Insights

What Are Current Design's Problems

🧩

Insight #1

Too soon, too much

Asking for too much too soon creates friction. Users want to understand the value of the app before sharing personal details or giving device permissions.

Jessica

MVP user, complains about time required for onboarding

It felt like the app wanted too much from me before I had a chance to decide if it was even worth my time.

Why would I give away all this personal info before I even know what the app does?

Jessica

MVP user, complains about time required for onboarding

It felt like the app wanted too much from me before I had a chance to decide if it was even worth my time.

Why would I give away all this personal info before I even know what the app does?

🌀

Insight #2

Visually Clustered

Even motivated users drop off when the UI feels messy. A lack of structure made it too hard to find relevant dining preference tags.

John

Food enthusiast, complains about dining taste tag selection complexity

I couldn’t find what I was looking for, I wanted to add my preferences, but it felt like too much effort to sort through everything, I ended up skipping it.

John

Food enthusiast, complains about dining taste tag selection complexity

I couldn’t find what I was looking for, I wanted to add my preferences, but it felt like too much effort to sort through everything, I ended up skipping it.

📩

Insight #3

Users' Intent Not Met

Invited users arrive with context and intent. Supporting their social tasks early in onboarding can drive faster activation and stronger emotional connection.

Wale

Product Manager of Dynery, managing features for next major release

A lot of new users for our product actually join through friend invites.

If we can surface those tasks right away during onboarding, it could build stronger engagement and a better first impression.

Wale

Product Manager of Dynery, managing features for next major release

A lot of new users for our product actually join through friend invites.

If we can surface those tasks right away during onboarding, it could build stronger engagement and a better first impression.

previous design

What Could be Done Better

design goal

What Should A Success Solution Achieve

01

Reduce Completion Time

Optimize the onboarding flow in a more effective way and allow users get to the core experience of product faster.

02

Improve Clarity in Communication

Reducing user hesitation and building trust during onboarding. Help users understand what’s happening and what’s expected next.

03

Build Trust & Share Value

Users would more likely to engage and share when the product's value has shown and they trust the platform.

04

Serving Invited Users Goal

Help invited users act on what matters most to them in the moment, and boost potential deeper engagement.

Ideation process

How Did I Came up with the Solution

Ideation Process Artifacts

Ideation Process Artifacts

Interaction Flows

Information Architecture

Sketches

Rapid Mid-fidelity Prototypes

High-fidelity Prototypes

INTERACTION FLOW

How Did We Make the Process Intuitive, Effective & Seamless?

"What is the absolute minimum information and interaction needed for a user to understand and start using this product effectively?"

Interaction flow helped me strip away assumptions and led directly to the most intuitive solution for new users.

An example of interaction flows, please contact Dave for more detail

🎯

Focusing on the Real Goal,
Not Just Tasks

A critical first step was to identify the user’s fundamental objective rather than optimizing for superficial milestones (such as account signed-up).

Goals for onboarding:

  • Exploring the distinct value that the app has to offer

  • Being able to quickly act on friend's requests

  • Getting users familiar with the app

  • Expecting the "wow" from using the app

A critical first step was to identify the user’s fundamental objective rather than optimizing for superficial milestones (such as account signed-up).

Goals for onboarding:

  • Exploring the distinct value that the app has to offer

  • Being able to quickly act on friend's requests

  • Getting users familiar with the app

  • Expecting the "wow" from using the app

💡

Brainstorming the Solution Non-Digitally

I intentionally explored non-digital interactions during ideation, although our product is digital mobile app.

I attempt to empathize & define the problem inspired by interactions that human does naturally in real life, such as thinking why customers would sign-up for a paid membership for a wholesale club or fitness centers.

This mindset helped me focus on the core values that users are looking for when 1st time encounter with the product.

I intentionally explored non-digital interactions during ideation, although our product is digital mobile app.

I attempt to empathize & define the problem inspired by interactions that human does naturally in real life, such as thinking why customers would sign-up for a paid membership for a wholesale club or fitness centers.

This mindset helped me focus on the core values that users are looking for when 1st time encounter with the product.

iNFORMATION ARCHITECTURE (ia)

How Did I Inform Other Stakeholders About the Upcoming Design?

I use Information Architecture during ideation to establish a clear, logical structure for presenting information and tasks, ensuring the user's path to understanding and activation is efficient and intuitive from the solution, and also align with collaborators in the team to ensure a smoother design turnover.

An example of IA, please contact Dave for more detail

protoryping

How Did I Turn Artifacts into Screens

Interactive Mobile App Prototype

I started with hand sketches to communicate ideas, mid-fidelity prototypes for devs to evaluate the developing feasibilities, and high-fidelity prototype for design validation.

Besides, I wrote and edited design docs to better hand off designs to Developers.

Early stage sketches

Solution

How Does the Improved Solution Work

01

How Might We Reduce Completion Time?
⬇️
Modularized Onboarding with Progressive Disclosure

I initiated the solution by breaking the original single long, undismissible onboarding process into 3 modules:

  • ONB 1: Account sign-up

  • ONB 2: Invited users exclusive flow & quick actions

  • ONB 3: Building dining profile & engage when users want to do so

Users can immediately engage with the app's key features after their account created (ONB 1).

This approach enables users to effortlessly grasp the benefits upfront, fostering deeper engagement and allowing them to decide when they're ready to commit further to community-building activities.

Before

Complete account sign-up, basic info, app introduction, and setting up dining profile all-at-once.

Asking users to do too much causing users drop-off at this stage.

After

Users only need to do the bare-minimum to start exploring the app.

Providing guidance visuals for new users to walk through the optional steps seamlessly.

02

How Might We Improve Clarity in Communication ⬇️
Improved Information Hierarchy, Guidance & Colors

I redesigned experience ensures the sign-up process feels simple and approachable with

  • intuitive interactions

  • clear visual feedback

  • proper color-coding

  • appropriate guidance

  • a well-defined information hierarchy

This clarity in design helps users effortlessly navigate the interface, reducing feelings of overwhelm and creating a smoother, more engaging first interaction.

03

How Might We
Build Trust Between Users & the Product?
⬇️
Show Value & Context

In improved onboarding flow, I acted on both the timing & presentation of the permission request messages.

By pairing friendly, jargon‑free prompts with clear explanations of the benefit each permission unlocks, we request access only when it’s contextually relevant.

This just‑in‑time, need‑based approach keeps the flow almost invisible, building trust while letting users experience the feature value before committing.

Before

A series of device permission requests pops-up at the end of on boarding process without additional context, leading a bad first impression of the product

After

Keeping permission asks contextual, benefit-oriented, and visually calm

04

How Might We Support Users Needs Based on Their Context & Intent?
⬇️
Understanding Their Goals and Provide a Expedite Route

I incorporated a specific onboarding experience built exclusively for invited users.

The tailor‑made flow gives invited users a sense of exclusivity and belonging while letting them complete high‑value tasks in seconds: building momentum and engagement from the moment they enter Dynery.

By providing a expedite flow for them to respond to their friends invitation right at account signing-up, they do not need to go into the app and figure everything out mannually.

Before

❌ No tailored experience available for invited users

After

Users can act on the invitations instantly (or skip this part if they prefer to do so.)

Then, they will have the chance to follow their connections.

Users can act on the invitations instantly (or skip this part if they prefer to do so.)

Then, they will have the chance to follow their connections.

design validation

How Did I Make Sure the Solution is Effective

Designing a Usability Test that Helps Us Identify More Room of Improvement

  • Heuristic usability testing with 10 Participants

  • Validate both the logical and visual adjustments

The participants stated that they like:

  • An immediate access to the app’s main experience

  • Tailored quick action options for invited users

The tests confirmed that the redesigned onboarding flows significantly improves user clarity and reduces friction.

Feedback collected & followup iteration

🔍

iterated solution via testing
Providing More Context Before Users Making Action

Context

One invited users scenario participant expressed her hesitation when going through the contextual quick actions (invited to a group chat).

The tested prototype didn’t allow users to view more details about the group, causing hesitation since users felt they needed additional context before joining.

Solution

I iterated the design by introducing a bottom-sheet modal providing quick access to more detailed information about the group chat, helping users make more informed and confident decisions at this step.

Before

🚫 No additional info for group invite

After

✅ A pop-up added to provide more context

✨

iterated solution via testing
Streamlining the Repetitive Steps

Context

During "Taste Profile" building , the tested flow required users to select their top 3 favorite restaurants individually.

Users need to tap "add" for each new entry, repeated screens were showed and many additional clicks were required.

Solution

In the revised design, users can continuously add multiple items in one go.

Revised design reduced at least 3 clicks this step alone and reduce the cognitive load for users by eliminating page jumps.

Before

Before

🌀 Jump between search & result screens

After

After

✨Continuous adding flow without interruption

Final outcome & impact

Does the Solution Work?

In Feb 2025, the improved new onboarding flows' design has been handed over to developers, and expected to be launched by summer. We are expect to iterate the design continuously over the long run.

⏱️

faster
Increased Efficiency

Significant reduced task completion time

24 Sec

100% of native sign-up test participants (not using third-party log-in) completed the basic onboarding (ONB-1) within 24 seconds and entered home page

70% Time Reduced

Over 70% time reduced compared to previous solution, which is expected leading a significant lower user drop off rate during onboarding.

50% Less Clicks

Number of clicks for users to enter the app experience (display homepage) reduced from 15-20 clicks to 4-10 clicks based on user's sign-up method.

🧭

easier
Improved New User Journey Expect to Boost More Engagement

Optimized flows are easier to follow

0 Hesitancy or Confusion

9 out of 10 test participants reports 0 issue, hesitancy, or confusion when interacting with the new onboarding process & user dining profile creation.

Efficiency ↑

3 of 10 participants offered feedback during design validation, and I made corresponding adjustment to address the user feedbacks, which further increased screen real estate efficiency & reduced cognitive load.

•

linkedin

Made in Seattle with ❤️