Kuali UI — A Case Study

Aaron Uyehara
5 min readJan 25, 2021

--

A collaboration story

The Problem

There are 7 products all made by the same company that looks and feels different. Some customers use multiple Kuali products that all have different user experiences and user interfaces.

Switching between software is jarring and user experience is different between products causing user fatigue and confusion.

Having an inconsistent UI costs the company a lot of time and development resources which is wasteful and expensive.

Our Goal

Create a consistent user experience across all of Kuali’s 7 products. Help users know that they are using a Kuali product through a consistent and thoughtful user interface and brand.

Create reusable UI components that all developers can use while building our app.

My Role

Lead product designer — Design System advocate.

What I did

I had hard conversations with the UX director and other executives to get buy-in. Recruited other designers to help decide on a direction and design out Figma components. This lead to the creation of the “Kuali UI Guild”. (A group of designers and developers that had equal concerns about the state of our apps).

The Design Team:

Rob Foster — Director of UX

Kate McGee — Senior Product Designer

Whitney Pesek — Senior Product Designer

Dan Vineyard — Senior Product Designer

Aaron Uyehara — Senior Product Designer

Jessie McCarron — Senior Product Designer

Omar Ahmed — Senior Product Designer

Dev Team:

Leah McBeth — Senior Software Engineer

Jenny Harmon — Senior Software Engineer

Blake Bishop — Senior Software Engineer

Bess Fernandez— Software Engineer

Mike Sabatini — Senior Software Engineer

Jordan Reed — Senior Software Engineer

How did we go about doing this? It started in mid-2018

I had recently joined the design team at Kuali.co. My new role would include working on the Core team.

Core’s mission was to design and build reusable tools for all of Kuali's products.

Curriculum Management

Academic Catalog

Research which includes — Sponsored Projects, Conflict of Interest & Protocols

Ready — Business continuity

Financials

Build —Custom app builder

Kuali was building a lot of products that did very similar things. These things needed Identity services, A custom form building tool, and a workflow tool. While working on my regular work, It seemed silly to me that these tools were being used in all of these apps but all the apps looked different.

UX audit — discovered inconsistent experiences and UI

There were many reasons why they all looked different, a history of different designers that were very junior, different product managers with very different ideas and goals. This wasn’t their fault, they were told by product leadership that they should “treat their products as if they were the CEO’s of their own companies”. And a very dev heavy influence and not mature UX effort and involvement.

It was time to push for consistency.

After coming up with a rough plan. I convinced Dan Vineyard a brilliant senior product designer to help tackle this challenge. We started out with a UX audit. We went around and looked at all the apps and the styles that were being used gathered our findings in a single Figma file.

After taking a look at these. We dug into design system best practices and examples from companies such as Pluralsight, Airbnb, Shopify, Spotify, Apple HIG, Google Material design, and more. I had just come from Instructure where I was fortunate enough to have helped craft a design system. We started by creating design principles.

With our design principles, we used Figma to design out our initial concepts and ideas.

We came up with examples and presented this to Rob Foster our Director of UX. He was immediately on board. He helped us refine our presentation in order to talk with the head of engineering, product, and our CEO.

Road Bump

Dan left and went to manage designers at Workfront in early 2019. I was left alone to work on this project.

How we bounced back

With the help of Rob, we convinced the whole org that we were moving this way and why it was important for a unified design system.

There was only real push back from one of the designers on what we were going to build but it was more from a technical standpoint. He wanted the devs to use a prebuilt React library. But once we convinced him that dev would do what they thought was best, he was on board.

We decided on a font, family, an icon set, and a color palette and I started to build out reusable styles and components. It was slow going. Rob asked if he could help. He being all-knowing in Figma, he helped start a design system and component library. He even encouraged the rest of the team to help out. A huge turning point came when we had our design team offsite.

Before COVID, our design team would do a yearly face to face. In October of 2019, we gathered together in San Diego, and in an Airbnb we all worked super hard to build out components in Figma. We had a list of all the components we wanted to design and with the whole team, we were able to accomplish this in a week.

Of course, we have refined it since. A design system is a living document and should have flexibility and updatability.

Our component library in Figam
Example of Figma spec

Outcome

Ongoing and still working on things but, —

Good things have happened. We got buy-in from c-level leadership. A unified design team with a mission. We were able to design and build a consistent design spec and using Figma we built a component library. The formation of the Kuali UI Guild made up of passionate developers that are now building react components that they have named Pure UI.

Next steps

Getting Kuali to hire full-time engineers to build out all the components.

--

--

Aaron Uyehara

Just another kid from the L A I E. Product Design Leader | Co-Founder |