Cayuse - Fund Manager

Timeline:
Q4 2019 - Q1 2020

Role:
UX Designer & Researcher

What I Did:
Usability Research
Wireframing
User Interface Design

cayuse filter and report computer mockup (1).png

For people who used Fund Manager, filtering and creating data reports was confusing.

The inherited UI made it difficult to filter results, and creating reports was even more confusing due to a hybrid dropdown/modal and the stacking of modal on top of modal. Due to limited developer time, I could not completely redesign the experience so I had to focus on UI tweaks to improve the UX (as opposed to making significant flow and functionality changes).

Before

Is it a dropdown? a modal? how do you close it? all of these questions (in addition to the wonky UI) made for a very confusing user experience.

After

Changes: it’s obviously a modal (not a dropdown), easy to open and close, easier to save search criteria, and less visually cluttered. Also, the new suite-wide header design had been implemented at this time, which is why the surrounding product UI also looks different.

Usability Research 

Before embarking on a redesign, I did a heuristic evaluation of the existing Filter & Report function to asses the usability. I also did analysis of the UX workflow in order to guide future improvements when there are developer resources to do a full overhaul of the filter and reporting process.

⬇️ Heuristic Evaluation ⬇️

⬇️ User Workflow Analysis ⬇️

Personas

Using information from our Salesforce database, market statistics, and conversing with Research Administrators (some existing users and some employees who had formerly been Research Admins), I compiled two personas to inform my designs.

Creating personas helped me understand:

RA’s need to be able to start and stop without losing work.

RA’s run reports in order to keep finances in order often need to run reports quickly for their investigators.

A large constituency of RA’s are older and not as technologically literate.

Design Iterations

Initial designs —

No criteria entered. Buttons disabled.

Criteria entered. Buttons enabled.

Frames with the designs for all modal tabs.

Incorporating Feedback —

After meeting with the design team and my PM for feedback on my designs, we decided it would be a more functional user experience to allow the user to name their sets of search criteria for easy reuse later. So I added the “Save Search Criteria As:” input field in the fixed bottom footer of the modal.

Results

Filter & Report Modal Live In Product - Version 1

A small thing that needed to be changed that I failed to make a note of at that time, was that the “search” and “report” buttons should be disabled if no criteria has been entered.

Feedback for devs. Instructs them to remove the grey modal border and add the overlay shown in the designs.

Final Product

Improved modal without odd border and with a background overlay.

Retrospective and Next Steps

Future Plans

This project was meant to be a quick uplift, rather than a full redesign. Because the design was implemented without any final usability testing, the plan was to see how users like it, based on usage data and their feedback.

What Went Right:

This project moved quickly, in a good way. From my fellow designers giving me feedback, my collaboration with the PM, and working with the dev to get the design just right, I was able to work with everyone in a timely, efficient manner.

What Went Wrong:

I did not talk to any users directly during the design process and we skipped usability testing of the final designs.

What I Would Do Differently:

I would at least incorporate some usability testing with the final design. I would also consider testing out design options that are not modal-based, as I think this feature doesn’t inherently need to be in modal form.

What I Would Do Next:

Monitor the usage metrics and interview users to uncover remaining pain points. Also, I’d do some user research and usability testing in order to improve error prevention within this feature.