Understanding Journey Design

​

Styling

We recommend making the iframe feel like part of your website rather than giving it a separate design treatment. This can include buttons, colours, card styling, border radius, and more. You can customise your design theme yourself with the theme editor and see changes in real time, or provide us with the information below and we can edit it for you. If you use Optimise, your journey includes a dynamic Trustpilot integration which we can also style for you. If you’ve already had a demo created for your brand, we’ve already considered your site’s styling. Otherwise, to get all your touchpoints looking on brand with a consistent look and feel, we need the following information:

​

Golden Rules of Referral

These are the best practices we recommend to maximise your offer’s effectiveness when first presented to a customer.

​

Call to Action

This is the button that progresses your customers to the next step and confirms they want the reward. 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
• 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:

• Clear to grasp in 1–2 seconds
• Visually bigger than all other text
• Draws attention to the reward
• Never too long

​

Fonts

Fonts are a key element of each brand’s identity. Your referral design should be completely indistinguishable from your own website. We recommend using the same headings and body fonts as your site, but we will adjust sizing to improve the message hierarchy in most cases. Find out more about custom fonts.

​

Make Sharing Simple

The sharing screen is where customers choose their preferred method of sharing. To make this as simple as possible:

• Simplify and declutter as much as possible
• Ensure customers understand they have different options
• Use a distinct design for active and inactive tabs

​

Key Functionality

These features have been proven to improve performance. We are always looking at how to improve conversion in the customer journey.

​

Personalised Share Image

Personalising the sharing image lets you put dynamic copy on the image that referrers share. This is the image and copy the referee will receive on their sharing channel (for example, Facebook or WhatsApp). We have seen as high as a 17% increase in purchase rate and a 14% increase in overall referral conversion. See how to customise the share image and copy.

​

Native Share

Native share makes sharing easier by allowing referrers to share using any app on their mobile, including Instagram. We have seen it deliver anywhere from a 5%–15% increase in share rate and overall conversion. See how to set up Native Share.

​

Social Proof

Social proof displays the number of rewards given out in the previous calendar month. It appears on several referee pages. When tested, social proof for the referee has driven a 10%–20% increase in purchase rate. See how to set up Social Proof.

​

A/B Testing New Functionality

When adopting new functionality, we recommend A/B testing against your current offer to measure effectiveness via conversion data. To request a test, .

​

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. See image dimensions and how to manage your imagery.

​

Landscape vs. Portrait

There is a range of touchpoints with different sizes and one image may not fit all. Depending on your brand’s offer, you may want to focus on a product or particular section of an image. A portrait image may cut off the focus area on mobile because there’s not enough space to scale it down. Where possible, provide or use an image that covers both landscape and portrait orientations, 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. Complex images can cause design problems, so sometimes simple is best.

• Solid colour backgrounds work best as they make it 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.

• Put the product in focus
• Make it look desirable
• Consider a close-up or detail view
• Don’t cover or 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:

• 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, and determination. People’s facial expressions help bring emotions to design:

• 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, you can integrate them in your designs. When using minimal imagery, typography plays a very important role — ensure the fonts have a strong presence.

​

Graphics and Additional Information

Graphics can add an extra layer of incentive via reassurance or social proof:

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

Mention Me is unable to create, add, or resize graphics on artwork, or create animations or GIFs.

​

Touchpoints

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

​

Referrer and Referee Screens

These are the main screens where offers, sign-ups, and rewarding take place. On desktop, choose between a half panel or full width design. Half Panel — The image takes up 50% of the referral screens. A portrait image works best for this. Full Width — The text sits on top of the image and to one side. A landscape image works 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. This is a key privacy law requirement across the UK and European territories, and is 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 order of information is deliberate: the customer is aware of what they are agreeing to before clicking the button. This is our interpretation of the requirements under GDPR; you should speak with your own legal team if you have any questions about this privacy notice.

​

Newsletter Opt-in Checkbox

A newsletter opt-in checkbox cannot be added to the referrer registration page. This isn’t a legal restriction: it comes down to the page’s template and layout, which don’t have room for an extra element without harming the design and the customer’s experience. The referrer registration page is also shown to existing customers who have already made a purchase. These customers may already have been given the chance to opt into your newsletter during an earlier interaction with your brand. Leaving the checkbox off this page keeps the experience focused, so customers aren’t shown newsletter sign-up messaging more than once.

​

Iframe

The container all Mention Me 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

The mobile image is kept short in height to increase the likelihood of content appearing above the fold on all mobile devices. This is important for user experience, as no dwell time is lost scrolling.

​

Corner Peel

The corner peel sits 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 colour background is recommended.

​

Position

The corner peel can be positioned anywhere on the screen. This helps avoid overlap with other tools or marketing prompts.

​

Size

You can change the size of your corner peel to better suit your needs — 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, so you can easily match your site’s styling using the theme editor.

​

Email

We send emails at key stages of the customer journey to maximise the potential of both the referrer and referee journeys. The emails follow a simple, effective format. The structure is fixed: imagery, sections, and buttons cannot be moved from their default positions. 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. See our email client support.

​

Share by Email and Forwarded Email

The Share by Email and Forwarded emails are designed to mimic a message sent from a customer’s native device. These emails are in plain text format and cannot be styled.