Company • Design System Application

Design System

How would you document updates to our Design System?

  • 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.

What to expect

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.
  • Usability Testing to educate designers on system design best practices
  • 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.

Real practical work for me would be

Improvements

📌

Tracking the status from backend to frontend to raise the interactions, UI and motion level across web and apps to help transferwise itself to move for customers who wants to easily move money with convenience

  1. Features lookings and lead operations
    1. Create buttons and improve the UI
    2. Follow the Guidelines in place
  2. Structured Why
    1. Document and create a culture on that
    2. Contribution and advocating
  3. Usability Testing across designers
    1. How can we improve the Wise experience across web and mobile?
  4. New documentation for adding component

Design System Workflow

image
image

Design Tokens

Have you ever hear about Design Tokens in Systems?

/* Design token */
$color-background-light: #ffffff;

/* CSS appliance */
body {
background-color: $color-background-light;
}

/* USING SASS we normally declare it as $white but it's too generic compared to the token */
📌

Design tokens essentially store design decisions — like colour, size, and space — which can be systematically applied throughout a product.

Using Code as a Design tool Checklist
Update the library, style guide(s), or whatever design file(s) the team uses to share design assets.
Make sure the update is effectively tracked and queued for a developer to update the code, (for example, by creating a Github Issue).
Update any documentation.
Inform the team about the change. Ideally, they should be aware of the change before it’s been made. If I include them in the process of figuring out why the change is needed and what the change should be, you will avoid any conflicts or repetition of work.

Arguments

🥅
Context - Shared Variables Dilemma

🙂
User-friendly documentation for your component library with Storybook

Questions in the Process

📐
Why Design System

🖌
Artscapy Design Reviews

💳
Metrics

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

Strategy
  • 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

Managing stakeholder

They will still need for work at a certain date.

How do we set expectations?

Stop working on something when we’ve made enough progress to feel satisfied.

When will we be satisfied? Get an agreement on a direction and then commit to reviewing the performance for a series of months.

Hypothesis and measures success before start on an effort.

Contributing

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.

Designer Freelance • UX & Design System Notion Ambassador