Refersion

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

How did we help:
Market research Brand guidelines Brand messaging Visual Identity Website design
Refersion website shown on a laptop screen

Software Development

New York, US

51 — 200 employees


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 logo
Refersion logo
Refersion website shown on a phone screen
Refersion pins concept
Refersion canvas tote bag and hoodie concept by BB Agency
Refersion design elements for the website by BB Agency
Refersion design elements by BB Agency
Refersion design elements by BB Agency
Refersion business cards mockup by BB Agency
Refersion design elements for the website
Refersion posters mockups by BB Agency

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 color palette
Refersion typeface
Refersion typeface
Refersion elements
Refersion design elements by BB Agency
Refersion design elements by BB Agency
Refersion billboard simulation by BB Agency
Refersion design elements by BB Agency
Refersion design elements
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.

Refersion competitive benchmark
Refersion wireframes by BB Agency
Refersion suggested improvements
Refersion sitemap

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 by BB Agency
Refersion website by BB Agency
Refersion design elements
Refersion design elements
Refersion website shown on a laptop screen
Refersion website by BB Agency

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 app shown on a phone screen
Refersion design elements
Refersion web design elements by BB Agency
Refersion website by BB Agency
Refersion WordPress preview video
Refersion design elements by BB Agency
Refersion website show on a phone screen
Refersion Website by BB Agency
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.

How did we help?

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

Share this Case Study:

LinkedIn Twitter Facebook

Related Case Studies

Narrating stories that resonate, building experiences that people cherish, and achieving outcomes that matter demand true partnership. That’s why we’re here for the long haul, walking beside you every step of the way.

View