How can we improve content discovery for a publication?
OVERVIEW
Client: Paper Planes (Design Publication)
Role: UX Designer
Key Responsibilities: Research & competitor analysis, wireframing & prototyping, contributing to & extending the visual design language, creating handoff documents for the developers
Team: Lead Designer (Aakash Rodrigues), Client Team
Timeline: April - August 2021
Brief: Redesign the overall website experience
Status: Complete, website is live here
New designs
Background
Paper Planes is an online editorial platform, exploring topics around design and culture in India.
The well known publication also has an online store and also featured other non-editorial content like partnerships and collaborations, guides to cities, and events.
The problem
Content discovery on site was poor and had a lot of friction
The Paper Planes website was outdated - beyond its visual aesthetic, there were several UX issues ranging from a poor reading experience to poor navigation, which was impacting their readership and engagement.
While PaperPlanes had a huge spread of content, the diversity and volume of content was not being reflected on the site. For example, the home page only featured 16 articles, making for a stale experience with lots of clicks to unearth and discover more content.
Note: For the purpose of this case study I will focus on the issue of poor content discovery opportunities on site.
UX issues with the old site
Process
We gained inspiration from a number of editorial and non-editorial sites
We looked at references from several websites, both editorial and non-editorial to see how others had structured their website and enabled content discovery. We gained inspiration from various sources like Netflix’s personalisation and Techcrunch’s infinite scroll.
Competitor research
WIREFRAME EXPLORATIONS
We explored a number of options, like break sections and topic tags, to improve content discovery
Early on, based on our diagnosis of the old home page (that offered little scope to discover content), we brainstormed that we could introduce break sections to enable users to discover more content categories and see the diversity of content Paper Planes offered. So, we began exploring ways in which we could break up the monotony of the experience with break sections.
It was our hypothesis that that the primary form of navigation should be topics (eg: architecture; food; nature) - rather than the existing structure of formats (eg: interviews; comics; photo essays). Discussions with the editorial team validated this hypothesis, as they suggested that from their experience, people are more drawn to specific interests rather than formats - so it would be more intuitive to click on "food" and discover content within that topic, rather than clicking on "interviews" and finding something that peaked their interest. We explored multiple ways to introduce different topics, like in the select wireframes below:
Wireframe explorations for the Explore section
Since the home page was going to feature multiple articles, and since each article came with a bold cover illustration associated with it, we did not want the home page to become too visually overwhelming. Hence, we decided to run with concept 2 - a simple, text-based exploration.
DESIGN ITERATIONS
We introduced several elements across all pages in order to facilitate content discovery
We made a number of design decisions to improve content discovery on the site.
New designs of the Home Page of Paper Planes
New designs of the Home Page of Paper Planes
OUTCOME & LEARNINGS
We improved content discovery by 4x compared to the old site
While the original home screen featured only 16 articles, the new home screen featured 59 articles, almost a 4x improvement. Further, the new home screen featured 11 break sections that enabled users to discover to additional editorial and non-editorial content (compared to 3 on the original home screen).
Metrics that would help me measure the improvement in content discovery are:
Average time spent on site (before vs after)
Average number of articles read per user (before vs after)
Bounce rate (before vs after)
Old website
Prototype of the new design
Other takeaways
Our modular approach - designing individual components and then piecing them together at the very end - would ensure scalability of the design by enabling the team to add and alter the components as they wished - making it a flexible and robust system.
Additional links
For more information on the visual design explorations, click here
Here’s a peak into what the final website looks like (live here)
