Designing for Diverse Learning Needs
Get Revising serves a core group of users with diverse learning styles and needs. 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 & User Journeys
The first step in the design process was defining the types of users who would be using the app. In collaboration with the project’s product owner, Pete Langley (creator of Get Revising), we reviewed the existing personas and identified gaps in the data. We found that the existing personas lacked sufficient detail to represent the diverse user base effectively.
To address this, I created six detailed personas representing different types of Get Revising users, each with distinct learning preferences, such as visual learners and those who prefer cramming. These personas helped us understand the range of needs and expectations from the platform.
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. We documented these journeys on a whiteboard to visually track each step and ensure we were addressing their unique needs throughout the process.
Designing for Diverse Learning Needs
Get Revising serves a core group of users with diverse learning styles and needs. 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 & User Journeys
The first step in the design process was defining the types of users who would be using the app. In collaboration with the project’s product owner, Pete Langley (creator of Get Revising), we reviewed the existing personas and identified gaps in the data. We found that the existing personas lacked sufficient detail to represent the diverse user base effectively.
To address this, I created six detailed personas representing different types of Get Revising users, each with distinct learning preferences, such as visual learners and those who prefer cramming. These personas helped us understand the range of needs and expectations from the platform.
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. We documented these journeys on a whiteboard to visually track each step and ensure we were addressing their unique needs throughout the process.
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. We 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.
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.
Below are just a handful of the many wireframes I created, showcasing the various layouts of each element across different screen sizes.
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.
A key requirement from the business was to incorporate an advert at the top of the page. In the previous design, the ad was placed next to the logo in the header, which limited its responsiveness. To address this, I repositioned the ad underneath the navigation to allow it to resize without disrupting the layout. The ad zone was designed as a leaderboard (728px wide) on larger screens, and as a mobile leaderboard (320px wide) on smaller devices, ensuring consistent visibility across all screen sizes.
Content Development & Integration
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 finalized.
UI Style Guide
With high-resolution wireframes already in place, I was able to focus on refining the UI, ensuring the new design was clean, 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.
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, colors, and icons. The color 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 color 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.
Content Development & Integration
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 finalized.
UI Style Guide
With high-resolution wireframes already in place, I was able to focus on refining the UI, ensuring the new design was clean, 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.
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, colors, and icons. The color 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 color 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.
