Bringing students, parents, teachers and the public together on a single portal

Client
Bordeaux Métropole
Year
2021

The challenge

Rethinking and improving the user journeys of a web portal aimed at a varied audience with very different needs. We had the chance to support the Conservatoire de Bordeaux in the creation of its web portal, to best address users' expectations while bringing a touch of freshness to its visual identity. A cross-cutting engagement in UX Design, UI Design and Art Direction.

Bringing students, parents, teachers and the public together on a single portal

Project flow

01. Documentation scoping
02. User interviews
03. User journeys
04. Information architecture
05. Wireframes
06. UI design
07. QA and delivery

Study detail

Clarifying needs

Familiarisation and needs analysis

To properly understand the challenges and issues of this redesign project, it is essential to take stock of what is in place and to analyse the conservatoire’s overall organisation. A series of interviews with the portal’s target audiences (administrative staff, teachers, students and parents, as well as the general public) is run, allowing us to identify users’ expectations and needs. Varied topics are covered: how people perceive the conservatoire, teaching, cultural events… The feedback helps draw interaction flows between the different profiles and identify digital behaviours. The cherry on top: we took the opportunity to visit the conservatoire to better grasp the internal organisation. This requirements analysis highlights internal and external information and communication issues. The different journey steps that turn out to be the most problematic will feed the thinking during the two user-journey workshops.

Conservatoire de Bordeaux: visit of the conservatoire
Conservatoire de Bordeaux: visit of the conservatoire
2,100
Students enrolled per year
1,500
Additional EAC beneficiaries

Defining the user journeys

Formalising the journeys and the interactions

The first workshop covers the journeys internal to the conservatoire’s organisation. The second focuses on the student and external journeys. The journeys are modelled from the feedback gathered during the interviews. They are presented during the workshop and serve as a basis for collaborative work. The participants modify the journeys by identifying the barriers and needs and by sketching first solution ideas. The key priorities are then ranked: accessing information about available courses, informing students directly, the registration process… The result of these two workshops is then formalised so it can be presented and used internally.

Conservatoire de Bordeaux: user-journey workshop
User journeys

Interaction design: screen mockups

Co-designing the main screens

Before starting to produce the mockups, the project team is brought together again to co-design the main screens. In this workshop, we present the functional review (features, navigation…) and visual review (visual identity, mood, components…) of other websites. This makes it easier for the participants to imagine the result and start exploring ideas.

The main screens are then drawn as sketches individually to start with, before being pooled in order to find the best compromises.

Conservatoire de Bordeaux: wireframes

Visual identity

Conveying a more modern image suited to digital supports

Conservatoire de Bordeaux: creating the new logo

When we started exploring and running several tests with the current identity, we quickly realised that the logo was difficult to carry across to desktop and mobile digital use. After several conversations with the team in charge of the conservatoire’s communications, we decided to evolve the identity so that it adapts perfectly to digital, while keeping a link with its DNA. The aim was therefore to simplify and modernise the brand image, while developing its likability. To make the link with the previous logo, we decided to extract the initials C and B while keeping the same typeface, but playing with shapes and counter-shapes so that the B becomes symbolic and poetic (some can see the dots of the F clef or the f-holes of string instruments…). This emblem gives the brand a more institutional weight and offers a simple, identifiable sign for the conservatoire. The whole sits within a circle that anchors it as a mark of quality. 💡 For the curious, we explain our logo-creation process in detail in this blog article.

Conservatoire de Bordeaux: creation process of the new logo

The typefaces chosen for the new visual identity are “Libre Baskerville” for the headings and “Poppins” for the body text. Specifically designed for on-screen display, they meet the technical needs of a 100% digital project where the application’s interface is at the heart of the user experience.

The brand expression is rounded out by an energetic and refined colour range, to address the conservatoire’s multidisciplinary challenges.

Conservatoire de Bordeaux: typography
Conservatoire de Bordeaux: colours
Conservatoire de Bordeaux: logo
Conservatoire de Bordeaux: logo variants

A range of bright colours has been put in place to allow better identification of the areas on the platform.

Conservatoire de Bordeaux: logo and coloured background
Conservatoire de Bordeaux: visual-identity variants
Conservatoire de Bordeaux: visual-identity variants
Project illustration

UI design of the interface

A responsive site

The interface has been designed with simplicity and elegance, leaving plenty of room for the visuals, and conveys the image of a leading, long-standing institution in Bordeaux’s cultural life.

The design meets accessibility standards.

Project illustration
Project illustration
Project illustration
Project illustration
Project illustration

Want to discuss your project?

Let's talk about your stakes, constraints and ambitions so we can build the best user experience together.

Contact us