SUM

Project management – UX design – Front-end development

Here’s a little site that I’ve done for an association on the side.

Context

This association called SUM started as a rehearsal studio, but soon started to offer music lessons and recording sessions for musicians, from amateur to pro.
I used their space with my band, General Purpose, and offered to help them with their website.

Knowing their audience

So, I took the plunge and started the project like you’re supposed to do: by getting to know their users, even if I was one of them in the first place.

I organized interviews at one of their public events and conducted an open card sorting, while they sent out an online survey that I made with Wufoo in their newsletter.

I also talked with the team and give them the feedback of the interviews and my recommendations so we could decide on the architecture of the site.

My recommendations included:

  • a recap of their context
  • a value proposition
  • definition of the objectives of this redesign
  • the audience targeted (with creation of personas)
  • a content strategy (messages, tone, work flow, by channel strategy, SEO, etc.)
  • graphic design principles (somewhere between grungy/rock/casual but also pro and dynamic)
  • and finally the list of the expected features
sum-personnas

Personas (SUM)

Technical specifications

After doing some research, I choose to use Joomla for the CMS of this site. This decision was taken because I needed a CMS that would allow easy changes in its templates and structure, but still one that was easy to understand for any given user, with good resources in French.

The website was built using HTML5, CSS3, SASS, COMPASS and Gruntjs and is responsive.

All sketches were made in Photoshop.

Interesting things about this site

Images

I wasn’t in charge of the content of the website, with the exception of finding a good solution for showing the studios spaces.
I came up with an idea of a 360 collage of pictures of the studios, so I shot the pictures with the help of David Jarry-Lacombe as my model and then used a lot of Photoshop to create the Rock n’ Roll collage that you can find of the website, with big heads of famous musicians to boost users’ ego! 😉

Map

You might know this but the musical world is very messy. Everything is complicated, if not impossible to do. Getting everybody on time at the rehearsal studio is definitively one them. So to contribute and help, I placed a map of the studio in the footer of the website – because that’s one of the reasons users will go to it.

Music

They wanted to be able to offer to their users a playlist of tunes made by the musicians who rehearse there and they were already using SoundCloud. So after some research, I put a SoundCloud widget in a good old pop-up window. Not the most professional way to address that problem, but it worked for them and didn’t disturb their habits too much. Plus they were able to use all the services that SoundCloud can offer. Sometimes you don’t need to go to far…

Some screenshots