Driving UI Consistency with Design Systems – Branch

Driving UI Consistency with Design Systems – Branch

As a UI/UX Intern at Branch, I led a UI audit and systemization effort to address visual inconsistencies across the platform. The result was a set of scalable, reusable design system components to unify the product experience.

Role: UI/UX Intern

Team: 1 Designer (me), Design Director, PMs, Software Engineers

Tools: Figma, Google Suite, Notion

Timeline: 3 months

The Problem

The Problem

Branch’s platform had grown rapidly, accumulating inconsistent spacing, exceedingly various button styles, mismatched input fields, and conflicting text hierarchies. These inconsistencies created usability challenges and made development handoff more complicated.

Example. "Add Filter" buttons

All these buttons do the same thing, but look very different.

Example. Validation Messages

Validation messages had several different formats, and also appeared under varying circumstances that were unclear to the user. For example, required fields were not marked as such until a user attempted to bypass it, after which they are shown an error validation message.

Example. Alerts

Alerts did not have consistent formatting, and it was unclear whether each different version should or should not be dismissable.

My Approach

My Approach

I conducted a UI audit across three core user flows, cataloging inconsistencies in buttons (12+ variations), text fields (some with labels, some without), and typographic styles (including multiple font weights being used interchangeably). I organized this into a Figma documentation file to serve as a central reference for our team and engineering partners. I worked closely with engineering to ensure proposed components aligned with existing code, often adjusting designs to match what was feasible in the current system.

Themes Grouping

Outside of the UI components inconsistencies, there were also many overarching issues with user journeys. This themes grouping was done after reviewing several customer calls where their user experience was discussed.

Notion Notes

Initial impressions of my own first experience using the platform was recorded with notes in Notion, including screenshots and recommendations on how we might improve the issue.

UI/UX Audit Report

A report was put together covering high-level findings, UX & UI takeaways, quantitative metrics found from our tracking software, and the detailed findings of each step in the user journey. This was done for the three major areas.

UI Inconsistencies Documentation

Absolute, complete documentation of all inconsistencies found on the site spanning 7 major UI areas (tooltips, error messages, date pickers, navigation, form fields, buttons, empty states) were documented by me, including details of where they could be found, under what conditions, and how exactly to fix them. This was a complete & exhaustive list and was referenced as the official plan of changes by PMs and engineers.

Outcome

Outcome

I created a foundational design system in Figma, which included standardized components like button variants (primary, secondary, destructive) and input fields with defined states (active, error, disabled). I also added clear usage guidelines to support consistency in implementation.


These updates were reviewed by engineers and used as a reference during feature development. My documentation became a go-to resource across teams, helping reduce ambiguity, align implementation, and establish a more consistent design foundation—even beyond my internship.


Although implementation was still in progress when I wrapped up, and the company later shifted strategic focus, I’m proud to have contributed to a more thoughtful and cohesive platform.

Reflection

Reflection

Working on the UI Enhancements Project at Branch showed me how impactful small, systematic changes can be at scale. While the work wasn’t flashy, it was foundational — and I learned how to identify patterns, organize chaos, and bring clarity to a product through design standards.


It also taught me how to work closely with engineering to align design decisions with technical constraints, and how documentation can empower cross-functional teams to move faster and more consistently. This experience deepened my appreciation for design systems and gave me the confidence to contribute structure and strategy — even in environments where visual polish isn’t the priority.