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.
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.
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.).
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.
Figure 3. Simplify Signup Process click to see the full image
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.
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.
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.