top of page

Oxford Saïd Business School product redesign

Client 

Industry

Oxford University

Education

Skills demonstrated

User research // Information architecture // Web design // Stakeholder management 

Transform a once innovative marketing product that was becoming dated and difficult to navigate.

 

The school wanted a complete redesign that would not only set it apart from other business schools, but would stand out for visitors with expectations set by global corporate sites. 
 

SBS macpro.png
Copy of Home page Prototype (2).png

Design a CMS that would stand the test of time, balancing content flexibility with form and function.   They wanted to increase session duration and maximise the number of high quality business student applications. In addition the client was keen for the website to have a high level design aesthetic.

01 The problem

02 Avoiding past mistakes

It was useful to do a detailed audit of the existing site to understand the challenges it faced:

 

  • Overly complex architecture and navigation

  • Outdated UI

  • Text heavy content that was hard to digest

  • No clear user journey to lead generation

03 The Approach

A complete redesign of the website built using Drupal 8. The key priorities that framed our approach were:

​

1 / User centered design

Their previous site had been built to house their existing content, this time around we would design from the user up.

2 / Agile method

To ensure tight deadlines were met, fast iteration and full stakeholder buy-in throughout. 

3 / Stakeholder involvement

This was a highly political organisation. We needed buy-in at every level so we held regular meetings and workshops .

4 / Mobile first

Analytics showed that 80% of users were viewing the site on their mobile phones so we should take a mobile first approach.

04 My role

This was my first big project at White October and despite being relatively new, they trusted me to be the Design Lead on the project.

 

I worked alongside our Creative Director and was responsible for the majority of the production work, and the main point of contact with the client. I was managed by the Creative Director who helped oversee the project alongside the Project Manager. 

sbs SCHOOL IMAGE.jpeg

05 Kick off workshop

We held a kick off workshop with key stakeholders to build a foundation for the project. 

Exercise 1 / Persona mapping

The objective was to understand who were the stakeholders and users of the website so we could agree on a set of user personas. These would form the basis of our design.

​

Output and learnings

​

Our findings showed that we were catering to a wide set of users with different needs and contexts. Far more than your average academic website: 

 

  • Existing students

  • Potential undergraduates / Potential post-graduates

  • Executive students (MBAs)

  • Lecturers and academics

  • Investors 

  • Media

​

​

Exercise 2/ Content planning

The objective was to use our personas to explore possible content areas. These would form the basis of our site map. We ran an open post-it note session and then explored how the content could be grouped.  This would form the starting point for our site map.

​

​

webp-net-compress-image.jpg
Ox business school.png

06 User research

Once all of the content had been organized into a site map, we needed to validate it. The site would be housing a lot of content and we needed to ensure that it was organised and labelled in an intuitive way.

Tree testing

Tree testing - We used tree testing because we wanted to answer the following questions:

 

  1. Did users understand the content labels?

  2. Could they find the information they needed quickly and easily?

  3. Which areas where problematic and required additional time

 

We set up a  research station in the University with the intention of finding 20 students to take part in our short tree test using Treejack. 

​

Output and learnings

​

  • 72% of users located the content in under 8 seconds and reported that they found the structure and hierarchy intuitive. 

  • We found that some of the labels used were not clear. We needed to go back to the drawing board to find more universally understood labels for a few of the items.

​

user research.webp

07 User journey mapping

Using my findings from the workshop I drafted a set of user journeys. This would help us validate the site map as well and form the basis of our content planning.

​

My intention was to design a website that offered the user clear concise primary information then enabled the user to go on a secondary content discovery journey.

​​

Programmes page _ User Journey.png

A site map that offered the user an intuitive exploration experience.

Our research showed us that users wanted to be able to access key information quickly.  Potential students would be looking for programme info. So we kept that entirely seperate in a programme finder section. 

08 Sketching and wireframes

"Designing for a CMS meant balancing flexibility with constraint."

 

I considered the following whilst sketching out wireframes: 

