LOVEFiLM homepage redesign

The previous home page had grown organically over the last few years and hadn’t keep up with how the business has developed. Since the last major update LF have launched a new magazine section, cinema listings and video on demand – none of which were highlighted on the home page very well. Many pages of the site have also been updated to a new, more visually appealing look and feel, which now needed to be echoed on the homepage.

There are 3 key parts of LF’s service offering that needed to be showcased on the home page: rental, video on demand, cinema listings.

We started by brainstorming different ways of explaining and unpacking LOVEFiLM to new customers. Although we came up with lots of ideas, there were 3 approaches that stood out:

1. All at once

• the simplest approach
• gives equal prominence to each service offering
• presents service offerings in 3 columns across the page
• uses real content to sell each offering
• clear call to action to sign up

2. One at a time

• uses tabs to devote more attention to selling one service offering at a time
• clear sign up area on the right of the screen

3. Different importance

• dynamically varies the amount of space devoted to each service offering
• highlights and prioritizes different services at different times
• more complex, rich, interactive
• the user can rollover each area to find out more

Although the client liked all 3 approaches, we agreed to go with the first approach, which we found to be the most successful in terms of explaining the service.

………………………………………………………………………………………………………………………………

‘Sketching’ in Photoshop

I started sketching the page in Photoshop – not worrying about the look and feel yet, just laying the elements on the page to see how they worked. This simple exercise allowed me to see immediately what worked and what didn’t.

• The black background gives the page a cinematic look
• The presentation of the three service offerings looks too similar, it’s hard to tell what’s being sold when they all look the same
• The watch now/rent/buy/book seat buttons (which are crucial to each service) feel as if they are floating underneath the film images and clashing against each other. This is what I decided to tackle first.

………………………………………………………………………………………………………………………………

Refining the film elements

To refine the floating buttons underneath the film images I tried few different versions:

• include the buttons together with the film title into one panel
• simplify the buttons by making them links

However, the buttons still looked to complex and difficult to read. To simplify it even more I thought of doing the following:

• change the shape of button to rectangular
• stretch it across the width of the image
• tone down the colours to make it work against the black background
• overlay the title of the film on top of the image

Result of these few tweaks was great. Simplifying the button shapes made the page and the content clearer and easier to scan.

………………………………………………………………………………………………………………………………

Designing, version 1

Finally it was time to start the real design!

• I made the ‘Start free trial’ area a wavy shaped to avoid the design looking too blocky
• used the style developed above for the film images and buttons
• made the headers of the 3 service offerings stand out of the page more

However, the page felt as if it’s lacking focus, and the all important free trial area felt very dry and lacked attention.

………………………………………………………………………………………………………………………………

Designing, version 2

• although the black had a lot of impact, we decided to change the background colour to light grey for more consistency with the rest of the site
• added packshot images to the ‘Start Free Trial’ area to help attract user’s attention

Results:

• design looks much cleaner, easier to read and scan
• although the different coloured buttons help reinforce that there are 3 different service offerings it is not enough to be able to quickly scan the page and understand clearly the different offerings
• page lacks the focus
• we also felt that we needed to bring some content up to the top of the page, a flexible area that would allow LOVEFiLM to promote sign up, films etc.

………………………………………………………………………………………………………………………………

Designing, version 3

• added a new feature panel that would give LF the flexibility to promote sign up, films etc.
• moved the top panel ‘Start Free Trial’ to the right hand side as a results of introducing the feature panel at the top

Results:

• the feature area brings the page focus and attracts user’s attention
• page looks exciting and engaging
• new format of ‘Start Free Trial’ panel looked cleaner and nicely structured
• the presentation of the three service offerings looks too similar, it’s hard to tell what’s being sold when they all look the same
• the page begins to come together as a coherent design

………………………………………………………………………………………………………………………………

Designing, version 4

• We reduced the height of the feature panel to get the service offerings up the page. We wanted to make sure that all the key content elements will be visible for someone using a small monitor – IE7 with lots of toolbars that take up space.
• removed the ‘Rent & Buy’ panel. We decided that ‘Start Free Trial’ panel and the feature panel at the top were enough to highlight the rental service
• redesigned the other service offerings ‘Watch online’ and ‘Find a cinema’ to give the page more structure, make them look different from each other, add in some useful functionality

Results:

• Page looks balanced and in focus
• Easy to scan and understand
• Service offerings are explained in simple way

………………………………………………………………………………………………………………………………

Finishing the homepage
Now that we’d successfully tackled the most difficult part of the page – the area that’s the key in acquiring new customers, we went on to the rest of the page. This was considerably easier because having designed the product pages, on demand service, etc we could reuse the existing styles. Also wireframes and discussions with the client helped us quickly prioritize what went where.

Here’s the end result. Check it out!