Heymoji

Heymoji is a mobile app being developed by iVirtual Technologies that helps users to create their 3D animated avatars with 2 photos of themselves.

Summary

The Problem

There were 2 research and 1 design problems that the client wanted me to solve.

  • iVirtual is sourcing ~1500 3D animations to be used inside the app from a third-party library. They wanted me to find out how they can sort these animations to increase user interaction. As a bonus, iVirtual wanted to know if it is possible to categorize these animations automatically.
  • iVirtual wanted to have an editor section inside the app for users to be able to combine their avatar and a background image to create content.

The Who

As per the client's description, the target audience for the app is all ages. However, to be able to conduct a successful user research, we focused on college aged people who are more accessible and familiar with the landscape of the product.

Research

The research process aimed to answer:

  • What type of content(background + animation = content) does the user want to see first?
  • What makes a certain animation better than the other?
  • How do users define categories of (e)motions?

Heuristic Evaluation

While a heuristic evaluation was not a deliverable for this project, I am glad that I did it because the findings helped me in later stages while designing the Editor. I have used a checklist made by Xerox based on Jakob Nielsen's Heuristics for the evaluation. The results have shown a couple of basic issues that may confuse the users and a couple of issues that have the possibility to frustrate them by breaking the flow.

A list of usability issues I have found during evaluation.

Repertory Grid Interview Study

This was the most vital and most challenging part of the whole project. iVirtual has created a tool for me to able to conduct this study efficiently.

The tool has helped me to conduct the study more efficiently.

For the study, I have shown a randomly generated ~50 triads from 10 different animations to each participant and asked them to select the odd one out and tell me what makes it different by using a single word or a short phrase. These definitions the participants have used created the “constructs”.

An example study where you can see the constructs, contrasts and factor names.

Competitor Benchmark

To validate and compare the findings from the previous research step, I created a competitors list and looked into each of their apps to gain insight into whether the results I gained through my analysis had echoes in real-world applications or not. This part of the process was free of Excel sheets. It was more like a free-form process, where I grabbed a cup of tea and went through each competitor.

While the benchmarking provided good insight, it also surfaced a challenge, which is extremely difficult to solve, that is unique to iVirtual in their quest to tag/categorize animations.

Research Results

Some of the results from the qualitative and quantitative analyses:

  • People prefer positive (e)motions over negative.
  • People prefer dynamic animations over static.
  • A "happy" animation is not always perceived as "happy" by users. Therefore, it is difficult to predict the categories of animations automatically while trying to categorize them.

Branding

Design

Sketches

This was the first time I’ve sketched with simultaneous feedback from the development team on what is possible, what is not and how the design would affect the development time. I am aware that it is a luxury but it was the best thing.

Most obstacles I have faced during the process were based on technical limitations and the duration of the project. For example, creating an intuitive search experience was out of the question because the developers did not have the time or resources to create a custom keyboard. This made me and the dev team think harder and come up with simpler solutions for the problems we have faced.

Low Fidelity Wireframes

The wireframing session was informed by the sketching session. After sketching, I sat down and controlled everything with a usability checklist to be sure. Once the decisions I have made look good, I created the wireframes and the flow of the Heymoji app’s editor function.

The Heymoji app is already available in app store. Therefore, instead of changing everything according to the heuristic evaluation, I created alternative screens to give options to the client.

Since it is not possible to show finger gestures that would be used to interact with 3D objects, I have created a quick animation in Adobe After Effects to show the client how the gestures/buttons would function.

High Fidelity Wireframes

Since iVirtual already had its branding and app designed, I didn’t have much liberty playing with the colours or fonts. So for most elements, I followed the branding guidelines prepared by the previous designers.

Results

Besides delivering a 37-page report including my research process and findings, I have also delivered an Editor module to the client. I handed off the final Editor design via Zeplin. Here's a video of it.

Reflection

Recruiting participants is challenging yet rewarding

In my previous projects, the clients would provide the participants due to the GBC Ethics Board directions. However for this project, I’ve handled the recruitment process myself. The research study was on a voluntary basis with no incentives and the study required me to take 2 photos of each participants. People like incentives and don't like their photo taken by strangers. So, at our campus, I asked maybe 20 people, none of them wanted to participate in a 20-45 minute study. I kept asking and I was able to interview 13 people in total. It was a big boost of confidence. I gave me valuable insight into the participant recruitment process.

It was fun to learn a new research method

The repertory grid study is not one of the “default” UX research methods. So I had to research and learn it in a short amount of time to be able to provide our client with valuable information. After reading numerous research papers, I finally got a grasp of it. I also was lucky to have my supervisor available for any questions I had.

InformationSummaryThe ProblemThe WhoResearchBrandingSketchesLow FidelityHigh FidelityResultsReflection