How we launched: Voucherify

Building a website and design system for an API-first sales promotion engine for digital teams.

Mikołaj Biernat

—

Product Designer

Some projects turn out so good that they deserve more than just a shout-out on our social media. To tell you how they stand out, we write articles about how we helped to launch them. Here’s the first post of this series that highlights our collab with Voucherify.

Rapid growth is a curse and a blessing of every early-stage startup. On the one hand, the product improves with each release, attracting new customers and making the business more money. On the other hand, though, such intense growth can make its marketing website released no longer than a year prior outdated.

While this is great sign, it’s equally annoying when your visitors can’t see what you’re up to. If you don’t update your website, they’ll judge you based on a potentially outdated pitch.

Problem

At the beginning of 2021, Voucherify was dealing with similar problem. Their website struggled to explain the product clearly and its style didn’t appeal to the enterprise clients they wanted to reach. The pastel colors, abstract illustrations and cartoonish character of a miner wasn’t enough to make the folks in suits chuckle.

On top of that, the website felt hacked together rather than carefully built. Minor inconsistencies, questionable interactions and a lack of consistent flow didn’t seem like a big deal when inspected separately — but together, they made for poor first impression.

Challenge

Voucherify approached us to help them transition to a more mature design language. In addition, the whole process had to be documented into a design system that would allow the team to build up on top of the redesign.

Design process

Before we got our hands dirty, we outlined a design process to define how we’ll achieve our goal. This also helped us estimate the project’s timeline, number of iterations and rounds of feedback we’ll need from the client at each stage.

‍

[We] worked in an agile, iterative way, where we could chip in at every stage of the design. Weekly meetings and daily summaries sent over Slack, as well as a tracking chart, gave me a clear picture of the progress of the work.
Katarzyna Banasik — Product Marketing Manager at Voucherify

Smart-looking diagrams

We kicked things off by creating an information architecture (IA). It’s a diagram that shows the relationships between all the subpages (and sometimes their contents, too), which helps picture the navigation. When we work on a website redesign, we use IA to understand its content and visualize the scope of a project.

A screenshot of the information achitecture. — The information architecture. Also, a flashback to the times before FigJam.

Setting the right mood

Clients often come to us with a vision of how they want their new website to look. The perfect time to lay it out is when we create the moodboard. It’s a collection of visual references we use to settle on the look & feel we’re looking for.

The best thing about it is that we don’t waste time searching for the right adjectives — screenshots of benchmarks work thousands times better.

Blueprint

Besides the visual redesign, Voucherify’s team wanted to update the content on their key pages. What you say on your website is far more important than the way it’s presented. To find the right layout, we first worked with wireframes. They’re like a blueprint. Without any colors, graphics or other visual effects, it’s easier to polish the basics.

What you say on your website is far more important than the way it’s presented.

The wireframe of the homepage. — When I say lo-fi, I mean it.

Quick side gig

When we started iterating on the wireframes with the right colors and fonts, we spotted an opportunity for a quick win for Voucherify as a brand. Their logo — its typography, to be precise — felt unbalanced. With a few tweaks, we improved its legibility without reinventing the whole branding.

Minor improvements and a few hours of work — but a huge difference.

Full picture

Finally, thanks to all the evaluations done earlier, it all came together. Voucherify’s website was redesigned with the new visual language.

It’s worth to mention that instead of working on the final designs behind a closed door, we collaborated with the Webflow developer, delivering each subpage separately as we finished it. This way we could quickly resolve any problems we ran into along the way and launch the project faster, as compared to working in a silo.

A presentation of the final design of the homepage's hero section. — The glorious, final design, as seen on our Dribbble.

Building the LEGOs

In parallel to the redesign, we were building the design system powering the website. The deliverable contained a set of building blocks and guidelines on how to use them so that anyone in Voucherify’s marketing team could design a landing page.

Each element — from basic styles to whole sections — is carefully designed to be scalable to a variety of content. Thanks to the power of Figma — our favorite design tool — all the elements are available within an effortless drag and drop.

A screenshot of a piece of the design system in Figma. — For real, how did we live without variants?!

Outcome

What did we end up with?

Webflow-powered website

It would be underwhelming if just a design file turned out to be the fruit of our collaboration. After all, websites are interactive. So shout-out to Piotr Gacek, Voucherify’s front-end developer, who built the website using Webflow.

Design system

The design system we created is more than a Figma library. All its components and principles are replicated in Webflow, so that the process of creating a page is based on the same building blocks at every stage.

The design system has already helped us put together a couple of new landing pages and create almost a hundred promotional mock-ups. It is really easy to use even for non-developers.
Katarzyna Banasik — Product Marketing Manager at Voucherify

Marketing assets

We put an extra emphasis on the visuals such as illustrations or icons so that they adjust to different contexts. This way, the new visual language doesn’t live on the website exclusively. Other marketing assets, like ebooks, draw the key elements from the same design library.

What’s next?

One successful launch later, we started a partnership with Voucherify to help them and their customers with everything digital design, focusing on products and branding. Read the full announcement to learn more.

Takeaways

Voucherify is an API-first sales promotion engine for digital teams.
The company had been doing so well that their website couldn’t keep up with their growth.
We redesigned their website to give it more mature design language.
On top of that, we created a design system to make the creative process fast and accessible to development and marketing teams.

Mikołaj designs useful digital products and writes copy that explains them with a punchline.