CalCentral Design System
Design principles and guidelines for UC Berkeley's student portal.
Duration
August 2019 to January 2020
My Role
Project Lead + Designer
Team
Design + Development Teams

Problem

CalCentral is used by UC Berkeley students to enroll in classes, pay bills, and claim financial aid. Clarity and trust are key in supporting these critical activities. However, without common design standards, CalCentral’s interface and user experience had accumulated inconsistencies, causing drift from our core goals.  Our team was also aware through usability testing and customer calls that several existing UI components had usability issues.

Constraints

Outcome

CalCentral’s design and development teams worked together to create a design system based on shared principles and standards. I redesigned several components to improve their usability and led the effort to document our new system. The new CalCentral Design System has made developer handoffs more efficient and created a more cohesive user experience.

Baseline

Workflow

After noticing some sticking points in the design and development handoff process, I began a series of collaborative sessions with developers to understand how we could improve communication around specifications and standards. This eventually grew into several meetings between the design and development teams to identify opportunities to improve our workflow.

Inconsistent Terminology

The lack of a shared product language curbed collaboration and communication. For example, some specs referred to accordions while others called the same element an expanding section.

Scattered Documentation

Without a living source of truth for design standards, fundamental details like Hex codes had to be reiterated in every spec and sometimes led to accidental variations.

Ambiguous Intentions and Standards

There wasn’t a shared understanding of component use cases or overarching design standards which slowed and complicated key decisions during product development.

Design Principles

These workflow issues pointed to a need for a living, shared documentation of UI components and standards. It was time to establish a CalCentral design system. A few key design principles helped inform our work in bringing this system to life.
clear

Make meaning and intention apparent in every element.

consistent

Create a cohesive experience to uphold users’ trust.

practical

Prioritize simplicity so that content speaks the loudest.

Audit

To create a design system, we first needed to evaluate the current CalCentral ecosystem of components and design elements. I led the audit of our system with the support of our UX intern Tiffany Yao, who did an excellent job of helping us comb through the interface and document variation. After ensuring we understood the interaction patterns, data displays, and content housed in CalCentral, I began to evaluate them against our new design principles.
In most cases, we found that adjustments to finer UI details were all that were needed for style consistency. However, inconsistencies in usage revealed that full realignment with our principles required establishing clear element use cases and best practices.
The secondary button had subtle styling inconsistencies and significant variations in use. It was used to initiate expansions and open external links despite lacking the proper affordances, contradicting goals of consistency and clarity.
In other cases, known usability issues and wide pattern variations meant some elements needed to be reimagined before being incorporated into our design system.
The two tab styles were significantly different. Neither style made it apparent which tab was active and some users didn’t recognize the elements as tabs.

Redesign

We leveraged a planned refactor of our codebase from an Angular to React framework as an opportunity address the issues revealed by our audit using new, reusable React components. Before design work started, we adopted a 5 pixel-based spacing system to unify space in our updated system.
We chose a 5 pixel-base as it was already in place in parts of CalCentral. Adopting it more widely helped unify our existing and redesigned elements.
In cases where our audit revealed only subtle style inconsistencies, small design tweaks and adoption of our new space system were all that were needed on the UI-side before elements were ready to be added to our system.
Elements like the secondary buttons only needed a slight adjustment to align with CalCentral’s otherwise flat design style.
In the cases of elements like the accordion component, existing usability issues and broad inconsistencies led us to redesign from scratch. I reviewed accordion standards, sketched options, and narrowed based on user testing. Before finalizing an interaction pattern, I also applied it in a variety of contexts to ensure the style would be readily reusable.
Exploring
I sketched potential expansion icons and interaction patterns with improved affordance.
Validating
In usability tests, conducted largely by UX intern Tiffany Yao, the new design was more easily recognized and used in several contexts.
Refining
I created specifications for the new element and states before incorporating it into the system.

Documentation

Due to time limitations we opted to document our updated design system through a combination of a living document and a Figma library of components. More readily sharable, the document communicates key themes of the design systems: principles and core component states and use cases. It’s audience consists of designers and developers as well as the broader team including business analysts and stakeholders. More detailed element specifications are communicated via a Figma library to allow for more agile and precise documentation. Ease of sharing for this information is less critical as our audience consists of only designers and developers.
The design system document currently lives in a PDF format. While it is higher effort to update, this is the preferred format of our larger audience and the high-level nature of the content means it has more longevity.

Outcome

Since our design system was completed in late 2019, we’ve seen increased efficiencies in our internal workflow and more coherent CalCentral experience. A ready-made toolkit of UI components has allowed our design team to spend more time considering and addressing user needs. A shared language among designers and developers has also improved the clarify and ease of design implementation.
Applying our new design system to the CalCentral interface has created a cleaner, more consistent experience. Reduced visual noise means that students’ information is easier to find and understand.
Before
After

Reflections

Create a shared language. One of the most deceptively simple aspects of this project was establishing a common language around design elements. While it took time to create this shared understanding, our design system has proved to be a powerful communications resource for our design and development teams.
Design systems are living. Since launching our design system, we’ve encountered new element use cases and made updates to our color palette. While it often makes sense to make design compromises to stay aligned, we recognize our design system will need to constantly evolve with our user’s needs.

Next Steps

As developer capacity allows, we will be transitioning our documentation to GitHub Pages so that our system guidelines and best practices can be mapped directly to our code base.
CalCentral Billing
MyShake
Other Work
© Kaylin Rochford 2022
LINKEDIN