Sr. UX Designer
Mojiit
(Head of Product & Design)
THE ROLE
Los Angeles, CA
2017 - 2019
-
Designed innovative user experiences for mobile, augmented reality, desktop & web
-
Managed product and feature pipeline to drive user growth and engagement
-
Provided creative direction for a team of 9 designers, animators and engineers
PROJECTS
Overview
First hired as a freelance UX Designer, I worked with a team at an outsourced firm to design the UX of an augmented reality messenger... a forward thinking product concept that was ahead of its time.
Later brought in-house as Head of Product & Design, I led the team in a new direction as we designed Mojichat, a beautifully expressive 3D avatar that came to life in animated GIFs you can share with your friends.
Over the course of the following year, I designed several additional user experiences for Mojiit and our Mojichat product pipeline.
Check out my case study:
Mojiit AR
I designed Mojiit AR early in my career at Mojiit while working as a freelance UX Designer. I was tasked with designing the user experience of a ‘3D hologram that rises up from the floor in augmented reality to say ‘what’s up’ to your friends.’
After proper research and discovery, I simplified this into something much more fathomable: augmented reality messaging. We set out to build an immersive messaging experience that would leverage augmented reality to bring messages to life.
AR
Although users would be sending a new form of message, we wanted Mojiit to feel familiar and natural.
Users recorded a message using the front facing camera and customized a 3D avatar that would come to life with the user’s facial expressions and words for delivery.
To push the envelope with my first venture in augmented reality, I wanted to deliver an experience that truly embodied the essence of this unique technology from the moment you opened the app.
This led to the creation of our augmented reality inbox: new messages appeared as floating bubbles in the room around you, encouraging users to immerse in the experience by physically searching for incoming messages.
Our AR inbox and the recent Pokémon Go phenomenon inspired a vision for contextual integration with the world around you through gamification and geolocation.
Reflections
I was still freelancing with Mojiit when Mojiit AR was first released against my recommendation. The product was brought to market prematurely with poor performance and unfinished designs. Despite the quality, the product itself had fundamental flaws that I predicted early on during research.
Although the idea was novel, the real world application was lackluster. In researching user behavior, I struggled to find real use cases for ongoing, engaging conversation on the platform. We pivoted shortly after analyzing the results of our beta release.
Mojichat for iOS & iMessage
Mojichat for iOS & iMessage was the first product I worked on at Mojiit as Head of Product & Design. I studied our Mojiit AR product and found fundamental flaws in the user experience. Our users loved creating and customizing 3D avatars but wanted to share them in their existing conversations. Although AR was fun and novel to use, the product lacked legitimate use cases for engaging, ongoing conversations. After validating this through user research, it was time to redesign.
Our original, photorealistic avatar from Mojiit AR is shown on the left. Our redesigned avatar for Mojichat is shown on the right.
Mojichat for iMessage was quite a different animal than Mojiit AR. Although we’d still need a 3D avatar, we realized quickly the avatar we had—even if improved, would not work. The avatar for Mojiit AR was photorealistic but users had a hard time relating to it.
To deliver Pixar-quality animated content, we needed a Pixar-quality avatar. Resdeigning the 3D avatar required dozens of iterations in collaboration with a 3D character artist.
In addtion, we designed over 100 unique hairstyles and dozens of clothing options for personalization. When finished, all this content came together to deliver over 500 million unique combinations.
The user experience included 3 distinct touch points: the main iOS app, an iMessage Extension and a Keyboard Extension. The main iOS app delivered avatar customization, settings and convenient access to the Mojicon sticker collection. The iMessage and Keyboard Extensions provided quick access to the Mojicon sticker collection for use in Apple’s Messages app and other third party messengers.
Mojichat for iOS
Mojichat iMessage Extension
Mojichat Keyboard Extension
The third pillar to Mojichat for iMessage was the animated content itself. In collaboration with a graphic designer, character artists, storyboard artists and 3D animators, I curated and designed hundreds of animations.
Using strategic workflows in Trello, ideas moved from through a strategic process as they evolved from concept to production, allowing collaboration from design, animation, development, management... and even users!
Under my creative direction, our animation team produced expressive, 3D animated 'Mojicons' that our users loved.
During testing, we learned users easily spent up to 12-15 minutes customizing their avatar for the first time. To enhance each interaction, I designed more lengthy, higher quality animations that brought the avatar to life. Through these animated expressions, users developed a deeper affinity for the avatar itself.
Reflections
I consider Mojichat for iOS and iMessage one of my greatest accomplishments as a UX Designer. The product came together beautifully and outperformed all of our competitors in user experience. It was a truly groundbreaking achievement for my team and I validated by the response we received from users and industry experts.
When we launched in September 2018, users loved it! Over the first 12 weeks, Mojichat acquired 100k users with a 40% week 1 retention.
Within 3 months, we amassed over 4,000 reviews on the App Store averaging 4.6 out of 5 stars. In the end, I found users wanted more from the Mojichat product than the company was willing to invest.
Mojichat Messenger
Unfortunately, Mojichat Messenger never was released but the product concept was quite beautiful. Our CEO wanted to push Mojichat into social and asked that I design social media functionality within the iMessage keyboard.
Despite my concerns that the essence of a keyboard is for input (not consumption), the team was instructed to push forward. Our CEO wanted to take on Snapchat directly with functions like photo and video messaging, stories, groups and content feeds without leaving iMessage. Designing this product was almost as tricky as building it.
The first part was (mostly) easy: design a camera within our iMessage keyboard that would allow users to share disappearing photos and videos.
The media would be delivered as a bubble within the text message thread. Once opened, the media would disappear shortly after viewing, similar to Snapchat.
The complexity came into play when the user had to choose recipients. One of the most convenient aspects of Snapchat is the ability to send the same message to many of your friends. This was impossible in an iMessage conversation because apps were restricted within the context of the current conversation.
In Snapchat, users can easily share to all their friends through Stories. In Mojichat Messenger, traditional Stories were impossible because we were avoiding a friend list... an integral part of our iMessage integration.
An early mockup of Mojichat Stories. Although attractive, implementation proved impossible.
After carefully considering several different approaches, the social media part of Mojichat Messenger consisted of two primary components: Groups and a Stream. Groups gave users the ability to quickly discover, join and create both private and public groups.
Any content shared to a Group would appear in the iMessage Stream. Users would browse content in the iMessage Stream and have options to quickly share the content within the current chat or repost it to other Groups they belonged to.
Mojichat: Groups
Mojichat: Stream
Mojichat: Share
Reflections
Mojichat Messenger was a convenient way to share disappearing photos and videos within iMessage and the content stream opened a whole new window to social networking within iMessage. The working prototype of the photo and video messenger was pretty awesome but user research on the social stream validated my assumptions this would not be easily adopted. Our iMessage integration created an environment that wasn't ideal for this type of experience. We pulled the project before completion.
Mojichat for Twitch
In a search for an optimal product-market fit, Mojichat for Twitch was invented. People loved the original avatar and animated Mojicons we brought to market with Mojichat for iMessage but monetization required a larger audience than we could afford to acquire.
On the Twitch game streaming platform, we discovered users actually use emoticons to send donations to support their favorite streamers (called ‘Bits’). Through some research, we learned these Bit transactions amassed to over $300k annually for top streamers. The emoticons available today were super pixelated and either static or animated in 2D. The platform was ripe for innovation.
Early concepts of this product involved integrating our existing Mojicon stickers within Twitch Chat. If users sent current Bits through chat, our Mojicons could theoretically replace the current stickers. However, the API guides signaled this functionality was not currently available to third party developers.
In addition, through research and discovery we learned over $140MM annually is donated to Twitch streamers offsite fueled by in-stream recognition (small banners with traditional GIFs would appear on the stream each time a donation was received).
The finished product design encapsulated the best part of both current revenue streams: the ease of transactions by using on-platform Twitch Bits coupled with animated recognition that appeared on the stream, not the chat. With access to the full 12:9 stream, we were able to move into 30 frame, high quality animations similar to what one would see in an animated movie.
As we built financial models to forecast our revenue potential with Twitch Bits, we were disappointed. Despite some broadcasters taking home enormous income via Twitch Bits, third party developers only earn 20% of that revenue—and in order to do so, must take it from the streamer’s cut. The Twitch revenue model was flawed.
Our team went back to the drawing board determined to drive more revenue. What we came up with was groundbreaking not just for Mojiit and our users, but also for Twitch.
By integrating branded content within our animations, we would be able to drive multitudes of additional revenue from marketers with each Bit transaction sent.
Reflections
Mojichat for Twitch was an exciting new opportunity to bring our 3D avatars to an even greater audience... with monetization from day one. I left Mojiit shortly after completing this project and was unable to personally realize the results of my work. Since leaving, Mojichat for Twitch has launched on the Twitch Extension store and appears to be attracting interest from both streamers and Twitch.
next: