Category Archives: Web & Mobile UX

Visit Holland iPhone App

Client: NBTC
Format: Native iPhone application

Summary: NBTC (Netherlands tourism board) asked us to design a mobile application for tourists visiting Holland. In a workshop session together with the client and with input from research with our target users on Facebook, we explored the opportunities where an app could help a visitor get the most from their trip.

I mapped these ideas out into a “user journey” to help think about what kind of information, inspiration and functionality a visitor would find useful in the different stages before, during and after their trip.

Visit Holland User Journey

Based around facilitating the user in each of these contexts, I developed a concept in which the user is helped to create a personalised itinerary for their visit. The app inspires, recommends and sometimes surprises the user with activities and points-of-interest. Particular attention was paid to the user’s needs during their visit, where offline access to information and maps is a requirement.

I created an application navigation structure and user interface wireframes using Adobe Fireworks and used Apple Keynote to simulate the touch-screen interactions and animated transitions as a way to explain the concept to the client and my team. After the initial concept development, in my role as creative lead, I directed the further user-experience specification, information architecture and visual design of the application.

Visit Holland Wireframes

Role: Interaction design, creative lead

Link: Visit Holland in the Apple App Store

Tommy Hilfiger Linebook

Client: Tommy Hilfiger
Format: Native iPad application

 

Summary: This iPad application is used by Tommy Hilfiger’s European sales force (250 people) as a replacement for the 10kg product catalogues that would be carried around when visiting clients. The app allows browsing, searching and filtering of the entire product range in a fluid, intuitive interface. As well as saving on printing and distribution costs, the tool has been embraced by sales staff leading to improved employee happiness, increased sales and brand image.

Role: Interaction design, visual design (2nd & 3rd releases)

Tommy Hilfiger iPad Sales Tool

NS Spoordeelwinkel

Client: NS (Dutch Railways)
Format: Webshop

 

Summary: Spoordeelwinkel is the new webshop from NS which offers package deals of a day-trip together with a train ticket. Deals are presented in categories: a day out, weekend away, fun & active, culture & music, and leisure.

The customer chooses an offer, purchases online and receives a voucher for entrance together with an e-ticket for their train journey.

Role: Interaction design, creative lead

Press: Marketing Tribute: NS opent Spoordeelwinkel.nl (Dutch)

Link: http://www.spoordeelwinkel.nl

NS Hispeed Redesign

Client: NS Hispeed
Format: Web booking module

NS Hispeed Homepage

Summary: NS Hispeed offers high speed train journeys to national and international destinations. Customer research showed that that users were dissatisfied with a number of aspects of the web site’s booking tool. The extensive redesign provides a quicker and clearer process by leading the user through the steps for booking their journey and making it much easier for the user to find and compare prices, routes and journey times. The checkout and payment flow is optimised to help the user complete their booking.

Role: Lead interaction design

Link: http://www.nshispeed.nl

Interpolis Preventie

Client: Interpolis
Format: Website

Interpolis Preventie - To Do List

Summary: Interpolis, one of the largest insurance companies in The Netherlands, approached us to develop an interactive concept to help engage their customers about the importance of risk prevention and communicate their key message “Insurance is not the only solution”.

Together with the creative director and copywriter we created a concept based around risk-prevention tips. Already existing content consisted of mostly lengthly articles of advice, clustered into the insurance policy categories such as fire, theft and water damage, etc. We took this content and broke it down into a smaller, actionable “tips”, structured into events and activities, such as going on holiday, cooking and moving house – subjects that customers can more readily relate to.

Role: As well as contributing to the creative concept, I developed the detailed interaction design and helped with the visual design. The project was developed using Agile methodology and my responsibility included itemizing user stories and maintaining the product backlog.

Link: Preventie Interpolis

WordPress 3 SEO Book

WordPress 3.0 Search Engine OptimizationI worked on this book as Technical Reviewer, having previously collaborated with Packt Publishing on WordPress and Flash 10.x Cookbook and Papervision 3D Essentials.

