PROJECT OVERVIEW
Pilot is an internal web application that users use to generate various financial reports for a financial services company based in Southern California. I’ve spent time working with Margaret Farron, a Visual Designer from Avanade, to improve the user experience of using the report display options in Pilot while being mindful of AG-Grid limitations.
Please note: Due to legal & compliance guidelines, the company name and sensitive data has been removed from the mockups included in this case study.About this project: Report display options in Pilot
Problem: How might we simplify and standardize the report display options across the more than 10 different reports in Pilot, making them user-friendly and consistent?
Solution: Move the report display options within the AG-Grid column drawer for a uniform appearance across all reports, eliminate redundant options, and prioritize efficiency in report filtering to enhance the user experience.
Timeline: From early-stage wireframes to handing off designs to the developers, the process took about 2 weeks.
My Role: I took the lead on the UX/UI design of the the display options in each of the reports, considering AG-Grid limitations and stakeholder requirements. My colleague supported me throughout the process.
Team: Myself and Margaret Farron (Visual Designer, Avanade)
Tools: Adobe XD, Figma
Before Redesign:
Below: All of the display options are shown above the column headings with the same dropdown style regardless of how many options are available.
Step 1: Synthesize user research findings
Based on previous user interviews, I noticed there were some users who found the report display options confusing and frustrating to use. Common themes:
Users did not understand the difference between some of the options such as “Period” and “Frequency” resulting in decreased efficiency with reporting because they would test out both options.
Users do not like that they have to apply the report display options every time they add a new portfolio to cart.
Step 2: Usability audit
I began by performing a usability audit across all of the existing reports in Pilot to empathize with users and identify opportunities for improvement. Takeaways:
It’s confusing that some of the reports have the same display options but are labeled differently depending on the report.
Some of the reports contain only 2 options in the dropdown menu which requires more clicks to reach the options.
When multiple selections are made in a dropdown, the selections are shown in a comma-separated list that maxes out at 3 items.
Some of the options listed in the dropdown menus are unclear and use financial jargon.
Step 3: Ideation
Based on user interview findings and my usability audit, I created wireframes using Adobe XD to explore some design options.
Below: The display options would open to the left of the grid and push the grid to the right.
Below: The display options would move into the existing “column” drawer that comes with AG-Grid.
Below: The display options would open with a dropdown menu overlay.
Step 4: Sharing designs with stakeholders
I shared my designs with the Product Owner of Pilot and his manager - one preferred the tabbed drawer design and the other preferred keeping the display options above the report as it was more easily accessible.
I used Figma to create hi-fidelity mockups for all of the reports in Pilot to demonstrate both designs so that the stakeholders could narrow down the options prior to development handover.
Below: (1st image) The display options remain between the report heading and the report grid, but with a new look and feel and less jargon. (2nd image) Showing the display options in a closed state.
* Note: Due to sensitive data, the jargon changes are not displayed.
Below: The display options are shown in a new tab next to the “Column” tab as part of the AG-Grid drawer.
Step 5: Finalizing design & handing designs over to the development team
Before meeting with the Product Owner and his manager, I met with the development team to verify feasibility with the drawer design.
The Developers shared that the new design would require minimal custom code for the dropdown menus and styling since it leveraged the existing AG-Grid drawer.
I shared the tabbed drawer design with the Product Owner and his manager, and they approved of the design since it decreased the text-heavy report headings, minimized the need for custom code, and allowed for more vertical real estate for data in the reports.
I also created a user story in Jira to enable the retention of report display options within the same cart session. This enhancement aims to save users time by eliminating the need to frequently adjust the display options.
Step 6: User feedback after build & iterating on the design
The redesigned report display options were released, but inconsistencies arose in naming conventions and styling across different reports, resulting in frustrated users.
To address this, I created a user story in Jira, tasking developers with aligning the styling and adopting consistent naming conventions across all reports. This was done to enhance user clarity and minimize confusion.
Following the implementation of these changes, I gathered feedback from 5 users. They reported time savings in adjusting report display options, improved understanding of the display options, increased data visibility, and expressed appreciation for the modernized appearance of the UI.
After redesign:
Below: The display options have been moved inside of the AG-Grid drawer which allows more rows of data to be shown vertically in the report.
Step 7: Measuring success
Since the company does not track metrics for this internal application, I would measure success by surveying users to compare how much time they spent altering display options before the redesign versus after the redesign. This would give a time savings estimate and could be used with salary data to identify company cost savings.
I interviewed users after the feature was updated and 5 of 5 users preferred the new display options to the previous version. I also received positive feedback for designing a solution to add default date selection.
Users asked for an enhancement to allow them to save their report display settings. This feature was added to the backlog and released about 3 months later due to other product priorities.
Reflection
While designing this solution, I realized that your first design is not always the best design, and that’s ok. I found that being open to feedback is invaluable. I leaned on my colleague throughout the design process since I had a lot of questions along the way in terms of spacing, adding/removing lines, text orientation, etc. We did not always agree on every design choice. However, it was enlightening to learn about common design patterns from Margaret and discuss how a subtle change like rotating text might impact the user experience (i.e., rotating the tab labels on the drawer 180° changes the direction that a user reads).