Visit the URL

Senior UX & Design Lead - Responsible for requirements gathering, hands-on creation of wireframing, user flows and transactional interaction, directed 2 visual designers. 

Campus is a Google owned venture in East London's 'Silicon Roundabout' area. The building provides co-working space and a cafe for startups, entrepreneurs and investors.

Campus partners are based in the same building and include Seedcamp and TechHub. Campus has received considerable publicity from the UK government.

The first phase of the website was produced in a compacted timeframe, to coincide with the official opening of the building.

Visit the URL

UX Design Lead - The BBC World Service Responsive Project is a major initiative to develop a single responsive design solution for BBC News across all devices from feature phone to desktop.

The challenge

The key deliverable for the first phase of the project was to design a mobile-first MVP (minimum viable product) for the first 5 language news sites (which included right-left and non-western fonts) whose design components would then form the basis of the remaining 22 languages. The first of these languages was to be launched within the 4 month project timeframe.

This was a complex and challenging task, not least because of the requirement to serve feature phones in addition to more sophisticated devices.

There are significant proportions of users within some of the World Service's demographic for whom smartphones are simply unaffordable, hence the feature phone is widespread.

Feature phones generally don't support javascript and have support only for native fonts, which can cause challenges with rendering.

At this time, a BBC (English) News responsive MVP already existed, but there were many components that would be required specifically by World Service, so the first task was to carry out a UX gap analysis between what existed and what was required.

An innovative solution

Given the nature of responsive design, working with fluid layouts as opposed to fixed pixels, the most efficient way to work is to design in the browser, rather than the traditional choice of Photoshop. This is a major step change for many designers.

I conceived and directed the design and build of a front end prototype framework that would serve as the foundation for all design work going forwards. This prototype enables a developer to work from a designer's Photoshop visual, coding fast and dirty to get the design working in the browser.

Of course, traditional Photoshop visual were still required for stylistic purposes and to allow stakeholders the opportunity to see the design direction and feed back on it, but there was no need for them to be pixel perfect. This meant that they could also act as high fidelity wireframes, eliminating any need for low-medium arrows and boxes.

More efficient working practises

Using the prototype, iterations and tweaks can be done in the browser, with the designer and developer sitting side by side. This makes for a much faster production process, improves designer - developer communication and has the huge benefit of allowing stakeholders to interact with the design components without having to commit to weeks of possibly wasted work. 

UX/UI Design Architect and Author - Responsible for conception, structuring and authoring of UX/UI language including requirements gathering, analysis of user research data, development of 28 modular design patterns, grid, image structure and typography. Managed stakeholders and directed 1 UX designer.  

Designed as a live intranet site, the guidelines provide a structure and definition for all user experience and design across Disney EMEA sites, covering topics such as interaction, layout, typography, iconography, 28 design patterns plus advertising templates.

The task involved identifying UX/UI commonality across Disney's many strands, gathering and defining requirements for the future, designing a modular and consistent set of design patterns and to writing, designing and structuring the content of this major piece of work.

The guidelines are written in the spirit of best practice and are designed to be adapted and refined over time, stipulating absolutes where necessary.

UI/UX Design Lead - This was a ground-up redesign of a java based enterprise rich internet application that despite having a loyal customer base, was dated and cumbersome to use. The project also included the design of a style guide.

The application's purpose is to create complex collaborative documents that can be directly outputted as print-ready pdf.

The design brief was to start from scratch, analysing user data supplied by the customer team, to create an entirely new user experience and interface, whilst retaining existing features that were valued and integral to the product.

This project is without doubt the most complex in the Lightpetal portfolio. Multiple user journeys from virtually any point are the norm, coupled with a feature-rich environment that is closer to a desktop application than the average web app.

Both the interface and the look & feel are kept intentionally minimal, to keep the document that's being worked on as the focus. The control surfaces are semi-skewmorphic with just enough bevel to feel clickable. The more recent Android Material Design adopts a similar approach.

Visual Design and Creative Direction - Hands on visual design and creative direction of a new template production system to reduce the production time of CBBC television brand pages. Involved close collaboration with the development team to devise a modular page design that enables a designer to produce a standard suite of assets for each brand.

Using the template system the production time for a new brand page was reduced from around 10 days to just 3 days.

Visual Design - Design of wall decals which featured prominently in Vouchercodes' London office, their purpose to focus the customer team on their core personas, in a way that made them feel like real people and would remain vivid in the staff's collective consciousness.

By means of an initial creative workshop with Webcredible we surfaced key findings, I then amplified and simplified them into engaging graphics that could be rapidly digested from a distance.

Decal dimensions were roughly 5 x 2 metres.

