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.
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.
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.
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.
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.
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.
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.
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.