product design
tech: CTO + 5 devs
functional resources:
CEO, product VP’s & consultants
14+ Product Designs
Design System
Conference presentation
june 2024-now
UISG is a software enterprise in utilities that allows clients to track, analyze, and manage utilities. I was hired as their first designer, responsible for leading UX design for their first software re-write.
In this case study, I'll focus on Reporting.
INTRODUCTION
Reporting
View & analyze data
Role
Timeline
Team
Product Designer
June-Aug, MVP
Product: Jason Wingo
Engineering: John Claxton & Joe Spencer
One way you can think of Reporting is that its Excel, but for utility companies.
The legacy software looks really complicated! But the core requirements I focused on are as follows.
CORE FUNCTIONALITIES
PRIORITY 1
Find Reports
User must be able to find a report & open it
PRIORITY 1
View Reports
Users must be able to view all its contents
PRIORITY 2
Manipulate Reports
Although it isn't a top priority, users should also be able to add equations to manipulate data in-line.
PRIORITY 1: FIND & VIEW REPORTS
Finding & opening a report
"Report Manager" sorts all reports in a hierarchy. When a report is selected, it opens as a new tab.
MOST OF OUR CLIENTS ARE OPENING MULTIPLE REPORTS AT A TIME
Checkboxes are prioritized and “Selected reports” appears so users can see all they’ve selected.
Viewing a report
Users can edit contents of a report on the right-side panel, which can be collapsed when users want to focus on the full report.
Our consultants often get requests to format reports, so formatting options are added to the bottom of all reports for easy access.
PRIORITY 2: MANIPULATING A REPORT
Formula Mode: Adding a formula
ROADBLOCK: GRID INTERACTIONS
Our clients expect excel-like functionality & grid interactions. However, our legacy tool does not support these interactions and data manipulation exists in a separate tool outside of Reporting.
Users can insert columns, rows & cells.
Users can also add formulas to cells—here we are adding a sum.
SOLUTION: PRODUCT
All of our clients use Excel
There is an inherent risk for losing users who are more familiar with our tool…but they would also be able to pick up these new interactions quickly since they are already using Excel.
SOLUTION: ENGINEERING
AG Grid supports in-line editing & grid components are widespread in our software
Our software uses AG grid for grids, which is a “headless component.” AG grid supports in-line editing.
Grid components are also such a huge part of our software—even outside of reporting—that focusing on in-line editing for grids would be helpful for future products as well.
Formula Switches
ROADBLOCK: BALANCING CLIENT VS LARGER USER NEEDS
After convincing engineering that grid interactions were valuable and once they were almost done building them, our team discovered that a new client contract with Dominion was contingent on formulas.
However, I'd designed Formula Mode to not be a priority UX since it is used by power users.
We can perform the same calculation as before—adding a sum—by using formula switches in our Pivoting tab, without going all the way to Formula Mode.
SOLUTION: FORMULA SWITCHES
I discovered that our clients at Dominion only used a handful of formulas, which are recycled daily.
#1. In primary UX—or Pivoting tab
Our users spend 95% of their time in the Pivoting tab.
By adding switches to each dimension, users can perform their most-used formula functions while staying in Pivoting.
#2. Preserves Engineering work
This also preserves the original engineering work for grid interactions.
#3. Customizable based on client needs
Our consultants can apply different formulas to these toggles based on a specific client’s needs.
SUMMARY/IMPACT
Client signed!
After demoing our product to Dominion, we succeeded in signing a contract with them!
Recently, a handful of their analysts entered the software for the first time and we also have several other representatives from our existing client base using Reporting.
Source of truth between design and development
Some of the products that go into development are on such short timeline that there is little to no UX design work. Because of this, having a strong design system and having consistent naming between tokens and components, allows our developers to create consistent designs as well.
REFLECTION
Before, I had experience designing products that strictly adhered to a visual language and managing components in design system. This was my first time creating a design system from scratch. And it is hard!
I consulted leadership, led employee workshops, and interviewed users to align on our company vision and perception. Then, by using Figma's libraries, variables, tokens, and variants, I was able to work with developers to create a single source of truth across products.
At Medtronic, user research was a definitive part our the design process. At Apple, product defined processes. As the first designer, I had to decide what factors would drive our product.
UISG's business goals are driven by clients. Because we own an enterprise product and would be defining interactions foundational to both amateur and power users, I needed user research to help me validate assumptions, especially as someone new to the product space.
Design is new to UISG, and with a legacy product as powerful as it is, there could be some resistance to change. I am limited in knowledge as well!
I wanted design at UISG to be seen as fundamentally collaborative, often treating my industry-expert coworkers as designers too. I led company-wide collaborative workshops using Figjam, presented at our annual company meetings, and include cross-function stakeholders in as many design decisions as possible.