Report-Theme Panel Redesign
A global styling panel redesigned for clarity, efficiency, and confidence in report creation
Employer
Megaputer Intelligence Inc.
Team
Lead Designer (Me) | Front-End Developers
Year & Duration
2025 | 1 Month
Outcome
100% User Satisfaction | -80% Time on Task
"I can now find controls and apply them more confidently"
5. Enhance user intent awareness with a confirmation modal
When users first enter the report, the default style will be automatically applied to all sheets. Any changes made in the control panel trigger a modal dialog to ensure users are aware of and intentional about modifying the report's appearance.
6. Separate advanced options for better usability
To enhance usability and reduce cognitive load, relocate less frequently used options into a new tab labeled "Advanced Options". This reorganization allows commonly used controls to remain easily accessible while placing rarely adjusted settings in a dedicated space.
Scroll inside box to see full panel
Impacts
The usability testing results demonstrated significant improvements in efficiency and satisfaction in the post-lunch evaluation.
+ 80%
Time on Task
significantly accelerating the report creation process
+ 100%
User Satisfaction
clear and intuitive labeling reduced confusion
My Key Takeaways
Designing with users' mental models, established conventions, and clear labeling is crucial to a product’s success. These elements directly influence usability and decision-making. One of the core challenges was balancing simplicity with functionality—ensuring the interface remained clear and approachable while still offering access to advanced features for experienced users.
Introduction
As a UX Specialist at Megaputer Intelligence, I redesigned the Report Theme panel in the Web Report Editor—a platform for building interactive data dashboards. The panel enables users to set the visual style of reports across all pages and components. My goal was to simplify this process by introducing intuitive global controls, reducing cognitive load, and improving overall usability.
Current design; users should scroll through a long list of controls in Report Theme panel
The Problems
By conducting usability testing and interviews with users, I discovered some pain points.
"I usually skip the theme panel because there are too many options, and I don’t know what most of them do". - Data analysts
Cognitive Overload
Too many ungrouped controls slowed customization and caused decision fatigue.
Poor Mental-Model Alignment
The panel grouped settings by system logic (code structure) rather than user priorities, such as color or typography.
Lack of Clarity and Hierarchy
Users were unsure what each setting controlled and how it would affect their report.
Redundant and Unused Controls
Several low-impact options cluttered the interface, adding no value.
Lack of Visual Feedback
Users wanted to instantly see changes when adjusting themes.
"We’re on a tight sprint cycle and need a version of this redesign that can be implemented quickly." - Software developers
Limited Resources & Release Cycle
Must balance UX improvement with existing engineering capacity and fit within a one-month sprint.
Technical Constraints
Some visual updates couldn’t support live previews without major refactoring.
Design Goal Statement
My goal was to redesign the panel into a lean, intuitive interface that streamlines styling tasks, promotes consistency, and reduces cognitive load—while respecting development time, budget, and architectural limits.
Defining Design Principles
To guide the redesign process, I established design principles rooted in user research:
Progressive Disclosure
Surface only essential controls; hide advanced settings in expandable sections to minimize cognitive load.
Visual Hierarchy
Differentiate control levels through spacing, grouping, and typography to improve scanability.
Visible Impact
Provide instant visual feedback through live previews, reinforcing user confidence.
Final Design Deliverables
Before
After
1. Displaying “restore default” once in the heading
Omitting the repetition of this text maintains a cleaner and more concise design, reducing unnecessary visual noise for the user.
2. Shorten the customization process by automating part of the process or providing presets.
3. Organize controls into collapsible sections based on user’s mental models (Typography, Colors, sheet-specific controls, etc).
4. Reveal sheet controls on uncheck
Any changes in this section trigger a one-time modal dialog, notifying users that these actions will overwrite settings edited in the section above. (Image below)