Sprint 3: Keep Calm and Prototype

One of the most challenging parts of a prototyping process can be letting go of your old ideas or design versions to make space for the new—and better—ones. But how to achieve this? Here’s a hint: brainstorm, sketch, revise, repeat. Today you will find out more about the stages of our prototyping process as well as the reasons behind the design choices. We will also provide some images of the different versions of our prototype and a link to the most recent version in case you would like to play around a little with it.

Insights & Focus

By now you may already know that during the last sprint we have been busy collecting data from millennial news readers through an online survey. These results along with the research insights obtained during the first sprint, served as a kind of guidance for us to have a more clear idea on where to start regarding the design of the new prototype.

For instance, we realized that both the ‘Comment Section’ and the ‘Related/Most Read Articles Section’ were needing some help to not end up being the forgotten or ignored sections at the bottom of news articles. In this way, after analyzing our findings we felt confident about the idea of rethinking and improving these sections, as we believe that they still hold a great potential to trigger readers’ interest and engagement. Moreover, we understood the importance of choosing clean and intuitive layout designs in order to attract more millennials—or at least to not scare them away—, combined with a balanced use of text and multimedia content within article pages.

In addition, it seemed necessary to reconsider in which cases the use of the ‘infinite scroll’ could be more or less effective, as the answers from the survey indicated that this was not a particularly popular feature among readers. Also, we consider highly relevant to ensure the visibility of social media buttons so readers can reach them easily. However, this would have to be done without disturbing the visibility of the content to avoid a negative impact on the user experience.

Overall, by the time the sketching process started we knew we had to improve the UX in general, but also think outside of the box to come up with engaging features and a more intuitive navigation through the article page.

Prototype Development Stages

Within the past weeks, our prototype went through a different number of stages. We started off by creating a paper prototype of a mobile article page, which we developed during a prototyping workshop at the MediaLAB Amsterdam. Here we learnt how to use tools like POP App and InVision that helped us to create clickable and interactive prototypes by using pictures of our designs. After this we kept on experimenting with paper ideas, sketching a variety of layouts and navigation options within the article page until we knew exactly what we wanted to implement on the final version. Once we got to this point, we moved on to using Adobe Illustrator to better visualize our designs. In the image below you can see an overview of how our design process evolved before reaching the last stage.

IMAGENPrototype Development Stages

In the end, we decided to pick only the best features and navigation options from each of our designs and unified them into a single prototype version, using then Adobe XD to create its clickable version. This first attempt at prototyping contains several elements that aim to facilitate the navigation through the site, but also engage and trigger the interest of millennial readers. For example, we created a navigation bar with three buttons, each of them represent a different section: ‘Main Article Section’ (center), ‘Related Articles Section’ (left) and ‘Discussion Section’ (right). Within the main article section, we introduced a system of ‘swiping cards’ to read and watch the multimedia content, as well as a button to listen to that specific article. And naturally, we also placed a fixed social media button on the bottom-left corner. Regarding the ‘Discussion Section’, we thought it should not only show the most popular and recent comments, but also a series of popular tweets with a hashtag related to the topic of the article.

Apart from this, we added an extra button at the top-right corner of the page, which leads readers to the ‘Explore Section’; here, a series of articles and topics are offered in a visually compelling way, but also a podcast option to listen to the news briefing of the day.

Below you can see in more detail how the different sections of our prototype look like:


How does the design integrate our research insights?

As mentioned before, our design choices were mainly based on the research findings obtained during the last two sprints. First of all, we balanced the presence of vertical (scrolling) and horizontal (swiping) interactive content within the different sections, as the application of both integrates mobile using habits, improves the UX and adds interactivity to the site. Also, we limited the use of the ‘infinite scroll’, considering it as more effective only when placed within the ‘Comments’ section. On the other hand, to ensure the visibility and to make the social media sharing options easily accessible, we used a bright colour for its button to attract readers’ attention. We also fixed its position in the lower left corner of the screen in order not to interfere with the general user experience.

Concerning the ‘Discussion’ and ‘Related Articles’ sections, we decided to make them more accessible for readers—just one tap away­—and give both a more relevant status within the page by prominently placing them in the navigation bar. As one of our main objectives was to trigger interest and enable a higher engagement of millennial readers, we introduced the ‘Explore Section’, as well as three types of content within the ‘Discussion Section’: the ‘Trending Voices’, the ‘Top Comments’ and the ‘Recent Comments’.

What’s next?

Bear in mind that we still need to make some design adjustments before we fully dive into the next sprint’s mission: usability tests. There is more brainstorming and sketching ahead of us, but this time we will have to evaluate and select our best prototyping ideas. Hopefully, the upcoming usability tests will help us decide which ideas are the most effective to transform hit&run millennials into a more engaged audience.

In the meantime, feel free to play around with our first clickable prototype here.

Tags: , , , , ,