The book is extremely thorough and covers SEO in an incredible amount of detail that makes it valuable for any web design, regardless of whether they are using WordPress.

In covers how to develop a SEO strategy and goes into detail about the possible tactics. The inner workings of Googles Pagerank are clearly explained and strategies for link building, optimizing content and code, and social network techniques are all covered exhaustively.

Advice is given on avoiding potential pitfalls such as black hat techniques and how to identify dubious third-party services.

My role as technical reviewer was to check the code samples and correctness of the technical information as well advising on the scope of the content. The book is available now from Packt or from Amazon.

Global Arena

Client: Global Arena
Format: Web Application

Summary: Global Arena asked LBi to redesign their core search tool to make it easier for multi-national companies to assess and compare business locations around the world. My role was to redesign the search interface and optimise the visual presentation of the search results.

Role: Interaction design, visual design

Link: http://www.global-arena.com/en/Global-search-page/#searchparagraph

Heineken UEFA Trophy Hunt iPhone App

Client: Heineken
Format: iPhone App & Facebook game

Summary: LBI Lost Boys created a global location-based messaging campaign for Heineken called ‘The Heineken Trophy Hunt’. In this campaign, fans of the well-known beer brand entered into a world-wide hunt for ‘Virtual Trophies’, which they searched for using their iPhones.

The campaign has made use of the brand-new Repudo technology, where a message, photo, or video can be created and dropped at a real-life physical location. To open a message, photo, or video, you first have to go to the actual spot to pick up the Repudo item. Once it has been picked up from that location, the Repudo disappears and exists only in your phone, where nobody else can catch it. You can then choose to keep your Repudo item or drop it at another physical location for someone else!

Fans of the Heineken brand could search for the virtual Heineken Trophies through the Heineken Facebook Page, where they could download and activate the Repudo application on their mobile phones. The Heineken Trophies were found everywhere around the world, and participants could win a once-in-a-lifetime chance to accompany the UEFA Champions League Trophy to Switzerland and Malaysia.

After brainstorming the concept together with the project team, I set to work with my marker pens to explore the ideas in a series of sketches which helped us present the concept to the client for their approval.

Heineken Concept Sketches

Then using Adobe Fireworks and Metaspark’s excellent iPhone UI toolkit, I was able to quickly put together a click-through prototype in which the details of the interaction could be worked out and handed over to the visual designer.

Heineken - Facebook ConnectHeineken InboxHeineken iPhone App PrototypeHeineken - Found Repudo

Finally, I laid out the individual steps in a flow to help communicate the final concept with the rest of the team responsible for the development of the iPhone app and branded Facebook page.

Press: Facebook Spotlight

Dynamic Zone Website

Dynamic Zone Website

Summary: In a pause between client work, I found some time to design and build a new website for my employer, Dynamic Zone. The most important goal was to present our creative work to potential clients so I included the portfolio immediately on the home page. Having watched how users tend to immediately start playing with their mouse scroll-wheel when coming to a site, I took advantage of this to implement a playful scrolling navigation for the portfolio.

I implemented a Twitter feed as an easy way for clients to keep up to date with what we’re busy doing. Previous attempts at news sections and blogs had failed because in the midst of client projects, we found it difficult to find time to update our own site. A simple Twitter feed that filters employee’s tweets containing a #DZ hashtag makes it quick and easy to post comments, interesting links and connect with our clients.

I built the site using pure ActionScript 3.0 using Flash Builder 4 and created a solid framework using SWFAddress and XML loaders to populate the content, again making it as easy as possible to keep the site up to date and expand on it in the future. Flash was chosen for it’s ability to realise a rich experience in a limited time and alternative content is provided in HTML for devices without Flash support.

The site is only a first step and I’m working on creating more content and experiences to demonstrate how we can help solve problems for our clients communication and branding.

Role: Concept, visual design, branding, Flash development

Tools: Adobe Fireworks, Flash Professional, Flash Builder, SWFAddress, Google Maps API

Link: http://www.dynamiczone.nl