University of Northampton
The University of Northampton (UON) is one of the youngest universities in the UK, but is one of the few universities to be ranked Gold in the Teaching Excellence Framework (TEF). They have won multiple awards for their work in the area of social impact, being the first university in the UK to be named as Changemaker Campus in 2012.
I was asked to completely rebrand the public website in order to make it consistent with the changed corporate identity. They wanted to develop a new design in two phases. Phase 1 (three-month time) had to match the website visual design with the current brand aesthetic, introducing a new user experience. Phase 2 (one-year time) had to move the design into a complete new visual design they were introducing for the next two-year advertisement campaigns, improving and refining the user experience.
I have been asked to create something bold because of the very colourful brand identity, so I let creativity stretch the guidelines boundaries, with a “No fear” approach. I had to think outside the box stretching the guidelines at the limit of they boundaries to transform the already known in something outstanding. I started to review the old website in order to understand what was working and what needed to be changed. I also wanted to do research across other university websites attuning with the competitors, and amongst users in order to better understand their needs and expectations. Due to timeframes and budget, we opted for two different approaches: predictive (phase 1) and adaptive (phase 2).
DESIGN – Phase 1
According with the management I opted for a minimal design with a stronger visual impact, based on large use of pictures and coloured geometric shapes. We also decided to move towards a simpler and more intuitive layout in order to build the most enjoyable experience for the user.
Unfortunately in this phase there was not enough time and budget to perform a detailed research across competitors and users, moreover the old website was not linked to Google Analytics. For these reasons we opted to work on a predictive approach, based on what we got from two focus groups we did with a total of 23 students (first, second and third year). In this way we got a sort of blue-print to start sketching the new user experience.
The management asked for a WordPress-based website, supporting the most popular widespread devices. Each graphic element was designed and thought in accordance to the Brand Guidelines. We aimed to a full responsive and attractive website, based on a new user experience and new visual design. Pictures, videos and graphic elements as the best way to deliver remarkable information.
DESIGN – Phase 2
Due to a different timeframe (one year) and more budget, phase two has been characterised by an adaptive and interactive approach. We started with goals redefinition and analysis, then I moved into research across competitors, in order to rebrand the website into a competitive product. We focused to solve a couple of problems we had with the old website: a lower conversion rate that expected for applications coming through the website and a high bouncing rate in a discrete number of course pages. We based the next step on some user personas previously built but the students recruitment team, in order to understand user’s needs and expectations. According to the identikit and some direct interview with students, the content team and I started to redesign the IA of the website, identifying macro areas of interest for our target, designing possible flows and journeys.
After the IA has been completed, I started designing wireframes that have been moved into hi-fi mock-ups very quickly, because of management request. I have been adapting the new design and layout integrating hints form competitors analysis, SEO practices provided by a third-party contractor, and other accessibility and usability best practices. Finally I built an interactive hi-fi mock-up to submit to a small group of users in order to identify macro usability issues.
We agreed the design aesthetic to be minimal with a strong focus on content, typography, cool imagery and black/white colour combination. A lot of work had already been done designing the new layout of the website in Phase 1. Now it was a matter of experimenting with black and white combinations, adding some drops of colours to highlight active links or specific areas, also using black overlays on the full-width images.
The main menu is now sticky and fades into transparent overlay as the user scrolls. White backgrounds meld into pictures, generating a strong visual impact. Because pictures have a very important role providing an enhanced user experience, I wanted full responsive images, serving an appropriate-sized image to the user based on their device. I asked for implementing the picture element (standard W3C HTML).
The UI and UX of the website were validated, in both phases, involving students in focus groups and submitting the most relevant pages to a survey of about one thousand people including: prospectus students, parents and guardians. User testing validated that students and prospectus students were able to find the information they were looking for, both on desktop and mobile.
As Design Lead I have been responsible for the product full lifecycle, from design to delivery. I have been very focused trying to find the right balance between the user needs and the business needs. I provided user experience design, user interface design and visual design in order to make the product meet the business and user needs. I have been promoting and adopting an iterative approach, working closely with the developers, content editors, and final users.
The Final Product
The resulting product from Phase 1 was a consistent website that provided a completely new user experience, trying to improve the student’s engagement. However it was far to be perfect. The user experience has improved, rising the conversion rate, but it was just half of the job. The resulting product from Phase 2 is a superior website, integrating a better user interface, a very pleasant aesthetic, SEO best practices and a new layout, providing a better user experience.