Website redesign

Media For All – Raising Awareness

Tools Used

Brand Name
Brand Name

Details

Compay Name: Media For All
Date: Sept/Oct 2021
Website: https://www.mediaforall.org.uk/

Project Overview

The Media For All (MEFA) website needed to be refreshed, mobile ready, SEO ready and connected to the membership platform.

– The current website needed to be redesigned

– Outlined design structure which was needed

– The purpose of the website is to provide a platform/community where black, asian and other ethnic minorities can access mentors and advisors 

Deliverables

– Redesigned website to increase subscriptions

– Improve UI to increase sales on the website

Problems and Goals

Website design was outdated

The competition had a better and consistent UI

Increase membership sign ups

Solution

Challenges

Site redesign to increase membership sign ups

Challenges

Align design to be closer to the competition

Challenges

Planning and priority of features

Limited budget and time for research and user testing

Website Changes

Before the changes, the main focus from the client was an uplift in the UI. With a new membership launching, they wanted the site to focus on getting users from the site to sign up, having clear CTA’s and highlighting what MEFA stands for. The client wanted to update the website more aligned with their branding and colour schemes, the current website didn’t have a similar visual collection or using the colour scheme on the site.

Competition & Research

To focus on what needed to change, I began the customer research and research on the competition. Working with the client, I started the competitor research by asking about who they consider a competitor in their market and also their style inspirations. The client identified the following organisations as competitors: Black2Business, 1000 Black Interns and London Chamber. 

They also identified style designs which they felt would be a suitable design layout and structure for their site.

With this information give, I began looking at these different websites to see what they were doing successfully, what they did well and how these features could be reflected on the MEFA website.

Designs The Clients Liked

  • They all had a similar style of the sites being clear with the information, spacious and elements of colour
  • Content is easy to digest and have CTAs if the user wanted to learn more
  • The client didn’t want the site to be overwhelming but had enough information to guide, teach and increase sign ups to MEFA

Wireframing

The new focus on the website is a flowing layout, clear information and aligning the site closer to the MEFA branding. The styling was to align the site more similar to the competitor websites (Jakob’s Law) and more of a focus on driving signups. 

There were a few different design choices as the client had to agree with the stakeholders on the direction they wanted the site to go. Wireframing helped shape the organisation of the site and guide the stakeholders to what the structure of the site should look like.

There were multiple only working sessions and reviews (I unfortunately didn’t screen record) to establish and critique the designs to get to the result the client required.

Shop Page
Homepage option 2
Homepage
Home page (cont)
Role Models Profile Page

High-Fidelity Designs

The design layouts designed before the final design was agreed

The Design

After the wireframing and design reviews with the clients I was able to focus on the design for the website. 

List of changes:

  • Improve the UI
  • Organise information for audience
  • Focus on sign ups for the membership
  • Tell the MEFA story

Pulling Colors From Existing Brand & Identity

[
Prussian Blue

#0B2E5A

[
Byzantium

#6e2b5c

[
White

#ffffff

Results

Final Result

After a few rounds of design the end result was finally settled on. There was a mixture of colours to act as an accent for the site, but the overall UI was set on a white background to keep things clear and decrease the chance of overwhelming and adding clutter to the website.

 

The menus were updated to help navigate the users across the site and there were multiple CTAs which directed users to sign up as a member to MEFA.

You can view the live site (and become a member) here: https://www.mediaforall.org.uk/

More Case Studies