Streamline design decisions

Your new Design System is the blueprint for fast, cohesive design and development

What do all the best apps have in common?

Besides a great idea, well-executed, presented inside an intuitive user experience. No pressure.)Great apps have cohesive design.
That means that even as the app scales, and the team grows, everyone has a clear set of design principles to refer to. New designers added to the team have fewer questions, and can create better experiences quickly and efficiently — with fewer revisions.
How do you get everyone on the same well-designed page?
Using a design system.

What’s a design system?

Design system (dee-ZYNE SIS-tem) (noun)

A clearly defined set of patterns, principles, and guides that scale with your app or product ecosystem.Along with keeping your existing features visually and experientially consistent, a good design system shapes the look and feel of future features — so you end up with a product that feels professional, and you spend less time tweaking it along the way.Your design system answers questions like:

A clearly defined set of patterns, principles, and guides that scale with your app or product ecosystem.Along with keeping your existing features visually and experientially consistent, a good design system shapes the look and feel of future features — so you end up with a product that feels professional, and you spend less time tweaking it along the way.Your design system answers questions like:

Your design system answers questions like:

What colors belong in our brand palette, and where do we use each color?

What typefaces and sizes do we use, and what’s their hierarchy of importance?

How do buttons, form fields, menus, links, and other interactive components look and feel?

What basic page layouts do we build on?

How do we incorporate visual assets, including brand photography and illustrations?

Chances are, a lot of this information already exists…

But it's probably living rent-free in the brain of your stressed-out principal designer. 😅 What happens when they quit, move to another role, or get hit by a bus?

Even worse, without a clearly defined system, there may be design gaps or inconsistencies that don’t become obvious until you’re 40 screens deep.

By laying your design system out (or having UX Cabin do it for you), you’ll de-stress your team, make quicker progress on your product, and create an unshakable foundation for future designs.

With a design system

Your team saves time, energy, and aggravation 👍

Built-in cohesiveness

Anything created over time runs the risk of changing. (Just look at yourself. Are you the same person you were 10 years ago?) Having a design system with easily reference-able usage guidelines protects against “design drift” — so even the newest and oldest parts of your app still feel like the same product.

Faster feature development

Building new features goes much more quickly when the rules for “How this should work and look” are already laid out. Plus, each component you create automatically answers future questions about how to use or include that component.

Simple maintenance

Imagine taking a single pass to do any needed maintenance. You can even create checklists from your design system. Amazing! Why haven’t you been doing it this way all along? 🤔

Documented decisions with instant buy-in

Because each component comes with detailed usage guidelines, team members can have fewer conversations around design (and more useful conversations around functionality).

Without a design system

You build an ugly, confusing app that no one enjoys working on 👎

Disjointed elements

Over time, your application can drift out of sync with itself. The experience might start to feel unpolished, or even untrustworthy. Pieces of your app might not even look or operate like they’re part of the same system. 😱

Slow feature development

Without a design system, your team has to answer the same questions over and over again before even beginning to build. (And the answers will be visibly different every time.)

Maddening maintenance

Imagine taking a single pass to do any needed maintenance. You can even create checklists from your design system. Amazing! Why haven’t you been doing it this way all along? 🤔

Documented decisions with instant buy-in

When a “simple” task like changing an interface element actually requires fixing or refactoring multiple instances of the same component, it’s not so simple anymore.

Team disagreement

Designers and developers often burn time on problems already solved. This wastes other product team members’ time, yields uneven results, and takes your team away from solving new and more interesting problems.

ATTENTION: Not for teams who love chaos

If things are working just fine for you without a design system, or for some reason you thrive in the disorder and confusion of a system-less world… then A) you’re in the wrong place. And b) How did you even get here??

Your new design system fights chaos and confusion the moment you start building it. How?

By preventing the tiny inconsistencies that add up to BIG problems. Inconsistencies like:

A slightly different shade of orange here

A thicker line there

A “ghost button” where a solid button should be

A three-step process where Step 3 looks different from Steps 1 and 2

A piece of code that should be the same across the entire application, but which has been rewritten so many times, it might as well be Fifty Shades of Grey fanfiction

This is what you get when you build without a design system.

OK, UX Cabin. Say I hire you…What will my design system look like?

Well, we can’t show you exactly, since every system looks different (and it should! No cookie-cutter templates here)What we CAN do is examine your established patterns and components, review them for inconsistency, create best practices, and solidify a list of patterns to be included in your new design system.

This is what you get when you build without a design system.

UI/UX Audit

  • Color
  • Typography
  • Line weight and use
  • Other visual elements, if any

User interactions

  • Alerts
  • Avatars
  • Badges
  • Buttons

Navigation

  • Breadcrumbs
  • Pagination
  • Progress indicators
  • Tooltips

Information hierarchy & layout

  • Date pickers
  • Form elements
  • Modals
  • Tabs

And probably more, depending on your app’s specific needs

What’s the process?

Before we get into the process, let’s talk philosophy.Hold up, Socrates — not that kind of philosophy.

Design philosophy

At UX Cabin, we work according to Brad Frost’s Atomic Design Principles ← highly recommended reading, by the way. The basic idea is that if you build the foundational (AKA atomic) elements correctly, then it becomes simpler, faster, and easier to scale to more complex elements (AKA molecules, organisms, and, uhhh, software applications).
Makes sense, right?

Here’s how we do it

Step 1

We collect all your existing patterns, or identify which components and patterns your new design system will need.

Step 2

We document each element, including what it looks like, how to use it, and how to extend it in the future.

Step 3

We build a fleshed-out, easy-to-reference design system in Figma, using best practices including auto-layout, components, and variants.

The end result

The end result: You get a complete, pixel-perfect design foundation to hand to your dev team, internal designers, and even external designers. You deal with fewer headaches around design. And your app looks and operates better than ever.

Psst! We can rebuild your app using your freshly minted design system

Psst! We can rebuild your app using your freshly minted design system.
UX Cabin can build your design system, then use it to update your app design.
As a bonus, this process is a great way to get your team up to speed on using your new system.

You might be wondering…

What’s the difference between a design system and a style guide or pattern library?

A design system is an indepth library of elements, components, templates on how they all work together. These rules and guidelines help build products faster and more efficiently. Styleguides just show basic font and color usage for a given brand.

Who is this NOT for?

Maybe you just have a blog or an informational website. You probably need something more along the lines of a styleguide than a design system. We can help with that too! It’s just not as involved as a design system.

How do I get started?

Send us a message or schedule a call and we’ll grab a time to review your current product and give you our recommendation on how we can help!