User Experience Design / Mespo
An innovative and disruptive startup within the fintech space called Mespo (previously Mobillity) got me on board to help get more users onto their platform.
A money guide which uses your data to help you, the service is unique in that it’s completely impartial within a competitive ‘finance and money saving’ market.
I was excited to learn that customers interacted with the product entirely through a Facebook chatbot!
My role was sole UX/UI designer. The rest of the team was made up of CEO, CTO, Data scientist, Operations Manager and 2 in house developers. We were iterating on 2 week sprints. My main deliverables included:
-Management and implementation of new branding.
-Analysis of current and design of improved sign up journey.
-Research which helped shape the business proposition.
-Creation and testing of prototypes in Invision and Chatfuel.
-Screen designs across different devices in Sketch.
-Close work with the development team to implement designs.
-Writing the chat bot copy.
Analysing current sign up flow using technique of affinity mapping- breaking down each and every decision a user makes to sign up
Let’s talk about money
Through talking to people about their habits the first thing was clear – money is hugely emotional and personal topic.
As one user stated:
“No matter how much you have in the bank…it feels like the last part of our lives we’re trying to keep secure and private. “
Talking to users quickly identified our key challenges:
-Fears around security. How can we instil trust and credibility, so that more users feel comfortable entering their online banking passwords?
-Over promising/under performing. Whilst the description of the service was an all round money guide – what we could actually perform right now was a fraction of that.
-Communication and culture. The idea of ‘saving’ money people associate with having less fun. How could we reframe it. How could we succinctly communicate that we saved them money without them having to change their routines/habits?
-Navigation through a linear conversation. How can we avoid repetition of information so users drill down to the information they need quickly?
And designing a conversation?
Conversation map showing different user states. User states helped avoid message repetition
Using Chatfuel to prototype the new bot design was a fast way to test the bot, both remotely and in person. When it came to the improving the experience of a conversational interface, we quickly learnt the importance of
-no jargon. Keep messages short and sweet
-to show, not tell
-clarify the machine versus the human
It being a Facebook chatbot brought a specific design constraints. For example using ‘quick replies’ as a way for users to navigate around topics proved much more intuitive than the hamburger menu with Facebook messenger.
The demo I made below shows the quick replies used as a menu function.
The impact of the new sign up flow: 16% more users went through to the web sign up pages.
I experimented with making a GIF for the beginning of the bot conversation. Usability testing with 18 people showed that whilst some people found it a little distracting, the overall trend was that users were quicker to go to the ‘sign me straight up’ button.
Sometimes only a human will do
The dev team had built a clever back end which allowed a human advisor to jump into multiple conversations swiftly.
This proved to be fun but also confusing to users so we formally introduced our human advisor and developed a ‘Hi Georgy’ functionality.
The Website
Website home screen design
Finding unique on brand imagery for the website proved to be a challenge. I tested the emotional reactions people had to the imagery I had chosen to make sure the images adhered to the brand principles:
witty, playful, human and empowering.
I sourced a photographer and helped art direct the profile photos to keep within the visual language of the site.
It was important that the benefits of using Mespo were understood quickly so the copy was a key component. Working with a dedicated copywriter helped us to streamline effective and fast communication of our ‘why’ message on the website.
Our story, blog screens and Menu design for mobile devices