Data Analysis Web Reports Editor
An interactive graphical reports system for communicating data insights
The Context
PolyAnalyst is a data analysis tool that helps people discover and understand meaningful insights in their data. It includes a reporting platform that is widely used by our users for creating custom interactive graphical reports and sharing insights with colleagues or clients. In the process of building such a report, an analyst takes various components such as graphs, tables, text, and filters, and assembles them into an easy to follow format.
Screenshot of PolyAnalyst's flagship software Web Report Editor.
Screenshot of the New Web Reports, a cloud base rich application. Showing the main interface which user can create, modify and publish interactive reports.
In 2016 October, the initial launch of new web report editor was presented at company annual conference, and has been used on several client projects since then.
The Process
The Challenge
Presenting data insights with an interactive visual report is a critical step for our user; however, only a handful of the experienced user was using the web report platform because of the steep learning curve and time-consuming process.
The Ask
Redesign the product to make it easy to use with intuitive, meaningful user experience and beautiful interfaces.
The old platform was an engineering-driven product built in the past 10 years. Although there are many useful features, the entire product has so many broken areas and has chaos configuration logic that only a handful of our internal expert analysts knows how to find ways to create an appropriate report.
Understand project scope
To start, I conducted stakeholder interviews to understand the project scope, result expectation, and success metrics. I was able to transfer the project needs and concepts into categorizable requests:
Move existing product from a native application to web rich application
Improve overall workflow across the entire report editing and reviewing process, that shared among multiple users
Standardized, consistent key elements along UX/UI
Apply-and-see, responsive editing experience
Beautiful visualization and UI style
Research
With the insights in mind, I conducted thorough user research...
After collected and examined the initial user research survey, I spent most of the time to conduct Qualitative research to gain more in-depth understanding, to really get into the mindset, scenario, and workflow of users, and fully understand the functionality and logic behind current software experience.
I started the research by interviewing key users includes both experienced users and new/potential users to understand their needs and goals. More importantly to identify critical moments and motivations, then map out the user journey with all touch points; While the same time, I conducted heuristic evaluation to analyze the old system’s structure. Then map out the information architect and groups of the key feature sections to break down elements based on the functional categories and user flow.
It became clear after analyzing the research results, that there are many big and small problems and opportunities are across the entire complex platform, while it can also be sorted into different priorities based the level of user needs and shared vision among stakeholders.
Discover the user model and their goals:
The entire platform has two parts: Report Editor for analysts to create the interactive reports, and Report Publications for the end user to review and explore data insights. Mapping out the relationship between users, and how they interact with the products helped us to fully understand the levels of needs, and allow us to better define product scope and design priorities to serve the right needs.
Key insights and success metrics
Workflow completeness with intuitive and efficient UX
Easy-to-interpret visualizations
Effective and efficient process update to quickly reflect report modification result
Delightful Interaction
Interaction design (Low-fi flow)
I created lo-fi wireframe flows to map out the step-by-step moments of the user experience. I tested and iterated few rounds to polish the steps with a focus on the experience stream and interactions possibilities, rather than the detail layout of components within each interface.
After the interaction flow is well-suited user needs. I start to work on the detail screen and features. Below are two example features:
Feature 1: Left Panel Design
Approach/Research
My initial approach was focused on:
Understand use case
Define success metrics
Evaluate existing design, includes:
How the logic works
Actual usage with the original design
Problem analysis
Key insights:
Some of the major problems users complained were: there were too many steps to create a simple report; some connected and frequently used features are scattered into places; overly provided manual setting options has complicated the process, which diminish the experience and satisfaction it provides.
Because of those feedbacks, my first instinct was to research and explore ways to find out a better organized setting panel (or panels), that provides user experience and interaction that follows user's immediately intuitive.
Map out the information architecture flow
Exploration, design & iteration
Left: Side panel navigation tabs - vertical (top), horizontal (bottom); Right: dropdown panel (top), dropdown menu (bottom)
Sample mockups from initial rounds of detail features usability test and feedback loop.
Final Solution & rationale
The Left Panel design solution has largely improved the efficiency for the user (analysts) to work and manage multiple key features in an integrated location.
It has combined 4 separate function panels (from the old experience) into one expandable side panel in a natural and logical order, where user can easily jump between function tiles without breaking the experience flow.
It has provided a side-by-side interaction experience, user can "apply and see" at the same time, which keeps their editing focus on the presentation of data insights.
The collapsible panel provides user the flexibility of making more rooms on the canvas area review the report content.
Feature 2: Fluid grid system
One of the earliest key product feature designed for the new web report editor.
Problem:
Fixed component layout no longer serve the best reporting screens, because end user’s viewing device varies a lot.
Data Analysts spend too much time to define each visual element’s size and dimension when first place them in the report.
Modify components along fixed layout is extremely inefficient.
Solution:
The fluid grid system allows automatic adaptation to various screens and resolutions our end user may use.
User can simply drag a component inside canvas area to add visual elements along the fluid-grids layout.
The fluid-grids layout allows user to easily rearrange visual elements, as well as adjust individual component’s border spacing.
Here are 2 interaction concept demos, used for communicating design concepts with stakeholders in early product development meeting.
>>drag and drop interaction
In the old experience, in order to add each component, user need to spend at least 5 steps to complete the action. Which is a very inefficient and tedious process.
This solution allows user to simply drag a component inside canvas area to add visual elements along the fluid grids layout.
>>hover activation
Design page layout and adjust components arrangement is one of the most needed and frequently used features.
The fluid grids layout allow user to rearrange visual elements, as well as adjust individual component’s border spacing.
Feature 3: Data Visualization Style Guide & Design System
Data Viz Style guide
Visualization plays an important role in this web report system. While conducting user research, I learned it was one of the major painpoints among the users. Over 90% of the users complained they are spending a lot of time on figuring out the visual presentation of the charts and page layout, so it looks beautiful and tells a clear data story, for the client to easily review remotely.
To solve this problem, together with the Marketing team, we created a visual style guide that suggested a collection of visual guides on text, color, contrast ratio…etc. that match our brand identity, while also taking into consideration of accessibility. (image below is a sample section of the guide)
Along with the style guide, we later designed a new built-in color palette based on the same goal.
Design System
As the product becomes more completed, our design team feel the need to keep to the design look and feel consistent, so another designer and I started to build our first ever design system.
We followed the Atomic Design Methodology to create a component library with Sketch.
Results and Reflection
Web Report Editor was a great learning experience for me to understand how to transmit a complex software into a user-first product. I enjoyed a lot in collaborating with a team of talented engineers, project manager, data analysts, and I'm grateful to have the opportunity to lead and work with a team of awesome UX designers.
In 2016 October, the initial launch of new web report editor was presented at company annual conference and has been used on several client projects since then.
There are many other redesigned and innovative features from the design process has launched and maintained through iterative improvement, that I can not share publicly.