Musicians’ Union website

Helping the MU to help their members

The challenge

The MU came to us with the aim of streamlining their membership signup process and updating the look of their site at the same time.

The solution

Through prototyping and testing a series of options with real users, we provided a refined experience for new members, and refreshed the overall visual design.

Page template examples

The process

This project consisted of two (admittedly closely-linked) parts, but they were tackled alongside one another to make sure that changes to the site made in one, didn’t affect the other.

Taking an in-depth look at the signup process

Over a number of years, signing up for the MU as a new member had become rather long, and we were briefed to refine the process into as few steps as possible.

To do this, I worked closely with UX architect and strategist Darren Amer, who identified the key pieces of information required from the process through discussions with the MU team.

mu_join_process

Sketching to define the various steps in the process

Once these had been identified, we both sat down for a collaborative sketching session, to group the necessary fields as logically as possible, split the groups into a handful of thematic steps and identify two variants to be tested.

I then took our ideas and some early design elements from the visual design work and produced a responsive HTML prototype. We then tested it in a series of rapid research interview sessions with both existing and new members.

One of the screens we tested with users

One of the screens we tested with users

As the brief for the project specified that the site should be responsive, we included large, easily-tappable form elements and tested the pages on a range of devices.

We also placed a prominent progress bar at the top, to give potential new members a very clear idea of where they are in the process.

Adding a highly-visible progress bar

Making the progress bar prominent to set user expectations

To make the testing more realistic for the participants, I wrote a short snippet of Javascript to ensure that the personal details they entered were remembered from page to page in the testing process. These were then displayed in full on the summary screen to make sure we were testing the page with accurate content and not confusing the participants with unfamiliar dummy data. I’ve written about some of my thoughts surrounding this in a post in the experiments section of this site.

From the testing process we learnt that some of our messaging around choosing multiple instruments was ambiguous, and the length of the suggested instrument list was proving a sticking point for people trying to complete the process, so we took these things into consideration when refining the designs.

Updating the visual appearance of the site

The other half of the work involved updating the look of the site. In their print collateral, the MU had very successfully used their brand assets to craft a very strong and easily identifiable aesthetic, but this wasn’t being replicated on their site.

Taking a lead from their brand guidelines and existing print materials, we identified that larger type, more confident use of photography and a richer colour palette would tie the two more closely together.

Screenshot of the join page

Using type and photography more confidently to match the print brand

In addition to this, web typography had progressed significantly since the previous site was built, and New Rail Alphabet (the MU’s brand typeface) was now available for use online.

To keep things consistent, we produced a series of responsive components, which were then used to create around 10 different page templates to accommodate the different types of content that the MU provide on their site.

Interface components

Examples of interface components

By combining component-based design with prototyping I was able to sit in meetings with our client, listen to their concerns about the site and directly explore solutions for these using the latest front-end code. This allowed for much faster decision making and realistic expectations for both parties of what we could achieve in code.

Responsive table component

Components which we refined by deciding in-browser

Sticking with the musical theme:

  • design, typography

    Leeds College of Music dynamic identity

    What does your music look like?

    Read the case study