hero-about

Streamline design decisions

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

Design sysem

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.

Illustration

What’s a design system?

Art

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:

  • 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.

illustersion

    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.

    LET’S BUILD YOUR DESIGN SYSTEM
    Art

    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
    datadata outcomactivitysavingdesign system
    Art

    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.

    Here are all of the elements yourdesign system will address

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

    What’s the process?

    Star

    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

    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.

    Art

    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.

    Curious? Get in touch

    Ask any questions you have about design systems. We love talking about this stuff.

    ASK ABOUT A DESIGN SYSTEM ENGAGEMENT
    Lines

    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!

    laptop

    Want to work together?

    Subscribe our Newsletter

    Thank you! Your submission has been received!
    Oops! Something went wrong while submitting the form.