Creating an outstanding site for an outstanding institution

New City College is one of England’s largest colleges, rooted in its community with campuses across north-east London, and the largest college group to date to receive an ‘outstanding’ OFSTED rating.

The challenge

Sharp Sharp was commissioned to design the website for an important new venture from the college: Shoreditch Business School. We designed the site alongside the brand identity which we developed for the school. Our developer partners PIE Code then built the site, in a close collaboration with Sharp Sharp. 

The website needed to establish the school’s credibility, and attract customers and convince them to register for courses. The technical challenges included:

• Building a course listing system which integrated with external course information

• A course booking and payment system integrated with the college’s finance systems

• Integrations with the college’s customer relationship management (CRM) systems

Planning and content

After conducting keyword research, PIE Code developed an overall site plan and content plan for the site. This was tailored to be part of a wider marketing campaign to attract visitors to the site.

Sharp Sharp provided the copywriting for key pages of the site, written in an SEO-friendly and most importantly a user-friendly and on-brand style.

In order to provide a meaningful reason for busy HR leaders to visit the site, we also developed a personalised skills gap report generation system, powered by AI and backed up by a knowledge base of relevant content.

Design

We developed wireframes for the site based on key user flows and goals. The wireframes enabled the team to explore the pages and speedily reorder content where needed.

We identified key design features to engage visitors and help them to achieve their goals while on the site. These features included:

An interactive ‘mega menu’, enabling visitors to preview content from across the site

Micro interactions to encourage exploration of the content, such as a swipeable horizontally scrolling block of current courses, and collapsible text blocks enabling users to skim or read more deeply as they desired

Animation of key elements such as header sections and buttons, to increase visual engagement and encourage longer visits

The detailed design work involved applying the brand’s colours, typography and visual style to the site. A human presence within the designs is a key part of the brand, so we combined cutout photographs of people with graphic branded backgrounds.

The school has a wide variety of courses, each needing a unique image. Sharp Sharp developed a modular graphic illustration style to address this, which allows for many images to be cropped from a wider panorama.

Key sections of text are highlighted through a playful element of surprise, as the background image scrolls vertically while the text remains on screen.

We built the brand guidelines in a password-protected area of the site. This enables the guidelines to be distributed, updated and referred to more easily than when creating them in the form of a static PDF.

Production

Sharp Sharp supplied PIE Code with Figma files from the high fidelity prototype of the site. From this, PIE Code built the site in Wordpress. They developed a new theme from scratch which was tailored specifically to the needs of the site.

PIE Code provided a highly customised course booking and payment system, tailored to the needs of the school.

A number of integrations were required, including with external CRM, course information and finance systems. PIE Code liaised closely with these external stakeholders to ensure a robust end result.

AI-powered skills gap report

Working closely with the school Sharp Sharp developed a clear user goal and user journey for the skills gap report feature. It needed to be quick to use, so we developed a 5 question, multiple choice questionnaire. To increase relevance, the later questions are generated dynamically depending on the responses to the earlier ones.

The questionnaire was also designed to help the school to better understand customer needs. Users are required to provide their details in order to access their skills gap report, this provides a valuable source of leads for the school.

Ensuring that the skills gap reports are meaningful and personalised was a key requirement. To achieve this, the AI system combines user responses with detailed prompts, and refers to a knowledge base of relevant information.

PIE Code integrated the skills gap report into the back end of the Wordpress site, enabling the school’s staff to refine the prompts themselves and questions within a familiar interface.

Results

The site provides a strong visual impact, and is highly consistent with other branded materials. Its content is proving engaging, indicated by long site visit times.

The design of the site is fostering the desired user flows, indicated by low bounce rates on key pages.

As more resources and content are added to the site, we look forward to it delivering more business for this exciting school.