How Did tonik Redesign Voucherify’s Website?

Growing fast is a curse and a blessing of every fast-growing startup. When new features launch regularly and the target market changes, a website released just the year prior may be already outdated.

It's a great sign, but 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 the outdated pitch.

At the beginning of 2021, Voucherify was dealing with similar problems. The website didn’t explain the product well, the animations were very abstract and not related to the product and the style and branding didn’t appeal to the enterprise, tech-savvy type of client they were trying to reach. The pastel colors, abstract illustrations, and the cartoony-looking character of a miner wasn't enough to make the folks in the suits chuckle.

Secondly, the website felt hacked together rather than carefully built. Minor inconsistencies, questionable interactions, and lack of overall flow didn't seem like a big deal when examined separately – but together, they made for a poor first impression.

The challenge

Voucherify reached out to us to help them redesign their website – so it speaks to the target group – and create a design system, to let the team launch more landing pages themselves. But wait, who's us?

We're tonik, a digital design studio. Most of the time, we work with early-stage startups to help them launch their MVPs, but that doesn't mean we don't collaborate with more established companies. Clients like Segment, Auth0, or Chronosphere confirm our ability to blend into an existing team.

For this project, we joined the forces of two designers – Mikołaj Biernat & Mikołaj Szymkowiak – and Aga Kaczmarek, who managed the work as a Project Manager. With a healthy affection for agile from both teams, we didn't set any hard deadlines but wanted to wrap up the project in a few months. So, where did we start?

The design process

Before we got our hands dirty, we outlined the design process to define which design methods we'll use to achieve the goal. It also helped us estimate the project's timeline, number of iterations, and amount of feedback we'll need from the client at each stage. Here's what we came up with.

Creating the information architecture

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

Setting the right mood

Clients often have a vision of how they want their new website to look like. The perfect time to lay it out is when we create the project's moodboard. It's a collection of visual references we use to align 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 of times better.

The blueprint

Besides the purely visual redesign, Voucherify's team wanted to update the content on the key pages. What you say on your website is far more important than the way it's presented. That's why we first worked with wireframes to find the right layout for the content. You can consider them the website's blueprint. They don't use any colors, graphics, or other visual effects, so it's easier to focus on the basics.

A quick side gig – upgrading the logo

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. We tweaked it a bit to improve the legibility without reinventing the whole branding.

The full picture – the final designs

Finally, thanks to all the evaluations we did earlier, it all came together. Voucherify's website was redesigned with the new visual language. It's worth mentioning that instead of working on the final designs behind a closed door, we collaborated closely with Voucherify’s Webflow developer, Piotr, who was delivering each subpage iteratively, as we finished its design. This way we could react to any problems we ran into along the way and launch the project faster, as compared to working in a silo.

Building the LEGOs – preparing a design system

In parallel to the redesign, we were working on 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 (build from ready components) a landing page. In a start-up reality, things move fast and you need tools to execute your plans quickly and efficiently – the design system had to go along with that.

Each design element – from humble tokens containing information about colors, fonts, and shadows, to entire sections – is carefully designed to be scalable to a variety of content. Thanks to the power of Figma – our favorite design tool (at least at the time of writing), all the elements are available within an effortless drag and drop.

The project’s deliverables

What did we end up with?

Webflow-powered website

Of course, we didn't develop the website ourselves – it was done by Piotr Gacek, Voucherify's front-end developer (great job!) – but it wouldn't be fair to list a design file as a fruit of our collaboration. After all, a website is an interactive piece on the Internet – not a static image. Thanks to Webflow, Voucherify team could build it in no time. 

Design system

The design system we created is not just a design library we used to speed up the ideation process. To ensure consistency across teams, Piotr replicated the components in Webflow. This way Voucherify could make it seamless to build more landing pages in the future.‍

Marketing assets

We put extra emphasis on the visuals like illustrations or icons so that they can work in 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.

"I was the project manager on the Voucherify side for this redesign. I have really enjoyed working with tonik as our design agency. They have worked in an agile, iterative way, where we could chip in at every stage of the design, increasing the efficiency of our collaboration. They were always open to criticism and prepared new versions of the design as many times as we have asked them to. They were usually reachable and replied fast. Weekly meetings and daily summaries sent over Slack as well as a tracking chart gave me a very clear picture of the progress of the work and predicted timelines of the project. I really appreciate the transparency, clarity and openness of their team. We are very happy with the final design of the website. 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. 

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.