Stage nº4: Learning from Our Users

So… guess you are wondering what happened with our prototype. Two words: BIG CHANGES. But first things first, let us tell you what was Sprint 4 all about. The main goal during the last month was to understand how real users would interact with our mobile website and also to make changes based on the results. But how could we accomplish this? Usability tests.

Let’s start from the beginning…

Part One | More Brainstorming

The first week of this sprint, our team needed some inspiration so we decided to have a creative brainstorming session all together. Initially, we used a series of method cards of the Design Methods Toolkit from the MediaLAB Amsterdam to get some necessary insights for our redesign and usability processes. These were the cards we picked: Written scenarioNavigation mapCustomer experienceEmotional journeyWireframesClickable PrototypeThrough other eyesHeuristic evaluationThink out loud.

In this way, we could gain a more focused understanding or vision about defining goals, knowing context, knowing the user, framing insights, ideation, prototyping and testing.

Later on, we also decided to meet with De Persgroep team at their headquarters to discuss some of our fresh ideas. After an inspiring brainstorming session with them, our team returned with a more concrete focus on the ideas we wanted to implement. Basically, we came up with a brand new set of features that aimed to increase the engagement and, consequently, strengthen the relationship between newspapers and millennial readers.

How? By allowing users, for example, to ‘Take a Tour‘; this feature would guide first-time readers through the different sections of the website. Another feature, the ‘Personalized News Update‘ would let users choose ‘what, when and where’ to receive notifications about news updates. Also, we created a feature called ‘Your Year in News‘ that would offer readers a personalized summary and statistics about their news reading habits. In addition, a series of ‘Interaction Messages‘ placed within the article page would aim to attract users’ attention and shape their behavior; for example, a sign saying ‘You have read 5 articles from us! Explore for other interesting stories’ or ‘Log in to view Your Year in News’.

Along with these features, a variety of design adjustments were done and we started programming the structure of our prototype to make it more real and interactive for users.

Part Two | Usability Lab

The clock was ticking. It took us three days of ongoing redesign and coding but luckily we made it on time for our appointment at HvA’s Usability Lab, which is located just in front of our office.

Our main intention was to test, firstly, the possible scenarios of a customer’s journey, shaped by factors such as the availability of each user in terms of time (free-time/short-break) and place (at home/at work/on public transport), and the type of user (first-time reader/usual reader). Secondly, the features discussed during the brainstorming sessions: ‘Take a Tour’, ‘Personalized News Update’, ‘Your Year in News’, ‘Interaction Messages’, ‘Poll’, ‘Listen to the Article/Briefing of the Day’. And last—but not least—the general structure, design aspects and user interface of the prototype.

For the user testing plan, we created four tasks with different scenarios. Our target audience? Millennials, of course.

(Scenario 1: first-time reader/free-time/at home)
1st Task: The tester had to react to the initial message of  ‘Take a Tour’ and navigate the sections of the prototype, find related content, comments, other articles and so on.

(Scenario 2: usual reader/free-time/waiting for an appointment)
2nd Task: The tester had to navigate and see the  ‘Interaction Message’ that would take him/her to the Explore section.
3rd Task: The tester had to find a way to receive a newsletter or news updates by using the feature ‘Personalized News Update’.
4th Task: The tester had to access his/her Personal Explore page to find the feature ‘Your Year in News’, and understand how this section works.

Click here if you want to have a look at how our prototype and the new features look like.

Part Three | Bittersweet Insights

Real-time feedback from real users is certainly something valuable. It definitely helped us, opening our eyes to recognize obvious—and not so obvious—mistakes, but also to dispel our doubts towards certain features or design choices that, in the end, proved successful.

So what challenges did we encounter?

First of all, some testers had troubles to fully understand the meaning of certain icons, more specifically the similarity of the ‘Explore’ and ‘Main Article’ button confused some of them. A possible solution would be to reconsider the icons, replace them with text or even add headings for each section.

We also got some interesting comments in relation to the ‘Personalized News Update’ feature, which made us reconsider giving a more clear explanation of its function to avoid misunderstandings. Plus, participants wanted to have the option to add more topics or tags under the ‘What’ section. Besides this, another element that needs to be improved is the ‘Poll’ feature, placing its results on the main article page as well to avoid confusing readers.

User testing was also helpful to realize that the ‘Related Articles’ must be positioned right underneath the main article, as it was the first place our participants went to search for related content. Moreover, the ‘Interaction Messages’ will need a complete redesign if we intend to trigger users’ reaction or at least attract their attention.

What else needs improvement? Users need to be able to make an easy distinction between the ‘Public’ and ‘Personal Explore’ sections, apart from clearly understanding the visual links between them. Furthermore, explanatory elements need to be included within the ‘Personal Explore’ to state in a clear manner the possibility users have to fully customize this section.

Prototype - Usability Testing

 Positive observations…

Surprisingly, participants instantly understood the swiping system we created for text and images. Also, not only they showed a very optimistic attitude towards the new features discussed earlier, but also to the ‘Trending Voices’ and ‘Listen to the Article/Briefing of the Day’ button. Luckily, they were all familiar with most of the icons we’ve implemented, and we could confirm the popularity of the ‘Discussion’ section: all testers wanted to check the comments to find extra information related to the article or simply to know other people’s opinions on the topic. The innovative ‘Explore’ section was found visually compelling and very attractive in terms of content by most users.

Now that we’ve learned from our users, we can start working on the necessary improvements to update our prototype. However, we will certainly need an extra session of usability testing to evaluate new possible outcomes and make—hopefully—the final adjustments. One thing is for sure: what sometimes can be obvious to the designer, may not be so obvious to the user.