PROJECT OVERVIEW
Pilot is an internal web application that data analysts use to generate various financial reports for a financial services company based in Southern California. These reports support the investment group on a recurring and ad-hoc basis. I’ve spent time working with Margaret Farron, a Visual Designer from Avanade, to improve the user experience of filtering for portfolios in Pilot.
About this project: Pilot filters
Problem: How might we improve the usability and functionality of the filters page to make it easier and more intuitive for data analysts to navigate and filter through portfolios, resulting in a more efficient filtering process?
Solution: Redesign the filtering page in Pilot to follow the existing design pattern of 2 internal applications to decrease the amount of time spent filtering portfolios.
Timeline: From early-stage wireframes to development, the process took about 9 months.
My Role: UX Designer
Team: Myself and Margaret Farron (Visual Designer, Avanade)
Tools: Adobe XD, Figma
Please note: Due to legal & compliance guidelines, the company name and sensitive data has been redacted from the mockups included in this case study.Step 1: Usability audit
I began by performing a usability audit of the filters page in Pilot to empathize with users and identify areas of improvement for the filtering experience. Here are the outcomes I learned from the audit:
Users spend a significant amount of time expanding each sub-filter individually to find the desired portfolio.
The cart is located below the sub-filters, requiring users to scroll down to view their selected portfolios, making it difficult for users to see everything at once.
Selecting sub-filters does not behave as expected, causing users to spend additional time filtering for portfolios, confusion, and frustration.
Step 2: Synthesize user interview findings
I conducted interviews with 6 users across different teams to understand pain points with the existing filtering page. I summarized and analyzed the interview findings and identified 3 common themes:
5 out of 6 users thought the filtering screen was confusing and time consuming, and users preferred the filtering experience of another internal application.
Users are frustrated that the cart sits below the filters page because users are unable to look at the cart and filters simultaneously.
Users are frustrated that they have to return to the filter page to remove portfolios from their cart because it interrupts their workflow when interacting with reports.
Below: a screencap of the Pilot filters page before redesign to demonstrate how users have to individually expand sub filters to see how the filtered results are impacted across other sub filters.
Step 3: Ideation
I analyzed filtering experiences on popular websites such as Nordstrom, ThredUp, and other online storefronts to identify common patterns and inspire Pilot's filtering interaction.
I compared filtering experience in other internal applications at the company to find commonalities, strengths, and weaknesses, drawing inspiration from them.
I collaborated with my colleague, sharing the findings and reaching an agreement on the desired filtering interaction.
I created initial wireframes of the filters page and cart and provided design direction and business context which were utilized by my colleague for the final visual design for the filters screen.
Below: screencaps of early stage wireframes of the cart I designed (sensitive data and information redacted).
Below: screencaps of early stage wireframes of the filters designs (sensitive data and information redacted).
Step 4: Test new designs with users
We presented the initial wireframes to 5 users in 1:1 meetings to test if the proposed solution would meet the users needs and iterated on the design based on feedback.
Step 5: Gathering feedback from various stakeholders
We shared our designs with stakeholders including the Product Owner, senior leadership, and IT subject matter experts (SMEs). Highlights of the proposed design:
Follow the design pattern of another internal tool to minimize the need for users to learn a new portfolio filtering tool
Expand filters by default to decrease the amount of time spent looking for the correct filter
If possible, re-use existing code from another product to save the company time and resources
Offer an option for users to set “favorite filters” to minimize cognitive load
Give users a way to save commonly used portfolios within a “cart preset”
After sharing the design, we were met with conflicting feedback.
The Pilot development team did not want to re-invent the wheel with custom code for filtering. The Pilot development team proposed the idea of a “widget” that would be maintained by another product team at the company.
The other product team did not want to own a re-usable widget across multiple products since the other products had different requirements they’d need to keep track of.
The group did not come to agreement by the end of the meeting, so I met with the two product teams, separately, to understand their perspectives.
After meeting with both teams, I met with my colleague Margaret to discuss our designs and decide if we needed to make any changes to our designs.
Finally, I set up a follow-up meeting with the stakeholders to verify our design met the business, IT, and user requirements.
Step 6: Hi-fidelity mockups
Below: a screen cap of the redesigned filters screen in Pilot with sensitive data redacted.
Final design choices explained:
Redesign the filter page of Pilot to follow design system of 2 internal applications to reduce the amount of time users spend to learn how to filter for portfolios.
The cart is repositioned to the right side of the screen as a drawer, allowing users to collapse and expand the cart to give them more space to interact with main filter page.
Designed a new feature that would allow users to save multiple portfolios as a “preset” so that they can quickly select a bunch of portfolios in just a few clicks.
Users can also an access the cart from all screens in Pilot to decrease workflow disruptions.
We added a new tab, “Favorite Filters,” for users to save their most used sub-filters to reduce the amount of time it takes to filter for portfolios.
Allow users to filter at the Asset level instead of strictly at the portfolio level to allow for improved data exploration in Pilot.
Step 7: Development handoff
We handed designs over to the developers with some development goals in mind:
Stay consistent with internal design system and utilize API calls to another internal application to reduce the amount of engineering efforts to develop the redesigned filtering screen
I helped with testing the functionality throughout the development sprints in test environments, and I facilitated User Acceptance Testing prior to release to identify any bugs.
The developers spent 4 months developing the redesigned filter screen. The new filters were not launched until 5 months later due to other priorities on the product roadmap.
Step 8: Measuring success of the design & iteration
The company does not track metrics on this internal application, so I interviewed 5 users and learned there was an overwhelming sentiment that the new filter screen saves them time searching for portfolios. Users expressed that the new design is “so much better” than the previous design.
I also collected feedback on the design after the release and here are some highlights:
5 of 5 users said the new filter design is better than the prior version.
One user said “Save cart is a life saver. It saves me SO much time when selecting several portfolios. ” because it saves him so much time in searching and selecting portfolios to review in the reports.
2 of 5 users asked for small enhancements to improve portfolio selection. These enhancements were added to the backlog and developed within 1-2 sprints.
Reflection
Redesigning Pilot was enjoyable and engaging. Interviewing users helped me understand how to enhance their experience. I realized that prioritizing users' needs is more important than following big tech companies' approaches when redesigning a major feature. Users were frustrated with the time-consuming filtering process for portfolios, and aligning with existing design patterns at the financial services company was crucial to eliminate the need for users to learn multiple filtering methods across applications. As next steps, I am in the process of updating existing designs to match the newly implemented design system across the application suite at the company.