Streamline design decisions
Your new Design System is the blueprint for fast, cohesive design and development
Your new Design System is the blueprint for fast, cohesive design and development
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.
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.
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).
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.
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.
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
User interactions
Navigation
Information hierarchy & layout
And probably more, depending on your app’s specific needs
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.
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.
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.
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!