UX Design at Cayuse LLC
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." 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
How I applied the UX Design process to different products teams
How I created, managed, and championed the adoption of the Design System across the Cayuse Suite
How I designed with an accessibility first approach
Designing for multiple product teams
UX Designer for Platform/Admin, Fund Manager, and My Tasks
MY TASKS, CROSS PLATFORM PROJECT
Key takeaways
Multiple product teams (PMs, stakeholders, devs) needed to work on cross-platform features
8+ individual features were designed at the same time
Relied heavily on RAPID prototyping to inform design designs, using newly created usability testing initiative
Rapid prototyping allowed for quick iteration, allowing teams to collaborate efficiently
A look at the different features designed at the same time for the My Tasks project. Main features include: Uploading attachments, tagging, commenting, user assignment, reminders
PLATFORM / ADMIN PRODUCT TEAM
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
An example of an Admin project, the Funding Programs feature. Contains data that is consumed by other products
FUND MANAGER PRODUCT TEAM
Key takeaways
Main project: Fund Manager Dashboard Redesign
Research focused on what data would be most important to display to users
Made research based design decisions without heuristics
Used research to fill in gaps in order to have correct data displayed
The main project worked on for Fund Manager was a redesign of the dashboard. Here is a late iteration of the design.
Other Examples
Cayuse's Design System
Creating, maintaining, and championing adoption of the Design System
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