A guide to implement your new sexy design system
So you've just invested a bunch of money into glowing up your digital product...
A tale as old as time
A design team came in and implemented this beautiful design system solving all of your existing navigation & polish issues, including new UI components, a fresh UX interaction model, and interaction specs defining how the system should look and feel.
But when you see your tool that's live, you feel overwhelmed and unsure of how to break this up and actualize this new dream product. You just invested money and time into pushing your product forward and making it more usable, and you aren’t sure the best way to continue that investment and get from figma into users hands.
This is a story that I hear often and I'm often only hired for the former half of the investment.
What to expect in this guide
I’ve spent the past decade designing digital products from 0-1 and 1-2, and helped support developers in the redesign and launch of over 30 digital products. There are a million guides on how to create a design system, so this guide lays out best practices across how to actually implement a design system, with recommendations of engineering UI component library, how to break up your release cycle within user-centric milestones, and how to incorporate user research into your releases to make them feel heard and welcomed into your new sexy product.
A note on mindset ??
When something needs to change, it’s easy to feel stressed and overwhelmed. My motto when it comes to design is flow like water. Find humor and comraderie in the process, and be open to some slog. There are a few principles I recommend using as your north star in this type of project: flexibility, humor, collaboration between design & dev team, and acute listening.
The Motley Crew - The people you will need
The Stoked Dev: This person is an expert at UI and is open to making things pixel perfect and collaborating closely with designers. They are the stars of the project. They should care about easing.
The Prototyper: Gone are the days of the screen by screen UI designer. You need someone who considers interactivity and understands motion to truly make a system feel polished.
The End User: Hopefully this is where you started, but often it's not when you're trying to ship quickly. Incorporate them into the release process to get rapid feedback and make them feel special. It’s called a Beta, more on that.
The Organized PM: Jah bless you. Thank you for keeping us all on track.
The Product Lead: This person helps decide on the user-centered milestones, which ends up defining work for the designers & developers, and product marketing team.
Product Marketers: Y’all are the toasters of the crew. Each release should be a reason to celebrate! Y’all already know this though.
Implement feedback & onboarding tool
Select an onboarding tool that makes sense for you. Always give your users a way to give you feedback during this process, and make sure you have something set up to announce releases while you build out your new designs.
Some Options I've used
↗? Userflow.com
↗? Appcues.com
First things first
Do you have a design system? If not, it's easiest to start with a react library that already has development & design resources (very essential they have both). Some good options I've used:
MUI (Joy UI): Engineering Docs / Figma Resources
Tailwind: Engineering Docs / Figma Resources
Storybook: Your specific UI library
For a polished product, your Design System should incorporate the following items.
If you want help creating one of these, please reach out.??
The two main ways to release a Design System
领英推荐
Both ways are valid and make sense for a number of different use cases. I generally recommend the second if the design system is a proper polish, not a complete demo & reno. It’s less likely to frighten users (people are afraid of change) and allows you to get feedback during releases for rapid iteration if needed.
The implementation strategy you’ve been dreaming of..
???The First Milestone
The first step is to create a engineering foundation that will support the next 6 months - 1 year of your team’s lives. That is a total of 920-1,840 hours per team member, which would come out to be 150k-250k investment depending on your rate, and approximately 50 tears a day for every day you don’t set this up correctly.
This foundation is using one of the recommended systems mentioned above:
MUI (Joy UI): Engineering Docs / Figma Resources
Tailwind: Engineering Docs / Figma Resources
Storybook: Your specific UI library
MUI & Tailwind are a front end development libraries. This allows you to start with a system that has guiding functionality behind the scenes, and one you can polish based on your own sexy UI.
?? The Second Milestone - Navigation
I’m guessing you built your product like a bento box. You defined your navigation by your core features then began to smoosh new ones into your existing containers because it was the fastest way to release a new capability. It’s ok, everyone does it. It’s ~a g i l e~. This is most likely the defining element of your design system. Your second milestone will be to fit your existing capabilities into your new nifty navigation system.
To do this, I like to stage out Milestone 1 / Milestone 2 / " / Final Design next to each other (See image above). You can add in your new nav to older designs pretty easily this way, then find gaps in your product and make sure they are accounted for.
??The Third Milestone (optional) - Smaller UI Updates
Find something small here, but important. You’re still learning how to release your new sexy product, and don’t want to mess up a release and lose engagement. Try settings or profile, something that contains components in your new system, but that doesn’t require you go backwards if you need to.
Now it's time for your your ??Toast Releases.
This is when you circle back to the initial list of problems you had with your product in the first place and you put on your storytelling hat. Why was something wrong in the first place? Why did you want to fix it? Each release from this moment on needs to feel like a toast, a celebration for something you solved for the user or something they’ve been asking for.
??The "Yes, they finally have that!" ?? Milestone
With your toasts in mind, this next release is your ?? crown jewel ??. This is a feature you’ve been excited to release, the one you did your major overhaul for, and one that is a core capability of your product. In this release, you’ll release your feature alongside the majority of your UI components. It will feel like a facelift and exciting moment to the user, but in reality you’ve been 5 steps ahead. Look at you, you sexy thing. Make sure you're aligning your release with your marketing team!
?? This release should affect whatever your success metrics of the project are & be worth a celebration for your team. ??
??The rest of em
The rest of the milestones should either follow the toast release method or simply are built into your agile releases. It depends how far you’ve gotten in the implementation of your new sexy product. Teams sometimes follow the page by page structure, but I actually recommend following the feature by feature structure. This is a more user centric way of building product & will feel more holistic than one page at a time.
By now you should have:
tl;dr
This process is by no means the only way to actualize a new design system, but it’s hopefully is helpful as a guide and a place to start if you feel like you need to build Rome.
If you were to take away one thing away from this article, remember the ???Toast Release Model. It is the best way to make your users feel heard and, in my opinion, why we build product in the first place.
If you need help customizing or implementing a design system for your team, please reach out. ???
Product Designer
1 年Flow like water indeed! Had some of the most fun working on projects with you and Yash Arora where we could just laugh at a situation and play to find the answer! Great read! ??