Understanding Mention Me's Journey Design

This article will talk you through the referral journey design and how it is shaped to optimise conversion and effectiveness.

Styling

We recommend making the iframe feel like it’s part of your website rather than give it a separate design treatment. This can include; buttons, colours, card styling, border-radius etc.

You can customise your design theme yourself with our theme editor and see the changes in real-time or alternatively you can provide us with the below information and we can edit it for you.

If you've already had a demo created for your brand then we've already considered your sites styling. Otherwise to get all your touchpoints looking on brand with a consistent look and feel, we need the following information. 

font-family:
font-weight:
color:

font-family:
font-weight:
color:

color:
color:
color:
color:

color:

Golden rules of referral

These rules are some of the best practice we recommend in order to maximise your offers effectiveness when presented for the first time to a customer.

Call to action

This is the button that will progress your customers to the next step and confirm they want the reward. There is a few things we recommend in order to make this a successful call to action:

• Big and bold
• The most prominent UI element
• Make sure the main CTA is obvious at every stage
• Perfectly matched to your branding
• It should use a colour that contrasts with most UI elements

Message hierarchy

The offer needs to be the first thing the customer sees and therefore the most prominent message. Follow these points for a prominent message:

• Clear to grasp offer in 1-2 seconds
• Visually bigger than all other text
• Draw attention to the reward
• Please ensure it’s never too long

Fonts

Fonts are a key element of each brand’s identity and our referral design should be completely indistinguishable from the design of your own website.

We recommend using the same headings and body fonts as your site but we will adjust the sizing to improve the message hierarchy in most cases. Find out more about how you can use fonts here.

Make sharing simple

The sharing screen is where customers will be able to use their preferred method of sharing in order to refer. To make this process of sharing as simple as possible we recommend the following:

• Simplify and declutter as much as possible
• Ensure the customer understands they have different options
• Difference in design for active and inactive tabs

Key Functionality

We are always looking at how to improve conversion in the customer journey. In this section we look at features that have been proven to improve performance.

Personalised share image

Personalising the sharing image allows you to put dynamic copy on the image that referrers will share. This is the image & copy that referee or friend will receive on their sharing channel (for example Facebook or WhatsApp etc).

We have seen as high as 17% increase in purchase rate and 14% increase in overall referral conversion. Find out how to customise the share image and copy here.

Native share

Native share is a brand new share method. It makes sharing easier by allowing referrers to share using any app on their mobile, including Instagram. It makes it easier for your customers to share on mobile.

We have seen it deliver anywhere from a 5% - 15% increase in share rate and overall conversion. Find out how to set this up here.

Social proof

Social proof displays the number of rewards given out in the previous calendar month. It appears on several of the referee pages*.

When tested, social proof for the referee has driven between a 10 - 20% increase in purchase rate. Find out how to set this up here.

Making an AB test request

We recommend when adopting new functionality that you A/B test against your current offer so you can see the effectiveness via conversion data. Please use the request form here.

Imagery

One of the most impactful elements on your main referral screens is the imagery due to its size on desktop and hierarchical order on mobile. These can be made more impactful via the content within them which we will talk you through below.

You can find out about image dimensions and how to manage your imagery here.

Landscape vs portrait

There is a range of touchpoints with different sizes and one image may not fit all.

Depending on your brands offer, you may want to focus on a product or particular section of an image. A portrait image may cut of the focus area on mobile because there’s not enough space to scale it down and fit the focus area in.

As shown in the examples, the portrait image doesn't have enough clear space for the panel on the Full width asset and also cuts off the image on mobile. Where possible, please provide/use an image in a size that covers landscape and portrait or a range of images that can be used where appropriate.

Imagery themes

Simple

The referral journey has limited space with lots of content at every stage of the journey. Complex images can cause potential design problems and so sometimes simple is best.

• Solid colour background works best as it’s easy to overlay text with contrast
• Identify plenty of clear space in a good position for each screen
• Close-up and zoom in

