CHALLENGE

3+ is a leading Swiss television channel that broadcasts a number of popular series, blockbuster movies, documentaries, sport events and a few of 3+’s own productions, the most famous being “Bauer, ledig, sucht…,” a reality show that helps Swiss farmers get connected with potential wives.

The channel required a full re-design of their website to improve the presentation of their shows and consequently attract more visitors online. This also implied changing the underlying structure, logic and back-end to be able to handle massive amounts of content in a user-friendly way.

Spoiled Milk was chosen to complete this project.

 
SOLUTION

The design phase was solved outside Switzerland in our Danish premises and one may argue that the new design has a touch of the Nordic light and simplistic tradition. Design of the ‘Programm’ shows was completed by 3+ themselves securing them the ideal schedule representation.

The choice for the back-end of the website ended up being Drupal, which proved capable of handling numerous templates and pages in an easy-to-handle manner.

Today, 3+ is equipped with an exciting, vibrant and visually stimulating experience that parallels the essential entertainment value of television. Check out their cows, farmers and supermodels here: 3plus.ch

Recently, Casper Hübertz and I were interviewed for Agency Future.

The project was born when Aaron Bateman – English-born copywriter living and working in Copenhagen – won a travel grant to document emerging business ideas and models in the global advertising industry.

We were asked to tell the story about Spoiled Milk, what agency we wanted to create, how we work differently from other agencies – and how we see ourselves evolving.

Have a read here.

CHALLENGE

Schauspielhaus Zurich is with more than 150,000 spectators annually one of the most important cultural institutions in Switzerland. The theater has 260 permanent employees and an ensemble of 30 actors. Each season they have 25 new productions plus guest performances that result in a total 600 performances. Artistically, the theater aims for balance and diversity, young and seasoned directors, great classics and new materials. In short, Schauspielhaus Zurich is open to a large theater scenery.

In the spring of 2010, the theater was ready for a complete revamp of their website and started a pitch round. On their specifications list, a number of things stood out: Design should uphold an emotional side, better integration of images, a touch of drama; the functionality should support the users; the back-end should maintain a strong sense of flexibility for content editing and the ability to implement a webshop; social media should play a role.

Spoiled Milk won the pitch round and happily took on the project.

 
SOLUTION

To kick off the project, Spoiled Milk settled the grand information architecture in close collaboration with the client. Subsequently, we brought in the talented designer Stephen England to work on the design screens – naturally a sensitive process when the client happens to be an artistic institution. Also consulting in this phase was the Cornel Windlin Studio.

Having nailed the design, we coded the front-end of the website in CSS/HTML/JS and applied Flash for the background images. Meanwhile, we structured and coded the demanding back-end web interface from scratch applying our in-house developed CMS framework Casein. The reasons why we chose Casein for this project were the complexity of the site and the client’s expectations to the CMS usability. We also implemented our own webshop module to fit the exact requirements laid out by the client.

We are truely thrilled with the result of the new Schauspielhaus Zürich website. And according to the client’s Artistic Management Director Tom Till, so is Schauspielhaus Zürich: “The great digital agency Spoiled Milk has through their concept, design and technical implementation shown us the path to the future of the Internet.”

Enter the world of drama at schauspielhaus.ch

CHALLENGE

These days, it seems the election campaign is never-ending. Constant communication flooding whatever channels the political parties have available. And you always end up impressed, when politicians manage to step everything up one gear, as the campaign settles into the final phase leading up to the actual vote.

In Denmark, the Prime Minister is forced to call a general election within the next year. In theory, it could happen any day now, and the political parties are rearming themselves. This includes the Danish Social-Liberal Party (Radikale Venstre) – a fraction formed in 1905 with roots in Cultural Radicalism.

Armed with the dominating slogan ‘Tag Ansvar’ (take responsibility), the Danish Social-Liberal Party is emphasising their perspectives on economy, integration, education and EU. The campaign runs on outdoors posters and has an online campaign website. Spoiled Milk was requested to do the latter.
 

SOLUTION

