ROLE
Concepting, Prototyping, Wireframing, UI, Animation, 3D Modeling, User Testing |
TIMEFRAME
7 Months |
PLATFORM
iOS |
TOOLS
XD, Photoshop, Illustrator, After Effects, Maya, Substance Painter |
What is Posemoji?Posemoji enables users to upload their own video from their camera roll or shoot live to add AR effects to their body in real time. Using state of the art motion tracking AI, Posemoji transforms their movements into awesome effects.
|
|
"
Since the effects are so complex, you might think that the (Posemoji) mobile app UI might get a bit cluttered. But Posemoji is quite the opposite; it keeps all options and buttons down at the bottom of the screen to help users focus on implementing their filters and effects to their videos seamlessly.
Proto.io (Top 5 Mobile App Designs of April 2019)
Since the effects are so complex, you might think that the (Posemoji) mobile app UI might get a bit cluttered. But Posemoji is quite the opposite; it keeps all options and buttons down at the bottom of the screen to help users focus on implementing their filters and effects to their videos seamlessly.
Proto.io (Top 5 Mobile App Designs of April 2019)
How?
Ideation / Prototyping
Production for Posemoji was at a fast pace that truly embodied my team's spirit of passion, product experience, and focus. We plan everything in 2 week sprints; assigning very nitty-gritty stories, setting aggressive goals and pushing ourselves to meet them. After wireframing the app and getting buy-in from the team, I went immediately into prototyping with XD to validate the flow.
We then decided which special effects will make it into the app for v1. What does the user want to overlay effects on themselves for? To gain superpowers? To empower themselves? To express themselves in more creative ways? To answer these questions, we ran small surveys with friends and family. We took numerous hours of prototyping ideas and trying clever hacks. It was so much fun, it felt like being in game development again. |
Visual Production and UI
Since we're using our own renderer, we got to use our particle, physics and animation system quite extensively. Also, many of the effects utilized video textures created in After Effects. Body tracked effects created for Posemoji were categorized in several buckets. To name a few: Gloves (effects tracked on hands), Weather (pose-activated weather effects), Strings (effects that stretched between the user's hands), Wings (animated wings attached to the user's back). For more flexibility, users can also choose which limb to attach the effect to.
|
Did you know....
Posemoji was originally planned to be a digital cosplay app. Before we decided to turn Posemoji into an effects app, users could overlay different costumes/characters over themselves while tracking their movements. I created a bunch of 3D characters that sadly did not make it into the current app. The main reason for this decision was we discovered most people want to appear as greater versions of themselves, and not necessarily be someone else entirely. We still plan to implement this feature in some form once we implement a couple more big features.
Conclusion
This project involved stuff I love about working in tech: Pursuing the unknown and tackling hard problems. Posemoji was a cutting-edge behemoth that utilized and pushed so many of my skillsets that I've grown so much as designer as a result. Do opportunities like this come often? I hope it does. I'm very fortunate to have shipped such a fun consumer app with an amazing team of developers.