Get Revising Responsive Website

Responsive site redesign and study tools that would work across a variety of device sizes.

Role

Lead Designer

Industry

Education

Year

2015

Reflections

This project was one of the early ones in my career, and while it was a solid solution at the time, my approach to design has evolved significantly since then. I’ve learned a lot about user research, accessibility, and prototyping design over the years, which would influence how I would tackle this project if I were to revisit it today. At the time, UI designs were static, but now I create interactive prototypes that better represent the user experience. I also now have a stronger understanding of accessibility principles, including colour contrast ratios, ensuring designs are more inclusive and usable for all.

Reflections

This project was one of the early ones in my career, and while it was a solid solution at the time, my approach to design has evolved significantly since then. I’ve learned a lot about user research, accessibility, and prototyping design over the years, which would influence how I would tackle this project if I were to revisit it today. At the time, UI designs were static, but now I create interactive prototypes that better represent the user experience. I also now have a stronger understanding of accessibility principles, including colour contrast ratios, ensuring designs are more inclusive and usable for all.

The problem

The Get Revising website had a loyal desktop user base, but with the rise in mobile device usage, the site’s lack of responsive design meant that users had a poor experience on tablets and smartphones. The challenge was to redesign the site to make it fully responsive, ensuring accessibility and a user-centred experience across all devices. 

The platform's tools have been developed over many years and work well on desktop, but they were limited to this single platform. Additionally, these study tools are also featured on The Student Room, meaning that all designs needed to work seamlessly across both websites.


Personas 

Get Revising serves a core group of users with diverse learning styles and needs so the first step in the design process was defining the types of users who would interact with the platform. Working closely with the product owner, Pete Langley (creator of Get Revising), we reviewed the existing personas and identified gaps in data that hindered a full understanding of our diverse user base. 

Upon reviewing these personas, we discovered they didn’t fully account for the wide range of learning preferences and study habits that our users exhibited. To bridge this gap, we updated them to include distinct learning styles and behaviours, helping us better understand the needs and expectations of the platform’s users. 

These personas were informed by data from user research and insights from Pete, allowing us to build a more accurate and comprehensive picture of the target audience. Through this process, we ensured that the platform would cater to various learning styles helping us design more inclusive and personalized study tools. 

Learning styles and behaviours

Learner Style

Behaviour

Reader/Writer

Prefers reading, rewriting, and highlighting notes, breaking information into smaller chunks for easier recall.

Talker/Listener

Learns best through discussion, reading notes aloud, and using auditory tools like podcasts or recordings.

Test/Competitor

Thrives on quizzes, games, and tests, using competition and progress tracking as motivation.

Artist

Uses colourful mind maps, diagrams, and visuals to simplify information and boost memory.

Procrastinator

Struggles to start revision despite good intentions, often getting distracted or delaying tasks.

Panicker

Feels overwhelmed by anxiety, leading to stress that hinders focus and productive revision.

Crammer

Leaves revision until the last minute, relying on intense, last-ditch study sessions.

Expert

Organised and self-motivated, they plan their revision effectively and stick to a structured routine.


Note: Unfortunately, I don’t have direct access to the user personas that were developed prior to my involvement, but I contributed to updating and refining them to ensure they better represented the diverse user base. 


Mapping out the User Journeys 

With the personas defined, we mapped out the user journeys for each, outlining how they would interact with the platform and the tasks they would perform.  

This included entry points such as coming to the site via Google search, navigating from another page on The Student Room, or landing directly on the Get Revising homepage.  

Through a workshop activity, I documented these journeys on a whiteboard to visually track each step and ensure we were addressing their unique needs throughout the process. 

Example User Journey: Creating a Revision Resource 

User Persona: Grace, a 17-year-old sixth form student preparing for exams who  wants quick answers, resources already created by others and her learner style is a panicked. 

Goal: Grace wants to find flashcards to help her revise key topics for her exams. 

Journey Steps: 

  1. Visit Platform – Grace accesses Get Revising after hearing it’s a helpful tool for exam preparation. 

  2. Search for Flashcards – She uses the search function to look for flashcards on her subject. 

  3. Browse and Select – Grace reviews the available options and selects a relevant flashcard set. 

  4. Engage with Flashcards – She reviews the flashcards to test and reinforce her knowledge of the topic. 

  5. Sign Up – To access the full flashcard features, Grace creates an account by entering her details. 

  6. Save and Share – Grace saves the flashcard set for future use  

