Refersion

Refersion helps online shops track sales driven by promoters, influencers, and affiliates. It is easier than ever to create, grow, and track the affiliate programs with Refersion.

Visit website

Headquarters

New York, US

Industry

Software Development

Company size

51 — 200 employees

Services we provided

Marketing research
Brand messaging
Visual identity
Brand guidelines
Website design

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.

Refersion website shown on a phone screen

Refersion canvas tote bag and hoodie concept by BB Agency

Refersion design elements for the website by BB Agency

Refersion business cards mockup by BB Agency

Refersion design elements for the website

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.

Refersion billboard simulation by BB Agency

Refersion Instagram story ads mockups by BB Agency

Refersion visual identity guidelines by BB Agency

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.

Refersion website shown on a laptop screen

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.

Refersion web design elements by BB Agency

Refersion website show on a phone screen

Refersion color palette and other design elements

The result.

After eight months of collaboration with five teams and 15 people, we successfully launched the new brand and website with the help of Refersion’s marketing, SEO and copywriting teams. The response to the new visual identity and website has been overwhelming, both from the Refersion team and their own customers. We’ll continue to work with Refersion to support new requests and updates, and to further optimize the experience.

Visit Refersion

Research

Competitive benchmark
User personas
User flows, and navigation
Wireframes

Branding

Market research
Identity development
Brand guidelines

Digital experience

Creative direction
Website design
Custom product visuals
Design system

Engineering

Front-end development
Headless WordPress CMS
Gatsby JS implementation
Quality assurance

What’s next?

Have a project in mind?
Let’s get to work.

Start a Project

Helping Refersion empower influencers, ambassadors, and affiliates to do what they do best.