Refining navigation (tablet app)

Users loved the app but had issue with navigation. Jumping between sections meant returning to the homepage each time, breaking the reading flow. Working with research, design, and app teams, we explored low-impact ways to fix it. The result? A subtle in-article navigation drawer, quick to access, easy to ignore, and a clear win for engagement, without overhauling the app.

Challenge

The Times and Sunday Times app presents the daily edition in a clean, print-like format, featuring top stories, in-depth journalism, and a 30-day archive.

Following the release of the redesigned app, 
user feedback highlighted a key issue: navigation.

Users found it cumbersome to move between articles, to explore different sections, they had to return to the homepage repeatedly, disrupting the reading flow.

Project goal: Explore alternative navigation patterns to improve the reading experience within the daily edition.

Original article view from the app, users had to click the back arrow to navigate between sections 

Discovery

I partnered with the UX researcher to survey around 1,000 users and uncover pain points. Nearly half (48%) reported frustration with having to return to the homepage to navigate between sections, confirming the experience was too linear and misaligned with real reading behaviour.

Addressing this was key to improving engagement and reducing churn. I collaborated closely with the researcher early on, and led ideation, design, and validation throughout the project.

Had the previous Times app and I was able to read the paper as a newspaper. 
Now it would appear, I have to choose a section, read it, come out and choose the next section. How can this possibly be an improvement!
— Survey response from existing user

Ideation

We aimed to explore ideas that could be tested quickly without disrupting the existing navigation too heavily, no full redesigns.


Initial sketches explored:

  • Showing additional articles within the article itself (but felt too cluttered and appeared like “related articles”)

  • A horizontal rail UI, inspired by platforms like Netflix, to explore articles within the edition.

This led to the concept we named the ‘Article Drawer’ a rail-style component available within articles, which would enable users to jump across the edition more fluidly.

Exploring ideas for accessing articles across the edition.

Refinement

The Article Drawer was designed to be on-demand, article-level, and show all edition content with headlines and images, without disrupting the reading flow.

After exploring access points like the header, I landed on a Floating Action Button (FAB): subtle, always available, and thumb-accessible. I shared wireframes with the design and app teams, and the FAB was preferred for its simplicity and minimal impact.

Visualising the Article drawer, focussing on a position that would allow for easy access

Validation

To validate the concept, I created a clickable prototype and ran an unmoderated user test using UserZoom.

I tested with 20 screened participants from our target audience to ensure relevance.


The goal was to confirm that the FAB was intuitive and clearly understood as a way to access article and navigate the edition. Ultimately did it solve the issue.

UI for the prototype which were tested with a number of users.

Results

  • ✅ 18 of 20 participants located the Article Drawer

    When tasked with where they would expect to access articles across the edition.

  • ✅ Improved navigation and edition overview

    The Article draw also helped users to quickly scan and get a overview all the articles across the edition.

  • ✅ Confidence to move forward

    Validating the concept helped us to gain confidence moving forward to build and further validation.

💡Key learnings

Understanding user behaviour

This project reinforced the importance of not making assumptions about how users interact with digital products. While the existing navigation appeared logical, user feedback and behavioural data showed a mismatch between the intended flow and real usage.

Simple modular enhancements

We learned that impactful improvements don’t always require a full redesign. By introducing a focused, self-contained solution like the Article Drawer, we were able to enhance the user experience with minimal disruption to the existing app structure.

🥵 Challenges

Balancing visibility with subtlety

One of the biggest challenges was ensuring we found a solution that solved the navigation issue without effecting the reading experience.

Working within technical constraints

The goal was to make a significant usability improvement without overhauling the app's architecture. This meant exploring solutions that were modular and lightweight enough to be implemented within existing frameworks and development cycles.

Ui design for the article drawer open and closed views.

Role: UX designer

Project duration: 2 months

Team: UX researcher and UX designer.

Responsibilities: User research • Ideation and prototyping • validation • testing • UI

Tools: Miro • Figma

Previous
Previous

Atheneum: Improving sign ups (mobile app)