top of page
Portfolio Logo.png

Onboarding Process

Syncify is a social network based on podcasting, it helps avid podcast listeners discover new podcasts, share their opinion, and engage with podcast hosts. They're a start-up looking to build a new onboarding process in order to:

​

  • Increase conversions

  • Collect relevant user data

  • Sell new users on product value

Role: UX/UI Designer

Tools: Figma, Illustrator, Photoshop

Timeframe: 1 Week

Client: Syncify

01 Research

  • Core Product Value 

  • Onboarding Needs

  • Studying Top-Performing

  • Onboarding Processes

02 Solution

  • Brainstorming Solutions

  • Defining Directions

03 UI Design

  • Wireframes

  • High-Fidelity Prototyping

04 Learnings

  • Key Insights

  • Challenges Forecast

  • Next Steps

01 Research

Understanding Core Product Value

After looking at data, interviewing existing and new users about what value they found in Syncify -if at all, and having talked to the founders about the company vision. I categorized core product value into four main buckets:

Core Product Value.png
Onboarding Needs

In conversation with the founders, we figured out the actions we needed the user to take, and what could be omitted from the existing onboarding process to speed up user flows. Here are the needs we scoped out:

Onboarding Needs.png
Studying Top Performing Onboarding Processes

At my last job at Sweatcoin -the world's fastest-growing health & fitness app in history with a growth rate of 350k users per day- I knew the onboarding process is a make or break for many apps, as drop-off rates average from 70-95%+ within the first 30 seconds of downloading. So I studied dozens of case studies to uncover the most effective design patterns. 

Inspiration.png
Principles Of Onboarding 

To help with my reasoning, I try to think in first principles. Here is are a few that I found studying onboarding processes:

​

  • Permission Priming: Ask permission only once you give them a good reason to say yes. For example, if you want someone to eat something you've cooked. Instead of asking them if they want to eat the dish, make it, and offer it to them directly.

  • Front-Load Value: Get them to the 'aha' moment ASAP.

  • Learnability: Make it easy to accomplish tasks by making screens understandable at a glance.

  • Speed: Onboarding drop-off rates are extremely high, so make it quick and punchy.

Principles Of Onboarding Meme.png
SOLUTION
RESEARCH

02 Solution

Defining Directions

We only had one developer coding the whole app so dev time was limited, to say the least. In order to save time, we focused on designing one iteration of the onboarding process and tried to make it the best it could be within the timeframe. First, we figured out what we could omit from the user flow, then defined a few directions we could go down before selecting and sketching out iterations of the most promising flow. Here's the final sketch:

Sketches PNG.png
UI DESIGN

03 UI DESIGN

High-Fidelity Mockups

Using the brand colour palette and the wireframe sketches I made earlier, I brought them to life in Figma.

BEFORE

Pick Interests (Old) Mock Up.png

  • The images compete for attention and make titles hard to see.

  • The body below the title is hard to read because the grey doesn't contrast well. 

  • The '+' and "Next" buttons aren't as visible, and even if you select a topic, the "Next" button looks inactive.

AFTER

Interests Chosen Mock Up.png

  • Accecablity issues have been addressed.

  • The title of the screen and the button are more user-centric, and primes users to accept tracking permission.

  • Impatient users can now skip.

  • Topics have been reordered based on the most popular.

BEFORE

Pick Podcasts (Old) Mock Up.png

  • Users have zero context of what the podcast is about.

  • Hard to see titles because images are small with different fonts.

  • "+" button covers podcast titles.

  • Images are bunched together and compete for attention.

AFTER

Pick Podcasts Chosen Mock Up.png

  • As users choose, similar podcasts slide out from underneath the chosen one to get them to subscribe to more podcasts. 

  • The "update me on new episodes" button primes users to grant permission to send notifications.

OLD ONBOARDING
NEW ONBOARDING
LEARNINGS & NEXT STEPS

04 Learnings & Next         Steps 

Hand Off and User Testing

Having handed off the design development, early tests indicated that conversions increased by 30%, and new users have understood the product within the first 10 seconds.

Hand Off White.png
My Learnings

  • Talk to stakeholders every day, or as frequently as is practical: Including stakeholders, every step of the way helps prevent disagreements later on because stakeholders will better understand the thinking behind my design decisions. ​

​

  • Slowly incorporate writing into my routine: Communication is a keystone skill in any field, and I need to treat it like I do brushing my teeth. ​

​

  • Commit to small projects: Taking on small projects like this are a great way to polish my skills, and learn something new. Even if I fail, I would learn a lot either way.  

bottom of page