What is Emotar?
Emotar is a mobile app by HTC Research & Development, that aims to help users create personalized stickers for IM apps.
Over the past decade, stickers have become integral part of messaging culture as well as a large segment of messaging app revenue, particularly in Asian messaging apps such as Wechat, Line and KakaoTalk.
Emotar uses selfies as input to create stickers with the user’s face, after some facial projection mapping. Freaky? Yes. Fun to use? Definitely.
Background and my role
I worked on Emotar as the sole designer during an internship at HTC. I collaborated closely with our PM, Monica, and 2 developers to redesign and ship the app over the course of 1 month.
Our biggest constraint was time — with limited technical resources, I had to iterate quickly to get the designs over to the developers.
A People Problem
At the onset of the project, our team asked ourselves: why do people use stickers? There are the obvious reasons — convenience and humor.
Then there are more subtle motivations.
Stickers are used to communicate subtext. An “angry” sticker doesn’t necessarily mean (and is rarely if ever used when) the user is angry. Rather, it conveys minor annoyance, or feigned annoyance for comedic effect. Like their static friends emojis, stickers allow for nuanced sub-communication to be added to the message.
Emotar’s goal is to help users communicate that subtlety with a personal touch. Sending a sticker with one’s own face is a reminder of the relationship between the sender and receiver. It’s saying: “I’m crying on the floor.”
The former iteration of Emotar has features that heavily emphasize random exploration and discovery. This is achieved through:
- Swipe left and right to look at all the possible stickers — essentially choosing a sticker relies on discovery
- “Random” is a primary feature that generates a completely random sticker with one of the selfies in its history.
Problem Statement
People don’t want to discover stickers randomly. They want to quickly compare context-specific stickers and choose one for whatever it is they want to communicate.
We arrived at this problem statement after closely examining qualitative and quantitative data on the previous release of the app.
I prioritized the use cases for Emotar:
Home page — information hierarchy
The information hierarchy for the previous iteration of the app, in rough order of priorwas:
- Currently Selected Sticker
- Create button > begins the process of creating a sticker starting from photo to 3D avatar to sticker selection
- History > previously created stickers
- Random > randomly generates a sticker
- Share
In relation to the problem statement our team established, the hierarchy was simplified as follows:
- Currently selected sticker and option to change sticker
- Currently selected face and option to change face
- Share
We decided that information most pertinent to choosing stickers would be displayed on the home page, rather than a separate menu. In addition, we wanted to bring sharing to the forefront.
Explorations
Round 1: A New Main Page
I tried to brainstorm news ways that a sticker could be easily edited, as well as compared to its alternatives.
Exploration 1
Advantages: horizontal scrolling to change stickers and vertical scrolling to change sticker packs differentiates the two systems
Problems: face and history correspond to very different systems but they are formatted the same way
Exploration 2
Advantages: There’s a clear linear process that moves from creating to sharing: select face, then sticker pack, then sticker. All three elements are manipulated the same way, through horizontal scrolling.
Problems: Horizontal scrolling is cumbersome if there are many elements.
Exploration 3
Advantages: Users most like have less sticker packs than the number of stickers per pack. So, it makes sense for sticker packs to be scrolled through horizontally, and stickers to be displayed as a complete set.
Problems: Changing the face requires another level of navigation
The following points came up in critique:
- Faces and stickers are distinctly separate systems, but we’ve been treating them is similar.
- Putting faces on a separate screen is a trade-off
I feel like the trade-off is justified as after a face is decided upon, the user sticks with the same face for a while.
I chose to move forward with exploration 3, because it establishes the home page as a space for comparing stickers rather than creating them from scratch.
Round 2: A new selection menu
I then explored alternatives for the sticker selection.
I chose to go forward with Option C:
- Paged scrolling would be advantageous over vertical scrolling because of the limited vertical size of the window.
- A scroll from the last page in a set could transition into the next set, which would be consistent with the horizontal sticker pack model.
- The primary action — selecting a sticker is clear, and sticker packs are easy to change.
High fidelity design
Conclusion
In addition to redesigning the selection model, I worked on a visual style guide, and reworked existing screens for consistency. I also worked on redesigning the on-boarding process, sharing feature, and photo-taking feature.
What I Learned
When there are limited technical resources, you have to make trade-offs between the optimal solution and the most feasible one. There were times where I had to prioritize solutions that were realistic in the given time frame over more delightful ones.
The final iteration of Emotar was shipped Fall 2015.
