The Voices Project
CLIENT
The Voices Project
PROJECT TOOLS
Figma, Wix
BRIEF
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.
Research
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.
.png)
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.
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.
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.
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.
.png)