Alchemy

Discovery Phase

HMW Statement

"How might we we integrate Alchemy’s documentation and code into our daily routines so that building consistent, high-quality digital experiences becomes effortless?"

5W + 1H Method

Who?
  • Who has a need?

    Organizations struggling with inconsistent user interfaces, slow development speeds, or high maintenance costs across multiple products.

  • Who is involved?

    Cross-functional teams made up of product designers, front-end developers, accessibility specialists, and content strategists.

  • Who is affected?

    It affects a wide range of stakeholders within an organization, primarily impacting designers, engineers, product managers, and end-users.

What?
  • What do we want to achieve?

    Establish a single source of truth that guarantees visual consistency, accelerates product development and improves cross-functional collaboration.

  • What do we already know?

    A design system is far more than a UI kit or style guide; it is a living, evolving product that acts as the "single source of truth" for building digital products.

  • What do we want to discover?

    the current state of your product's UI, identify pain points in the design-to-development workflow, and understand the needs of the teams who will use it.

When?
  • When does it occur?

    Ideally implemented as a product scales or when design/technical debt, inconsistencies, and inefficiencies arise.

  • When are the results expected?

    Results from a design system, such as improved efficiency, consistency, and time-to-market, are expected in phases.

  • When can the project begin?

    Begin at the inception of a project, or immediately upon identifying UI inconsistency, scaling needs, or high component redundancy.

Where?
  • Where does the problem occur?

    Problems typically occur at the intersection of design and code.

  • Where this will take place?

    Figma (tokens), code repository (GitHub), and Zeroheight documentation site (Storybook) that connects to all.

  • Where has it been solved?

    Atomic design is widely used by UI designers and front-end developers to create structured design systems. 

Why?
  • Why is it a problem?

    Not having a design system causes critical inefficiencies, including inconsistency, slowed-down development cycles and high maintenance costs.

  • Why is this necessary / important?

    It ensures consistency across digital products, drastically accelerating development speed.

  • Why hasn’t it been solved yet?

    A combination of high initial costs, cultural resistance, and the misconception that it is a one-time project rather than a long-term, living product.

How?
  • How is it being done today?

    Currently, design and development cycle uses the waterfall development model.

  • How could this be an opportunity?

    It highlights that the current process is unsuitable for complex projects and making bugs costly to fix.

  • How could it be solved?

    Agile environments promotes collaboration among small, cross-functional teams to deliver, learn, and iterate on projects in short, rapid cycles, adapting to change for improved efficiency.

UX Research

User Interviews | Pain Points

Says

  • All of our experiences look inconsistent. Like their built by multiple different people.
  • It’s embarrassing that our digital experiences are not responsive and don’t considered accessibility.
  • As a member, I would expected more. It takes me ages to get accustomed to new sites.
  • There is too much tech debt. We can design fast but each new iteration takes more time developing.

Thinks

  • There has to be a better way of working, processes that make things move smoother and more efficient.
  • Why do all the sites look different? Should I trust this company? Is this a scam site?
  • If only there was a place I could go that would have everything I needed. That would make my job so much easier.
  • If only stakeholders understood that product lines need to scale and what that entails. They way we do things now doesn’t work.

Does

  • It takes months just to develop one page. I have to go on a “quest” to find logos, assets and governance materials.
  • Have a multiple meetings to teach each team about accessibility standards and brand guidelines.
  • I have made so many buttons, which one is the right one and what is the right color?
  • We develop for quantity not quality. They want everything for nothing.

Feels

  • I feel frustrated that nothing gets done the way I designed it.
  • I feel overwhelmed by all the changes and the immediate need to get it done so quickly.
  • I feel angry that no one considers the developer’s point of view. We need time.
  • I feel unheard and unseen. The digital maturity of this company is 10 years behind.
User

Execution Phase

Insights

From the UX research three themes appeared – efficiency, consistency, and scalability. We need a design system that changes not only how we work, but how we think of design.

  • Efficiency

    Connects designers and developers through a common language. Alchemy serves as a central source of truth, uniting code, design principles, and UI patterns to enhance efficiency.

  • Consistency

    Documented components establish a standardized visual language for the design system, ensuring consistency in representation across all design assets and implementations.

  • Scalability

    Alchemy facilitates the integration of new elements and supports scaling of a product's complexity while minimizing the risk of technical debt. This approach ensures a more sustainable development process and promotes long-term viability.

Excution

Before

Excution

Alchemy applied
Com AAA compliant

Excution