nick

brosas

design

nick

brosas

design

UX Designer at Cayuse LLC

UX Designer at Cayuse LLC

My role at Cayuse was on the UX team with another designer. I worked with and supported different product teams for the Cayuse platform.

From cayuse.com: "Cayuse is a cloud platform that helps research organizations manage billions in research funds and drive impact across the entire research lifecycle."

I supported Cayuse's products throughout the entire UX design process across various projects. This included research, such as conducting user/customer interviews, creating user work flows, designing high fidelity mockups, usability testing, and working with the developers for final hand-off and production. The UX team put accessibility as a high priority for our designs. See example of product designs here.

I also built and maintained a Design System for the Cayuse Platform. This includes a Figma library used by the design team, robust documentation including accessibility guidelines, and working with developers to create a frontend component library in bit.cloud. More details and examples of Design System work here.

Designing for different product teams

Platform and Admin

The Platform and Admin products are that connect the entire Cayuse Suite. Every customer that purchases the full suite has access to Platform and Admin products. Some of the main features include a data base of all users, the ability to set roles and permissions to users, and all other configurations that the admin teams of our clients need. Because the Admin product is heavily focused on handling the data that other products in the suite will use, a lot of the UX is centered around how the user finds data, and the workflows around configuring the data.

The People Table was project centered around improving the page where data on People in the system were displayed. The original page lacked the necessary data displayed, a way to easily sort active and inactive people, and general search and filter functionality. By understanding what data was most useful to users, as well as applying improved patterns from our design system, I was able to create an improved data table with filters and an improved search function.

People Table preview
People Table preview
People Table preview

People Table Project Example

The Funding Program was a project where I designed a new feature from the ground up. Funding Programs were third-party sets of data to categorize another set of data on the Cayuse Platform. Like the People Table feature, I used patterns from our design system to make a usable table that accurately displayed the necessary data to the user. This project was design in parallel to another project and feature, where the data would be used by another product (Sponsored Projects), therefor it was necessary to make sure all the data was displayed and able to be manipulated in a way that worked with the other products.

Funding Programs Preview
Funding Programs Preview
Funding Programs Preview

Funding Program Project Example

Fund Manager Dashboard

The Fund Manager product allows users to keep track of all money and costs related to proposals, grants, and post-award funds. One of my main projects was building a new dashboard. Designs were based on user interviews . This allowed me to determine user needs, especially the data that should be displayed on the dashboard. Fund Manager had a low adoption rate and low usage, due to a confusing and hard to use interface. I created an improved dashboard experience, with the expectation that use adoption rate would increase.

Fund Manager Whiteboarding
Fund Manager Whiteboarding
Fund Manager Whiteboarding

Dashboard ideation on whiteboard

Ideation sessions were conducted with the PM of Fund Manager after parsing the data from the interviews. Usability testing and A/B testing was conducted with Fund Manager users to confirm not only the usability, but also to confirm the correct data that was most useful to the user was available.

Fund Manager Dashboard design
Fund Manager Dashboard design
Fund Manager Dashboard design

Dashboard design after multiple rounds of iteration, close to production

Sponsored Projects

Sponsored Projects is one of the core products offered at Cayuse. The product is used to take proposals from start to completion. Forms are an important part of this product. Because of this, the design projects I worked on are heavily based in form workflows. The main form workflows were centered around creating a new proposal. Form workflows would often require new features and other specialized sections or inputs. The UX process was applied when working on these additions.

Sponsored Projects exmaple
Sponsored Projects exmaple
Sponsored Projects exmaple

Example of Sponsored Projects form

My Tasks

My Tasks was a multi-product team effort to create a cross-platform feature that all products could use. As the name suggests, UX work was centering around the workflows for creating, viewing, and completing tasks. I worked with different PMs, POs, and Developers on different teams throughout the design process, designing several different features synchronously.

This project required a lot of research, in the form of user interviews and competitive analysis. Interviews were conducted with internal and customer stakeholders. While we were design for the needs of ALL customers/users, this project was spearheaded by the needs of one specific customer, and that specific customer also had financial stakes in this project. For competitive analysis, task creation software such as Jira and Google Calendars was analyzed. Rapid prototype testing for new designs was conducted through third-party service Lyssna, which allowed us to quickly iterate the different features, which was a necessity due to the fact that many different features were being worked on at the same time.

New Task feature
New Task feature
New Task feature

Design for New Task feature

Some of the new features included: Uploading a File, Comments, Tags, Assigning to a Team, and Reminders. As these features were tested and pushed to production, we had to make sure that they were still usable and still met all users needs. An example of this, and how we quickly iterated, was a design session for the Comments and Uploading a File features. The two features referenced one another, and some changes to how the uploads were displayed to the user was changed based on what we decided for Comments.

Another big part of the My Tasks project was the redesigning the Tasks table. A big need was a filter and search feature. Through usability testing, the best filter options were derived for the user to quickly find the task they were looking for based on assignment and status.

My Tasks table
My Tasks table
My Tasks table

My Tasks table

Creating and maintaining Cayuse's Design System

DESIGN

I created (from scratch) a shared Figma library used by the UX team, that included not only singular components, but common patterns made up of components. This required auditing the current component and pattern usage across all our products. A lot of the components were created form scratch, and made sure to use Figma's built in features such as variants, properties, nested instances, styles, and variables. The UX team uses the library as it's source of truth when designing any feature/page for ALL the products.

DOCUMENT

Only having a Figma library isn't as useful to others at the company that will be using the Design System, such as PMs, POs, and Devs. For every component and pattern, I documented usage, behavior, style, and accessibility guidelines. Along with the Figma files, anyone who looked at the Design System could know how a component or pattern looks, how it should be used in our products, how it should behave, and how to make sure it is usable by everyone.

COLLABORATE

Working with a group of developers, I also created a code ready repository of the components. Cayuse uses a component repository called bit.dev (or bit.cloud). Making sure all components in this library meet the guidelines in the documentation and Figma, these components can be used by any developer on any team.

DESIGN SYSTEM EXAMPLES

Design System Example 1
Design System Example 1
Design System Example 1

Example of a component (button) in Figma. This component showcases all the variants that were necessary for many components

Design System Button Documentation Example
Design System Button Documentation Example
Design System Button Documentation Example

Example of documentation of a component, including guidelines for usage, behavior, style, and accessibility.

Design System Forms example
Design System Forms example
Design System Forms example

Example of how different components could be built and all the different parts of a component. The Forms pattern was especially useful, as Cayuse products used a lot of forms.

Design System Common Header example
Design System Common Header example
Design System Common Header example

Example of product specific patterns

Design System Dialogs example
Design System Dialogs example
Design System Dialogs example

Example of different visualizations of when or when not to use different components, in this instance the different Dialogs used in the app.

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.

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.

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.

An example of how our VPATs were documented and referenced in our design system with our buttons:

Buttons accessibility guidelines
Buttons accessibility guidelines
Buttons accessibility guidelines

Some examples of how we accessibility was handled within our design system can be seen here:

Accessibility Update for Cayuse Connect

Thumbnail for Cayuse Connect Accessibility update video
Thumbnail for Cayuse Connect Accessibility update video

© Nick Brosas Design 2023

I don't really know what to put in a footer for a portfolio

© Nick Brosas Design 2023

I don't really know what to put in a footer for a portfolio

Case Studies