DEEP DIVE: Never Redesign Again
Welcome to the era of evolving design systems.
When it comes to building apps and sites that scale, design systems are the new black. They create consistency across teams, boost productivity, and serve as the guard rails that keep everyone on the road toward your greater vision. If your team is anything like ours, you've probably spent a considerable amount of time creating one.
If you haven’t, we’re here to help you start.
What is a design system?
Let’s start with the basics. A design system is the living, breathing document that houses your design components (i.e. reusable code snippets) AND your design standards (ie. brand-specific style conventions). It’s the place where you define your typography conventions – from spacing to capitalization. It houses swatches with every hex code in your color palette. It contains the prototypes for all the elements on your site, like buttons and preload animations. If you do it right, your design system is a work of art in and of itself.
Your design system is the point of truth of your design. But don’t get it twisted: that truth can change.
Over time, your business strategy and customer needs will evolve. And if you aren’t careful, that beautiful design system you created will be entirely out-of-date in six months.
Making the case for a design system
There’s no denying it. It takes time to build, maintain, and ensure everyone is consistently utilizing your design system. But if you’re building a site you hope to scale and you know your project will be around for the long haul, having an up-to-date design system is worth the investment. Here’s how we broke down that decision in preparation for our Bankrate.com redesign.
BENEFITS:
Improved Collaboration. When you have a whole team of people working towards a single goal, you’ve got to make sure everyone is on the same page. Putting a design system at the center of your workflow ensures that everyone – regardless of their role or location – has full access to the tools available to them. (Three cheers for informed decision making!)Brand Consistency. Want your brand to have a more unified and polished look? Of course you do. Design systems enforce a set of checks and balances so pages within your experiences don't become off-brand or "frankensteined."Speedy Work. A properly-implemented design system increases work efficiency from the design phase all the way through to production. When you can quickly reference elements that have already been built, you stop having to reinvent the wheel. (Because you already have the wheels, and the chassis, and the... flame decals.)Product, Design, and Development Workflow. A design system’s greatest superpower? Telepathy. Once everyone is working from the same system, your whole team will start to speak the same language. For example, next time you sketch out a wireframe on a scrap of paper, everyone in the room will understand exactly how the end product will look and function.Faster Design Decisions. Think of your design system as a toolkit of building blocks. When everyone in the room understands which elements are available, you’ll spend less time knowledge-sharing and more time iterating. Additionally, you can rest assured that everyone on your team – whether they’re a copywriter or a front-end developer – is equipped to make creative decisions with the bigger picture in mind.Better User Experience. As you go through the process of building a design system, you’re forced to audit all the design elements you currently use. This is your chance to identify elements that aren’t working, like hover types or hard-to-read text. Inclusive design and accessibility are also great things to include as standards within your design system that help create a better experience for all.
COSTS:
Initial Investment. Building a design system from scratch takes a good chunk of time, plus it requires buy-in from stakeholders. Not only will you need to devote resources to building out your system – you’ll also have to put together a convincing pitch to get it started.Long-Term Resource Allocation. Very few teams are large enough to have talent exclusively dedicated to maintaining your design system. You’ll need to borrow time from existing designers and engineers – often.
Build it right, and you'll build it once
If you’ve read this far, you’re probably ready to learn what it takes to actually build out a design system that lasts – or make adjustments to the one you’re currently working from. Here are five key takeaways we learned as we built the new Bankrate design system.
1. Identify True Styling First
We have countless complex applications spread across Bankrate.com, built by many different teams of engineers. The thread that ties everything together is our design system. Before you start building said system, it’s crucial to identify what the "true" styling is for various design elements. That includes everything from the smallest elements, like a single hex code color, to larger elements, like a navigation bar or "ui card" for a mortgage lender.
2. Challenge Assumptions
Don’t bring unnecessary elements into your design system just because they’re there. You must continue to push your design language forward, even as you’re building your system. Here’s some innovation inspiration:
- What styles and elements are missing from our system that we should consider adding?
- What new business verticals and projects are we working on that could use additional style elements?
- As user behavior and UI/Design trends change over time, what things should we consider changing? What parts of your design system should you consider removing entirely?
By asking the right questions, you’ll build a laundry list of new ideas that you can work into your design system right away and over time.
3. Work Across Teams
Bankrate is a huge brand, and we have lots of product, design, and engineering teams working to achieve different goals. It’s critical to make sure EVERY team knows what your design system looks like today – and understands the vision for what it’ll look like tomorrow. These forward-looking conversations should include everyone who actively works with your style guide.
4. Meet & Discuss Your Design System Often
Any design system can become old and dated faster than you think. Once you have the right mix of contributors working on your design system, it’s imperative that you meet and discuss your design system often. Your designs are either fading with the times, or evolving and future-proofed. Team size and priorities will have a huge factor on this. We suggest bi-weekly or monthly meetings to discuss smaller changes, and the release of more substantial updates every quarter. With every update, big or small, you should have clear documentation and make it a point to share the updates far and wide so everyone is in the loop with what has changed.
5. Build for the Future
No matter what project you're working on, keep in mind that you’re designing, strategizing, writing, or coding in a finite moment in time. The solution you create today will not always solve the same problems tomorrow. Understanding that change is inevitable will help you make better architecting decisions for the future.
Bottom line: Make sure that flexibility and adaptability are factored into everything you create.
Want to keep those creative juices flowing? Check out 5 tips for how to stand out as a creative, then read up on what it takes to write copy… for chatbots.