Da Vin Rokid Mobile App

A mobile application that utilizes AI technology to recreate the entire image with artistic effects for everyone to enjoy.

Overview

This mobile app relies on one of the most powerful consumer based platform in China, Wechat application, and has reach over 100,000+ usage in total in the first couple of weeks. We designed the app as a way of demonstrating our AI research’s capability and showcasing our AI algorithm of facial and object recognition. More importantly, we want everyone who knows or does not know about AI can enjoy the benefit of using the app brought by technology.

My contribution is that by combining training model research with usability testing, I was able to help verify product results through UX approaches. I also conducted prior-to-design research, wireframes, Interactions and UI elements and created delightful moments to wow users through every single step of their overall journey.

Role

Lead UX/UI Designer & Researcher, Individual Contributor

Time

October – December 2018

Goal of the app

Why are we designing this app?

What

Similar to Prisma app, Da Vin Rokid does not add filters on top of the image. Instead, it combines Artificial Intelligence and neural networks with object and facial recognition so that when images are being recreated with artistic effects, they are also being learned and told about its content.

Goal

To showcase our AI research’s capability which includes but not limited to AI algorithms of facial and object recognition.
Also, we want everyone to enjoy the benefits of automatically beautifying their photos without knowing how to photoshop at all.
Our target users are basically anyone who knows how to use smartphones apps and we do not restrict genders, specific attributes and etc.

Differentiation

Unlike the traditional type of UX design process where you go from primary research, problem, persona, scenario, design assumption, wireframe, lo-fidelity, (usability testing), hi-fidelity to final release. Most of the to-C apps nowadays are trying to create a product for the users whereas we are trying to create a tool for the users to generate their own product.

Usability Research

We conducted usability testing by presenting eight different categories and thousands of users’ own products (the end images created by the app) first and see which of the ones are most favored by the users. 

Original Image

Trained Filters

Processed Images

Research in Action

Created a massive excel sheet and assigned two categories, each with a couple of hundred images to a single participant.

Research Results

Filter 4

94%

Filter 8

88%

Filter 1

86%

Filter 10

80%

Filter 45

77%

Filter 33

74%

Filter 7

65%

Filter 20

65%

Filter 56

63%

Filter 42

60%
Interpretation

We randomize the image order and ensure that the same image has to be reviewed twice to minimize individual preference.
The takeaway is that Images generated with strong effects (color contract, heavy patterns) are likely to be noticed and selected from the crowd whereas images generated with slight difference than their original look are less likely to be noticed and therefore selected especially when the two are placed next to each other. However, this does not hold true for self-portraits especially for women who do not like superimposed effects on their faces. In other words, it has to look pretty and enhance their faces in a prettier way.

Persona development

For whom are we designing this app for?

Persona Creation
Wireframe
Design

I created the design from scratch including: logo, icons, buttons, Loading GIF, and frame design.

High-fidelity

Start Using

Welcome you

Image Upload

Detect your photo

Filter Selecting

Know your preference

Image Save

Save your memory

The most fun part

How do I use design to solve problems?

The animated Gifs helps increase task completion rate by 30% as it visually reduces the amount of waiting time, makes the whole interaction flow less boring and more interactive.

Final Results

100

Users

78

Adoption Rate

85

Task Completion Rate

92

User Engagement Rate
What I’ve learned

Here’s how our end results can be achieved and optimized design outcomes:
1. Tested out hundreds of templates to find the best ones that can be applied algorithmically to images or photos taken by users.
2. Added delightful experience and moments with “gamification” to the design. For example, once people uploaded an image, we allowed the system to detect what it contains.For example, it could tell me if it is a cat or a person.
3. More importantly, we made the final results better by adding customized frames for users who processed their files to compensate for not so beautiful images.