Client

A World At School

What I did

Experience Designer

Skills used

  • Visual design
  • Workshop
  • UX Design
  • User research
  • Usability testing

About the project

As a senior UX consultant on a 5 week project, I ran our inception, designed the high fidelity mockups and created the stories for our 4 person team.

Objectives

  • Increase user activity on the website, specifically around the #UpForSchool campaign
  • Improve use of space on the site for content placement
  • Refresh and update the website's overall look and feel

Results

Successes

From AB testing we measured the 300% increase in petition signatures with my design.

My designs received great feedback from Sarah Brown, Gordon Brown's wife who is the head of A World At School.

Clients now have new flexibility of clearly defined content sections, in order to move them around with having to worry about layout.

I was able to experiment with my screen-reader first design.

After the project had ended, my team were invited to be featured in an article supporting the #UpForSchool campaign. In addition, my clients contacted me again after I had left ThoughtWorks to discuss how I had developed the inception process, so that they could run a similar workshop before they attended a UN meeting.

Leading on from the inception, I turned this into my first UX Workshop for CodeFirst:Girls. After feedback, there are now future plans for this to be ran in London again.

Lessons Learned

As this was my first project where I was explicitly the only UX designer on my team, I wish I had had the communication skills and the time to sit with the developers to really offer an in-depth explanation of my role. It often felt lonely in that we didn't have the time to knowledge share as much as possible, which often lead to misunderstandings.

Inception

I ran a full day workshop with both clients to tract information about the business, their domain and their users. Through an interactive session of creating personas, empathy maps and user journeys, we were able to grasp the clientele and their user base.

Personas and Empathy Mappings

As part of the inception, we needed to extract as much information as possible about their business. By engaging the clients in creating multiple personas for the website we knew exactly who we were targeting and who our priority was.

Top half of the empathy mapping, with sticky notes and a template demonstrating the user's emotions through their experience

User Journeys

After gaining insight of the business, I then gathered feedback of the current issues our clients knew their users were having. Focusing on the highest priority of pages we drew out a timeline of each user going through each step of the journey. This highlighted the journeys our clients wanted to guide our users to have. This really highlighted where to link pages and the call to actions we needed on each page.

Wireframes, Sketches and Mockups

For the initial prototypes, we used sticky notes in order to define sections. This allowed to move the notes around and repriorise the content. Using the required page content and the user journeys I could then translate this into a high-fidelity mock-up. Each sticky note then translated into the zebra look and feel for flexibility that the client then understood.

After sketching and wireframing with sticky notes, I then used these to create hi-fi mockups in PhotoShop. I used the zebra look and feel, allowing the clients at a future date to re-arrange their content to suit their needs.

Empathetic Design

As part of the domain, it was clear that empathetic design was to play a huge part in the design. I researched how to design for emotion, particularly using strong imagery. Competitive analysis of how charities such as WWF and Charity Water had used imagery also played a huge part in how I designed around the images I could use.

Screenshot of the updated up for school campaigning page

Unfortunately this is a screenshot of the website using the website time machine just after our project deadline. Not all of the styling has been saved.

A/B Testing

As the UpForSchool campaign was the core part of the business we did A/B testing on the peition page to ensure we were improving user engagement.

The tool we used was Optimisely, and in one afternoon we saw an increase in user engagement in my design by over 300%!

Screen-Reader First

From my love of accessibility I came up with a technique built on the idea of experimenting with mental models. The idea being that if anyone can keep track of the page as you read it out to them (and they can't see any context), they can build up a strong mental model and understand the page. The aim of this technique is to highlight the story of the page. As I read out the mockup, it was clear where content came across as complicated and showed earlier on where users were struggling to keep track of the page.

User Interviews

In the inception we highlighted different types of personas, including teachers. Luckily I knew a few teacher trainees who I asked to question. Over the phone I asked questions on how they were motivated in campaigning, what it would take for them to dedicate classes to the A World At School cause, and how we could engage teachers in the cause.

In addition to answering our own questions, it also became clear the issues we were facing. Main issues highlighted were around how to present this whole campaign as not just another petition.

User Testing

The majority of my user testing were with people around the office. I took every opportunity to grab time with people who had a spare 20 minutes to offer suggestions on the mockups and do set tasks of finding certain pages.