Client

Draw My Life

What I did

UX researcher

Skills used

  • User research
  • UX Design
  • Wireframing
  • Sketching
  • Usability testing

About the project

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.

Objectives

  • Showcase the project and team
  • Offer a preview and suggestions of our data set
  • Provide a friendly link to downloading the data

Design Day

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.

Elizabeth facilitating the branding brainstorm, putting up sticky notes on the board
Photograph of me facilitating the branding brainstorm, putting sticky notes on the wall for the Design Day
Sticky notes from the project and team retro, at the end of the design day
Sticky notes from the team's retrospective, at the end of the Design day, based on everything the team were doing

User Journeys and Site Map

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.

Site map of the Draw My Life website, with points of content for each page
Site Map of the Draw My Life website, showing each page, content per page in bullet points and links between pages

Wireframes

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.

Part of the wireframes for the mobile home page
Mobile wire frames of the homepage
Wireframes for the desktop version of the volunteer page
Wireframes of the desktop volunteer page

Showcasing the Team

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.

Building the project

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.

Future Plans

  • Validate the wireframes and finished product to ensure they are user-friendly and clear.
  • Use analytics like eye tracking, heat maps and gaze maps to understand where people are looking for information.
  • Run AB tests on the Volunteer Page and Partner with us Page, to improve conversaion of volunteering with Draw My Life.
  • My long term plan is to ensure the website is internationalised, ensuring the colour, text, and imagery are as neutral as possible for our European audience.