I know what you’re thinking. Not another article about design systems, but if you’re a lone designer at a small startup you should read this one.
As a lone designer, creating a design system makes you
- Faster — it will make you at least 3 to 5x faster at your job.
- More consistent — the same brand assets everywhere.
3. Codify your brand — the system forces you to create one central document
When you are the lone designer you sit on this pile of often messy design files that you and/or a predecessor made. There is no one to berate you for not naming every artboard and grouping properly. It’s easy to slowly lose some of those best practices that were beaten into you by past team members and managers at other jobs. It’s inevitable that your quality will slide as you’re asked to output more and more designs on tight deadlines or at the 11th hour. It’s one of those things that just happens at startups.
With a design system, however, you are able to produce high-quality designs faster because you took the time to name everything once. Now, when you’re on a tight deadline to create a landing page you can just go into your design system. Go to the website section. Find the section components you made once and insert them into your new landing page project. No more trying to find that landing page file that you know you made a similar one to just 4 months ago…or maybe it was 5 months ago, and no more having to polish up that old shoddy design file you had made, also on a tight deadline.
Now, let’s be clear about what we’re talking about when I say the design system. I’m not talking about a massive documented unified UI, brand, frontend code, design system that spans multiple teams. You are the lone designer, and if you can make the fronted code too that’s great and you should definitely add that. But as the lone designer you are immensely strapped for time, so making an entire bonified design system is going to be a lot of work and some of it unnecessary without a team around you. For now, you are the entire design department, so documentation is always helpful so that the future you 6 months from now knows what’s going on, but does not need to be super detailed or formal. Document as if you are writing to yourself, “You made these buttons brand grey because it looks better.” The point of this design system is to help you do more in less time while maintaining a high quality of work that is simply not possible without the support of a design system.
Having all your brand assets in one place also has the added benefit of simplifying the inevitable rebrand process. When one day, a co-founder or marketing person comes in tells you they’re doing a rebrand you’ll be ready. Without a design system that rebrand essentially means you’ve just been committed to going through all your relevant files and manually updating them one by one once you figure out what this rebrand will look like. Updated typography, size, kern, leading, color, just about everything that touches the brand needs to be changed. That project might take you a few weeks at best and would be mostly unnecessary if you had made the design system. This is the type of speed and work efficiency I’m talking about. Something that would have taken weeks across multiple files, and never really stop since every old file you refer back to would need to be updated for use in current work can now be done in a day.
On top of being able to quickly change the entire app and website designs everywhere, there is the benefit of organizing and unifying the brand. That is the feature driving the big companies to use and maintain these big systems. When I first started as a lone designer at a small startup, the brand guide was essentially a .jpg style guide with the logo, type, and colors. The app, the website, and the print materials were all different brand styles types and colors. After spending a year not fully understanding the brand guidelines I was trying to stay within, I decided to make a design system to help speed things up and formalize the brand.
Fun fact about making design systems (read UI component libraries). They can actually be made pretty quickly. There are tons of fantastic UI component templates out there that you can riff off of. The template essentially gives you the main things that you will need to change: the type styles, the layer styles, the buttons, all the of the main things you will need to get started. Of course, every brand is different, in my case I needed to focus my design system a lot on app design rather than web design, for instance.
The exercise of making a design system is also a great time to take a deep look at your brand and the assets in use. For me, I was using sharp edges on all our buttons and thin type, but we internally referred to our brand as friendly. A bi-product of this design system creation was to also refresh the brand so it reflected how we internally felt about ourselves. That means I added a radius to all the buttons, began using card UI to bring it into 2019, added a light blue drop shadow, I thickened the fonts, and generally made the brand less like Apple and more like its own independent friendly brand.
On top of the brand refresh, I standardized the colors, the icons, and the typestyles. During the previous year, I had inadvertently ended up using 5 different primary brand blue colors and a completely unstandardized use of fonts. Again, it was a mess during the first year, but a mess that the design system was able to help me fix.
After about a week of working on the design system part-time along with my usual workload, I had the initial version done. Most of the work was copying in the symbols I had used in my app designs and linking the symbols in the app files to the library, it’s a bit tedious but it means later on I can change the designs of all of our products nearly instantaneously.
The first project after making the initial version of the design system was to redesign our existing air quality app with the new brand look and with some additional functionality. The important thing about design systems is to always ensure they’re updated. So as soon as the design was approved for development I spent a couple of hours putting all the new components into the sketch library file, naming them properly, and linking them up. Maintaining and actually committing to using your design system is arguably the most important part. They are not hard to make, but, in large teams, they are hard to get everyone to buy into. As the lone designer, you just have to make it a habit to add in all the new brand components you’ve created after each new product.
Thanks to the design system you not only unify your look and feel but also speed up design. Having a design system makes design a bit more robotic since you essentially design by drag and dropping your system components. Symbol -> Component -> Drop -> Select the overrides. Basically drag, drop, and tweak. But this process also means I can move 3 to 5 times faster than if I had to make everything from scratch or scavenge through my old files to find that one component I used on that one project I did three months back. Speed and efficiency benefit of a design system, the one thing that can help level up your design output and quality.
Interestingly, after the air quality app update, my next big project was designing our Kickstarter. I’d been in charge of defining, marketing, and launching our new home sensor product, so designing the Kickstarter was a natural extension of that work and a great way to get the bugs out of the design system especially on the typography side. The Kickstarter also now serves as a good comparison point of where the design system was back in October 2018 vs where it is now. The difference in gradients and reduced emphasis on using the primary brand color everywhere opting for black headlines instead of brand blue.
When I designed the 300 screen main company app every unique component was in the design library. So when a stakeholder says they don’t like a color, illustration, a component, or anything, I can change it universally in about 10 seconds. In an often capricious startup environment, this is a massive, massive timesaver.
This also means, when Apple asked us to make the Apple store demo app for them, I could just insert my components and be done with the demo app design in half a day. Then I could focus on creating helpful unique assets like animations and illustrations to support the product. Since the Apple Demo app began development before the second version of the main company app, I could also universally fix the UI/UX bugs we found in those same components. By the time the main company app was ready for development, everything had already been tested and updated thanks to using the same design system library. Essentially do things once, update your design system, and rarely have to do them again.
My personal favorite part of the design system is having a unique standardized brand icon set. I can’t tell you how many dozens of hours I’ve spent on Flaticon looking for the perfect icon that said what I wanted it to say and fit in with our brand. Or worse, how much time I spent designing my own icons only to forget which file they were in and have to redo them the next time I needed them. Now it’s just symbol > Design system > Icons > whatever icon I need. I used Ikonate to create custom-branded icons for us.
Finally, the last benefit of making a design system is how second nature it becomes to make a mini system for each new design document. Now, for every new document I set up, I first design the unique screens and then create symbols for the main UI components on those screens. Instead of filling the main page with the different states of those components I go into the symbols and create all the different states at once. By making all the states of all the components upfront I can quickly copy and paste the components and select the overrides to select the state I need for each screen. It changes the design process a bit from playing around till you hit on something you like and having to update the file. To componentizing everything and then playing around and updating the design once to change everything to the final iteration you liked.
Once I’m happy with the flow of the product and the screens, I can quickly pop the state variations into the design system file, insert the library based component, duplicate the artboards in the app file, and change the component overrides to show all the states that I already designed. For more complicated user interface components like multiple selections these overrides are savior, you can quickly make accurate prototypes for users so literally every button in UI can be tapped and result in a change.
So, next time you are digging through your old files looking for that one design you made long ago think about how much easier your life could be with a design system.
