top of page

The Voices Project


The Voices Project


Figma, Wix


The VoicesProject is a community engagement project and educational resource created using oral histories. The project uses oral histories to explore narratives of space, place, identity, migration and empire across Britain, from voices usually unheard from in the curriculum.

The goal of the project is to broaden the range of voices and viewpoints heard in the classroom and to explore geographical themes through an anti-racist and decolonial lens.

I was tasked to create a website where the resources could be accessed by teachers, students and the community. 

thevoicesproject logo


What is the purpose of our website?
  • To inform and engage

  • To describe the VoicesProject in a visually engaging way

  • To host oral histories

  • To share lesson plans with teachers

  • To recruit participants to send in their oral histories

Who is the target audience?
  • Teachers, KS3

  • Community members who got involved and are interested

  • Students - for extracurriculars and homework

At the start of this project I done some research into the users and how this website would make a difference to their work and how I could solve the pain points. 

user story

 Flow Diagram 

To understand how customers find and interact with the service I created a flow diagram. This exercise was an iterative process which I returned to and updated a few times during the design phase. 


The flow starts on the home page, however a few pages are for members only, so I had to ensure my flow covered the additional sign up, login in and log out steps.


Flow Chart

 Low-fidelity wireframes 

I usually start the design process with low fidelity wireframes. This is the way I iterate through many design options quickly.

The main purpose of these sketches was to  visualise the website and help with user flow.  

Sketches are a great and rapid way to decide on the layout without spending too much time on one screen. 

Sketching out the pages ensures that I cover the whole flow and identify if there's any gaps/issues with my flow diagram. 

Once I was happy with all the sketches, I then proceeded to create medium fidelity wireframes using Figma. 

Screenshot 2023-05-13 at 01.38.03.png

 Medium-fidelity Wireframes 

Tools: Figma

Designing the wireframes was a great way to visualise the website and critical during my meetings with the client. We had weekly catch ups to discuss the design, any changes and also to ensure the website covered all requirements. I would then iterate the designs based on feedback. There were some minor changes made by the clients which was easily implemented. 

Screenshot 2022-09-22 at 11.21.14.png

 Final Design 

*Please note that some pages are only available to teachers and students.

When it came to creating the website, I decided to use Wix as it's a great user friendly website builder which could continue to be updated by the client. Wix allowed me to bring the website to life and make adjustments which might have not appeared in the wireframe phase.  

Untitled design (2).png
bottom of page