Analysing UX to give Code for Life a makeover
Now the Code for Life initiative has reached the 100,000 registered users landmark and our bigger and better website is live, we thought we would take a look at how the team approached user research and the role this has played in our recent updates.
Why bother with UX?
A UI (user interface) designer decides on how best to present a site in order for it to be aesthetically pleasing. A UX (user experience) designer looks at the hierarchy of the information and navigation to ensure a pleasant user experience. Having the skills to fulfil both these roles would enable you to create a fairly successful site in most cases. However, when you are targeting a particular audience, in the case of Code For Life — teachers and students, it is essential to gain insight into how they use the site, the challenges they’ve come across, and the features they like and dislike.
It’s also important to cast a wide net when gathering user data for such a far reaching initiative, as individual users can have very different goals in mind when visiting www.codeforlife.education.
I spoke to James Holland, UX designer for Code for Life, to get an idea of how the team approached user research on the path to the redesign.
How to go about gathering user data
To collate this broad range of data, the team used site-wide analytics and examined the previous few months of data. Using Google’s comprehensive analytics tool they were able to gather data on user trends such as unique and repeat visits to a particular page, exit pages, and drop-offs (where a user doesn’t funnel as expected within the site flow).
Alongside Google Analytics, the team used Mouseflow which allowed them to record user sessions in real time and provided heat maps of activity. These illustrate where users regularly click on a page (white/red hot — frequently clicked, blue — infrequently clicked, nothing — no clicks).
From this feature, certain hiccoughs within the site design became apparent, such as users clicking on the purple text box with the Rapid Router logo, thinking it would lead them to the game, when actually the two were unlinked. This feature was essentially acting as a dead end. Issues like these can lead to early drop-offs, so this just goes to show how invaluable user research is to a successful website.
Mouseflow also provides some other useful features, including a scroll limit visualisation — a superimposed rainbow illustrates when users tend to stop scrolling down a page (the colder it gets the more people have stopped scrolling), and an indicator of mouse movement, which again uses a heat map, very much like the mouse click feature, to visualise the movement trend on the page.
Analytics provide front end developers and UX designers with broad trend data, but a more personal insight from users themselves can be equally, if not more, valuable when deciding on site modifications.
Code for Life is now in the process of developing a massively multiplayer online game for secondary school students, which will incorporate cloud and container technologies. However, for now, the available resources and the first Code for Life game, ‘Rapid Router’, are designed for primary schools. The team therefore decided to ask for primary school teachers’ feedback on the first version of the Code for Life website in order to outline possible improvements. They found the best method for gauging how interested teachers were in taking part was to build up the process in steps.
Initially emails were sent out to registered users and Code for Life novices alike, asking for feedback. Asking repeat and brand new visitors to take part in the process allowed for a mix of responses, because seasoned users are more likely to work around potential issues as their visits will have become routine, whereas a new user is more likely to give an honest and realistic appraisal when visiting the site for the first time.
These emails made it easier to single out those who were keen on giving detailed and honest feedback, and these users were then asked to take part in a short Skype call. From there the team organised longer interviews, which would allow them to focus on in-depth feedback.
One important aspect of the nature of these meetings was to ensure the team’s complete objectivity, and put aside their ideas of how the ideal Code for Life site would look and function. James also highlighted the importance of making sure the interviewees were at ease, so for this reason the meetings took place in the teachers’ classrooms, and while they were structured in such a way that the relevant information could be procured, an effort was made to keep the conversation relaxed and natural.
The majority of feedback from all the various channels, including the one-to-one meet-ups, was overwhelmingly positive. It was useful for the team to gain an insight into each teacher’s individual journey into the profession; some had almost got there by accident while others had always known that teaching was for them. As for coding specifically, some had taken on their role as computing teachers because they were well prepared with the relevant skills, some had been randomly allocated the task, and others had been chosen because they were ‘more technical’, which in some cases just meant they were usually called upon to unjam the photocopier. This really helped the team to appreciate why different teachers were using the site in very different ways. They all gave fantastic feedback on how they use Code for Life, the features they loved, and the elements they still found a challenge.
From the interviews it became clear that the teachers generally fell into three main categories. From this information the team developed teacher personas which were created based on the individuals who had been involved, outlining these three main ‘user types’. Personas can really help keep sight of what your audience want from a product and keep you connected to their needs.
The Basic User — Omya Overloaded
This user usually goes directly to the Rapid Router game without interacting with other elements of the site or using any of the resources. They often haven’t even registered and simply remain on the site as a visitor despite frequent use. They are usually experienced teachers like Omya, who have a lot on their plate and don’t necessarily feel prepared to teach coding. As a result they are often learning with the kids as they go along.
The Experienced User — Terry Technical
Takes advantage of every element of the site including the scoring and teaching resources. Uses the site to its fullest extent. Often from a technical background of some description and therefore better prepared to teach coding. Usually approaches the task with enthusiasm.
The New User — Naomi Noobie
Often newer teachers or trainees who have been deemed the most technical in the school (this frequently translates to being active on social media), who have been somewhat dropped in the deep end and assigned to teach coding. Often enthusiastic and keen to use all elements of the site, but slightly less experienced.
These personas all have different ability levels and backgrounds and therefore have different needs when it comes to the Code for Life site.
A similar but simpler approach was taken when getting feedback from children. Some Ocado Technology employees brought their kids into the office to test the site and the Rapid Router game and give feedback at the same time. Generally speaking this feedback was positive as the main concern was whether the game was fun or not, and less focus was given to the site itself. However it did result in some useful feature ideas such as the ‘solve’ button included in the latest release of the game.
These personas are a worthwhile pursuit; the team can use them throughout the process of redesign to make sure they cover all the needs of their various users when adding and taking away features and changing layout and design.
The combination of site-wide analytics and feedback from individuals offered a comprehensive overview of the pitfalls and successes of the pre-existing Code for Life site. We hope you enjoy the latest release of the bigger and better Code for Life initiative. Watch this space for their new massively multiplayer online extravaganza, where you can explore the depths of space and time, while picking up AI concepts along the way.
