NewAPedia - Designing with users in mind.

Context: The company 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: UI & UX Designer

Method & Skill: wireframes, UI design, Illustration.


1. Understanding the problem and requirements

Enterprizes 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 ammount 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 sign up process to clearly understand the user flows and the interactions between each pages.

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 neccessary to create an account as Raluca from NNgroup sugested. 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 sign up process in Digital Ocean is a good example where only email and password is required. User can explore the basic functions once an account is created. Other information(for example, billing information) would be asked if 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 stackholders, 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 acount, a better flow need to balance the business needs and user experience. So I suggested:

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

2. Segmented the sign up process into two steps, make the personal and company info input field as a optional second step. User can skip the second step to firstly 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 it seemed that the improved flow has more steps than the original one, it tooks a progressive approach to let user finish one thing at a time, and also give users freedom to skip the step that is uneccessary for them. (Studies from Heap has shown that forms split into mutiple pages help increase the user conversion by 4.8% ) Thus it provided a better sign up user experience.

3. Defining styles and visuals

Data science is complex, yet we wanted to add a feel of warmth and fresh so that it won't feel too 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 maintain 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 stakeholder pointed out that the style looked too casual, maybe because of the cilpperboard at the middle.



Figure 7. Final Apporach.

In the third iteration, to make it feel more neutrual 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.