At the start of the year with lockdown looming for a further few months I was given the task of designing a new homepage for HeadBox. This is a project I’ve wanted to tackle since my first week at HeadBox and had been patiently waiting to do/bringing up whenever I could.
My initial criticism of the old HeadBox homepage was, “Where are the people?”. The page had beautiful venues, don’t get me wrong, but my argument was that you don’t walk past an empty bar or restaurant and think… it looks good there.
So with every designers dreaded brief to make the homepage “pop”, I set about designing a new homepage that will see us out of the enforced hibernation of the events industry and into a brighter future for events.
Designing an effective homepage
Alot of emphasis is put on the homepage, but it is not the be all and end all. I find it useful to imagine a homepage as a hotel reception, it’s an essential part of the hotel, it welcomes you and sets your expectations but it’s not where you want to stay. It is a step in the user’s journey and not the destination, as such, it needs to clearly show them to where the next step of the journey should be.
Companies (read HeadBox) can be guilty of trying to put the whole hotel on the homepage. It’s an easy trap to fall in to. So it was important to set the goal of the homepage and really focus on that. What is the main thing I want my visitors to do after they see the homepage? Submit a brief. Ofcourse, there are going to be other uses of the homepage but you have to design it with that one main goal in mind. Otherwise you are dividing the users attention.
So with the less is more principle in mind I went about removing all the unnecessary distractions and focus on a simple design that is relevant for users with clear messaging.
Workshopping the homepage
Now the purpose of the homepage had been defined it was time to get the post-it notes out and invite members of the HeadBox team to bring their ideas to the table. It was important to get a wide range of ideas for this project as alot of stakeholders around the company have strong views on what the homepage should look like and do. I started by creating a company-wide survey and then running a more focused workshop.
The Book Jacket exercise
We started with the Book Jacket exercise to kick things off. This is a great exercise as it really helps everyone in the room define:
– What HeadBox does.
– How that benefits the user.
– How we delivers on those benefits.
All too often companies are guilty of putting everything online and let the user work it out!
Wireframing
We then went about wireframing to get lots of ideas from the team. Wireframes are low fidelity sketches that are quick and easy to produce, they generate lots of ideas, engage stakeholders, avoid costly mistakes and improve communication.
Designing the homepage
Once I had the wireframes it was time to design, using everything I had learnt about the messaging we wanted as well as the content that was necessary it was time to create some layouts. This was fairly easy as we now knew what was important on the page. I created a few iterations until it was decided what content should go where.
Fairly early into the design journey it was decided that an illustration would work best as a hero image. I went in search of inspiration, in the cold and dark January in lockdown, I was imagining hot summer days where we could be outside socialising with friends. I looked at classic early 20th century travel posters and more modern campaigns that emulated that style.
I decided I wanted to set my imaginary scene on a rooftop as it would frame the functional aspects of the homepage nicely. I then went about imagining what people would be doing on a rooftop once they are allowed to see each other again, greeting one another, enjoying a drink and ofcourse taking selfies. I played around with the composition and colours alot until I was happy with it and presented to the key stakeholders – luckily they loved it as the illustration had turned into quite the labour of love.
Building the homepage
Once the design was signed off it was time to build, this is where Jolanta came in, she had been on the project from the start, giving her ideas in the initial workshops. She built the page in no time on a new tech stack, there is probably an entire blog in how she did this so quickly, and with a few small tweaks it was ready.
For me there is no greater joy, as a designer, than taking being able to interact with a previously static design that a developer has brought to life.
Go check out the final homepage here.
