Case Study

Black Valley web page redesign

Role
UX researcher, UI designer
Programs
Figma, Adobe Illustrator,
Google Forms, Google Sheets

Introduction

The client

Black Valley is an organisation that aims to improve diversity in the tech industry by providing black talent with skills training and mentorship through an immersive 8 week programme.

The brief

This project was given to me as part of the programme. I was tasked with investigating how well the “become a mentee” web page was serving its purpose of informing prospective mentees about what to expect from the programme and providing a place to sign up. I then had to use my findings to complete a redesign of the web page.

Research

I used three research methods to find out more about the target user and define the problem.

Web page analysis

I started with a quick analysis of the web-page to get a general understanding of the current content. I also made assumptions about possible pain points, which would either be confirmed or dismissed with further research.

My initial analysis found that:

Survey on past mentees

Next I wanted to find out how well past mentees felt like the current web page represented their experience of the programme, and what - if any - information could be added. To do this, I constructed a survey using Google forms and sent it out to the Black Valley mentee community.

From this survey I found that:

Overall these results suggested that the amount and accuracy of the information was generally good, with minor room for improvement.

User testing on the current website

To further my research I wanted to find out about the user experience surrounding the page in more detail. I wanted insight into real user journeys, and to see how users are engaging with the page content. To do this, I planned and conducted testing on 6 people who fit the target user group. Participants shared their screens with me via Google meet, then their user journey’s were observed after being given the prompt:

“You want to find out more about the Black Valley mentorship programme and maybe sign up”

They were then asked these follow-up questions:

My findings can be summarised into 4 main points:

The page has a good amount of information

All participants got a general understanding of the programme. Most of the additional information they asked for was either on the website/web page but not read, or could be added with small alterations to the current copy.

Users are leaving the page early

The become a mentee button in the nav bar is pretty clear - 4 of 6 participants went straight to the page. However, after landing on the page, half of the participants were quickly driven away by the first CTA they encountered - the “learn more about the programme” button. This meant that they didn’t initially see the remaining page content, and more importantly, the sign-up call to action.

The sign up CTA is hard to find

Whilst trying to sign up, only 2 participants found the sign up button without leaving the page. The other 4 clicked through multiple pages before finding a sign up button, with 3 finding the button on other web pages. This highlighted a confusing user journey and suggested that the page isn’t fully serving its purpose of being a place to sign up.

The page elements are unclear

Participants were unsure about the purpose of the headerless sections. This along with less important elements being emphasised over others lead to valuable information being skipped over, and incorrect assumptions being made.

This user testing further reinforced my website analysis assumptions and survey responses, as well as introducing a few new insights. It was now clear that the main focus for this redesign should be reworking the UI, followed by some copy editing where necessary.

Ideation

After I had finalised my list of changes, I started my ideation process with paper wireframes. I trialled different ways the content could be laid out for easier readability and better visibility while maintaining the necessary visual hierarchy. The information in individual sections was kept the same, but they were slightly reordered based on relativity. There would also now  be an additional sign up CTA at the top of the page. 

I then began the digital prototyping process in Figma, taking into account the existing but limited branding elements (font, colours and rounded shapes). Using colour, columns and an 8dp grid narrowed down the possible UI layouts, and made it easier to see the best way to display the information in cohesive sections.

The prototype was then shown to the target user group and minor amendments were made based on their feedback.

Final design

What I learned - designing for desktop

As this was my first time designing for desktop, I learned a lot about creating layouts, type scales and the sizing of UI elements for desktop screens.

Outcomes

The prototype for the redesign was shown to the previous user testers. Their feedback was positive and included comments on easier readability and an overall nicer to look at UI.
Although this was just a theoretical case study, the founder of Black Valley really liked the prototypes and said they would be using it to inspire the upcoming website redesign.