Interaction design

Hi-Res Portfolio Presentation

Sample of portfolio presentation

This site has not been updated for a long time and the work featured isn’t recent. A new responsive site is in production.

Latest portfolio available on request

Recent work is available in a pdf presentation. Just send a request to ben@jamandhoney.co.uk.

BEV Instrument Cluster

Ford Battery Electric Vehicle Instrument Cluster

Feb 2012

Client

Ford

Responsibilities

Interaction design, visual design

Description

I picked up this project mid-way through production – tasked with fixing problem areas of the Ford’s new Battery Electric Vehicle UI. This comprises of two digital displays either side of a physical speedometer. The right hand side contains information supporting the vehicle’s ‘centre stack’, known as MyFord Touch. The left hand screen contains information relating to the performance of the vehicle. My primary duty was to produce the screens appearing on this screen.

As Ford’s first ‘BEV’ we explored new areas of automotive interface design, solving issues such as ‘range anxiety’. The interface also has a customisation feature so the content is laid out such that the driver can choose their own combination of gauges and read outs. The content displayed on either screen is controlled using the five-way controllers on the steering wheel.

Alongside the interaction problems I also refined the visual design which was based on the visual styling of an older instrument cluster. The colour palette was based on the representation of electric power as blue with a small selection of supporting colours representing states of power.

MyFord Touch Integration

MyFord Touch BEV integration samples

Feb 2012

Client

Ford

Responsibilities

Interaction design, visual design

Description

In addition to producing the Battery Electric Vehicle instrument cluster, I also designed a selection of screens to be integrated in to the MyFord Touch infotainment system. Working within the constraints of the existing interface I reproduced content from the cluster, sizing it up an adapting the layout so that it felt visual balanced with both systems.

Training & Sales App

Samples of interface wireframes

Nov 2011

Client

Ford

Responsibilities

Interaction design

Description

Imagination pitched to Ford to produce a set of tablet based interfaces to support their growing Asian market. The brief was to create an e-learning platform to inform, inspire and test sales staff knowledge. Along side this was a sales tool to support the staff and provide rich content about the products. The final interface was to assist the hand-over process post-purchase.

We had a week to put together the presentation.

My solution, taking in factors such as budget, time and on-site infrastructure, was to merge the three interfaces in to a single product, built in HTML5, to work across multiple platforms.

Using a single log in and homepage the staff would be able to access which ever option they required. The different options were designed around a common template and assets so that once the user had completed their training they would immediately be familiar with the sales tool.

For presentation I created three user journeys, one for each core use-case.

Kitbuilder

screenshot from site

Mar 2010

Client

Nike

Responsibilities

Interaction design

Description

The brief for this project was to update the UI of Nike Football’s Kitbuilder – an online application for designing custom kits.

To do this I updated the interaction design to accommodate the addition of the ball to the product selection process. I also had to rethink the way in which the system handled image upload for the team badge and sponsorship logo to make the experience more user friendly.

In addition to this I redesigned the back-end system providing a simple intuitive interface for local business units to edit the product catalogue along with the creation of new new stores across the globe.

NikeStore World Cup Campaign

screenshot

Mar 2010

Client

Nike

Responsibilities

Interaction design

Description

As a member of the R/GA team I worked on the NikeStore producing the ID for a unique world cup campaign built around the promotion of Nike products as they related to the World Cup through the changing phases of the competition.

The content was continually refreshed to mirror the activity on the pitch while not directly referencing the competition due to legal limitations regarding brand association to the World Cup.

Alfisti

Wireframe samples of the Alfisti site

June 2009

Client

Alfa Romeo

Responsibilities

Interaction design

Description

When I joined R/GA this was the first project I worked on along side Ilia Uvarov, the creative director of Interaction Design. The brief was to create an engaging multi-national social network specifically catering for customers of Alfa Romeo.

Building on the work Ilia had already done we spent the following weeks completing the documentation for the site which was built on the framework of an off-the-shelf social networking platform. We utlised the available widgets, customising them to our requirements and worked with the engineers to expand the offering of functionality.

At the end of the process we produced an in-depth set of documentation which was supported by wireframes and flow diagrams.

Aston Martin Centerstack

Screen samples of Aston Martin Infotainment System

Feb 2009

Client

Aston Martin

Responsibilities

interaction design, visual design

Description

Having worked on a concept interface for Aston Martin previously at Splendid they then gave me the opportunity to produce the real thing.

Over a number of months I took charge of the production of the infotainment system, in tandem to a team who produced a home mangement system.

We worked closely with the client spending two days a week on site in Gaydon.They allowed us to become emersed in the Aston Martin world, interviewing all the stakeholders and wide range of staff.

We then developed our ideas through a series of testing phases, finally translating the UI in to a refined elegant visual interface which blended seamlessly in to the vehicle interior.

FPU News and Events Portal

screenshot from site

Jan 2009

Client

Fresno Pacific University

Responsibilities

Interaction design, visual design

Description

Following on from the success of the previous designs I produced for FPU, they commissioned me to mock up a stand alone news and events site for the university. The client put together a general brief relating to content types. They requested that it should be clear to the user that the site was independent but at the same time linked to their main site.

My approach was to use the same template but to change the colour palette, within their guidelines, and give the site a more serious, informative feel.

I also expanded the number pages designed to cover content level and an events calendar. This gave me the chance to document the consistency of the design and spend more time analysis the interaction process for users accessing the calendar.

With the visual design done, the in-house technical team are currently working on the build, with the site due to go live later in 2009.

www.smarta.com

screenshot from site

Jan 2009

Client

Bright Station Ventures

Responsibilities

visual design, interaction design

Description

Smarta is a social networking site for entrepreneurs and business people. It was the brain child of Sháá Wasmund of Bright Station Ventures who saw the need for a well built, easy to use and engaging resource for forward thinking business people. Whether just starting out or in need of fresh inspiration.

The brief was to create site that combined quality editorial with a networking structure that would enable its users to make a difference to their business.

Along side another senior interaction designer, I was tasked with taking the project from the very beginning and see it through to launch. We started by research the market, and the users, and also interviewing the stakeholders and other business people. With this information we created a broad spectrum of personas and built up the functional requirements and a site map of the site.

From here we wireframed the scenarios and tested them. With the the testing done we moved on to visual design and went through an iterative process bringing together the best of our ideas to produce the final look and feel.

Once the look and feel was signed off we created all the templates and handed over the artwork and documentation to Public Zone to handle the development.