​

  • Component design - Designing a variety of components for content editors to give them flexibility when building pages whilst constraining them to ensure they couldn't ruin the design aesthetic.
     

  • Content balance - Balancing content with imagery to create an editorial feel that wasn’t too copy heavy and provided enough high level information and the option to move the further content should they wish to.
     

  • Explore-ability - In-page navigation elements such as breadcrumbs.
     

  • Calls to action - Always keeping in mind the primary intention of the site; to generate potential student leads. So CTAs were placed in key positions around the site

"What would the navigation experience feel like on mobile?"

 

Following validation from the client, the final set of sketches were transformed to grey box wireframes.

 

Focus was given to: 

​

  • Broad page layout and how the components would fit together. 

​

  • How would the menu work on mobile and desktop? I opted for a hamburger menu on mobile and a full page horizantal dropdown menu on desktop.

preview (2) (1).png

High fidelity wireframes

I then moved onto high fidelity wireframes where i fleshed out the detail including;
 

  • Broad look and feel 
     

  • Specific components including text, image and video (for desktop and mobile)
     

  • How each of the components would sit together on a page
     

  • Detailed content areas including dummy text 
     

  • Calls to action and links
     

The focus was on designing components that provided content managers with flexibility to add content whilst balancing the need for consistency and maintenance of our design principles. Structure of links was also important, preventing them from adding lots of new links that would change the site structure 

Mobile component design

Title with image

Course data and CTA

Text component

Mobile_Wireframe.png

Video w/ descriptor

Image with text

Full width image

Breakout quote

Dates & deadlines

Bullet list

People images & text

Contact info & dropdown 

selector

09 Digital style guide 

The school had recently completed a brand revamp. My next job was to translate this into a digital style guide to lay the foundations for the UI and ensure consistency across all of their digital assets.​

​

The idea was to make use of their iconography and vibrant colour palette to create a UI that was clean and editorial with pops of colour.

​

I chose a bold typescale with a large H1 font for impact.

preview (6).png

10 UI Design

preview (4) (1).png

The objective was to design a clean modern site that communicated academic excellence whilst competing amongst the world’s top corporate sites. 

​

The final design incorporated large clean imagery, impactful typography and content that was designed to flow in an editorial style. A few of the foundational concepts:
 

  • Use of large iconography to break up the page and add colour.
     

  • Designing components that offer the user flexibility to build out pages. These included bulleted lists, video, text plus photography components.
     

  • Priority information and data was separated from copy into a more scannable form.
     

  • A bold typescale was chosen to give headings maximum impact and a brochure look and feel
     

  • Use of large imagery and video content 
     

  • Sticky navigation header

'A high quality library of stock photography was essential to the success of this website'

I pushed their marketing team to commission new photography and made sure i had control of the visual approach by providing them with a detailed photography brief.

Screenshot 2023-03-28 at 10.19.51.png
Screenshot 2023-03-28 at 10.20.16.png
Screenshot 2023-03-28 at 10.20.49.png

11 The results

The data

  

  • A dramatic reduction in bounce rate

  • Increased session duration and user engagement

  • An increase in call to action clicks driving leads 
     

Feedback from the client. & stakeholders
​

Feedback was extremely positive. The Dean of the school expressed his delight at the re-design, siting it as a huge step forward for the school. 

 

In addition, we were pleased to receive a number of really positive unprompted emails from staff and students.

​

The test of time

​

I am proud to see that 5 years later the site still looks fresh and modern. Competing on a level that surpasses most academic sites. 

​

Despite regular updates to the content, by various editors, the site still aligns with the digital style guide and retains its navigational structure.

My retrospective

This project was great fun to work on but it was not without its challenges and i came away with lots of learnings:
 

  • Designing a UI for a CMS required meant balancing function with form. We needed this site to maintain it's clean look and feel without having control of content.  We designed a flexible array of components so this problem wouldn't be repeated
     

  • Stakeholder management was a huge part of this project. There were a large number of opinionated and important stakeholders that we had to win over. We got them on-side by meeting in person and carefully preparing presentations directed at them. In addition running workshops so they felt invested in the output.
     

  • Getting to grips with Drupal’s front-end constraints such as CSS containers was a steep learning curve and required regular comms with the front-end team from the start and lots of UI iterations. The agile approach was great for this.

bottom of page