What is Cayuse?
Per Cayuse's website: "Cayuse is a cloud platform that helps research organizations manage billions in research funds and drive impact across the entire research lifecycle." Cayuse's products are research administration software centered around grants.
What did I do at Cayuse?
UX Designer on multiple product teams
Owner of Design System
Accessibility Guru
Case Studies
#product
Case Studies
Designing My Tasks: Multiple product teams collaborating and utilizing new usability test initiative to rapidly design 8+ new features
A look at the different features designed at the same time for the My Tasks project. Main features include: New improved dashboard with a way to search and filter tasks, uploading attachments, tagging, commenting, user assignment, reminders
Key takeaways
Multiple product teams (PMs, stakeholders, devs) needed to work on a new cross-platform project; needed new process for collaborating and sharing ideas
Major stakeholder input was a high priority due to customer investment
8+ individual features were designed concurrently with the multiple teams
Relied heavily on RAPID prototyping to inform design designs, using newly created usability testing initiative
Was first big project to fully utilize design system that I created
Major Outcomes
New practices for cross-team projects were developed, including new ideation sessions
40+ stakeholder requirements met, while still being usable for ALL customers
Rapid prototyping allowed for quick iteration, allowing teams to collaborate efficiently when making changes
20+ design system components were used during project, more than any other project to date
Despite a lot of moving parts between teams, because new collaboration efforts, new usability testing, and full use of the design system, project was pushed to production on time
Ideation stage, with an early version and screen flows
Lysnna was the usability testing software used for testing our prototypes with users.
Leading design for the Admin/Platform team: Connecting 10+ products to Cayuse's platform
Admin examples, including the dashboard that contains People data, and some examples of other data tables and forms.
Key takeaways
Connected to all other products, needed to be easily understood by all users of ALL products
Centered around database of users/customers, well designed data tables improved usability of viewing data
Necessary to have well designed form inputs for editing user data
Redesigned forms from design system and updated workflow improved usability of data entry and editing
Redesign the Fund Manager dashbaord: A research-driven approach to display key fund data
Ideation stage, early dashboard ideas, and the final dashboard
Key takeaways
Dashboard redesign was the main focus, as current users had a difficult time finding the most important data
Main mode of user research was user interviews, and the research focused on what data would be most important to display to users
Other decisions and data points were made based on the knowledge base of the PM, who was a Subject Matter Expert in the (niche) fund manager administration world
User research + SME provided enough information to have correct data displayed, as well as filling in the gaps of how best to display the data in the designs
#designsystem
Case Study
KEY POINTS
Over 50+ Components/Patterns audited
Created Figma component library
Created documentation outlining acceptance criteria
200+ accessibility issues fix by Accessibility initiative
Worked with developers to create 50+ code ready components in code library
A look at how the components look in the Figma library, created from scratch
Auditing the current products
Multiple product teams had different usage of components on their products
Designers using different components with different styles, sizes, etc.
Different code caused different behavior and accessibility issues
No consistency
An example of how I audited different components, in this case a load indicator
CREATING THE FIGMA LIBRARY
Using Figma features to create components and variants (eg. Product specific)
Improved efficiency in creating wireframes
Form element component - shows hows I used variants to build component for any situation
CREATING DOCUMENTATION
Documenting all aspects of how component is used
Not only for designs, but criteria to be followed by PMs and Devs as well
Design System documentation lived in a Confluence space.
ACCESSIBILITY INITIATIVE
Aligned with company wide accessibility initiative, but not originally part of plan
Always have accessibility in mind when creating components + documentation
Allowed for a better way to prioritize some work
Allowed for large amount of ticketed accessibility issues to be dealt with at once
An example of what Accessibility Guidelines looked like in documentation
CODE READY COMPONENTS
Worked with developers to make a code ready library in a service called bit.dev
Would review every component to make sure it matched the documentation and accessibility guidelines
Worked with other teams to make sure components were usable and did not break current live product
Code ready components lived in a shared bit.dev space
The "Common Header" component,. Very important as it was one of the few shared components used by EVERY product
Dialog component, also called a pattern. In Figma page, would contain examples and rules
Designing with an accessibility first approach
Cayuse made it a top priority to find and fix all accessibility issues within their products.
One of the main ways of doing this is through VPATs, or Voluntary Product Accessibility Templates. While there are legal reason why Cayuse uses VPATs, they contain useful information for the UX team as well. If there are products, features, or even components where we see a lot of accessibility issues always happening, we can make sure our Design System documents the correct way to meet accessibility standards from WCAG, as well update our Figma designs, in the library AND in created designs.
The UX team did training on accessibility as well, and would always make sure to reference WCAG documentation. My designs at Cayuse were accessible because of expert knowledge of accessibility, combined with designing with accessibility in mind, as well as a Design System that covers accessibility within it's components and patterns.
Some examples of how we accessibility was handled within our design system can be seen here:
Case Studies