Design Task

Problem Reframing

1. Primary Research

What did users complain about?

• Getting lost during editing
• It looks messy
• Ugly

What is the purpose of using "Sheet tabs" and "Sheet list"?

• To navigate and identify each dashboard sheet story

Competitor Analysis

I did research and analyzed several direct and indirect competitors. The purpose was to understand the industry standards and find opportunities for us to shape our features.

Competotors

2. User Research

There're two target users using the product PA Web Reports:

Report creators create business reports by generating meaningful text, visualizations, and data analysis scenarios. Report creators would incessantly modify and customize the specific needs of their individual decisions on each report before publishing the final business report to the client as the end user.

Report viewers receive the final published report to review the insight of the business report. Viewers are audiences, they read and review the final result that the report-creator provided. 

Finding

1. Understand Product Vision

Three main purposes of using PolyAnalyst Web Report:

For the product PA Web Reports, our users are using the Web Reports for 3 main purposes. Based on the size of our existing user group and the market vision for the product that I discussed with my CEO, we decided to focus this design on helping users better present their data insights & findings.
 

2. User Research & Shadowing

3. Understand Feature Vision

Different user has different purposes for using the feature.

a. Sheet Tabs

How to accurately identify and navigate to the specific sheet while editing?

• Clearly read the tab names
• Easily and accurately adjust the order from different sheet tabs
• Organize from millions of sheets

How to easily & accurately identify the position during presenting and reading?

• A prominent and suitable sign is better than a name for a specific sheet tab

b. Sheet List

Why is the secondary feature?

• Users just need to know the total sheets before they start finding insights into the Web Report
• It's more like an overview index in some needs at some times if users come back to check the Web Report

What should be included in the overview?

• Identify what the user wants to see in this situation
• Such as showing the "total # of sheets", "the hidden sheet", "Name", etc

4. Key Takeaways

Sheet Tab & Sheet List are always playing a “Navigation” role with some additional different needs between edit mode and present mode. That I think if my design focus on these two scenarios that also can satisfy the read mode scenario. 

Design Plan

UX:  70% of the time

Project Goal  [Part 1]

Optimize the navigation feature in 2 scenarios, edit mode and present mode.

Edit Mode:  Identify an accurate story page.

Present Mode:  Easily find a story position when presenting a report to end-users.

UI:  30% of the time

Project Goal  [Part 2]

Provide detail perfect UI to fix some existing trivial problems.

Design Solution

How did I optimize the design of "Navigation" & "Identification"?

a. Changed the sheet tabs position

b. Created new sheet tabs to fit the present mode

Data analysts will guide report viewers to understand a report in a story flow. So I created a new minimalist tab design with a color marker to simplify the presenting report and help data analysts find the story position by the color reminder.

I collected some examples of simple navigations tab design and started brainstorming to sketch possible ways to display simple tabs that fit a Web Report present mode. 

c. Iteration

I broke down a few types of tab design by dot, line, rectangle, and square. Then I moved on to iterate the design by the steps in the following:

1. The visual design between active and inactive tab
2. Displaying the color marker on the active and inactive tabs
3. The dynamic design of mouse-hover-over a tab

Final Interaction Design

Buttom Tabs

Additional Improvement

I created a new way for users to flexibly shrink the sheet list in the left panel while viewing or presenting a report.

A sheet list in the left panel now can better help users get an overview of all the topics as a secondary need. The sheet list shouldn't take over the space of the report as always while users are presenting or viewing a story. So I created an option with a fluent interaction flow to allow users to decide when the sheet list is shown or hidden. 

In an editor's Web Report

In a publication Web Report

Pixel - Perfect UI Delivery