Unfortunately, I don’t have photos of the initial whiteboard user journeys, but they played a crucial role in shaping early design concepts and refining the user journey. 

The problem

The Get Revising website had a loyal desktop user base, but with the rise in mobile device usage, the site’s lack of responsive design meant that users had a poor experience on tablets and smartphones. The challenge was to redesign the site to make it fully responsive, ensuring accessibility and a user-centred experience across all devices. 

The platform's tools have been developed over many years and work well on desktop, but they were limited to this single platform. Additionally, these study tools are also featured on The Student Room, meaning that all designs needed to work seamlessly across both websites.


Personas 

Get Revising serves a core group of users with diverse learning styles and needs so the first step in the design process was defining the types of users who would interact with the platform. Working closely with the product owner, Pete Langley (creator of Get Revising), we reviewed the existing personas and identified gaps in data that hindered a full understanding of our diverse user base. 

Upon reviewing these personas, we discovered they didn’t fully account for the wide range of learning preferences and study habits that our users exhibited. To bridge this gap, we updated them to include distinct learning styles and behaviours, helping us better understand the needs and expectations of the platform’s users. 

These personas were informed by data from user research and insights from Pete, allowing us to build a more accurate and comprehensive picture of the target audience. Through this process, we ensured that the platform would cater to various learning styles helping us design more inclusive and personalized study tools. 

Learning styles and behaviours

Learner Style

Behaviour

Reader/Writer

Prefers reading, rewriting, and highlighting notes, breaking information into smaller chunks for easier recall.

Talker/Listener

Learns best through discussion, reading notes aloud, and using auditory tools like podcasts or recordings.

Test/Competitor

Thrives on quizzes, games, and tests, using competition and progress tracking as motivation.

Artist

Uses colourful mind maps, diagrams, and visuals to simplify information and boost memory.

Procrastinator

Struggles to start revision despite good intentions, often getting distracted or delaying tasks.

Panicker

Feels overwhelmed by anxiety, leading to stress that hinders focus and productive revision.

Crammer

Leaves revision until the last minute, relying on intense, last-ditch study sessions.

Expert

Organised and self-motivated, they plan their revision effectively and stick to a structured routine.


Note: Unfortunately, I don’t have direct access to the user personas that were developed prior to my involvement, but I contributed to updating and refining them to ensure they better represented the diverse user base. 


Mapping out the User Journeys 

With the personas defined, we mapped out the user journeys for each, outlining how they would interact with the platform and the tasks they would perform.  

This included entry points such as coming to the site via Google search, navigating from another page on The Student Room, or landing directly on the Get Revising homepage.  

Through a workshop activity, I documented these journeys on a whiteboard to visually track each step and ensure we were addressing their unique needs throughout the process. 

Example User Journey: Creating a Revision Resource 

User Persona: Grace, a 17-year-old sixth form student preparing for exams who  wants quick answers, resources already created by others and her learner style is a panicked. 

Goal: Grace wants to find flashcards to help her revise key topics for her exams. 

Journey Steps: 

  1. Visit Platform – Grace accesses Get Revising after hearing it’s a helpful tool for exam preparation. 

  2. Search for Flashcards – She uses the search function to look for flashcards on her subject. 

  3. Browse and Select – Grace reviews the available options and selects a relevant flashcard set. 

  4. Engage with Flashcards – She reviews the flashcards to test and reinforce her knowledge of the topic. 

  5. Sign Up – To access the full flashcard features, Grace creates an account by entering her details. 

  6. Save and Share – Grace saves the flashcard set for future use  

Unfortunately, I don’t have photos of the initial whiteboard user journeys, but they played a crucial role in shaping early design concepts and refining the user journey. 

Defining the breakpoints

Since the new site had to be responsive across a wide range of devices, one of my key tasks was defining the page structure and breakpoints. Our goal was to minimize the number of breakpoints while ensuring that the content maintained its integrity and readability across different screen sizes.

I decided on three main breakpoints:

  • Small: For mobile phones

  • Medium: For tablets

  • Large: For laptops and desktops

