Mr.One - The AI powered big data analysis application

Challenges: As the lead designer, support, Inc. in designing the AI powered data analytic and modeling web application with the best UX practice. Digest the complex data science process and translate it into user friendly flows and interfaces. Keep the look and feel in line with the most updated design trends while maintaining its own styles.

Time: Sep 2016 - Feb 2018

Role: Lead Product Designer, User Researcher, Team Coordinator

Method & Skill: Stakeholder interview, Information architecture, Wireframes, UI/UX design, Usability testing.

1. What is Mr.One?

It's a web application that helps business analysts and data scientists to analyze data, build predictive models, and deploy the model to run predictions.




Data Quality


Model Selection


Model Insights


Adjust Model Results

2. My Approach in High Level

advanced modeling

2-1. Understandings

The problem

Today’s companies generate tons of customer data every day, these data can be analyzed to inform business decisions and serve the customer better. However, the traditional data analysis tools like SAS has a steep learning curve. It requires training for an employee to master it. It needs experts of data science and the process costs a lot of time and money.

The Users

advanced modeling
advanced modeling

The Customer

advanced modeling

The data science process and it’s context

advanced modeling

2-2. Competitive Analysis


2-3.Design and Test



I used wireframes to communicate the detailed flow, layouts, placements of functional components on each step with the team. It served as a media to explore ideas and make common decisions.


Hi-fi Mockups and Prototypes

I used hi-fi mock ups to explore the look and feel of the app, and build prototypes in Marvel to show the interactions. I usually tested them internally and iteratively with my data analysts colleagues before delivering them to the Engineers for development.

design assets

2-5.Usability Testing

Before the Alpha version of Mr.One was released in the summer of 2017, the team wanted to improve the product's overal usability. So I initiated, planned and conducted a remote usability testing with 5 potential customers to get actionable suggestions on design improvements. For details, you can check this post.


Now the product is still in private Beta testing and is NDA protected. Therefore, I couldn't share it in detail here. Below is a case study of how I designed, reasoned and constantly improved a feature for users to handle multiple values in two-values only target variables, in collaboration with Shelly, the design intern, Yiwen, the CEO and the engineering team.

3. Case Study: Designing a Feature for Users to Handle Issues in the Target Variable


Final Design Choice

Context: a data analyst wants to predict what type of membership a customer will use based on customer behavior data. Different codes have been used to represent two membership types: free and premium. The codes included "1", "2", "free", "premium", and even "Apple" and "Banana". Before she conducts the analysis, she wants to unify the data value and its meaning so that she could later understand the prediction result.

Case Study Context


Scenario: After the analysts uploaded her data and selected the target variable membership_type, the application showed her that there are more than 2 unique values in this variable. She once confirmed that this is the target that she wanted to study and then selected "free" and "premium" as the two values of the membership_type. The analysts also told the application that "1" represents "free", "2" and "banana" represent "premium". Now that the target variable has only two values and the analysts would be able to continue her analysis.

Constraints: This case study only depicts how we designed the interface that allows the user to select the two valid values of the target variable in binary classification analysis, as well as to tell which two values actually has the same meaning. When the number of unique values exceeds a certain amount, information will show up to assist the user to decide if she chose the right target or the right type of analysis. The latter part is not included in this case study.

User Flow


User Flow - Option 1


User Flow - Option 2

We chose user flow -1 because we believe that selecting two value as the first step provides a clear entrance, and is more logical, whereas asking users to group the values into three groups first may cause a user to wonder how to group them at first place.


Step 1.Selecting two values:

The challenge here is how to ask the user to select two primary values for the target variable. There are two values, not more, not less, and the order doesn't matter.

Overall "Drag and Drop" has the benefit of displaying all values and making it clear that user only needs to select two values. Drag and drop is also a more straightforward design pattern.

Step 2.Assigning the primary values to other two values

We ideated two flows the user can approach to finish this task:

• a user can either decide the values grouped by the primary values (e.g., value a, c, d means the same as primary value "1", for primary value "2", value b, e means the same, the rest are garbled and should be deleted)

• or decide how to deal with a value one by one (e.g., value a = "1", value b ="2", value c = "1")

2-1 Explores the first flow while 2-2, 2-3 are explorations for the second flow

Interactive Prototypes

Based on different explorations on step 1 and step 2, I built 4 different prototypes iteratively with the help from Shelly, feedbacks from design review meetings and internal tests with the analysts.

Design Exploration 1


Design Exploration 1


• It's clear that user needs to choose two options

• Visibility of system status and the available action for each value

• Straightforward user undo and redo


• Drop down menu eliminates the number of options a user can see.

• Using table make the interface not visually pleasing, too much content upfront may add to the cognitive load to the users.

• % information is not necessary when assigning values

• Not visually pleasing

Design Exploration 2


Design Exploration 2


• The user can see all available values in step 1

• The drop-down menu in step 2 make the UI simple and clean


• It is not obvious that only two values can be selected in step 1

• May require too many user-clicks when the target variable has too many values

Design Exploration 3


Design Exploration 3


• The use of color make it easy to distinguish two different values

• Guided process in step 2, easy to learn

• Grouped action to assign values, reduce the number of user-clicks

• Can have a overview of what values means the same in groups


• Forced order in the second step might conflict with user's mental model

• Not easy to undo/redo, change the variable value

Design Exploration 4


Design Exploration 4


• Intuitive, easy to understand

• Easy undo/redo

• Can see the values in group nicely

• Visually pleasing


• Will require too many user-clicks when the variable has too many values

Overall, we all liked the last option for its intuitive interaction and simple visuals, and the Engineer will implement it in the coming release round.


Constraints are our good friends: during the process of designing this small feature, I found it really important to know the constraints beforehand. Clear logical constraints helped us understand why it's needed, when it will be used, and situations we need to consider; technical constraints helped us choose feasible design options; and the time constrain reminded us not to lost in details too much.

Collaboration boosts fruitful results: I'm amazed at how members in our team form their mental model differently. It was because we encouraged each of us to share our thoughts freely that yield totally different flows and interactions. And it was from the divergent explorations where we come up with our best design.

Thank you for reading

Thank you for reading

If you have any questions or want to collaborate, you are more than welcome to drop me an email.