designing
scroll
vision
"Enrich conversation with 3D animated emoticons."
users
ideation
Custom Avatars
Mobile App(s)
Animated Content
Data implied our users loved creating 3D avatars. User interviews later confirmed the creation process itself was a key driver to our previous app. We knew we had something there...
As revealed through product observations with our Mojiit AR app, animation contributed to a more immersive, engaging experience. But the content had to be right, too.
In collaboration with engineering, I started crafting an architecture based around a core mobile app with extensions.
Custom Avatars
User Insight
I learned self-identification with our avatar was perhaps the greatest indication of a user's likelihood to engage.
With the existing photorealistic avatar, we had to achieve nearly perfect resemblance or users experienced difficulty relating to it.
It was time to redesign.
too small to see emotions @ a small size!
getting the body proportions right required dozens of iterations and tiny refinements in the details
Users responded best to large, cartoon-like eyes with bold, glossy pupils.
The disproportionately large head served as a perfect canvas to exaggerate emotions with animation.
I challenged the team to use a single body for male and female, adjusting body proportions only where appropriate to highlight the uniqueness of each gender while remaining as neutral as possible.
Animated Content
team collaboration & user feedback
After researching top phrases used by our target audience, I wanted to capture new ideas from everywhere.
I led brainstorm workshops to generate new ideas and work through rough concepts. I also created an idea wall in the office to solicit input from the whole team and visitors.
creative direction
Design review was an opportunity for me to provide critical feedback on the work of our designers and animators. Although some assets would require multiple revisions, I worked with my team to develop a consistent aesthetic to drive overall quality.
asset design & curation
Without the ability to integrate 3D objects into animations, I worked with a graphic designer and leveraged stock vector libraries to create highly polished 2D assets with a 3D effect.
user engagement
Finished animations were queued and released according to a strategic content schedule designed to drive engagement.
.jpg)
Though I drafted dozens of storyboards myself, my freehand sketches aren't always the prettiest.
I recruited a dedicated storyboard artist to help better communicate ideas to the animators.
The first draft of this Mojicon only included animation in the avatar and text. I pushed the team to add movement to the teddy bear to help make the action more convincing.
After animating the head, it still wasn't right... I realized we needed to draw & animate a shadow near the finger tips to imply a squeeze effect.
User Insight
In the mobile app, we created a Trending category that tracked the number of times each 'Mojicon' was used globally.
'Eggplant' was the top used Mojicon since we launched. We used this type of user feedback to deliver content our users loved, even fueling an entire category of 'naughty' Mojicons.
Mobile App(s)
Core Mobile App
-
new user onboarding
-
avatar customization
-
sticker generation
-
sticker library
-
settings
iMessage App
sticker library only
Keyboard app
-
sticker library
-
ABC keyboard
visual & interaction design
Key Use Cases
New User Onboarding
New User Onboard Flow v1.0
Sign In View → Account View → Verification View → Gender View → Creator View
This was the only tutorial view presented in Mojichat. Though it taught users how to customize their avatar in the future, we controlled interaction to force new users into the customization flow.
New User Onboard Flow v2.0
Sign In View → Gender View → Tutorial View → Creator View
Avatar Customization
Through A/B testing, I learned repositioning the hairstyle and face shape to the front of the feature list decreased the time it took new users to relate to their avatar.
Through A/B testing, I learned repositioning the hairstyle and face shape to the front of the feature list decreased the time it took new users to relate to their avatar.
Style Picker Usability Testing
With avatar customization taking up to 15 minutes, interaction with our 'Style Picker' had a big impact on the user experience. Users preferred interacting with styles over granular controls. The final version of the UI almost faded away as attention was drawn to the animated avatar with each style change.
In observing use of the product, I empathized with the frustration users felt when they couldn't find their look. By adding a convenient method to submit feedback, users felt heard and our style pipeline was relevant.
User satisfaction with our avatar was the best measurement of their likelihood to return. By incorporating 1-touch feedback, we aggregated data to measure our performance in resembling different user segments.
Sticker Generation
Sticker generation was a lengthy process that varied based on internet connection and the number of stickers to be created. The worst part? The app needed to remain app open & active.
Data showed we lost another 25% of users during this processing time.
I tested this view with both an opaque or semi-transparent background. Perceived wait-time was decreased with transparency. It served as a small preview of the Mojicons in 'augmentation,' and users just loved it.
To avoid inevitably long processing times for new users with hundreds of Mojicons to generate, I designed a content release system to cap the number of Mojicons loaded based on the time impact within UX.
Sticker Discovery
I developed a strategic content strategy to release new Mojicons in small batches. Not only did it limit the augmentation time, but we drove engagement and sticker discovery around key events.
By reusing the library interface across iOS, iMessage and the Keyboard app, I ensured a consistent experience with only a few small tweaks to adjust interaction accordingly.
For example, descriptive text below the search bar in the Keyboard App helped users avoid confusion when they were unable to drag & drop but everything else looked the same.
Categories helped users quickly discover the most widely used stickers. I studied the usage data of each sticker to guide new categories and content decisions.
With search and browsable keywords, sticker discovery was fast.
Users felt frustrated and discouraged when they were unable to find the right phrase. I designed a convenient feedback channel to solicit user submissions at the bottom of the Mojicon collection view.
Users contributed hundreds of Mojicons, driving our content pipeline and overall satisfaction.
user flows
interaction challenges
iMessage vs. Keyboard
User Insight
With a core iOS app, iMessage app and Keyboard app, we offered versatility in application. But the versatility was not intuitive and users fumbled when they tried to switch between apps that appeared the same visually but had unique user interactions.
In the Mojichat iMessage app, users expressed absolute delight with the ability to drag & drop stickers.
In the Mojichat Keyboard app, users expressed frustration and anger when drag & drop didn't work.
I added a descriptive line of text to the Keyboard app to differentiate the distinct user interactions. The impact on the UI was minimal but user friction was instantly eliminated.
To avoid complexity for new users, I removed the prompt to add the Mojichat Keyboard after sticker creation, burying the option in Settings for more advanced users.
Advanced Animation
Pushing the Boundary
User Insight
Though the Keyboard app allowed for third party products to leverage our GIF stickers, we found users trying to use Mojichat with platforms that didn’t support GIFs via the keyboard. Users wanted fully integrated experiences.
_sv.png){kind=icon}
