Audantic Design System
Overview
When I started at Audantic as the first designer on board, I immediately spotted a bunch of mismatched elements in the app. After a chat with our full-stack engineer, it turned out that things like buttons, fonts, modals, and colors were all over the place, not to mention other design issues like off color contrasts and logos that didn't match up in size. To really pull our brand together and make it look sharp and reliable for our users, we need to set up a solid design system and give our branding a little tweak.
My Role
Being the only designer in the team, I had my hands full. I did everything from checking over the platform's design, coming up with new components, setting up typography and color rules, figuring out page margins, designing icons, and a bunch more. Plus, I had to work with the dev team to make sure all these guidelines made sense and fit in with what they were doing too.
Tools
Figma
Problem
Too Many Variants!
After doing a quick audit of the platform, i discovered that there were so many variants of buttons, badges, and other components. This is a problem because it shows that every component were individually created rather than using a re-usable component.
Solution
I created a Design System so that it will be easy for designers and developers to reference when designing in the future and to create consistency across the the platform.
Research
This is my second go at building a design system, and this time I really wanted to make something that's super easy for developers to use. So, I stepped up my game by bringing in Atomic Design Principles, which makes everything more organized and user-friendly.
I also dug into how to make my Figma prototypes more developer-friendly. The cool part is the Storybook Figma integration I found. It's a game changer because it lets developers directly pull in my Figma components right into their workflow. This makes the whole development process a lot smoother and easier for everyone.
Design
How can I make this helpful for designers and developers?
I added usage information to the design system so that developers can have a document to reference to when doing development.
Prototype
Making the design simple and clear
To show how different components behave, I had to prototype what it's like to interact with each one. This meant making a bunch of versions for each component, covering all their states like default, active, hover, focused, and disabled.
By using Atomic Design Principles to organize the design system, I managed to reuse loads of the small components by tucking them into the bigger ones. This has really made whipping up designs for responsive websites way faster!
Testing
Does this work?
Our design system is always evolving, with new tweaks and updates being added. I've been wondering how much these new components have actually improved our product. Luckily, the development team has been great at pointing out what's hitting the mark and what still needs a bit of work.
🙌 Big Wins (so far)
- The handoff from design to dev is way smoother now (less time spent explaining every little detail).
- We're seeing way less back-and-forth during the QA phase.
- The designs and coded design are looking a lot more uniform.
- Consistent components across the platform
Next Steps/Reflection
Looking towards the future
As we keep building up our design system, I'm really looking to crank out more standardized assets that we can use in all sorts of ways. As we slowly roll out the design system, I'm curious to see if it's going to keep our designs looking sharp and consistent. A long term goal of mine would be to run a survey and see how the team's using the system every day and how we can continue to tweak it to make it even better for both designers and development, like finding the best way to lay out our component docs and instructions.
