Design system as a MVP
Brienne Wong
We recommend that you start with creating and launching a minimum viable product (MVP) when building your design system. Limiting your scope enables you to launch a simple, usable design system for your team that can evolve and scale over time. Below, discover how to get started.
Define the scope of your design system
Starting from scratch
Outlining the scope of your content is the priority for your initial design system. Depending on the size of your business, this can look different for teams. If you’re starting from scratch, establish a rough idea of the minimum elements needed. This could include:
- an information architecture skeleton
- required components
- content coverage apart from the components (e.g., principles, brand language, etc.)
- styleguide introduction page (e.g., “How to use this styleguide” and “How to contribute to the design system”)
Migrating to zeroheight
If you created a design system in another platform and are migrating to zeroheight, the priority goal might be to migrate your content.
If you’re rebuilding and improving an existing design system, we recommend migrating 80% of the content for your MVP release. Once it’s launched, you can refine the last 20% while testing and getting feedback.
Consider surveying the product team(s) who will consume the content. Ask what they consider the basic requirements for their needs. Discover some strategies for migrating to zeroheight.
Other considerations for your design system
- Will you have a governance model? If so, what kind of governance model, with regards to managing releases/publishing, content creation vs. review and approval workflows, ownership/maintenance of content, etc.?
- What is your contribution model? Will your product teams dedicate a percentage of their time to documentation, or are there team members dedicated to it? How can your users report a bug, edit, or suggest a new component?
- What accessibility guidelines will you follow?
- What voice and tone guidelines will you follow?
- What should your design system team makeup look like (ratio of designers to developers, etc.)?
- How should you name your design system?
Making and sharing these decisions beforehand can encourage team alignment, promote collaboration and communication, and prevent confusion.
Create your v0 design system
After defining the scope, you can begin customizing your styleguide, creating your cover and introduction pages, adding main components, and documenting them.
Customize
You can customize your styleguide in the following ways:
- upload your company logo
- customize styleguide colors
- create a custom domain
- create a styleguide cover page
Import brand elements
You can upload your brand elements into your styleguide, such as:
Import components
zeroheight can integrate with Figma, Sketch, Adobe XD, Abstract, Zeplin, and Storybook, so you can immediately upload your components and code into your styleguide. You can also annotate your components and make anatomy diagrams directly in zeroheight. Once you’ve added your components into your design system, include the necessary documentation.
Gather initial feedback
Once your MVP is ready, you can share it with beta stakeholders and get their feedback. You can set up a feedback footer for every page of your styleguide. You can paste URLs for Google Forms, Typeform, or Microsoft Forms into the footer or embed the forms directly on the page.
This is an excellent stage to begin thinking about measuring the value/impact of your design system so that you can continue to advocate for it and secure resources for it. You can set up Google Analytics, Hotjar, and zeroheight Analytics if you’re on an Enterprise plan.
Launch your design system
You’re ready to launch your design system! You can share your design system with your company by linking to your Slack or Teams channels via shortcut tiles or speaking with relevant teams to promote its value. Come up with an internal marketing plan and begin to socialize it, and walk people through it!
What next?
Optimize the feedback loop and iterate
After promoting your design system to your company, you can review feedback and iterate based on company needs.
As you continue to receive feedback on your beta design system, you can improve and expand upon it by adding more components and expanding guidelines. Rules, callout blocks, and status tags can help essential information stand out to your audience.
Refine your governance and contribution processes
As your design system continues to scale up in content and complexity, dedicate some time to add clarity and structure to the management of the design system.
Revisit governance workflows and your contribution model to see that they are still appropriate to ensure the longevity and health of your design system.