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 Design - This work is under wraps for now due to client confidentiality. Currently redesigning and authoring the Very.co.uk style guide, typography and look & feel and improving the UI design system components.
Visual UI Design - This is a Thomson Reuters public facing legal product for Gov UK (logo has been hidden for confidentiality).
The key UI Design deliverables were a comprehensive, detailed red lining and interaction capture style guide detailing the generic Gov UK design system (GDS) components, plus new bespoke components unique to the product, including a hierarchical button suite and dashboard.
Due to platform constraints the engineering team had made the decision to build their own versions of the Gov UK components. As a result, this meant the GDS guidelines used alone would not provide adequate UI Design information to cover areas such as component layout spacing, typographic hierarchy and interaction states.
It might be assumed that the developers themselves could examine the GDS pages in the browser inspector, but the CSS would not correlate easily to their bespoke build and would leave much room for error.
So the UI Design role was to carry out that inspection with in-depth design understanding and translate this into a set of coherent guidelines that the team could use to understand the construction of the components and the nuances of the interaction behaviours, including their responsive behaviours. In addition, the new, bespoke components were designed and similarly marked up.
Visual UI Design - User interface design and system guidelines for a market leading legal contract publishing web application (logo has been hidden for confidentiality).
The project involved the creation of a fresh look and feel, extensive UI design system and design guidelines for use by the front end developers.
Tables and unordered lists are the most widely used components within this product and this makes for some design challenges in terms of defining distinct areas of the page to direct user attention, whilst avoiding hierarchical overload through using too many differing font sizes, weights and button styles.
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.
Senior UX & Design Lead - This involved 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.
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.
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 - 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 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.
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 - Animation storyboards for rich media display ads.
Visual Design - Animation storyboards for rich media display ads.
UX/UI Design Lead - The wireframing comprised part of a pitch proposal for Google Art Project, this was a last minute request, produced in just a day.
Despite generating some interesting UI concepts, the compacted time frame probably had an impact, sadly didn't win this one!
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.
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/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.
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).
