Journey Design

Documentation Index

Fetch the complete documentation index at: https://docs.mention-me.com/llms.txt

Use this file to discover all available pages before exploring further.

​

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 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 rules are some of the best practices we recommend in order to maximise your offer’s 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. 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:

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

​

Fonts

Fonts are a key element of each brand’s identity and your 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 as simple as possible:

• 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. These features 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 and copy that the referee or friend will receive on their sharing channel (for example Facebook or WhatsApp). 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 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. 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 A/B 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. 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 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/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. Complex images can cause potential design problems, 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.

• 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:

• 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:

• 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:

• 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, each with 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 — The image takes up 50% of the referral screens. A portrait image is best for this. Full Width — The text sits on top of the image and to one side. 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. This is a key privacy law requirement across the UK and European territories. 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. 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 of 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.

​

Position

The corner peel can be positioned anywhere on the screen. This will alleviate any potential overlap of tools or marketing prompts used by other tools.

​

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 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. 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. You can find out more about our email client support here.

​

Share by Email and Forwarded Email

The Share by and Forwarded emails have been created to mimic a message sent on a customer’s native device. These emails are in a plain text format which means they can’t be styled.