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:
- Why we built Wanda
- The advantages of using Wanda
- How we use Wanda
- 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 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.
Wonderflow empowers businesses with quick and impactful decision-making because it helps automate and deliver in-depth consumer and competitor insights. All within one place, results are simplified for professionals across any high-UGC organization, and department to access, understand, and share easily. Compared to hiring more analysts, Wonderflow’s AI eliminates the need for human-led setup and analysis, resulting in thousands of structured and unstructured reviews analyzed within a matter of weeks and with up to 50% or more accurate data. The system sources relevant private and public consumer feedback from over 200 channels, including emails, forums, call center logs, chat rooms, social media, and e-commerce. What’s most unique is that its AI is the first ever to help recommend personalized business actions and predict the impact of those actions on key outcomes. Wonderflow is leveraged by high-grade customers like Philips, DHL, Beko, Lavazza, Colgate-Palmolive, GSK, Delonghi, and more.
Other articles you might like:
Interview · Dec 23, 2021
Employee Spotlight: Lucia Manetti, Marketing Specialist
Part of our recent success and growth has been largely due to our people. In particular, if we had to pick another hard-working teammate for this month alone, let’s meet Lucia Manetti, our Marketing Specialist. Lucia has held nearly six years of experience in the tech industry. Funny enough, however, she graduated with a degree in the History of Art and one in Concept Art for Videogames. Afterward, she got her master’s in Digital Marketing….
Interview · Nov 25, 2021
Employee Spotlight: Brenno Pellegrini, Product Designer
Part of our recent achievements and growth has been mainly due to the people. So, we’re excited to feature another hard-working team member in our Employee Spotlight of the month. Meet Brenno Pellegrini, our Product Designer and the first one to join the Design Team. Born and raised in Trento, a small city lost between the mountains in northern Italy, Brenno studied chemistry during high school at ITT, also in Trento. However, he loathed it…
Customer experience · Nov 18, 2021
10 Tips on How to Get a Good Net Promoter Score (NPS)
In a past post, we helped define the net promoter score (NPS), including calculating NPS and its differences against the customer satisfaction score (CSAT). Now, we expand on the topic in this article by focusing specifically on how to improve NPS. However, the NPS is no better than the CSAT or other customer experience (CX) metrics. It also does not always work, depending on how your company uses it and an organization’s business model, preferences,…