The personas also featured on a set of A5 cards for use in meetings and brainstorms.

Visual Design - Animation storyboards for rich media display ads.

Visual Design and Creative Direction - The brief was to convey the sense of a European thriller for the marketing of this BBC languages interactive drama based Spanish course. Besides the printed posters I also produced a rich media display ad that took the concept further using footage from the drama.

Mi Vida Loca went on to win an Interactive BAFTA Award.

Visual Designer - Refreshed look and feel for this comparison site, addressing new features from the wireframes and cleaning up some of the clutter with better use of space.

Conducted branding and look & feel competitor analysis of comparison sites to inform the visual design refresh. 

Visual Design - Animation storyboards for rich media display ads.

Visit the URL

Senior UX & Design Lead - The Versus Debates You Tube Channel is a ground breaking digital experience, staged by Intelligence2 and Google, that enables a worldwide audience to get involved directly in live debates. 

The first debate, 'It's time to end the war on drugs' featured leading political and media figures such as Julian Assange, President Cardoso, Richard Branson and Sir Ian Blair, some of whom were in a Google Hangout that was vision mixed with the live studio video stream.

Before and after a debate the audience votes on the motion. Whilst the debate is live they can express their favour or dislike of what's being said by clicking a realtime interactive mood meter.

Creative Direction - Responsible for directing the visual redesign of the site and incorporation of over 20 sub-brands within its UI. Directed a team of 3 UX/Visual designers. Wrote creative briefs and commissioned user testing.  Managed stakeholders. Also contributed some direct hands on visual design work.

The redesign achieved high appreciation from the audience and praise from around the business. It made the BIMA finals and was BAFTA nominated.

This was a complete redesign from the ground up, with an entirely new back end, a domain modelled information architecture and a fresh look and feel.

Aligning the site much closer to the brand television experience was a key objective. Prototypes were extensively user tested throughout. Alongside interaction testing we also gathered qualitative data on user engagement and look and feel, together with cognitive analysis of the use of language and visual communication.

UX and Visual Design - Responsible for interface design, iconography, game sprites and backgrounds. 

Background

This is a numeracy game for adults, to achieve numeracy learning outcomes through gameplay. The mobile version of the game was used as a prototype and involved passengers on a bus tour of London, with numerical challenges to reach the final room and 'collect' a famous landmark.

Interaction challenge

The project involved iterative interface development based on user testing. One of the key challenges was conveying complex anticipated gameplay behaviour through the use of iconography and limited control surfaces. Space was limited so text was avoided in favour of visual metaphors, an approach which, in the main, tested well with users.

Hardware challenge

Due to RAM and graphics chip limitations, I designed the look and feel in a retro eighties style, with reduced colour palettes and deliberately pixelated rendering, reminiscent of early home computers such as the Commodore 64 and ZX Spectrum.

So, rather than appearing degraded, I worked with the limitations and produced designs that looked polished.

Senior UX/UI Design Lead - Prototyping for a prospective project in the run up to the 2012 Olympics that made full use of Google's many channels. Directed 1 designer. 

Visit the URL

UX/UI Design & Art Direction - Wireframed prototypes from written spec and commissioned bespoke illustrations for Google's Web Academy, a learning program to provide educational resources and certifications to students or professionals who are eager to succeed in an internet economy.

Visit the URL

Creative Direction - Responsible for leading the visual redesign and branding of the site following the departure of the staff creative director. Gathered fresh requirements from stakeholders, analysed previous user research data, collaborated with UX designer, directed 1 visual designer.

Focus on content

As I mentioned in my post about the CBBC programme templates, I'm now firmly convinced that kids don't care about page furniture and instead 'see' only the content.

The Newsround redesign took place after the CBBC redesign and broke new ground in reducing page furniture to an absolute minimum in favour of large content images and headlines. I was convinced this was the right approach to take and it was borne out in subsequent qualitative testing by usability agency,System Concepts.

Kids don't notice page furniture

The facilitator often had to draw the child's attention away from the content so that we could find out what they thought about aspects of the site design!

So, I remain convinced that beyond a subliminal awareness of site colours, kids really are focused on content.

Fluidity over fixed pixels

It follows that intricate, pixel-crafted page furniture is wasted on kids, not to mention being labour intensive to update and inflexible for use in fluid, responsive layouts (Newsround is not responsive but it is vertically fluid).

That said, I devised a system for Disney that strikes a compromise, allowing for some page furniture whilst remaining fluid. 

Design & Creative direction - An archived selection of earlier work spanning several years.

A combination of hands-on design and creative direction across e-learning sites and services (BBC Jam, Bitesize, BBC Raw, Skillswise) together with lifestyle sites (Top Gear, Food, Health, Gardening).