The main purposes of the campaign website were firstly for the Social-Liberal Party to communicate their political messages to voters, press and other politicans, and thereby seek to stir up a debate. Secondly, the Social-Liberal Party was looking to raise funds for the election campaign ahead and generally attract new party members and Facebook followers.

Initial wireframes were laid out by the Social-Liberal Party based on design from Parris Wakefield – a UK design agency – and handed over to Spoiled Milk for web-oriented design. The briefing was clear: Keep it clean and simple with comprehensible navigation. For the back-end, we’ve applied the latest version of Wordpress.

Currently, all traffic for radikale.dk is redirected to the campaign site at tagansvar.radikale.dk. Go and have a look!

Spoiled Milk recently created a Facebook campaign in collaboration with Scholz & Friends Basel for a pet chain store named Fressnapf Schweiz.

This application is a platform for pet owners in Switzerland to submit a picture of their pet, which then enters into a competition where, through voting, the cutest animal is determined. The winner receives free animal food for one year.

Design and concept was done by Scholz & Friends Basel and production was by Spoiled Milk.

So far, the campaign has been hugely successful with 7,542 “likes” and counting.

Got a pet and live in Switzerland? Want free food for him or her for an entire year? It’s not too late to submit a photo and enter the competition: Fressnapf Schweiz Facebook Application.

Don’t have a pet? Check it out anyway. There are tons of adorable critters to swoon over.

The world’s best restaurant Noma lies in Copenhagen. To pay tribute to the achievement and generally steer attention to Copenhagen’s restaurant scene, Politiken’s Travel Guides chose to release a mini guide for the best gastronomical adventures to be had in the capital city of Denmark.

Noticably, the publisher chose not to sell the guide book in print. Rather, they requested Spoiled Milk to produce two variations of the book as iPhone applications: One in Danish and one in English.

Both can be downloaded for free until August 14th.

• Politiken’s – A taste of Copenhagen (English version)
• Turen Går Til Smagen af København (Danish version)

Background image by Food Snob.

This new feature offers you a way to change the URL displayed in the browser* through javascript without reloading the page. It will also create a back-button event and you even have a state object you can interact with.

This means you won’t have to use the hash-hack anymore if you want add state to your AJAX-application, and search engines will be able to index your pages too.

So how does it work? Well, it’s fairly simple. In Chrome you write:

window.history.pushState(“object or string”, “Title”, “/new-url”);

Executing this line of code will change the URL to my-domain.com/new-url (3rd option). The “Title” string (2nd option) is intended to describe the new state, and will not change the title of the document as one might otherwise expect. The W3 documentation states:

“Titles associated with session history entries need not have any relation with the current title of the Document. The title of a session history entry is intended to explain the state of the document at that point, so that the user can navigate the document’s history.”

So if you want the document’s title to change to match the title of the history entry, you’ll need to write a hook for that (hint: just tie a function to the onpopstate event). Finally, “object or string” (1st option) is a way to pass an object to the state which you can then use to manipulate the page.

You can programmatically invoke the back-function by running:

window.history.back();

And you can of course go forward too:

window.history.forward();

Or even go to a specific history state:

window.history.go(2);

The object you pass as the first option to the pushState function will stay with each state, so if you go back in the history, you’ll get the object for that state. If you need to manipulate a state (instead of creating a new one) you can use:

window.history.replaceState(“object or string”, “Title”, “/another-new-url”);

Note that while this will change the URL of the page, it will not allow the user to click the back-button to go back to the previous state because you’re replacing the current state, not adding a new one. So, this is the correct behaviour.

Personally, I think the URL should be the first parameter and then the two other options should be optional. Regardless, this feature will certainly come in handy when working with AJAX- and Flash-applications that need state (read: bookmarkable pages and back-button support). Anyone looking to make their Flash- or AJAX-application indexable by search engines so they will get better raking in Google and the likes, should also have a look at this new feature.

The most prominent implementation of this HTML5-feature that I’ve seen is in the new Flickr layout. Here’s an example page (remember to enable the new layout if you haven’t already). Now, if you’re using the latest version of Chrome or Safari and click one of the sets, e.g. “Strobist”, it will slide open and the URL will change but you’ll notice that the page doesn’t reload.

