Behind the scenes of LOVEFiLM’s new product pages

We’ve been working with LOVEFiLM for some time now. They’re a very exciting client whose business model is built around the internet. They’re also a very successful client, having just passed 1 million subscribers to their DVD rental service.

One of the projects we’ve been working on recently is the redesign of their film pages. These are absolutely at the heart of the service – they contain all of the information about each title that LOVEFiLM has, including user reviews, recommendations, interviews, news stories and cinema listings. Seeing as LOVEFiLM have over 65,000 titles on offer it’s important that they work hard.

Rather than simply showing you the great work that one of our Senior Designers, Julia, has created, I thought it might be useful to show the process behind the project…

1. Requirements wall

Our first step on this project was to get under the hood of the current site. Using the existing film pages as our starting point, we collected together all of the content, interactions and functionality in one place.

This ‘wall of requirements’ allows us to see everything in one view and therefore helps us gain a better understanding of the problem. The process of breaking down the site, freely annotating and then rearranging and grouping components together is invaluable.

Having a physical representation of the problem we’re trying to solve also makes it easier to talk around. It’s not long before a requirements wall becomes overlaid with layers of notes, questions and answers – either from ourselves or from the client.

---

2. Block diagrams

Once discovered, the finer details then allows us to take a step back. Rather than being constrained by details, we now want to open things up and explore a wide range of approaches.

Assigning a colour to each block of content (purple = video player, light blue = user reviews, cerise = pack shot etc) we then used Keynote to create a series of block diagrams.

The simplicity of these diagrams allows us to experiment freely with a wide variety of layouts, without being constrained by time. Keynote is a perfect tool for this approach – we can be creative, quickly.

We then reviewed these layouts (and an analysis of the competition) with the client. The consistent colours across all the layouts makes it easy to compare the relative merits of one approach against another.

---

3. Photoshop design sketches

Once an initial route had been chosen we start sketching the page in Photoshop. Whilst it may feel unfamiliar to hear the term sketch used in conjunction with a program known for producing highly polished, finished designs, sketching is exactly what we’re doing.

At this stage we’re not excessively worried about the look and feel, or the details being pixel perfect. It’s all about getting the design to a sufficient level to prove that the chosen approach works and feels right.

Sketches are created by laying out the new page using found elements and elements of the existing site to save time. Only elements of the page that are specific to the new approach are created from scratch. This ‘just enough design’ method allows us to get to a working proof of concept as quickly as possible. We can then get feedback from the client and continue to develop the page in an iterative way.

---

4. Detail exploration

As part of the design, we also wanted to introduce a new type of interaction metaphor that hadn’t been attempted on the existing site. (In this case, using an accordion to hide and reveal the different options for renting, purchasing and/or watching a film).

As this functionality handles some of the most crucial interactions on the site, we wanted to elaborate our thinking here to prove that the solution would work. We created a series of comps we could use for testing that showed off the interaction and all the different data sets the accordion would have to handle.

It’s important to note at this stage that the designs we’ve created are still not branded. The designs are polished enough to prove their viability, however, not so polished that we can’t make changes quickly based on the client’s feedback.

---

5. Sketch and fail fast

As is often the case with the design process, as the screens become more real so does the understanding of the project’s requirements. Sometimes the very process of design can also uncover requirements that haven’t been fully expressed before.

Although change can be intimidating, we embrace it. One of the joys of sketching is the ability to visualise ideas quickly and, if necessary, fail fast. By concentrating on idea generation and then adding sequential layers of look and feel, we’re able to adapt and change quickly.

In this case, as well as our own sketches, the client created some of their own to try out a new idea. This was then added into the designs we’d created so far.

---

6. Production designs

Once the route had become firmer we started to turn the pages into production designs. As you can see from the above image, the design now begins to take on the shape of LOVEFiLM. Although the look and feel has been at the back of our heads throughout the entire design process, here it really comes to the fore. For example, the black was introduced as a background colour to help the video player feel more cinematic.

Regular meetings with the client team helped keep the project running smoothly – both to review progress and to collect any specific, detailed requirements and feedback. These continual review points also meant that we were able to hand over the screens in batches throughout the production design phase, rather than in bulk at the end.

---

7. The streaming player

The page also includes a streaming media player for trailers, interviews and films. It was very important that this was integrated fully into the design – both from a functional and visual perspective. Using wireframes and requirements from the client, we designed the player at the same time as the film page.

The designs for the player included all of the rollover states and interactions, such as dialogue boxes and ‘more like this’ recommendations screen that appears at the end of each trailer. These were specified fully and then handed over to another development agency to be built.

---

8. Specification

AJAX overlays, message boxes and different rollover states were specified for the film pages as well. Whilst this can be a laborious process, it’s often in these small details that the design comes alive – those finishing touches that can seduce a user into falling in love with a service or product.

---

9. Build, test, iterate…

The new film pages have been live since the middle of March. (The screenshot above is a pre-release design that uses German for the tabs – the new pages also have to work in Danish, Finish, German, Norwegian and Swedish as well as English.)

As with all agile projects, new iterations are planned for the future, as well as rolling in any feedback and comments from LOVEFiLM’s active community of subscribers. Hopefully, we can continue to share the process with you as it happens.