s6f
43% Organic traffic increase. Improved engagement & user experience.
Our Approach
Scarborough Sixth Form College required a multi-faceted website. After a series of meetings with S6F a clear and rational sequence of decisions where made. A friendly and straightforward UX design was essential to the next generation of students. The following project page outlines those decisions which led to the resulting website design.
Website Design
99%
Search Engine Optimisation
95%
Branding & Design
97%
the challenge
Objectives
Comprehensive research and understanding of staff, parents and students website-user journeys and personas was the beggining point of the project. The final designs answered the brief thoroughly and successfully, creating a modern and mature aesthetic with exceptional UX functionality. Allowing students new and old quick and easy access to the most relevant information. The contemporary design also raised the college's self-image and attractiveness to prospective new students.
design and development
Landing Page Design
The design is distinctive, mature and modern. Using large amounts of images and video to convey the college quickly and establishing orange as the highlight colour. The search area was placed right at the top of the home page, as suggested by S6F. I then broke down the other essential information on S6F Courses, New Student Information & Facilities just below.
user persona
Target Audience
course finder
UX + Ui
Easy and clear navigation of the course's area was one of the most critical aspects of the project. Instead of having the navigation on the left-hand side of the courses page, I decided to develop a sticky quick link navigation at the top. This gives the visitor quick access to all the courses when searching. Allowing the user to move quickly to any course section desired for a smooth and friendly UX experience.
navigation
The design required a series of navigation systems to accommodate new users and established students and parents. Allowing intuitive access to the college portal (Left-hand navigation). The new students could easily find a quick route to the information they required. A modal menu was incorporated for all the links on the website. Sticky navigation was devised to allow new students quick and easy access to all the courses.
mobile responsive
The examples below show how the home page will reformat when on a tablet or mobile phone, all the website was fully responsive on all pages.
branding and design
S6F already had an established brand and colour palette. The new colours were chosen to have a synergy with the established logo. Orange was used as the highlight colour.
Typography
Lato was chosen as the primary font due to its clarity and number of styles. The font also processes a mature and trustworthy attribute essential for higher education.
course colours
As there is already a colour scheme for separating the apprenticeships, I thought a simple colour coding scheme for all the courses would work for both students and staff. Just a subtle suggestion of colour that would allow for the overview of the courses to have a small dot within their information box.