Using data on the most common mobile and tablet screen sizes, I mapped out the page layouts for each breakpoint, ensuring that the design would be flexible enough to work across devices.


Wireframes

Building on the user journeys we had already mapped out, I began sketching basic wireframe concepts on a whiteboard to visualize the page layouts. I reviewed the existing elements on each page and identified new ones that would improve user experience, such as showing related study resources within the topic being viewed.  

The goal was to ensure users could quickly navigate to resources, engage with them effortlessly, and, once they completed a task, easily find additional related resources within Get Revising. 

There were over 10 different page templates to create, including the homepage, landing page, category page, resource templates, search results, registration and account pages, and the navigation menu. Each page required small, medium, and large wireframes to accommodate different screen sizes. 

Content and elements

Since all the pages being designed were based on existing ones, we had a solid understanding of which elements to retain, which to redesign, and which new elements to introduce. Collaborating closely with the product owner, we were able to define the content for several key areas, including identifying the three promotional elements on the homepage and determining the types of content they would feature.

To ensure accuracy and realism in the wireframes, I incorporated as much real content as possible. For any existing copy on the site, I used the actual text in the wireframes. For content that hadn’t yet been created, I added placeholder text, ensuring the designs were based on real-world scenarios and would feel cohesive once the content was finalised.

Detailed specifications 

To ensure clarity for the external developers, these wireframes were created in as much detail as possible. Along with the wireframes, I produced a detailed specification document that outlined the interactions and descriptions for each element, as well as how the pages should flow. 



Responsive Designs

With high-resolution wireframes already in place, I was able to focus on refining the UI, ensuring the new design was clean, and modern, and complemented the content. This redesign presented an excellent opportunity to refresh the overall look and feel of the site, which had previously felt cluttered and outdated.

For each of the templates, I designd a desktop, tablet and mobile mock up and created of all the icons, illustrations and graphics throughout.


Design Challenge: Balancing Advert Placement with User Experience 

Challenge: 
The business required prominent ad placements, but these often disrupted the user experience—especially on mobile, where screen space was limited. In the previous design, ads were placed next to the logo in the header, which restricted their responsiveness and sometimes cluttered the interface. 

Solution: 
To improve both usability and ad visibility, I repositioned the advertisements below the primary navigation. This allowed them to resize dynamically without interfering with the core content. I designed them to be adaptable across different screen sizes, ensuring they remained effective without overwhelming the interface. For larger screens, I implemented a leaderboard ad (728px wide), while on smaller devices, it automatically adjusted to a mobile leaderboard format (320px wide). Wireframes clearly defined the ad space, ensuring a balance between business objectives and user experience. Content Development & Integration


Creating a UI Style Guide

Building a flexible UI system while oreserving brand identity

A key challenge was designing a visual identity that worked harmoniously with The Student Room, the sister site, while still allowing the new site to stand independently. The study resources were already integrated with The Student Room, forming its learning area. Therefore, the pages needed to blend seamlessly with the existing design while maintaining their unique identity.

I began by creating a basic style guide that covered essential design elements like fonts, colours, and icons. The colour palette was drawn from the group branding, which primarily featured blues and oranges. As I worked through the design process, I referred to the style guide to ensure consistency, developing cohesive design sections that could be easily reused across different pages.

I also established a colour tone hierarchy to differentiate between various levels and layers of content. This hierarchy was applied consistently across the site to create a clear visual structure. Space was used strategically, ensuring each element had enough breathing room while also optimizing clickable areas for links and buttons, improving the overall usability of the site.

Responsive Designs

With high-resolution wireframes already in place, I was able to focus on refining the UI, ensuring the new design was clean, and modern, and complemented the content. This redesign presented an excellent opportunity to refresh the overall look and feel of the site, which had previously felt cluttered and outdated.

For each of the templates, I designd a desktop, tablet and mobile mock up and created of all the icons, illustrations and graphics throughout.


Design Challenge: Balancing Advert Placement with User Experience 

Challenge: 
The business required prominent ad placements, but these often disrupted the user experience—especially on mobile, where screen space was limited. In the previous design, ads were placed next to the logo in the header, which restricted their responsiveness and sometimes cluttered the interface. 