Product focussed

Showing the customer what they can potentially spend their reward on will help progress their decision making so show off the product.

• Put the product in focus
• Make it look desirable
• Consider a close up or detail view
• Don’t cover/overlap with other UI elements

Social

Referral is a social activity, so help people think about their friends. Look for images that hint at doing things together and friendship. Some examples are:

• A photo of two models together
• Two cups of coffee
• Two pairs of shoes side by side

Emotional 

Make people feel something positive when they look at the visual. Inspire positive emotions, like amazement, awe, intrigue, amusement, determination. People’s facial expressions help bring emotions to design, so look for models that express something:

• Smile kindly
• Laugh
• Looking down the lens

Illustrated

You don't need photos for a well-designed referral journey. If illustrations are part of your brand language then you can integrate them on your designs. When using minimal imagery, typography plays a very important role; ensure the fonts have a strong presence.

Graphics Additional information 

Graphics can add an extra layer of incentive via reassurance or social proof. Some of the ways you can use graphics are as follows:

• Show a positive review
• Add in the potential gift cards they can have
• Insert branded elements for coherence
• illustrated examples of the offer

Unfortunately we are unable to create, add or resize graphics on artwork.

Touchpoints

There are several touchpoints where your customers will come across your offer and each have their own levels of customisation.

Referrer and Referee screens

These are the main screens where offers, sign ups and rewarding take place. Choose between a half panel or full width design for the desktop screens.

Half Panel

This is where the image takes up 50% of the referral screens. A portrait image is best for this.

Full Width

This is where the text sits on top of the image and to one side – in this case a landscape image is best but the focus of the image must be to one side.

Information Notice (Privacy Notice)

The purpose of an information notice is to make consumers aware of how their data is being used by an organisation. This is a key privacy law requirement across the UK and European territories but it is also increasingly becoming a requirement in other territories such as the US.

This information notice provides a link to our privacy policy and tells consumers how we use their data acting as your data processor.

The way we have implemented the order of information is deliberate: so the customer is aware of what they are agreeing to before clicking the button - this is our interpretation under GDPR. You should speak with your own legal team if you have any questions about this privacy notice.

Iframe

The container all Mention Me’s content sits in is called the iframe. This is a fixed size based on desktop browsing and differs slightly between the Referrer and Referee screens. The mobile iframe is responsive across all compatible devices.

Mobile

We keep the mobile image short in height to increase the likelihood on the content appearing above the fold on all mobile devices - This is key for a good user experience as no dwell time will be lost scrolling.

Corner Peel

This will be located in the corner of your website and is used to trigger the referral pop-up.

Flexibility

The default structure of the corner peel contains the optimal message hierarchy to increase conversion. For high contrast, a block coloured background is recommended as it will make the cornel peel standout against the page.

Position

We understand there are many tools used in e-commerce and one way we can compliment your page is enabling the corner peel to be positioned anywhere on the screen. This will alleviate any potential overlap of tools or marketing prompts used by other tools.

Size

You can also change the size of your corner peel to better suit your needs. This can be to improve prominence on the page or to allow for a more branded look and feel via a bigger canvas.

Dashboard

The dashboard allows you to share your referral, track successful referrals and track the rewards you’ve earned. It's styled in a carded format and so you can easily match your site stylings using our theme editor.

Email

We send numerous emails at key stages of the customer journey in order to maximise the potential of both the referrer and referee journeys. The emails follow a simple but effective format to address what the customer needs to do at that point in their journey.

Depending on your journey you can have different images per email or choose to have none at all. We use a design that is compatible with most email clients but despite the emails being limited in design, we achieve great performance due to the nature of the content. You can find out more about our email client support in this article here.

Share by Email and Forwarded Email

The Share by and Forwarded emails have been created to mimic a message sent on a customers native device. In order to achieve this, these emails are in a plain text format which means they can’t be styled.