NewAPedia - Designing with users in mind.

Context: R2.AI.Inc wants to design a 'Wikipedia' of big data analysis use cases. Analysts can search for successful big data use cases and learn from them to make better data analysis projects. My job was to improve the structure, design the user interfaces and help the development team to implement it.

Time: July 2016 - Sep 2016

Role: Lead UI & UX Designer

Method & Skill: Information architecture, Wireframes, UI/UX design, Illustration.


1. Understanding the problem and requirements

Enterprises generate data in their businesses every day. Companies of all sizes are exploring methods to make use of the data generated within it. On the other hand, various examples of how people utilize data for their business needs scattered here and there on the internet, with different formats. The search process for such information is tedious and it is always difficult to find a good use case example.

The company has summarized a great number of use cases and they need a clear interface for users to search, access and collect them.

The primary users are business analysts and data scientists/analysts, and the secondary users are business executives.

Target Users

With the product, they can

1. easily search data analysis use cases;

2. read them;

3. make their own collections.

2. Improving the flows

I was asked to design based on a structure and function screen created by the project manager. So firstly I wireframed the site structure and user signup process to clearly understand the user flows and the interactions between each page.

NewaPeida wirefram v1

Figure 1. Wireframe to show site structure and flow click to see the full image

I noticed that in the original design, a user has to fill out 15 input fields to create an account, including email and password, personal and company information. The personal data(name, gender, etc) and the company info(company name, industry, etc) are not really necessary to create an account as Raluca from NNgroup suggested. On the other hand, asking too many questions may confuse users, and even make them give up signing up. (Example: One extra data field was costing Expedia $12m a year ). The signup process in Digital Ocean is a good example where only email and password is required. A user can explore the basic functions once an account is created. Other information(for example, billing information) would be asked if a user wants to use certain functions(set up a server, for example.).

NewaPeida wirefram v1

Figure 2. Sign up interface of Digital Ocean click to see the full image

When discussing this with the stackeholders, they insisted to ask users the personal and company information because:

1. they are useful for the company to verify the user identity and make sure they are real business customers;

2. by collecting their contact information they can understand their customer better.

Taking their considerations into account, a better flow need to balance the business needs and user experience. So I suggested:

1. Ask users to use company email to sign up if possible, so that it helps verify user identity;

2. Segment the signup process into two steps, make the personal and company info input field as an optional second step. Users can skip the second step to sign up. In case they want to fill out the information, they can always do it later in their profile.

NewaPeida wirefram v1

Figure 3. Simplify Signup Process click to see the full image

NewaPeida wireframe v2

Figure 4. Wirefreme V2 click to see the full image

Although the improved flow has more steps than the original one, it is a progressive approach to let user finish one thing at a time, and also give users the freedom to skip steps which are unnecessary for them. (Studies from Heap has shown that forms split into multiple pages help increase the user conversion by 4.8% ) Therefore it is a better signup user experience.

3. Defining styles and visuals

Data science is complex, yet we wanted to add a feeling of warmth and freshness so that users won't feel scared or boring. Inspired by intercom's illustration style, we decided to give a similar approach.

First iteration landingpage

Figure 5. Color, style version1 click to see the full image

In the first iteration, I explored some colors and layout, while maintaining the illustration style.

First iteration landingpage

Figure 6. Color, style version2 click to see the full image

In the second iteration, some use case examples were added so that the layout changed as well. Meanwhile, the style felt too casual that improvements were needed.



Figure 7. Final Apporach.

In the third iteration, I tried some illustraions with clean line charts and bar charts. To make more efficient use of the space, I replaced the cartoon-feel clipperboard with a simplistic background.

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.