Food to love

Role: Lead product designer (ustwo)

Outcome: Teaching by building

Moving an Australian icon to the future

ustwo Sydney was asked to work with Women’s Weekly, an Australian icon which has over 10,000 recipes created over the years. The goal was to archive these recipes online in a modern and rich experience. Women’s Weekly wanted to migrate their digital media approach from a traditional print method, which is very deadline driven to an agile practice of continuous improvement. Through the first iteration of a recipe website we shared our process and knowledge.

Working with Mette Andersen we created a 6 week engagement to validate the first version of the product.

Where to start?

Using techniques from the Lean start up we began by creating an assumption matrix to see what was the highest priority to start desiging and building.

Sketching

As a multi-functional team (design / dev / client) we then started sketching. We wanted to be as lean as possible so once we sketched an idea we started to design in the browser and incrementally design and build. We then had some rules to how we would design for a modern experience.

1. Using real content

From the outset we had strict rules to use the real content from the print publications. Even though we were building a prototype we created a database so when we did user testing the content was true to the finished product.

2. Design elements not pages

As we were designing a modern experience we understood users view the product on variety of different screen sizes. So we did not design pages (this would also slow the design process) we designed elements within the page. It could be an article header / navigation / image etc. We then created rules to how this should behave on different devices.

3. Let content travel

We designed elements that could be reused throughout the experience. An element could sit on the search results, the recipe and an article page.

4. Think about motion

We now have the opportunity to push more motion into the web as we are able to add animations with CSS3 and jQuery libraries. Subtle animations can enhance interfaces, giving them character and increasing their intuitiveness by hinting to functions and features; they can help the user better understand what’s going on by giving feedback.

Workshop

We ran a series of workshops to define the brand and what it feels like and looks like.

Incremenal design

The best approach to design in an iterative environment is to incrementally build up elements. Start with a shell then add refinement. We user tested these elements and based on the feedback we received we were able to improve the design. We created a style tile as the reference point for the design language.

Finished product

You can see some of our thinking on the live product*.

*We did not have any involvement in this we just created the building blocks for them to start with.