Monthly Archives: October 2017

Better clarity on article pages in academic publishing

Hypothesis and goals

Recently one of the tasks for UX at Emerald has been to look into improving the article pages. The hypothesis and guiding goals behind this project were to improve layout to aid simplification in consuming and reading articles. The existing layout provided a cluttered experience for the user with elements competing for space, and a mixture of legacy features and displaced features competing for visual attention.

original article page

Discovery workshop

Our aim of initial research was to understand the functionality and features our users would expect as a minimum, and if there are any improvements we could implement.  To start with we held a discovery workshop with subject matter experts to explore the hypothesis and provide some initial pathways to research.


Starting out with our key personas identified from the discovery, we looked at Students due to being heavy consumers of our research. Our secondary personas were editors who would have great ideas on how to make improvements to support further research creation. we also considered authors, who both create and consume our articles.

Student persona

Analysing analytics and benchmarking

We carried out some benchmarking based on heuristic analysis on sites to explore how other similar sectors approached the hypothesis, what was working and what wasn’t.

Also, this was a good time to grab the analytics to reflect a variety of sections which were relevant to the research. This allowed us to gain data insights and patterns that may point towards sections that were working, and not. This combination allowed to formulate some initial paths to take in discovery.

Usability testing

We found a quick set of usability tests on how students used our article pages really helped us here. All remote with students, the insights we got here were useful and sometimes surprising!

Out of this early discovery we then had a priority list of improvements on which to explore within sketching exercises.

Collaborative design and wireframes

One of the great things about collaborative design is that it can involve a variety of people (Users, Subject matter experts, Developers, Product Owners & Stakeholders) and this approach means it’s a more open and broader creative thinking process which gives a perspective one group of participants just might not think of.

We sat down with pens, paper whiteboards and post-its, working together & talking through the scenario. Quickly producing (and binning) ideas that cumulated in a set of wireframe sketches ready to test.

A few key areas of the page were focused on, one of the existing issues was that the journal and article information, plus the article tools were all mixed in together visually. We took the tools and gave them their own panel in the sidebar, and made primary actions a focus, while pulling back the lesser used actions into a dropdown to create space.

Also, we took the journal information and gave this its own panel, again in the right sidebar. This had two positive outcomes. it brought the abstract further up the page, and vastly simplified the article reading flow by stripping the article flow down to basic essentials, thereby giving the article & journal information a separation and more defined sections on the page.

Other simplifications explored were moving citations and downloads to the foot of the article, and providing a dedicated section in the sidebar for citations and references.

Article page wireframes

Hi-fidelity prototypes and testing

Usually in a research and design scenarios our process would now move onto digital wireframes which we would prototype and test.

On this occasion, we took our first iteration of paper sketched wireframes and built a quick high-fidelity prototype to show some simple interactions in Invision. We could then take this prototype & test remotely with users and share out the initial idea with stakeholders.

From these results, we iterated feedback back into the prototype, adjusting and refining until such a point we had an initial release we could develop into a working mvp.

Hi fidelity prototype for article page


The outcome was an evolved and improved user experience with defined sections for reading, tools and overarching journal information. The article is now simplified, with less visual noise cluttering up the natural article reading flow. Secondary tasking & information such as Journal information & article tools were placed in panels to create defined sections, making the article the primary focus.

Going forward over time we would take a further look at heat mapping and analytics to measure the outcome, and if there is any way in which we can further refine this area.