Meet Wanda: Why & How Wonderflow’s New Design System Improves Customer Experience

Wanda is Wonderflow’s newly-launched open-source design system built for products and digital experiences. Wanda enables a faster time-to-market, easier cooperation between teams, and facilitates creating consistent experiences across different channels.

 

Wonderflow is happy to publicly announce our new open-source design system: Wanda.

In order, we will cover these main sections:

1. Why we built Wanda
2. The advantages of using Wanda
3. How we use Wanda
4. Our future plans

Read on to learn more about the next best design solution for professional users.

As a company that is primarily focused on designing high-quality products for its business users, Wanda was built based on three key goals: making treasure of past learning, sharing the knowledge, and maintaining high-quality results.

What’s the purpose of building something great if people can’t experience it?

The Wonderflow team has rapidly expanded over the last year. New people have joined our band, and new departments have been born.

Sharing knowledge between different teams and people becomes more and more valuable while encountering new problems that arise with that.

Sometimes, it can be disheartening to see how much time is spent on aligning goals in meetings and follow-up plans rather than doing the actual work.

Now, all thanks to Wanda, finding updated and well-documented information about company artifacts requires zero guesswork. 

No more time is lost when hunting info and responding to questions like: “Where can I find the official company logo in dark mode?

Where can I find the updated color palette? How can I handle this design pattern?

Is this the latest modal component?…”

Getting your answer is as easy as typing the questions in the search bar.

Wanda’s website home page. The central hub of the design system.

We, as diverse humans, have our own unique way of approaching problems, and we walk different roads to find solutions.

Usually, the resolution is often celebrated. However, when cooperating to build products, this often leads to an uncoordinated user experience.

Wanda aims to provide solid guidance for designers and developers to collaborate smarter and reduce the risks of divergence.

Wanda’s website is useful for establishing a standard. It also serves as a learning material for people who are being onboarded — from project configurations to design patterns. 

While working with digital products or assets, developers and designers often find themselves solving the same kind of problems.

Thus, Wanda’s component-based approach offers great advantages, mostly related to time and money-saving. Plus, all thanks to the atomic components made to build complex interfaces.

Additionally, Wanda’s components work as a plug-and-play solution by allowing UI consistency — it’s as easy as importing a react component.

Products are meant to evolve with time — and so does Wanda.

Having a centralized place where all the information is stored, with instances linked to this source, allows us to update the elements once and propagate those edits to all the consumers.

In Wanda, we have dedicated Github repositories, which store all the UI components and the documentation, which gets constantly updated.

In the last couple of years, the meaning of the word front-end in web development has significantly broadened.

Wise people wrote about this issue in the past. Basically, we can say that it is increasingly difficult for a person to be an expert in all fields of the front-end. It’s certainly more satisfying when you can focus on just some aspects of it.

Wanda’s library is made of several critical components. Overall, the library helps our teams to separate challenges such as accessibility problems, visual choices, and cross-browser compatibility from business logic, writing API, and managing pipelines.

Thanks to Wanda, our speed in creating hi-fi prototypes have reached a whole new level.

As a result, this makes it useful for testing purposes, catching critical problems earlier in development, and better communicating effective ideas with stakeholders.

We have created a set of Figma libraries to manage this kind of design problem more granularly.

You can literally search for the component you want to use and drag it inside the canvas.

An animation showing how easy it is to use UI components on Figma; just search and drag them on the canvas.

If you’d ask a person in 1980 to tell you how 2021 will look like, I bet he’ll start talking about flying cars, laser swords, and robots — but no one saw the internet coming.

Apparently, the possibility to communicate in real-time with every single human on earth is a superpower that is downplayed by huge consequences, which far surpasses our wildest dreams.

What if we told you that around 12% of the population hadn’t witnessed these ‘superpowers’ – all because of their genetic sequence?

That may seem unacceptable, for 12% happens to represent a part of the American population that suffers from some sort of visual impairment.

And it is we, builders of web technologies, who have a responsibility to create products that are accessible to the highest number of people. It’s just like an architect who tries to eliminate architectural barriers when designing public buildings.

Building products that allow visually impaired users to interact flawlessly can mean many complexities compared to building products that just work and look nice.

Therefore, while creating Wanda’s core elements, we ran the extra mile. Accessibility became our central goal, and we designed it systemically.

We’re following WAI-ARIA standards to optimize our products for:

• Assistive technology, such as screen readers and switches
• Keyboard navigation
• People with visual impairment (e.g., color blindness, motion sickness, presbyopia)

Creating a visual language that is consistent both visually and interactively is particularly difficult when building for different platforms and experiences.

People are used to the highest quality of services online (e.g., Google, Spotify, Airbnb), and they get easily pissed off when their expectations aren’t met.

Consistency in visual languages is something users expect to trust brands. It’s also no longer a plus, just a basic requirement.

While building Wanda, we chose to adopt the popular solution of design tokens to store information in an agnostic way so that they can be shared between different technologies, products, and channels. Specifically, we cover information about colors, typography, spacing, and motion.

Along with tokens, we also defined design recipes to help create recognizable and common situations and interactions across the products. In turn, we can establish a sense of familiarity with the user.

The time you took to read this article is the same amount of time needed for a developer to look at a hi-fi prototype and import the matching Wanda components and specifications.

So, how awesome is that?!

This wasn’t clear at the beginning of 2000, but open source development advances way faster than closed-source development. Ask Microsoft.

Open-sourcing a project means opening the doors for collaboration and real feedback from people who use it.

At Wonderflow, we trust feedback (did you know?), and for this reason, all Wanda’s code is publicly available on Wonderflow’s Github.

There’s this running joke about having a problem that isn’t building something but maintaining it without losing your mind in web development.

The intrinsic nature of a design system grants Wonderflow significant powers to fight this problem – centralize and distribute, allow collaborative editing, setting clear boundaries, and spending a great amount of time documenting choices.

All of these are essential ingredients for managing a great future.

As mentioned, a design system is an ever-changing product that evolves with the company and people. We tackle problems step-by-step by following our business needs, and we implement new content every month.

A design system isn’t a project. It’s a product serving products.
— Nathan Curtis, EightShapes

For the time being, we’d like to steadily add multiple components and functionality to our ecosystem, such as:

• New foundation pages (e.g., elevation, motion)
• New components (e.g., tooltip, slider, spinner…)
• New recipes (e.g., how to use notifications, how to convey progress and loading states, how to convey info-states)
• And much more!

Here at Wonderflow, we’re shaping the future of the customer experience (CX) and how it can impact brands reaching their goals.

When mentioning brands, people are now accustomed to readily available CX services. If you leave them disappointed, potentially huge opportunities are lost.

Don’t miss the chance to leave a mark and join the Wonderflow band. Wanda is just one of our products.