It’s worth noting that Flickr uses replaceState instead of pushState – in other words, they don’t add a back-button event. I’m guessing they feel that switching back and forth between opened/closed sets is too small a change for a back-button event (I’d certainly agree with them on that decision), so instead they just replace the URL so if you copy/paste the link to a friend, they’ll see the exact same page that you did.

Another interesting thing is how Flickr still use the old hash-hack as a fallback if you’re running on browsers that don’t support this new HTML5-feature. I predict/hope that a lot of the plugins that help you easily implement the hash-hack will bake this into their core so people with new browsers can start reaping the benefits.

The latest versions of Chrome and Safari already have support for “onpopstate” and Firefox 4 will have support for it as well. Unfortunately, it seems like IE9 won’t be supporting this feature if we are to believe this Wikipedia article (”Trident” is IE’s layout engine).

Check out the W3 specification for more info.

* For security reasons, you can only change the path of the URL, not the domain itself. So you can change anything in the URL after my-domain.com/[change-the-stuff-here.html].

With a master in geography and glaciology, our new Strategic Intern has highly interesting skills in analysing, managing and presenting data linked to locations. Previously, Attila Frey worked in various companies during semester breaks – primarily in the project management field.

Being one out of six siblings, Attila learned values such as respect, sharing and reliance early on. Further, he grew up with two cultures – Hungarian and Swiss – which lead him to be more open-minded, curious, understanding and also made him a more patient person. Patient in the sense that he accepts how everything doesn’t work similarly everywhere. Attila seeks his balance in hiking, travelling, cycling, snowboarding, etc. In short, a friend of the nature.

His motivation for working in the Spoiled Milk team for the rest of the year is his enthusiasm for the new ways of communicating and interacting offered online. Besides, Attila wants to learn to work with the new generation of project management tools, which have become an integrated part of Spoiled Milk’s internal as well as external communication.

During his internship, Attila hopes he will be able to build a website that allows small and medium-sized enterprises to effectively manage their energy consumption and thereby become “greener”, i.e. offsetting CO2 or getting a label for exemplary energy management.

Attila’s dreams for the future? To find a very simple and effective way to make people care more about the environment. And he adds: “Well, and maybe win the lottery!”

It’s PacMan set in Zürich. But in Nettoman, instead of running away from multi-colored ghosts with googly eyes, our friendly yellow hero runs away from bankers.

Nettoman is a fun and potentially addictive game created to promote Nettobank, the first Swiss e-private bank. The game was designed and produced by Spoiled Milk.

Dodge and eat the bankers here.Tip: Keep your eyes peeled for ETF’s that occasionally float onto the streets; once they’re eaten, the bankers are up for grabs.

CHALLENGE

These days, newly wed couples and recent parents are not finding it sufficient with the family photo albums stacked up in digital folders on the desktop computer. Instead, making the transfer from the digital format to printed images has become highly affordable, convenient and therefore hugely popular.

Spoiled Milk was approached by the photo labs company Ifolor, whose antiquated website needed a completely new idea, concept and design – before rebuilding the underlying system. In essence, the ”job requirements” among others included concept, wireframing and design.

 
SOLUTION

Main emphasis for this project was to move from a traditional corporate website to a consumer-oriented solution with the products at the center of attention. The guidelines became the following: Few number of clicks from frontpage to the product page, excellent presentation of all products, easy flow from product to checkout and purchase, and call-for-action throughout the web platform.

To succeed in this highly ambitious project, user experience became essential: How could we make Ifolor’s website the most visually striking, clearly comprehensible and easy-to-use of all the photo labs providers that exist online?

The process was vital to the nature of the outcome. First, the concern was how to structure the large amounts of available information and offerings. Header, main menu, submenus and footer – all should be balanced. Second, we went into wireframing each and every page template of the website. Third, in collaboration with the client, we arrived at the wording of menu elements, buttons, references, etc. Fourth, the main phase of actual design of templates from grading the menus to detailed pixel correction. And fifth, we programmed clickable HTML/CSS/JS templates of the primary screens for client testing and revisions.

The result is a thought-through e-commerce platform with a tight structure, clean design and greater emphasis on pairing users with relevant products.

Visit the site here.