-
OolaMoola
Recently we’ve launched a blog OolaMoola for our client Hearst Digital.
The blog is about how to live a fabulous lifestyle on a low budget. It consists of challenges that are taken by our creative and very determined editors StylishMoola and BirdyMoola, who know exactly what they want: get the best for less!
As a Made By Many designer, I’ve created more than a few blogs so far, however designing OolaMoola was a new & fun experience altogether.
Ok, so I guess the best part of it was that there was hardly any brief. There were no major constraints nor specific requirements. All I was asked was to create something inspiring, something that looks fresh and fun, and something that gives users a positive experience.
To get some inspiration I looked at creative magazines (i.e. 4Talent, idn) and some design websites (i.e. designspongeonline.com, weebirdy.com). I started collecting together all the interesting elements that I found: images, textures, graphics, illustrations, fonts etc.

At that point, I knew what sort of look and feel I was after. I wanted OolaMoola to have a magaziny, crafty, hand-made look. To achieve it, I did the following:
- Logo – cut out letters from magazines

- Background colour – scanned magazine page to achieve the paper texture

- Illustrations and graphics – collages of photos of my friends and hand-drawn/mouse-drawn graphics

Here’s the final design I’ve come up with:

I really enjoyed designing it, and I love reading the blog now. You can’t get any better than that!
-
How can we present our work?
We’re in the process of redesigning our client pages and have noticed a trend where poster designers take a photograph of themselves holding up their work. Here’s an example of our own Metrotwin poster excellently demonstrated by Julia:

How about if web designers displayed their work in the same way?

What do you reckon, start of a new trend?
-
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.
-
A Rails Security Flaw – Destroying The Audit Trail
Recently Rails 2.3 was released, with a number of new features.
One of these was the ability to set the created_at/updated_at time-stamped columns manually. Now, why anybody would want to do this currently escapes me – but that aside, those columns are now attr_accessible.
This means that anybody can set them by manually editing the forms on your site, so you can’t trust them to be correct. Your audit trail is no longer valid.
Now, you may argue that it’s a simple matter of setting those columns to attr_protected in the models. However, how many people do you think will remember to do that? Especially when you’re upgrading pre 2.3 apps.
I’ve talked to the Rails core about this issue, but they’re reluctant to make created_at/updated_at attr_protected by default due to api compatibility problems.
In any case, you can fix it yourself by putting the following script in config/initializers:
-
Branded Utilities wiki
I’ve been thinking of the concept of branded utility, and brands being useful, good or nice for some time. Then I thought it would be useful to collect examples of brands that actually have been useful, because that’s where the future lies. An explanation of this (if it sounds a bit cryptic) and a list of the examples I found, are in the Branded Utilities wiki I created. If you know of any examples to add, please contact me via the email address mentioned in the wiki.
I hope it proves to be a useful resource.
Remember, it’s software. To most above-the-line folks software is a black box. You put great ideas in one end and disappointing stuff (compared to their inflated expectations) comes out the other end. The black-box model treats technology as a kind of grubby witchcraft. There is little or no idea of relative complexity, cost, resource or time implications of building the software to make the great ideas happen. 


