Euterpe
Design — Front-end development
The chance to build your own tools: Euterpe, the information system of Cité de la musique.
Context
At the Cité de la musique, we have the chance to be free to choose our own tools and frameworks. Usually, this means that IT and I discuss our options, build test platforms, and then go for it. Xavier Cognard designed the database that supports the information system. To give you an idea, in 2013 the company hosted 463 concerts, a museum with a permanent collection and 2 temporary exhibitions, as well as workshops and activities that brought 111,037 people into our walls. So to sum it up, a lot of events with dates, rooms, participants and so on. When I first started at the Cité de la musique in 2000, the system was supported by Access 97… and it stayed like that for way too long!
So, in September 2008, we launched a new tool that we called Euterpe (after Greek mythology’s muse of music — guess who came up with that one!).
UX design
How refreshing it is to build something for an audience that you can meet and interview directly — every single one of them!
The tool had to be of a simple design (with a short learning curve for newcomers), but used to perform a lot of different and complex tasks, from displaying the right info on our different websites to producing pay slips for musicians that play in the museum daily.
Interestingly, not all the people that are used to performing a task (as tedious as it can be) can think outside of the box and come up with a better way to do things, especially when they are always in the rush and dealing with near-crises with diva artists. But it’s very rewarding when you see in their eyes the realization that you built them a new way to do things that’s faster and more efficiently.
The big principles that led to this project were:
- consistent buttons for all the actions and guides for helping input tasks
- muted colors that would not tire over time but are easily distinguishable from any other tools or web services
- a good hierarchy of information, governed by the structure of the company itself (each department has its own tabs, more or less) with the right set of tools tailored to each department and/or function
- a good way to indicate if information is public (and therefore used on our websites) or internal
Interesting parts of this project
Main menu
Usually, users are working on one event at a time, so it would have been counterproductive to display a menu all the time.
Therefore, the main menu is hidden behind the big “Euterpe” name; one click expands it to a large menu were the user will only see the actions he is entitled to perform.
Latest modifications
A lot of different services have to work collaboratively on these events, and no user is the “owner” of an event so to speak (even if we have production managers), so we had to come up with a way to keep track of the lastest changes in case of a problem. That’s why we have a box in the right column for the 10 most recent modifications of each event.
The box above it is used to document your latest search results in case you want to perform the same task on several events.
Reports of missing information
Euterpe is NOT a CMS, and it is not supposed to be one. It was developed for administrative tasks, but it’s true that the team depends heavily on it to display info to the public. So where is the line between its core function and the websites? Let me give you an example:
In Euterpe, we decided to have a multiple input for the musical genre of an event. This is not absolutely necessary for its production, but very important to let the public search for it — actually, it’s critical. Giving the wrong genre to a concert can lead to a diplomatic crisis and debates amongst music lovers, specialists and artists. That’s why, even if people from the production department can add a genre for their events, the final call is made by the head of communication, who could decide to change it or add additional genres. Part of their job is to browse the entire season each year and add at least one genre to every concert.
Trouble is: if you forget to give a genre to an event, it won’t be displayed on the portal if the user is actually searching by genre. That’s why we had to implement in Euterpe reports of missing information which would give us a list of potential problems with certain events. Yes, Euterpe is actually capable of telling on the head of communication. I love that. 🙂
Technical specifications
Euterpe is based on an SQL database and the web app is built with HTML5, CSS3, Javascript, jQuery and ASP.NET
Originally published at www.ventrebleu.com on September 13, 2008.
