Refersion

The client

Refersion helps merchants connect with customers at scale through affiliate and influencer marketing. Their leading performance marketing platform manages, tracks, and grows ambassador, influencer, and affiliate programs with first-party tracking, unlimited offers, and custom commission structures for e-commerce brands.

Refersion was initially developed to support Shopify and Shopify Plus store owners. A few years later, Shopify stores account for 90% of its business. Refersion also supports other popular e-commerce platforms such as Magento, Chargebee, BigCommerce, Salesforce Commerce Cloud, Stripe, and WooCommerce.

The challenge

They were looking for a fresh perspective on their outdated website and branding, focusing on an easily-editable CMS that their marketing team could update regularly.

The solution

We did a complete rebrand for Refersion with a brand new website, optimized UX, and CMS integration that benefited the marketing and development teams.

Where the old meets the new*

In our discovery round, we collectively set the goal of making the brand mature, slick, trustworthy, and exclusive while reinforcing the friendliness of the Refersion team and its services. At the same time, we wanted to extend the connectivity of the brand to the design of UI.

The new branding felt like a natural transition from the old, with one element in particular catching our eye, so we decided to keep it and use it as the foundation for the new identity.

*The asterisk puts Refersion in the middle as a connection point between the different sources — the partners, influencers, and ambassadors — and the marketplace. By adding two arrows pointing to each other, we imply the connection of both sides and their exchange of data and values.

In the word mark, we capitalized the letter R to show the maturity of the company. We balanced it with a thick and rounded font to make it appealing and friendly at the same time.

The dominant color of dark blue provides a context traditionally associated with the corporate sector. On the other hand, bold splashes of green add freshness and fun. And when light blue and violet come into play, we get a color palette that can be used to create playful visual components. Their combinations and multiple uses allow for many voices to be heard.

The graphic elements show up in simple, overlapping shapes that further express the intention of connectedness.

Keeping everyone happy.

We felt that the old website didn’t present Refersion as a platform where merchants could track all affiliate marketers, so we set out to change that.

What sets Refersion apart from the competition is the analytics and first-party tracking, which makes the data collected more reliable.

In addition to the type of affiliate marketing, we highlighted the main industries Refersion operates in, as the platform is optimized for commerce and works seamlessly with Shopify.

We added social proof with case studies, quotes, and customer stats to show the success Refersion brings to their customers.

Partnerships with apps, agencies, and affiliate platforms are essential to Refersion’s ecosystem, which is why we’ve dedicated a separate section on the website to them. Website navigation needed to be clear and informative to appeal to all these different audiences interacting with Refersion.

Setting the UI up

During the UI process, we streamlined our collective goals previously established in the branding phase while communicating the friendliness of the Refersion team and the connectivity of the brand.

The darker blue and gray primary colors set the stage for a smooth, trustworthy, and easy-to-navigate interface. Combined with touches of fresh green, purple and blue reflected in the colorful product illustrations and thoughtful user interface elements, we created a user interface that appeals to Refersion’s target audience.

The extensive library of product illustrations found in the UI was created to help Refersion visually communicate the power of its platform and what it can offer its potential customers.

Throughout the user interface, the connecting shapes introduced earlier were used to express the connectivity of the Refersion brand. An easy-to-follow guide, which is part of the design system, was created to ensure consistency of use and to help the BB development team implement the connecting shapes.

Developing a scalable website

We built a fast, secure, scalable website based on WordPress with customized Gutenberg blocks as CMS and Gatsby JS as a static website generator.

The client wanted a CMS for the website to make it easier to edit content, create and blog new pages, and add case studies. At the same time, it needed to be secure, fast, easy to scale, and future-proof. That’s why the team proposed a Headless WordPress CMS and Gatsby JAMstack setup.

Headless CMSs are growing in popularity among developers who want more control over how their content is displayed on the front end but still want to use a familiar back end like WordPress. With a WordPress CMS, you can customize the front end without changing the back end, which saves time and resources in the long run.

We chose Gatsby because it’s one of the most popular React-based generators for static websites that focuses heavily on speed and security. Shortening page load times reduces bounce rates and encourages visitors to visit more of your site. This can increase essential metrics like time spent on the site and contribute to more conversions. Gatsby is also very flexible. It allows you to design and build your front end while using the familiar CMS of your choice to create and manage content. This makes the Gatsby framework a popular choice among WordPress developers who want to create a headless setup based on the JAMstack modern web development architecture.

We chose WordPress because it’s the most familiar CMS and blogging platform on the market. We also created custom Gutenberg blocks for the site and integrated Branding & Design elements into the visual content editor that allows clients to easily edit and create new pages.