Kuali UI — A Case Study
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.
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.
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.
