Sahar Rahimi
design for complex data
Overview
Flexible Reporting was a top customer request in MachineMetrics’ product-market-fit survey. The goal was to overhaul the production report page into a single, customizable hub for generating all report types, replacing multiple isolated pages.
Key objectives:
Create a central report page for all reports.
Redesign controls, filters, and data tables for greater flexibility.
Add features for customizable grouping and user-permission-based access.
Include a date picker with quick links and contextual time ranges.
Improve charts and data visualization for clarity.
Previously, users had to access separate pages for each report, making comparison and unified export difficult.
Initial Iterations
We recognized the need to rethink the information architecture, main call to actions, and table of data. During that time I explored different solutions for organizing all the page elements while considering the main user needs and screen sizes. Additionally, I began to incorporate the machine icon that I previously designed for this project.
Final Iterations
To optimize screen space, I implemented a sidebar with expanding/collapsing functionality and used it to categorize the controls section. Red, Green, and Orange (as in-fault, good, and warning) represent a particular status of a machine or a data item in MM app.
I created a fully functional interactive prototype in Figma, which was used in user testing sessions with MM customers. Based on the feedback we received, I incorporated constructive changes into the design to improve its usability and effectiveness.
Controls
This section is divided into three tabs which gives the users more power and flexibility to build a wide range of reports.
Save Report
During usability testing and speaking with customers we learned the possibility to save a report would provide high value and it can also save a considerable amount of time for users.
Responsive Design
As part of my effort to design for touch screens, such as tablets and mobile devices, I initially explored the use of slide in/out controls. We opted to display only one column for the selected data at a time. However, after further exploration and testing, I decided to revise the comps and incorporate horizontal scrolling for easier reading of the data in the table. I also placed the CTAs (call to actions) at the bottom of the screen for better accessibility on touch screens.
Charts
In addition to the goals previously mentioned, we also aimed to include the ability to present data in the form of charts on the main report pages. However, there were several factors that needed to be considered in the first iteration of the chart design. This was a crucial step in our effort to sunset all individual reports and rebuild them in a single page. Below are the table for categorizing data items based on individual reports and their units, and my initial exploration around adding charts to report page.
In order to ensure accessibility and visual distinctiveness, I compiled a list of 12 colors that met these criteria within the given constraints.
Retro
I worked with cross-functional teams to make the report page more intuitive and improve the export experience with charts and a smoother workflow. Moving forward, I planned to explore ways to further optimize how users visualize and share their data.
