Intro
BACKGROUND
Citizen Emoji is an application that uses 3D scanning technology to instantly create a realistic-looking avatar of you or anyone else that you can easily share with friends. Our team was tasked with creating the brand feel and onboarding process for the application.
PROBLEM
How might we differentiate Citizen Emoji from its competitors and engage users to download the app as well as feel confident using it once they have downloaded it?
SOLUTION
Creating a holistic onboarding experience that will excite the user into downloading the app.
-
Landing Page: A fun and action-oriented landing page that’ll stir excitement in the users to check out the app by using engaging videos.
-
iTunes Page: A clear and concise imagery of the apps main screens to show its main functions.
-
Onboarding: A quick and informational tutorial to help users understand how to use the apps main features.
ROLE
I worked as one of two UX Designers on a cross-functional team.
We collaborated and learned from one another throughout the process, jointly generating research methods and design concepts. We worked closely with another team that was responsible for creating the UI elements and flow of the application itself.
Discovering our Market
Out of the 13 applications reviewed, I noticed a pattern of key features. These patterns would help inform me of industry-standard best practices and give direction to my designs.
I compared 13 direct and indirect competitors to see what
our competitors were doing well and helped generate ideas
for our designs.
Landing Page
Onboarding
USER INTERVIEWS
I surveyed 50 plus users to better understand who our target user was and used that information to narrow our scope of viable interview subjects. From there I carried 4 out of the team's 12 in-depth in-person interviews to figure out the behaviors and preferences of our users. I used the affinity mapping method to synthesize the key insights from the interviews and validated them with team members.
DEFINE OUR AUDIENCE
Using the data collected from our interviews as well as the competitive analysis to create representations of our target user. Of the 12 individuals who fell under the category "uses emoji or avatar-based apps" 70% were generation Z and 30% were millennials. I also looked at data collected by one of our largest competitors, Snapchat. We found that 60 percent of their users are under 25 and nearly a quarter (23 percent) have not yet graduated from high school. With this understanding, I took a deeper dive to understand the user behavior and needs of Generation Z. What I found out helped further inform the composition of our target user.
Design
BRAND FEEL
Based on a major insight from user interviews, I knew we wanted our onboarding and application itself to have a fun and lighthearted feel. I knew that the first step for designing our onboarding process would be picking the aesthetic brand feel that would appeal to our target user. To discover what brand feel would resonate with our users, my partner and I created 9 different mood boards all including different UI components, color schemes, and characters and took them through a round of testing.
We asked 26 individuals:
1. Which design they preferred overall
2. Which design was the most "fun".
The results would be crucial for informing our design direction.
DESIGN ITERATIONS
Using the two chosen mood boards as inspiration, we iterated 8 different possible designs for our landing page (as this was the first step of our 3 part onboarding process). From there we guerilla tested 28 individuals (targeting our target persona, generation Z) and asked them which iteration they preferred. The winning landing page would give us our chosen design, as well as brand feel that would carry throughout the onboarding process and app.
Deliver
LEARNING+NEXT STEPS
One of my hypotheses for onboarding was that users would prefer to watch a quick animated tutorial. To gain better insight into testing this hypothesis, some A/B testing on different types of tutorials, say one with text overlay throughout the app and one with a quick video in the beginning. Since our app was being developed as our team worked on the onboarding process, I didn't have the chance to do this. Before the launch of the app, some next steps could include:
1. Logo: a graphic designer who will test and revamp the logo.
2. Multi-Channel Advertising: Before the launch, have users sign up and get excited about the app's release date. Use email blasts and other social media advertising to get users excited early on.
3. Measure KPIs: Track Key Performance Indicators by number of app downloads, how many daily active users, and stickiness rates. Daily sessions per daily active users, retention rate, churn ratio.