TSR Discussion App

Designing the new discussion app for The Student Room.

Role

Lead Designer

Industry

Education & Online Community

Year

2017

Reflections
This project was one of the early ones in my career and was primarily focused on UI design. At the time, I didn’t have the resources or opportunity to conduct much user research, so the design was driven by project requirements and the visual direction. While it worked well at the time, my approach to design has evolved a lot since then. I’ve gained a deeper understanding of user research, accessibility, and iterative design, and now I integrate user feedback and usability testing much earlier in the process. Back then, designs were mostly static, but now I focus on creating interactive prototypes that better showcase the user experience. If I were to approach a similar challenge today, I’d prioritise user insights and ensure the design is even more closely aligned with the end user’s needs. This project helped build the foundation for my current process, but it’s definitely evolved since then.

Overview

The Student Room’s mobile app, previously hosted on the Tapatalk platform, had become outdated and no longer supported development. As a result, the app's functionality was limited, and user experience was suffering. To address this, I worked in collaboration with an external agency that provided initial wireframes and low-resolution designs for several key areas of the app.

My role

My role was to take these wireframes and transform them into high-fidelity designs, while also identifying and creating additional screens to fill in gaps in functionality and content.

Overview

My role

My role was to take these wireframes and transform them into high-fidelity designs, while also identifying and creating additional screens to fill in gaps in functionality and content.

Objectives

The primary objective of the redesign was to improve the mobile app’s overall user experience, ensuring it was visually engaging, functional, and distinct from both its outdated predecessor and competing forum apps.

Key objectives included:

Improving User Experience: Streamline navigation and address usability issues from the old app.
Creating a Visually Engaging Interface: Develop a modern design that resonates with users and stands out from other apps.
Maintaining Brand Consistency: Align the app design with The Student Room’s branding, using the primary blue colour.
Increasing User Engagement: Make the app more interactive with smooth transitions and animations.
Adding Missing Features: Fill gaps in functionality by creating additional screens for key features.

Design choices

To achieve the design objectives, I focused on the following design choices:

Branding and Colour Palette

The app design incorporated various shades of blue, The Student Room’s primary brand colour, to maintain consistency with the website. I used different gradients and tones to create a visually appealing, dynamic design that still felt familiar to existing users.

Interaction Design

One of the key challenges was enhancing the app’s interactivity. To address this, I incorporated smooth transitions and animated icons throughout the app. These animations were carefully selected to create a sense of fluidity and responsiveness, making navigation feel intuitive and enjoyable. The goal was to make the app feel modern and user-friendly, setting it apart from both the previous iteration and competing apps.

New Screens and Features

I identified gaps in functionality and created additional screens to support features like user profiles, notifications, and streamlined login. These additions helped make the app more robust, offering a more complete experience for users.

User-Centered Focus

Throughout the process, I kept user needs at the forefront, ensuring the design addressed pain points related to navigation, content discovery, and overall usability. I also incorporated feedback from internal teams and conducted usability testing to ensure the app met the expectations of both the users and the business.

Design challenges

Designing a forum-based app presented several unique challenges, particularly due to the complexity of managing multiple layers of navigation and threaded conversations. Some key challenges included:

Multiple Layers of Navigation: The app needed to accommodate a variety of forum topics, sub-forums, and content. Creating an intuitive navigation system that allowed users to easily move between different levels of content, such as threads, posts, and categories, was a key challenge. Ensuring users could seamlessly browse through the layers without feeling lost required careful consideration of both hierarchy and layout.
Threaded Conversations: Forum threads often consist of long, nested conversations. Designing an interface that clearly displayed these threaded discussions, while maintaining readability and easy navigation, was essential. It was important to balance the depth of content with a clean, user-friendly design that didn’t overwhelm users.
Mobile-First Design: Designing a forum-based app for mobile presented additional challenges, as the traditional forum layout needed to be adapted for smaller screens. Ensuring the app was both usable and visually appealing on mobile devices required optimising content presentation and navigation for touch interactions.

Final Designs

Below are some of the final high-fidelity designs, showcasing the new interface and visual elements that were incorporated to create a modern, engaging experience for users.