Building a better user interface system

Sharing a new project I’ve been working on

Andrew Coyle
4 min readFeb 3, 2024

I’ve always wanted to build a minimal user interface system that includes every conceivable component and accommodates any type of user experience — straightforward yet comprehensive. I wanted to construct a system you can endlessly customize yet doesn’t compromise base-level usability.

I seek to build and publish a better UI system so others can benefit from my many years of building complex SaaS flows. I’ve designed everything from highly complex enterprise software to minimal consumer app experiences. I’ve been a designer at companies from small startups to some of the world’s largest tech companies.

I want to leverage everything I’ve learned in my career to design and code a component library that’s beautiful, easy to understand and implement and has UX best practices baked in.

Below is a sneak peak at what I’ve built so far. If you’re interested in getting a copy of the Figma file—and eventually the React components—join the project’s email list.

Forms

Inputs, radios, checkboxes, text area, slider, toggles
Selection groups

Learn more about how I think about designing forms.

Date pickers

Date and time pickers
Single date and date range pickers

Drop downs

Different drop down components

Navigation

Vertical navigation
Horizontal navigation
Tab navigation
Drop down nav menu

Buttons

Button variants

Alerts

Different alert examples for the UI system I’m building

Badges

Badge variants from the UI system

Data visualization

Different chart types
Bar chart variants in Figma

Data displays

Loaders

Basic loaders and skeleton loaders

Tables

Table sizes and variants
Different cell types placed in columns
Table horizontal scroll idea

Lists

Pagination

Pagination interaction

Cards

Card variants

Progress

Modals

Accordions

Different accordions

Tooltips

Command menu ⌘K

Calendars

AI experiments

AI concept
AI concept

From here, I plan to continue building and coding components to make it easy for designers and software engineers to implement. I intend to publish the base-level UI system to the Figma community and continue to write about each component category. I also plan to create different templates for pages and flows.

Ultimately, I intend to launch a paid version of a comprehensive user interface library that makes it easy for teams to customize and implement to solve design challenges. If you’re interested, join the email list, and I’ll notify you when the UI system is ready. I’d love your feedback and support!

--

--

Andrew Coyle

Formerly @Flexport @Google @Intuit @HeyHealthcare (YC S19)