GR responsive | ljhazzard

GET REVISING RESPONSIVE

Get Revising had a desktop only site and a slightly outdated look, this project was to design a responsive site and study tools that would work across a variety of device sizes.

Get Revising has a core base of users that have a variety of learning styles and needs. The tools on the site are great tools that have been developed over many years and work well for users, but could only be used on desktop. The study tools are also featured on The Student Room so all designs had to work across both of the sites.

PERSONAS

The first step was defining the type of users that will be using the app. Working closely with the project's product owner, Pete Langley who is Get Revising's creator and The Student Room's, we reviewed the existing persona's and realised these didn't have enough information about created 6 personas that represented the Get Revising users, focussing on covering a variety of learning styles, such as a visual learner and a crammer.

With each persona requiring a different need from the site we reviewed what these were, documenting them on a whiteboard. Using these we were able to map each step of their user journeys of how and what they would be using the site for. These included coming to the site via Google, another page on The Student Room and the Get Revising homepage.

WIREFRAMES

Building on the user journeys already mapped out, I sketched out some basic page wireframe ideas on a whiteboard. We reviewed all of the exiting elements on each of the pages, and then identified new elements that would be useful to users, such as showing them related study resources in the topic they were viewing. We made sure each user could quick navigate to a resource, engage with it easily and then once they have completed their task were able to find further related study resources on Get Revising.

CONTENT

All the pages that were being designed were based on existing pages, which meant we had a good understanding of what elements on the page we wanted to keep and redesign, as well as any new items that we wanted to create.

Working with the product owner quite closely we were able to produce a lot of the content at this stage, such as knowing what the three promotional elements on the homepage would be and roughly what type of content might go in to these. I wanted to use as much real content as possible, so for any copy that existed on the site I placed these in to the wireframes and created placed holder text for anything that did not already exist.

BREAKPOINTS

As the new site was required to be able to work on a variety of screen sizes, I had to define what the page structure and breakpoints would be. We wanted to use as few breakpoints as possible without skewing the content. I decided to use three breakpoints and the rough size of what these pages would, as these would cover most types of devices. I created a small, medium and large concept. Small screen sizes would cover all mobile phones, medium screen sizes would be used for tablets and large screen sizes would be laptops and computers.

The business required that there was to be an advert at the top of the page. It's exiting location was in the header next to the logo which restricted it's flexibility, as I didn't want to have the ad zone jumping around on different screen sizes I placed underneath the navigation in the header as this allowed the ad zone to resize without affecting any other content. The ad was required to be a leaderboard at 728px width, which was then changed to a mobile leaderboard of 320px width which showed for any devices smaller than leaderboard width.

Using data gathered from our users common mobile and tablet sizes and with a good idea of the content areas I was able to map out what the three breakpoints would be.

TEMPLATES

There were over 10 different page templates that needed to be created, these included homepage, landing page, category page, resource template, search results, registration and account pages and the navigation menu. Each of these pages required a small, medium and large wireframe.

SPECIFICATIONS

These wireframes were being sent to the external developer so required them to be as detailed as possible so that they could get an accurate understanding of each page. The wireframes were accompanied by a detailed spec that I created which contained interactions and descriptions of how each element worked and how the pages flowed.

Below are just a handful of the many wireframes that were created, showing the various different layouts of each element depending on screen size.

UI STYLE GUIDE

By already having quite high res wireframes when it came to the UI stage I could really focus on making the new design clean and modern to compliment the content. This project was a great opportunity to update the overall design of the site, as the current version felt cluttered and dated.

The challenge was creating a visual that worked with the sister site - The Student Room. The study resources were already integrated with the site, and formed it's learning area. The pages needed to fit in with the look and feel but also work on it's own.

I started by creating a basic style guide with basic elements, such as fonts, colours and icons. The colour palette came from the group branding, which consisted on mainly blues and oranges. Each time a page or element was designed I worked with style guide to create a cohesive design, building up sections that could easily be identified and used on other pages.

I created a colour tone heirachy to show different levels and layers to elements, which was used across the site. I used space wisely, giving enough breathing room to each element whilst regarding suitable click areas for links and buttons.