Website redesign
Tools Used
Details
Compay Name: Media For All
Date: Sept/Oct 2021
Website: https://www.mediaforall.org.uk/
Project Overview
– 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
Solution
Challenges
Challenges
Challenges
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
Fri-Yay.io
MidiaDub
Brown Owl Creative
Retrospect Studios
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
Version 1
Version 1
Version 2
Version 2
Version 2
Version 2
Version 3
Version 3
Version 3
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
