Cyril Stephen - Product Designer

Streamlining Client Onboarding For Avalon Scenes

Avalon Scenes had an onboarding process that was extremely confusing for their new clients. As a result, developers were now spending hours guiding clients on how to navigate the process. To solve this, I designed a web-app in replacement for their existing onboarding.

timeline

1 month

team

Cyril Stephen

my role

User Research, Ideation, Feature Scoping, UI Design, Rapid Prototyping, Design System

overview

what is scenes?

Scenes is a community builder platform that allows individuals or brands to manage, moderate, and monetize their audience.

The platform has two offerings, namely:

Web app plan
Web app + mobile app plan

Scenes is a community builder platform that allows individuals or brands to manage, moderate, and monetize their audience.

The platform has two offerings, namely:

Web app plan
Web app + mobile app plan

Overview

What Was The Problem With The Current Onboarding Journey?

Since Avalon publishes the app for clients who chose the web + mobile app onto the play store and app store, they collect various pieces of information from the client while onboarding them by sending out a google form.

However, clients repeatedly expressed confusion and frustration during the data collection process.

This was hurting Avalon's output and scalability as developers were now spending hours everyday on calls with clients to help them understand and complete the form.

problem statement

How might we streamline information and asset collection in the onboarding for the new customers of the web and mobile app plan?

persona

Who is the user?

Influencers from India with large audiences. They are new customers, and their defining trait is a lack of technical knowledge.

This explains their frustration with the current information collection form since it demands technical proficiency.

Influencers from India with large audiences. They are new customers, and their defining trait is a lack of technical knowledge.

This explains their frustration with the current information collection form since it demands technical proficiency.

early roadblock

Research Blocker - No Access to Clients of Avalon

Due to the Scenes platform being acquired by Graphy, I was informed that I would not be able to talk to existing clients of the company.

This meant that every decision I had to make would now be based off:

Leveraging existing user research

Informed assumptions from secondary research

secondary research pt. I

insights from how scenes was currently collecting information from the client

Requires technical knowledge

Examples include asking clients for Bundle ID name, confirming developer access clearance etc.

01.

Misleading copywriting

Asking clients for screenshots of the unmade app—when they actually mean design inspiration to find a suitable UI template, is an example.

02.

Lack of helpful guides

Examples include users being left to figure out on their own how to grant developer access and set up developer accounts.

03.

secondary research pt. II

Insights from Understanding how Apps Are Uploaded to Play Store and App Store

Next, I set out to understand the app listing process on both platforms to understand the complexity of the process and identify opportunities to simplify the onboarding for our end user.

Requires knowledge of jargon

A lot of technical, marketing and legal jargon is used in the copy, which demands an end user to understand them.

01.

Long, complex and time-consuming

Process involves multiple high-level steps with each of them having multiple sub-steps. Additionally, certain steps have prerequisites outside of the respective platform.

02.

requirements gathering

Finalizing Information To Be Collected From The User

Drafted through secondary research on the required essential information for uploading an app to both platforms.

user flows

Finalizing The user flow

Why community customisation?

Since the user has just gone through a lengthy, stress-inducing form, having community customization controls aimed to bring some delight at the end.

These settings can be changed later when the app and/or website goes live.

Since the user has just gone through a lengthy, stress-inducing form, having community customization controls aimed to bring some delight at the end.

These settings can be changed later when the app and/or website goes live.

solution

Final Design Solution

welcome screen

White-labelling — General Information:

App Listing Information (1/6) — User-Facing Information:

App Listing Information (2/6) — Developer Access:

App Listing Information (3/6) — Privacy Policy and Ads:

App Listing Information (4/6) — Google Content Rating Questionnaire:

App Listing Information (5/6) — Apple Age Rating Questionnaire:

App Listing Information (6/6) — Target Audience Declaration:

White-labeling — Community Customization:

Confirmation Screen and Next Steps:

Reflection

learning the craft behind good form design

While I initially thought designing a form would be pretty straight forward, understanding the depth of thought and detail that experienced designers put into forms really forced me to push myself to improve my craft.

To designing more forms!

Read my other case studies