A rebranded, modern customer facing website and custom built administration system for bringing detailed offline process handling online.

Introduction

Brighton School of Business and Management approached Pixel with two requirements, which involved the design and development of a brand new customer facing website and a custom built administration system to help bring their current process online.

The purpose of the website was the enhance the visual brand, as their current website was very text heavy and lacked clarity and appeal. The end goal was to provide an enjoyable, insightful website for their customer to locate, enquire and apply for their online distance learning courses, increasing conversions in the process.

Following the receipt of an enquiry or application from their existing website, Brighton SBM’s processes were offline through a variety of spreadsheets and manual work to keep track of records. The aim here was to develop a platform that removed the vast majority of the manual processes and handles the processes online, from customer enquiries through to qualifications and certificate award.

Our Approach

Although the project was split across two core requirements, it made sense for the project to be approached as one, with the website becoming phase one of the new online process.

We approached the project looking at the entire process as whole and how each elements plays its own part. Our objectives here were;

• provide a seamless solution to bring the entire process online
• reduce the bureaucracy within the current process
• provide an online portal for customers to pay for and track their course progress
• ensure the website is integrated into the process efficiently

We got to work on dissecting the current spreadsheet process and formulating a plan of action leading into the design process. Out aim was not to just provide an online version of their current process, but to make each part of this process better, more streamlined and simplified in any way we could find.

On the other hand, we were also rebranding Brighton SBM completely, with a new logo and brand identity. This was very much at the forefront of our plans from the very beginning, particularly surrounding the website side of the project.

Design Process

Our design team started by looking at the platform from a high level view, breaking the key areas down and focussing on each of these in segments, with these combining to create the full platform.

Our design process for this project consisted of:

• Research
• Wireframes
• Mood boards
• Design

Research

Our starting point was researching the current process, understanding how this worked from Brighton SBM’s perspective at the moment, understanding their daily struggles and limitations. This involved breaking down the seven stages down, working our how each process linked together and what needed to be achieved to make this work online.

With the rebrand, our starting point was to research the market, look at competition, similar websites providing similar services across the same sector and other sectors. This helps formulate and idea of what others are doing well, as well asnd not so well from a visual and branding perspective.

Our aim was to provide Brighton SBM with a brand new identity, a fresh lease of life online, creating a space and UI that was pleasant for their customers when using their online facilities.

Wireframes

Each segment of the process had its own user flow which we created, to outline how the user would move between each of the seven phases in the correct order. These diagrams formulated the structure of the system and the logistics behind the process.

Once the flows were signed off, our design team began preparations for the wireframes. This started with sketching out concepts and ideas for every part of the system and website, starting at the beginning of the process and working stage by stage to the end.

By the end of this process we had a set of sketched wireframes outlining the structure for all elements of the new website, along with the management system. Although the management system isn't customer facing, ensuring the user interface is correct was vital for us, as this will be used extensively by Brighton SBM staff and needed to be as self intuitive as possible.

The sketched wireframes were created in a digital form, providing an accurate representation of the project which we could share with the client via Invision, welcoming their feedback.

The above process was repeated for the new logo, starting with sketched concepts which we displayed to the client and narrowed down. A variety of digital versions were created and a black and white version of the logo was formed and signed off.

The new Bright SBM was beginning to take shape.

Mood Board

Taking our earlier research into the market from the research phase, we had an idea of the path we were looking to take with the visual identity for Brighton SBM and we created a mood board to display our inspiration from other areas of the web.

We now had a firm final guide for the visual and brand identity that we were about to create.

Design

Our first point of attention during the design phase was to create a colour palette that worked for the new brand. Multiple variations were researched and tested before being applied to the logo concept, along with selecting an appropriate font.

We now had a colour palette, brand style guide and a logo and moved on to adapting this into the website only at this stage.

Every screen from the wireframe stage was designed to match the new brand as we worked towards a final concept for the website itself.

This was also duplicated for the management system and the wireframes screens from earlier on were branded up.

The new Brighton SBM logo, website and management system was now officially ready for development.

Development

Leading into the development phase, we aimed to push the website live as a priority in order to push the new brand identity out to the public and enable Brighton SBM to run their planned marketing campaigns. This changesd our approach to the development slightly, which consisted of two main phases;

Website

• develop the website from the designs signed off
• develop the back end framework to support course management, customer enquiries storage and course applications
• develop the administration system including only course management, customer enquiries and course applications

Following the completion of the above, the website was officially launched and our attention moved to finalising the remainder of the administration system.

Remainder of the administration system

• finalise the remainder of the back end framework to cover the five other areas of the process following enquiry and application
• develop the remaining section of the administration system, including student enrolment, finance, recurring payments, student management, awards and certification

Key Features

• Recurring payments
• Online payments and e-Commerce
• Integration with Sage accounts software

Summary

Brighton SBM are now taking advantage of a fresh rebrand, new website and full administration system.

The new website has exceeded expectations and the company continue to benefit from bring their processes online, saving valuable time and effort along with ensuring records are secure and accurate.