- Author: Dan Mall
- Genre: Software Engineering / Design Systems
- Publication Date: 2023
- Book Link: https://designsystem.university/courses/design-system-in-90-days
This document summarizes the key lessons and insights extracted from the book. I highly recommend reading the original book for the full depth and author's perspective.
- I summarize key points from useful books to learn and review quickly.
- Simply click on
Ask AIlinks after each section to dive deeper.
Teach Me: 5 Years Old | Beginner | Intermediate | Advanced | (reset auto redirect)
Learn Differently: Analogy | Storytelling | Cheatsheet | Mindmap | Flashcards | Practical Projects | Code Examples | Common Mistakes
Check Understanding: Generate Quiz | Interview Me | Refactor Challenge | Assessment Rubric | Next Steps
Summary: The book kicks things off by explaining why design systems matter, especially for teams handling multiple digital products—they make life easier by boosting efficiency and consistency. But the real challenge isn't building one; it's getting folks to actually use it. Dan Mall outlines three stages organizations go through: treating the design system as a simple tool, then as a product with dedicated resources, and finally as a core practice baked into how everyone works. The key to reaching that practice stage? Repetition and habit-building through a series of tactical activities over 90 days. He assumes a cross-disciplinary team of 3-8 people, with roles like Product Owner, Design Lead, Engineering Lead, and more, working alongside feature teams. Activities are practical, distributed by default, and use the DACI framework (Driver, Approver, Contributors, Informed) for clear decision-making. There's emphasis on shared tools like Figma, Git, and Storybook, plus extras like a FigJam canvas for collaboration.
Example: Think of a design system like a shared kitchen in a big family home—everyone contributes ingredients and recipes, but without clear rules, it turns into chaos with duplicate spices and mismatched tools. The book's activities are like weekly family meetings to organize the pantry, making cooking (or building products) smoother for all.
Link for More Details: Ask AI: Introduction
Summary: Start by aligning your design system with the organization's big-picture goals. Gather docs on mission, audience, strategies, and vision to create a "North Star" that keeps everything on track. Then, collect all design files (like Figma or Sketch) and code repos for an audit, ensuring the whole team has access—even engineers to design tools and designers to code. Map out key stakeholders and their influences to spot supporters, undecideds, and opponents, which helps navigate org politics. Finally, pull together feature teams' roadmaps (from tools like Confluence or Jira) to understand upcoming work and prioritize pilots.
Example: It's like planning a road trip: you first decide the destination (North Star), pack the car with everyone's gear (assets), draw a map of who might help or hinder along the way (influence map), and check everyone's schedules (roadmaps) to pick the best routes.
Link for More Details: Ask AI: Preparation and Alignment (Activities 1-4)
Summary: Dive into existing designs and code to spot common patterns—like similar cards or buttons across products—grouping them objectively without judgment. Then, shift to subjective views: what emerging ideas (like better accessibility or specific code structures) should we encourage more or less? To pick pilot teams, score products on factors like reuse potential, business value, feasibility, and marketing appeal, using a 0-10 scale to prioritize based on roadmaps.
Example: Spotting paradigms is like sorting a messy closet: first, group all the shirts by style (objective), then decide which trends you want to keep wearing (subjective). Scoring pilots? It's like rating restaurants for a group dinner—considering everyone's tastes, budget, and how shareable the food is.
Link for More Details: Ask AI: Identifying Paradigms and Research (Activities 5-7)
Summary: Schedule walkthroughs with top pilot teams to explore their products and roadmaps, proposing mutual benefits. Identify and interview key stakeholders for org direction, plus end users for real-world pain points. Conduct team walkthroughs to note needed components. All interviews use casual scripts covering workflows, tools, hopes, fears, and success visions, tracking everything in a canvas.
Example: These sessions are like coffee chats with neighbors before a block party—you learn what they need, what excites or worries them, and how to make the event work for everyone, avoiding surprises.
Link for More Details: Ask AI: Interviews and Walkthroughs (Activities 8-14)
Summary: Create a new repo and package for the system, set up a public workshop space with branch deploys. Teach cross-skills: HTML/CSS to designers, Figma to engineers, Git and Storybook to designers. Practice "Hot Potato" pairing (quick handoffs between design and code), join sprint planning, experiment with external systems, and run a practice pilot to build habits.
Example: It's like a team-building retreat: you set up a shared campsite (repo), teach everyone basic survival skills (tools), and practice drills (Hot Potato) so when the real hike starts, no one's left behind.
Link for More Details: Ask AI: Setup, Training, and Practice (Activities 15-24)
Summary: Build a shared glossary for common terms, pick three initial components from frequent needs. Synthesize stakeholder insights into themes, send updates, map coverage across teams. Set up a Slack channel, create a v1 reference site (using tools like Zeroheight), build a component roadmap, and propose collab plans to pilots.
Example: This phase is like prepping a recipe book: define terms so everyone speaks the same language (glossary), pick starter recipes (components), jot down family feedback (synthesis), and plan who cooks what (roadmap).
Link for More Details: Ask AI: Planning and Synthesis (Activities 25-33)
Summary: Abstract components via Hot Potato, blending common and emerging paradigms (e.g., for cards: support images, headlines, CTAs). Share in-progress work, iterate based on feedback from three+ teams, chronicle decisions on the reference site. Issue pull requests, usability test with pilots, and finalize iterations before minor releases.
Example: Building a component is like customizing a bike: start with common parts from old bikes (paradigms), tweak based on riders' input (feedback), test the ride (usability), and ensure it's smooth for the group.
Link for More Details: Ask AI: Component Development and Iteration (Activities 34-40)
Summary: Send weekly updates, extract principles from retros, name the system and design logos. Add office hours, make swag, announce releases in Slack. Host "Systems Week" every four weeks for global tweaks. Seek brand/legal approval, repeat the process for components #2 and #3.
Example: This is the ongoing party planning: send invites (updates), set ground rules (principles), pick a theme (name/logo), hand out favors (swag), and do seasonal cleanups (Systems Week) to keep the vibe fresh.
Link for More Details: Ask AI: Communication, Branding, and Maintenance (Activities 41-51)
Summary: Finalize and release v1.0.0 with three production components, a reference site, and excited stakeholders. The conclusion celebrates the habits formed, noting this is just the start—future work like tokens or contributions builds on repetition. It's about evolving the system as needs arise.
Example: Releasing is like launching a boat after building it piece by piece: you've tested the hull (components), gathered the crew (teams), and now set sail, knowing adjustments come with the waves.
Link for More Details: Ask AI: Release and Conclusion (Activity 52)
About the summarizer
I'm Ali Sol, a Backend Developer. Learn more:
- Website: alisol.ir
- LinkedIn: linkedin.com/in/alisolphp