PUREPROFILE
BRAND NEW REFER-A-FRIEND
I joined Pureprofile as Lead UX Designer. Working very closely with the Product team I would work on the experience strategy: what we were doing, why we were doing it, whom we're doing it for and how we would do it.
Heading up my design team while also forming and leading a larger design tribe across other areas of the business everything that launched for B2B and B2C would need my attention.
​
My holistic approach is tricky to frame in a portfolio piece so I have chosen a recent important B2C initiative as a case study that hopefully will convey my approach to experience design and problem-solving.
To comply with my non-disclosure agreement, I have omitted and obfuscated confidential information in these case studies. The information in this case study is my own and does not necessarily reflect the views of Pureprofile.
Bring-a-buddy
After close collaboration with the Operations and Panel teams, we decided that our Refer-a-Friend initiative needed updating and reconfiguring.​
​
Refer-a-Friend had been running for some time now but numbers were down so it was clear that we needed to breathe new life into it and work out why people are not engaging as much as we would expect. A perfect problem to solve.
Understand the problem
One of the first things I try to do is understand the problem we are trying to solve. There are a few techniques to do this but all involve good old fashioned research and asking questions.
You need to research who your users are. Observe them either trying to solve the problem or interacting with the product. These observations should happen in lab conditions and also in the users day-to-day life if possible. What devices are people to use to access your product (people behave very differently on their phone compared to their laptop)? What time are they going to access your product (on the train, at home, at work etc)?
Refer-a-Friend
​
What type of product are we designing?
An embedded function of an existing B2C product considered very important for panel acquisition and engagement
Who are the main users?
Panel members
Where is the product being used?
Within the web app and native iOS and Android apps the function could be used in a multi-screen environment at any time
Why do they need it to exist?
To earn more money through our existing services - the more friends they refer the more money they earn
How will it be used?
Embedded within the current available apps - current via email or personalised shareable link
Conduct interviews and surveys, whatever is necessary to build a robust picture of your potential users.
​
I use many techniques to define the problem including empathy maps, journeys, workshops, paper cut-outs and even role playing!
Discovery
Our current Refer-a-Friend initiative wasn't performing as we wanted it to. Through research I found that it was actually tricky to discover and not clear what the benefits were for referring friends.
​
Within the workgroup we decided to increase the referral rate to $20 per referral and allow unlimited referrals.
I was keen to explore variation within the feed.
It was currently being used exclusively for surveys.
Could there be a way to incorporate other communications in there?
There are back-end systems that must be considered as well. There is a CMS that defines the content within our panel members feed. And we cover multiple countries and currencies so we need to make sure we allow for that.
User flow
There was a lot to be considered and captured. Outside the primary flow what happens if someone has already been invited? What happens if the person is flagged by fraud? Then unflagged? When does the credit get paid? What happens to existing referrals? All of these edge cases need to be considered and fully understood.
Wireframes
I tend to combine my early wireframes with my projected flow of the product. They inform a rough guide for the layout. They should be clear and simple, no visual design or aesthetics here. They can serve as a good conduit with the stakeholders, signing off on placement/flow (broad feedback) etc rather than getting bogged down in font choice (narrow feedback) etc. Include lots of comments and annotations on them.
Our current experience can be a little 'dry' so I was keen to bring some humour and personality to the new Refer-a-friend. You may recognise the Twitter Fail Whale above. I wanted to do something similar with our new experience and really harness the 'empty state' to make it easy and encourage people to start referring their friends.
Innovation rules
I was keen to create and include a new method of communication for the new Refer-a-Friend. All our communications with panel members to date have been through email. This can be problematic, it lacks immediacy and urgency and you also may lose context.
​
I wanted a way to communicate the new Refer-a-Friend directly in the feed. Not only that though, but I also wanted it to feel personal and interactive. I also wanted to give the ability to use the method for other communications in the future like promotions and other important messages.
​
As I wanted these communication blades to behave in a timely manner and respond to the interaction I had to define the rules. When does the blade appear? What happens when I click it? What happens if I don't? What happens if I dismiss it? You need to be aware of all these implications to design effectively.
Visual design
I wanted the new Refer-a-Friend to have a personality, to have some levity, it should be engaging and encourage people to click and explore. I formed a Design tribe for occasions such as this. I needed our brilliant and creative brains all working together.
We had a pug illustration that we'd used a while ago for our Golden Rules communication. Although this pug was clipart so we didn't 'own' him and he could pop up anywhere. I discussed with marketing and we agreed that I could do whatever I wanted to with the pug. So, I named him Pugley and he became our unofficial mascot for our new Refer-a-Friend initiative.
I asked my UI designer to come up with some engaging treatments for the blade using the old-style Pugley.
​
The colour gradients shown were a beautiful touch and worked really well in contrast to our rather boring existing style.
​
The visuals also include my vision for the blades to feel personal and encourage more interaction.
We started iterating through different kinds of style for Pugley. I wanted him to feel fun and engaging but also a style wholly original and owned by us.
I was really pleased with where we got to. I liked the textured look of Pugley fur and almost the 'cutout' feel was interesting and felt fresh.
​
I also believed that this could be a style we roll out through other initiatives and potentially become our new global style.
​
I wanted to rebrand this initiative as well rather than keep calling it Refer-a-Friend.
​
We like alliteration here!
-
Pull-a-Pal
-
Collect-a-Cohort
-
Allure-an-Ally
-
Match-a-Mate
-
Select-a-Sidekick
​
But the winner was
Bring-a-Buddy!!
​
The end result was fantastic. We had compelling blades weaved into our feed that invited people to refer friends. There is an empty state that encourages people to get involved and clear communication as to who you have invited, how much they have earned you and when the earning period expires.
​
We beta released to a limited number of panel members and the uptake was incredible. More people than ever referred friends and generally, the friends they referred were high quality and remain engaged for longer than previously.
And now Pugley is popping up in other places!
​
We are currently working on expanding the style across other projects and initiatives which is great!
It is important to give credit where it is due as well!
Other wins…
At Pureprofile I worked on and produced a huge amount of initiatives and projects. I have gone into depth on two of those in this portfolio but I want to collect some other wins together as well.
Account holder onboarding
Although most of my work was involved with our B2B product suite I was getting more involved with our B2C offerings as well including Bring-a-Buddy outlined above.
​
I took some time to define the current account holder user onboarding flow. I uncovered a few pain points and areas where people drop-off.
Existing onboarding flow
Proposed onboarding flow
It was a very subtle change but essentially I changed the flow to having to validate your email BEFORE you could continue and complete surveys.
​
This seemingly simple change resulted in a huge difference to our onboarding numbers.
