Hopin • Design System Application

Hopin • Design System Application

Product Challenge

Deliver Value → What is Hopin's vision for Planetary?

Be indispensable → What are the problems that Planetary is aimed to solve in the short, medium and long therm?

Design System Workflow

Storybook credits
Storybook credits
Storybook credits
Storybook credits

Arguments to go in deep

Context - Shared Variables Dilemma

Design Tokens

User-friendly documentation for your component library with Storybook

Questions in the Process

Why Design System


Faster time to market 💨

No matter the role, everyone should be able to use and access Planetary to express themselves in the best independent creative mode
  • "Number of hours" will reduce in doing repetitive work. hence, they can focus on more creative or new work.
  • Reduce the number of issues/bugs
  • Consistency in the applications. Which will help in reducing the QA's work. QA and developers can focus on 'business' code rather than just worrying about colors. font-size
  • Fast development and release (Here it is important to know the release governance process of the company. Many companies are not aware that they need one. So, you can explain them)
  • Product owners & developers can build super-fast prototypes and can do a demo. Rather than waiting for designers to come with mockups
  • Decisionmakers can manage the products, consistency, quality, and resources.
  • System design will be the single source of truth - which means by default the developers will be building an accessible, secure, quality product

Why Raffaele 👆🏻

My principles
  • Start with the problem
  • We deeply understand the customer problem, their goals and worlds. It is our foundation for action and, ultimately, she is our only judger for success.

  • Outcome over output
  • We measure the quality of our work by the outcome, a behavioural or emotional change, it is creating with our customers. We care for our work until and after it reaches the hands of our customers.

  • Think big, act small
  • We set a clear, ambitious vision, and take baby steps to get there. We don’t settle for band-aids, yet act small to enable faster learning and value creation.

  • Diversity of minds
  • We drive collaboration and diversity from the first moment, so that we enable the best insights and ideas to come to the surface. Share early and often, iterate and feedback, is the past to great work.

  • Continuous learning and growing
  • Just as design is never finished, so are we not as human beings nor as a team. We encourage learning and helping each other grow, so that we do better.

Outcomes-Based Planning
We think we can increase the rate of early meetings with [this idea] measured by X, and with [other idea] measured by Y
  • Create a customer journey map with designers
  • Review with the magic question that encourage behaviours
  • “What behaviours at each step predict success and satisfaction? And what behaviours at each step predict failure and dissatisfaction?”

Product Design Improvement

First, I'm going to try to understand the business situation and our objective in more details.

Second, I will focus on defining the target user and brainstorming what problems we could solve for them.

And third, I will generate solutions for these problems, prioritize them, and make a recommendation.

  • Business objective
  • User problems
    • Select a user type
    • List user problems
    • Prioritize user problems
  • Solutions
    • List solutions
    • Prioritize solutions
    • Summarize
  • Recap

  • Set a business objective: You should start by making sure you understand the question properly and by defining a specific strategic objective with your interviewer
    • Confirm your understanding
    • Define the business objective
  • Generate solutions: Once you know what the objective is, it’s time to generate a structured list of solutions to solve the strategic problem you face
    • Create a structure
    • Generate solutions within that structure
  • Discuss solutions: After generating solutions, a discussion will naturally follow with your interviewer around the trade-offs and priorities of different solutions
    • Highlighting trade-offs
    • Prioritizing as necessary
  • Conclude: Finally, you should conclude the discussion by making a recommendation and answering the initial question you were asked
    • Make a recommendation
    • Highlight risks and next steps

What value Raffaele provides for Hopin?
How would you document updates to Planetary?
  • Write guidelines that act as a source of truth, or reference material.
  • When, where, why, and how do you use it?”
  • Document and/or demonstrate any functionality, animation, or conditional logic.
  • Lead by example and show example use cases.
  • Include as much detail as is appropriate, code included.

You will get the role. What will you practically do next?
  • Study the current situation.
  • Advocate for the system.
  • Establish design system processes with an how-to add new components
  • Ensure that any processes for updates and maintenance are upheld.
  • Research and discover new and improved ways to manage and maintain the system — whether it’s technology, processes, or design tools that could help the team.
  • Promote and seek opportunities for designers and developers to work together.
  • Keep everyone up-to-date and engaged with the system.
  • Deal with any resistance to the system.

Supporting contribution is one of the most challenging aspects of managing a design system.

Progress can feel slow to non-existent, and the rewards we first envisioned may turn out to be fantasy.

Getting people to contribute and then supporting them through the process requires significant effort, and that effort has to be sustained over time.

But it’s an effort worth making. With input from a community of users, a system’s patterns become infinitely richer and more representative than they would otherwise be.

And I believe that prioritising contribution and representation—even at the expensive of short-term efficiency—is the key to a design system’s success.

Friends who helped in building this 🙏🏻
Valerio Pipolo, Senior Infrastructure Eng @ Framer
Valerio Pipolo, Senior Infrastructure Eng @ Framer
Michelle Guarino, Lead Designer, ex. Airbnb Design System contributor
Michelle Guarino, Lead Designer, ex. Airbnb Design System contributor
Robin Cannon, Carbon (IBM) Design System Lead
Robin Cannon, Carbon (IBM) Design System Lead
Louis Chenais, co-founder @Specify (API Design System app)
Louis Chenais, co-founder @Specify (API Design System app)
Nenha Sharma, @hellonehha, jsLover founder
Nenha Sharma, @hellonehha, jsLover founder
@mattmize, Design System Designer @ Netflix
@mattmize, Design System Designer @ Netflix
Mauro Garcia, Software Developer
Mauro Garcia, Software Developer

Design System Design Manager Notion Ambassador