After months of hard work we’re very pleased to announce (drum roll please…) our brand new home page!
We wanted to make it much clearer how vzaar helps businesses make the most of their video content. Redesigning a home page is no easy task, so I thought I’d tell you a little about our approach to taking it on.
What was the process behind the new homepage?
Three words: User Centered Design (UCD).
This process puts user experience at the heart of the design. And it has 4 main stages: define the problem, ideate a solution, prototype and test the designs. We had a LOT of work ahead before we could even think about opening Photoshop or writing one line of code.
1. Defining the Problem
Before we could even begin to develop any ideas we needed to be clear about what we were trying to achieve. We asked ourselves lots of questions:
- What are our objectives?
- What information needs to be on the page to support our objectives?
- What information doesn’t need to be on the page?
- What’s the hierarchy of information?
- What metrics need to be benchmarked for us measure success?
- What are our customers looking for?
- What makes vzaar different?
And much, much more.
We spent hours (and hours and hours…) looking through our data trying to identify our customers needs and what problems we needed to solve. To do this we used five different techniques:
We collated all of our customer feedback – surveys, case study questions, support tickets – to try and identify common themes: what do our customers like about us? What don’t they like? And what do they tend to be confused about?
Sales and support are at the very front lines of our business. They work with customers every day, listen to their feedback and find solutions for them. They are an absolutely invaluable source of data so we carried out interviews with the team.
We then put together a questionnaire to send to the rest of the team. The aim was to identify our strengths, our weaknesses and also get a sense of the personality we wanted to communicate.
We used in page analytics to find out where visitors click once they hit our home page. We wanted to discover the important areas we should emphasize. And we actually found something really quite interesting. The vast majority of visitors went to the pricing and features sections. In fact, less than 10% of our visitors were clicking on the other sections in our main navigation.
“Home page redesign” is perhaps a reductive title. The home page doesn’t operate in isolation. All of the choices we make here have a huge impact on the rest of the site. For example, from our in page analytics we found that a lot of traffic went through to our features pages. This is a hugely important section of the site for us, so we decided to carry out some user experience testing.
One of the simplest – yet most effective – user experience techniques is Card Sorting. We wrote all of our features on cards and asked users to sort them into logical groups. Here, we were aiming to identify the best way to organise all of our different features, what to call each group, and which aspects were confusing – or even irrelevant.
- Identify your goals
- Be open minded. Just observe and engage users. Your assumptions may be misconceptions and stereotypes. A lot of the most valuable data we got was qualitative: from the discussions and questions that came up during the task.
- Implicate the team in the design from the beginning. Everybody has an interesting point of view and should be part of the process for getting the best results.
- Look for patterns and ideas that emerge across interactions with users.
So what did all this tell us?
When we analysed our customer and team feedback it quickly became clear that our existing home page (and surrounding pages) didn’t communicate our most valuable features, values and character clearly enough.
We also needed to reorganise our navigation. The analytics data very much confirmed the idea that “less is more”, so one of our main goals was to clean up and improve the hierarchy of the content, workflow and structure.
Phew! Now, could I open up Photoshop?
Now it was time to transform all of our discoveries into meaningful insights that we would then use as a structure for brainstorming and generating new ideas. We wanted to tell a story to describe who we are, what we do, and why we are a great service.
This stage was very fun and enlightening. It allowed us to highlight the concepts that we couldn’t miss, and identify additional pages that needed to sit behind the home page in order for us meet our objectives.
- Keep it visual. Capture the ideas in a board. Sketching ideas….
- Go for quantity. At this stage we wanted to find as many ideas as possible. Don’t put pressure on yourself to find “the one” straight off. Sketch out any and all ideas that come to you – there’s nothing more intimidating than a blank white space.
- Discuss and encourage wild ideas. Even if you think an idea is silly, there could be a spark of genius in there waiting to be teased out.
Prototyping and Testing
Now we needed to create something tangible. For me, it always helps to first sketch some ideas on paper. I find it’s a quick way to test out lots of ideas.
After many (many!) drafts we were close to our final version. We built a high quality prototype to share, test and discuss with the team.
- Manage your ego: as a designer it can sometimes be difficult to accept criticism. But keep in mind that it’s constructive. Everyone in the team wants the best outcome.
- Don’t forget the context of the business: we all have budgets and time constraints to handle. Don’t forget your resources while you’re in pursuit of perfection.
- Be passionate: there’s a reason you’ve made the design decisions that you have. Pay attention to the little details and be prepared to give reasons for your choices. The beauty of this approach is that it gives you plenty of data to justify your designs.
Our website is constantly developing, there’s always things to test and fine tune. And fine tune we will.
We hope you like what you see! Please do leave feedback in the comments below :)