When we started building Encore back in September, we were fairly confident in our assumptions about how musicians wanted to present themselves online, and we had a very rough idea of how to organise that information.
Over the following months, we received a lot of feedback which guided a series of iterations on the original design, but we both knew that a fundamental redesign was due sooner or later.
Time flew by and as we approached the end of 2014, we decided that the Christmas “break” was a good time to step back from our current profile design and come up with something better, which I’ll run through with you now.
What was wrong with the original design?
Lots of things.
Firstly, the positioning of our “key information” pane on top of our cover photo. We didn’t receive a single opinion on that aspect of the design until I spent a week in Cambridge interviewing various users, and suddenly the same question came up again and again:
“Why is my cover photo obscured!?”
It’s a great question, and given that the majority of photos are framed so that the subject is in the centre, it wasn’t very clever of us to place a vaguely transparent panel right in the middle.
That “info pane” was also extremely cramped, it looked awful when a user added a lot of instruments, and wasn’t entirely readable due to the thin font (Raleway) and background transparency that we opted for. Raleway works well in our logo, but definitely doesn’t work well for body text.
Upon landing on Morgan’s old profile (above), there are a few things we can learn about him at a glance:
- The title and date of his next concert
- Number of followers
- A short biography
- His achievements section
The presence of the “Listen” tab shows me that he has some media on his profile, but I have no idea whether it’s a YouTube video or a Soundcloud player, and it takes me two clicks to actually hear him play.
Most importantly, we have no way of contacting Morgan as soon as we land on his profile, and if we wanted to help musicians get contacted for more gigs, that had to change.
A step in the right direction
The “Send message” button is now one of the first things you see when you arrive at Morgan’s page, meaning you can book him for a recital instantly. (You really should, he’s an incredible guitarist)
All six pieces of information discussed earlier are still present, but in a far more visually pleasing fashion:
- Morgan can now add 500 instruments if he wants to, and instead of spilling out of the information pane, they’ll be ordered in a scrollable vertical list
- We dropped the map marker icon beside his location. Visual cues are great, but this was one was unnecessary.
- Speaking of visual cues, the calendar icon helps convey the date of Morgan’s next performance far more efficiently than just “Tue 7th Apr” did.
- No changes to the number of followers!
- We changed the body font and gave each section a healthy amount of padding to make the content much nicer to look at, and Morgan’s short biography now contains a link to his full bio so that you don’t have to scroll to find it.
- The achievements section is also much more readable. Black text on white is so much clearer than black on grey.
But wait – there’s more!
- We can see where Morgan currently studies, and the RCM icon under his profile picture shows us that he studied there in the past
- The red play icon indicates that Morgan has added a YouTube video, and clicking it takes us directly to the video and starts playing it automatically.
And, of course, his cover photo is no longer obscured! (For the connoisseurs, we’ve also added parallax to the cover photos. Ooooh)
Why let your laptop have all the fun?
20% of visits to our site are from mobile devices, so it’s crucial that we deliver an experience that is just as enjoyable as it is on desktop whilst still presenting information in a clear and natural form.
We used separate mobile templates on the old site which meant that it worked on some devices and broke spectacularly on others, but I’m not going to show you any screenshots of that. It was embarrassing and we learned the hard way. Stay in school, don’t do drugs, and always design responsively, kids.
We’re really proud of how flexible our new design is and have tested it across a range of devices. That said, if you find any problems with your profile on either your phone or your tablet, we’d be really grateful if you let us know straight away.
If you’ve got it, flaunt it
Last but not least, we added public profiles! We’ve always described an Encore profile as a ‘musical CV’, and CVs are designed to be shared outside of your network.
Simply choose a URL before sharing your profile to your heart’s content. By way of example, here’s a link to Morgan’s – tryencore.com/pub/morganbuckley
There are a number of small improvements to the profile design which I’ll let you discover for yourself, and after talking to a lot of composers, we’re currently in the middle of building some special features to let you showcase your works in a really engaging form. We’ll be getting in touch with select composers over the next week.
Oh, and one more thing – we’re launching at our next music college on Monday!
Get ready, Guildhall.