Solution: 
To improve both usability and ad visibility, I repositioned the advertisements below the primary navigation. This allowed them to resize dynamically without interfering with the core content. I designed them to be adaptable across different screen sizes, ensuring they remained effective without overwhelming the interface. For larger screens, I implemented a leaderboard ad (728px wide), while on smaller devices, it automatically adjusted to a mobile leaderboard format (320px wide). Wireframes clearly defined the ad space, ensuring a balance between business objectives and user experience. Content Development & Integration


Creating a UI Style Guide

Building a flexible UI system while oreserving brand identity

A key challenge was designing a visual identity that worked harmoniously with The Student Room, the sister site, while still allowing the new site to stand independently. The study resources were already integrated with The Student Room, forming its learning area. Therefore, the pages needed to blend seamlessly with the existing design while maintaining their unique identity.

I began by creating a basic style guide that covered essential design elements like fonts, colours, and icons. The colour palette was drawn from the group branding, which primarily featured blues and oranges. As I worked through the design process, I referred to the style guide to ensure consistency, developing cohesive design sections that could be easily reused across different pages.

I also established a colour tone hierarchy to differentiate between various levels and layers of content. This hierarchy was applied consistently across the site to create a clear visual structure. Space was used strategically, ensuring each element had enough breathing room while also optimizing clickable areas for links and buttons, improving the overall usability of the site.

Collaboration & Communication 

Throughout this project, clear communication with the product owner Pete Langley, was vital. We held regular meetings to ensure alignment on project goals, timelines, and design decisions. For example, Pete provided invaluable insights into user preferences and existing pain points, which directly influenced the features we prioritised in the redesign. 

I worked closely with the development team to ensure design feasibility and smooth implementation. One challenge was ensuring that the design was not only aesthetically appealing but also technically achievable. In the early stages, we had several discussions to ensure that the design was scalable, and throughout the development phase, I provided guidance and adjustments to improve both the functionality and visual design.

Collaboration & Communication 

Throughout this project, clear communication with the product owner Pete Langley, was vital. We held regular meetings to ensure alignment on project goals, timelines, and design decisions. For example, Pete provided invaluable insights into user preferences and existing pain points, which directly influenced the features we prioritised in the redesign. 

I worked closely with the development team to ensure design feasibility and smooth implementation. One challenge was ensuring that the design was not only aesthetically appealing but also technically achievable. In the early stages, we had several discussions to ensure that the design was scalable, and throughout the development phase, I provided guidance and adjustments to improve both the functionality and visual design.

Before and After

Below are some before and after slideshow of some of the desktop pages. On the left is the previous design and on the right is the new design.

Conclusion 

While the Get Revising redesign project was an early challenge, it was instrumental in shaping my approach to design and user experience. The work I did then informs how I now tackle more complex design problems, and I continue to reflect on and learn from each project I take on. If given the chance, I would approach a similar project today with a much more refined process, focusing on user testing and more interactive prototypes.


Reflections

While the design was a key learning experience, it helped me build the foundation I needed to refine my process. If I were to approach a similar challenge now, I’d focus more on user testing earlier in the process and ensure the design is even more tailored to the end user’s needs.

Conclusion 

While the Get Revising redesign project was an early challenge, it was instrumental in shaping my approach to design and user experience. The work I did then informs how I now tackle more complex design problems, and I continue to reflect on and learn from each project I take on. If given the chance, I would approach a similar project today with a much more refined process, focusing on user testing and more interactive prototypes.


Reflections

While the design was a key learning experience, it helped me build the foundation I needed to refine my process. If I were to approach a similar challenge now, I’d focus more on user testing earlier in the process and ensure the design is even more tailored to the end user’s needs.

View more projects

Optimising Seasalt’s Navigation & IA

Revamping User Experience Through Simplified Navigation and Improved Usability

Transforming Fuse: A UX Optimisation of Seasalt’s Intranet

Improving usability, engagement, and brand alignment to enhance the employee experience.

ShelterBox Volunteer Portal Redesign

Redesign of the volunteers portal taking a strong user led approach.

Load More

Load More

Load More

LJ Hazzard

Projects

Experience

About me

Contact

Copyright 2025 by LJ Hazzard

LJ Hazzard

Projects

Experience

About me

Contact

Copyright 2025 by LJ Hazzard

LJ Hazzard

Projects

Experience

About me

Contact

Copyright 2025 by LJ Hazzard