Building the Draw My Life website, showcasing our work with field workers and refugee children.
Draw My Life
The Draw My Life website is a showcase of our Draw My Life image collection tool for field workers. Draw My Life collects drawings from refugee children in European camps. We work with art therapists and volunteers using art therapy sessions to collect data on the drawings to visualise children's mental health. We aim to use this data to aid activists to lobby Governments and councils to provide mental health services for refugees.
I lead the UX research on the Draw My Life website project, from research, to wireframes, and as a hobbyist developer I build the site too.
To kick off the project I ran a design day for the team, ensuring we were all on the same page. I created a schedule to cover important team issues first, like our elevator pitch to ensure consistent communication with charities and organisations. Secondly, I ran an interactive brainstorm for branding, to understand what the team wanted Draw My Life to mean and look like. I also lead the UX tasks, for the Draw My Life data tool and the website, involving user journeys, empathy maps, personas and sketches.
Taking the user journey information from the design day, I created a site map of the Draw My Life website. I laid out all the pages needed, each with the content neeed per page and how the pages linked together and where. From this, I linked the sections which would link to other pages on the site, to create a network of user journeys across the website and to external websites.
Using Axure, I created wireframes for each of the pages. Using each bullet point for the page on the site map, I created separate sections, ensuring the flow and story of the page still made sense. I wanted to keep each section as independent as possible, to allow the team to rearrange the flow of the page and the order of the Call To Actions, depending on project KPIs, now and in the future. This is a similar design solution I used for A World At School
Whilst in the wireframing section, I have asked my Draw My Life team, my team at work and the amazing Designer Hangout community for feedback. I prefer to research as early as possible with anyone who has the time, to ensure that anyone can understand what the website is about and is comfortable in using the site.
To showcase Draw My Life, I wanted to split down what to showcase in different pages. I separated the Project, Team and Volunteer pages, ensuring that when shared directly, users would still be able to understand the information at any given time.
To capture the team I photographed matching professional photographs on the Design Day.
From experience of working on volunteer projects, I have learnt that the more independent a task or story is, the more volunteers are able to pick up tasks with the odd 10 minutes here and there. To make it as easy as possible for volunteers, I wrote out most of the stories with the wireframes of every page and each section.
The project is still in construction, however all of our code is open source, which is here on Github. To kick off the project, I worked with our tech lead to build the infrastructure of the website. The tech stack is using Jekyll with React JS, combining frameworks the team know and are comfortable with as a collective. Currently I am learning React JS for the project to build more of the website.