Coolblue

UI & UX Design

Imagine, design and develop a working prototype which matches to the expectations of the Coolblue consumers by linking their perception of the online and the offline retail channels

- Initial brief

As an introduction to the project, the Coolblue Present project was created by the dedicated team of HWNO. HWNO was created by Robert van Klinken, Kimberly van Meel, Jasper van Es and Rob Voets. Initially Rob was responsible for the process of creating an initial concept and for maintaining the global planning. During ideation and discovery phase, he guarded the concept and was the face of the team

during client meetings and pitches. After the agreement of the concept, he skewed his focus to an inspiring and leading role for both the interaction design (in cooperation with Kimberley van Meel) as the visual design (in cooperation with Robert van Klinken). During this creation phase he lead the art direction in cooperation with Robert van Klinken.

THE PROCESS AND WORKFLOW

Coolblue is renound by it’s exeptional service and customerservice. Their goal is to surprise and amaze the customer, delivering a smile after each order; it’s no coincidence that they received numerous of awards for both their online retail platform as their customer service.

“Imagine, design and develop a working prototype which matches to the expectations of our consumers by linking their perception of the online and the offline retail channels”Our goal is pretty simple: deliver satisfied customers!

THE PROCESS AND WORKFLOW

Imagine yourself in the following situation, you are attending a birthday but you have no idea what kind of present to get. It’s a difficult choice, finding a perfect present. Especially considering the variables like the contributing amount people, the personality of the receiving party and the budget. In this situation lies an opportunity to surprise and amaze the customers by linking them with Coolblue’s specialism

WORK HARD PLAY HARD

The team occupied an improvised space of the fourth floor of the Rotterdam University where they got inspired by pumping tunes and a lot of Fussball to push the boundries of the problemstatement.

1. DISCOVERY PHASE

To gain more knowledge about the audience, we visited both several Coolblue branches as the Coolblue HQ to talk to the audience and get to know their key values.

2. IDEATION PHASE

We created three distinct concepts, all approaching different frames. These concepts were narrowed down to the “Present” concept. This concept was refined throughout the process.

3. REALISATION PHASE

After the ideation Phase we realized this concept by creating the interactions and iterating on the designs. After several client meetings we were allowed to prototype it into a product.

Talking about the client

Vincent is a Senior Visual Desinger working at Coolblue since 2008, he was the lead designer on the redesigned brand guidelines 

Art Director Joost is the main client and our contact into Coolblue. He is the main lead on all visual expressions of the brand

FLEXIBLE

The collaboration between us and Coolblue was really open and laid back. Due to the connection between the client and the team we were able to work very efficient and focus on the more important aspects of the project. During the realization phase, both Robert and I worked remotely at the Coolblue office, to be able to iterate quickly and colaborate closely with the Coolblue team.

A QUEST FOR FEATURES

Using several different research methods, we took the problem and thouroughly explored each frame of it. This made the Present project fully suit the needs and wants of the audience in all it’s aspects and featured.

ENDLESS WIREFRAMING

To optimize the experience of picking and ordering the products, more than 150 wireframes and sketches were created. Every step in the journey has been iterated on to create a efficient but still engaging experience. This was done with the feedback and insights gathered by our field research.

FINDING THE PERFECT PRESENT
EASILY & SEAMLESSLY

stepssteps

SETTING A VISUAL DIRECTION

Initially we set a visual direction focusing on bold imagery took full advantage on the (then) recently introduced iOS7, this was done to focus on the visual experience around the visual cues of personal events, powered by the media provided by Facebook Events. But during the process, together with the Coolblue team we came to the conclusion

iphonesVisualiphonesVisual

PREFERRED INTERACTIONS

To break the static paradigm lead by the web design and the old iOS styles, we focused on using a wizard approach backed by storytelling to create an interactive narrative for the experience. To increase the ease of navigation, the experience was mostly based on swipe gestures and interactions

ONEMORETHING

Inspired by the custom postcards Coolblue uses to surprise their customers, we created an online mobile platform, comparible with instagram, where every member of the story can add their personal (video) message to congratulate the receiving party. These videos are hosted on the Coolblue servers and are accessible through an unique QR code or NFC chip embedded in the post card.

LUCK OF SKILL?

The Present project was well received by the board of Coolblue and is currently being used as inspiration and as guidelines to recreate Coolblue's workflow and as inspiration for more outside of the box solutions to surprise their audience. This project was based on a combination of hard work and research but also on a bit of luck. Even though all our (design) choices are backed by insights and research, most of our ideas and concepts were created when playing Fussball or during social activities.