A clear, effective, and value focused website for Migrateful
MIGRATEFUL / 2020
Migrateful run cookery classes led by refugees, asylum seekers and migrants from around the world. Their mission is to empower and celebrate these chefs on their journey to employment and independence. Since launching the redesigned website, key conversion rates and metrics have more than doubled.
Having grown haphazardly over time, Migrateful's website was difficult to navigate, text heavy, and not at all user friendly. Migrateful were growing and receiving acclaim from mainstream media, but their site was beginning to get in the way of user and business needs. It wasn’t doing justice to their product or mission.
To design and build a website that’s user friendly, value focused, and that presents Migrateful in a clear and effective way. The success of this redesign will be judged on how it helps Migrateful as a business.
Role: Lead UX/UI design / Wordpress development
Team: Migrateful founder and team
Timeframe: 4 months (part time freelance)
Users: Socially driven foodies
Through user interviews, analytics, and social media analysis, I identified Migrateful's users and how they were using the site. Their core users are young, ethically minded food lovers, who are looking to support refugees, engage with like minded people, and cook and eat delicious food. There are also a number of other potential users:
Employee looking for team bonding activity
Organiser looking to book a group/party activity
Social worker looking to refer a client
Usability and analytics
Usability testing gave me qualitative data on what users found difficult, why it was hard, and what they wanted to achieve. Analytics provided quantitative data on how pages were being used and which were difficult to find or under utilised. These insights, plus Migrateful's business needs, helped define the UX strategy that would be used to guide design decisions:
Simplify the site structure
Reduce text and use images and graphics where possible
Place profit generating products and interactions in key visual and UX positions
Communicate the social value with better copy
Communicate the beautiful food with better images
Communicate the communal experience with better content
A successful redesign needs to translate into business outcomes. Before starting the design, I defined the metrics I'll be measuring and looking to improve:
Percentage of users booking team & group classes (conversion rate)
Percentage of user buying gift vouchers (conversion rate)
User traffic to key strategic pages that communicate Migrateful's value
Note: Standard classes were already selling out, so wouldn't be an effective metric
Prototyping and testing
Through wireframing and prototyping I tested how to improve the site's usability. I ran usability tests where I asked participants to complete tasks that would be fundamental to the website, and compared the effectiveness and efficiency to Migrateful's current site. I tested scenarios such as 'Find and book a class of your choice in London', and 'Find the price and locations for a private group class of 10 people'.
Many of Migrateful’s core offerings and potentially profit driving interactions were hard to find, in a mass of text, or buried in the site structure. I prioritised these by:
Defining the key products and pages and moving them to the top menu
Using clear, obvious buttons and patterns
Emphasising these products by giving them more space, more visual impact, and more prominent spaces throughout the site.
Metric: Gift voucher conversion rate
Original site: 1.20%
Redesign: 2.46% (+105%)
Optimised and improved content
By understanding what it was users were trying to achieve, I could use copy, images and hierarchy to communicate more effectively. User needs were translated into restructured content and improved information. For example, if an employee is looking for a team building class for their company, there are certain things they want to know - Will it be fun? Where will it be? How many people? Can they convince their boss to sign off on it...
Metric: Team & group class conversion rate
Original site: 0.18%
Redesign: 0.41% (+128%)
Copywriting that communicates value
Migrateful has two strong value drivers - delicious food and supporting great people. However, the original site neglected foodies, and time and time again in my research they asked for more food pictures and info on the cookery. By bringing this in, and by continuing to emphasise the chefs individual stories and the way Migrateful classes can benefit them, we communicated both values.
Metric: Average time spent on the ‘Meet the chefs’ page
Original site: 00:36 (with only 2.3% of users viewing each chefs story)
Redesign: 2:12 (+267%)
Clear and simplified information architecture
Having evolved spontaneously and haphazardly over time, the Migrateful site structure had become incredibly complicated and unclear. The menu structure hid certain pages, and the hierarchy and terminology used often didn’t make sense to the user.
For example, the ‘About’ section was spread over 7 text heavy pages accessed through a dropdown. These were important pages that highlighted the ethos and impact Migrateful have, but people weren’t visiting them. I dramatically reduced and simplified the site structure to make it easier to navigate, understand and access.
Metric: Users visiting the ‘About’ page / ‘Mission’ page / ‘Impact’ page
Original site: 8% / 7.1% / 2.9%
Redesign: 10.6% (For combined 'About', 'Mission' and 'Impact' page)
Better visual communication
Perhaps the most common usability issue that came up in research was just how much text there was. The site was incredibly word heavy, and users weren’t reading it. This meant they weren’t getting key information or finding what they are looking for, which would end up having an impact on sales. A big part of this project was just significantly reducing the amount of copy, and introducing much more visual elements that could be used to communicate.
Metric: Metric: Word count on the ‘About’ page
Original site: 819
Redesign: 387 (53% less)