Design

Few people think about it or are aware of it.
But there is nothing made by humans that does not involve a design decision somewhere.
Bill Moggridge

Package Holidays

Online Price Comparison

screen shot of project

Package Holidays

My role

  • Strategy
  • UX
  • Design
  • Prototyping

The problem

How do you get a team to build a great price comparison experience?

The Process

Introduction

The Package Holidays function of TravelSupermarket was in need of a shake up. I worked on the product team helping deliver their new strategy & improve their design process. We had three months to deliver a measurable change.

Starting with Analysis

You can't expect to change an organisation without first trying to understand its key players. We spent the first week interviewing STLs, Data Scientists, BA's & Designers. This highlighted where our team could add the most value.

Understanding the User

Before I augmented the TSM design team, I needed a better understanding of their customers. I had a collection of existing reports to analyse, as well as access to the Google Analytics account.

tsm documents

After using up the office supply of post-its, I had begun to piece together a portrait of the people who visit the TSM site. We planned to build on this as we go.

tsm data analysis tsm data analysis
Product Strategy

Based on our research & the new strategic direction for the product, we prioritised search results as the first section to be overhauled. We broke it down into manageable chunks that could be developed in an Agile way. First up was the search result card. I started with some competitor analysis, comparing the existing product with a number of rival businesses like Trivago & Kayak.

Designing for Price Comparison

The existing cards felt disjointed. I set a few goals for the redesign. Firstly, it must include price comparison information. Secondly, the card information needed a balanced content heirarchy. Thirdly, the cross device experience needed to be consistent. Finally, the card height needed reducing.

tsm data analysis
A Content-first Approach

When designing, I typically start writing down the key pieces of information that particular item needs to communicate to its audience. This might be visual cues to attract attention, to specific information like price comparison details. Heirarchy is a key factor at this stage.

From Sketches to Sketch

I structured this content into a new layout. A three column design worked best, with each providing a deeper layer of engagement. The first provided visual stimuli in the form of photos. The second had key top level information for the user (star ratings, reviews & evidence of getting a good deal). The final column provided detailed information & the booking call-to-action.

tsm data analysis tsm data analysis
Prototpying

After some critique-based iterations, I began testing the designs in a browser. I whipped out my text editor & started converting Sketch files into HTML & Sass. For me, it's the best way to understand how a responsive design transitions across different screen sizes. It also helps bridge the gap between the design & development work processes.

Data Driven Templating

A key design consideration was how to handle the variability of information on the card. Manually editing multiple fields was time consuming. On a suggestion from the developers, I incorporated Handlebars.js into my Gulp build for the prototypes. I could now instantly populate my prototypes with a data file. After sufficient testing, it was ready to be built for the production site.

tsm data analysis
Testing

Good design should be supported by the whole team, including the business stakeholders. That's why it was important to make sure we meet or exceed our KPIs. New designs were tested & tracked across a segment of users before launch.

Design Iteration

With a succesful increase in mobile conversion on the first card redesign I looked to iterate on this. This time the focus was on delivering greater price comparison information.

tsm data analysis
Team Agility

As our process moved forward, we continued to improve team communication & collaboration. With some departments separated by over 200 miles of British countryside, feedback loops had been limited. Our team introduced bi-weekly Design & Tech check-ins. With my experience in Git & a tutorial from a developer, I was able to bring live development updates to the screens of the London office. The foundations of a solid working relationship were being set. Meanwhile, I continued sketching out the next stages of the design...

tsm data analysis

The product

tsm-desktop-design tsm-mobile-designs

The Living Archive

Exploration into the past.

screen shot of project

The Living Archive

My role

  • Strategy
  • UX
  • Design
  • Prototyping

The problem

How do you design a digital platform for historical exploration?

The Process

Introduction

The UK's second largest supermarket chain wanted to digitise their historical assets to allow future generations to explore their past. To secure funding, the stakeholders needed to present concepts to the board. Our team had two weeks to investigate their brief, understand their existing tech set up, explore ideas, & present a concept.

Product Strategy

The project aim was to create a platform accessible to researchers, academia, media representatives & the company's own staff. It aspired to raise the supermarket's profile as a heritage brand. The product would replace 4 existing sites as the go to place for archive content. I had to consider how it would provide an engaging new experience, without losing the finer details of existing archive sites already in use.

existing archive

To get a grasp of the existing landscape for archives, data exploration & historical representation, I started with some competitor research. Many offered richly curated experiencess with a linear exploration. Others opted for a data driven approach of interlinking content through metadata tags, allowing a 'rabbit-hole' exploration that could lead anywhere. I saw opportunities for both within this archive.

Object Oriented UX

Give the nature of the content, I felt an Object-Oriented UX approach was the best way to consider this experience. With over 20,000 items already digitised, the archive would be a collection of interconnected objects, upon which a number of actions could be performed. I worked in trello to explore organisation of the elements and to allow collaboration with the team.

trello board
Ideation workhop

To explore ideas for the experience, the whole team engaged in creative exercises around the topics of storytelling & nostalgia. I led a sub-group in sketching up some of these concepts.

ideation workshop
Design

With our short turn-around, I went straight from the whiteboard into high-fidelity designs, working in tandem with another designer. We knocked ideas back & forth, taking a stripped back palette from the brand to allow each object to be the focus of attention. We designed the home page, search results, objects & stories as these would be key to selling the concept during the pitch.

card design
Iteration

The presentation was a success & the project has secured funding, albeit with a reduced feature set. It's going to be an exciting job iterating on these initial ideas to build & test a production-ready experience.

The product

archive desktop design archive mobile designs

Pebble People

Staff professional development.

screen shot of project

Pebble People

My role

  • Design
  • UX Strategy
  • Development
  • Product Testing
  • Research Analysis

The problem

How do you enable staff to track their professional development?

The Process

Introduction

A new framework for personal development was being rolled out at pebble {code}. It identified the key skills, behaviours & responsibilities the company looked for in its staff. I was part of a small team, set up to improve the way individuals mapped their progress.

Discovery

I began by interviewing those who had been through a trial review process, to understand common areas of friction. This revealed:

  • Difficulty navigating the spreadsheet of traits.
  • Lack of clarity in the rating system.
  • Difficulty visualising their current state.
Product Strategy

With the insights from our initial team workshop, the team gathered for a workshop to plan the first stage of design & development. We co-odinated with the key stakeholders to bring them on board with our proposal, ensuring the product would be a success from both a user & business perspective.

Design

The biggest challenge was finding a UI solution to organise the large amounts of data on display. I sketched up some ideas, & found a collapsible grid approach to be the most suitable for the needs of our users. A simple colour schemed differentiated ratings & attributes of cards.

pdp cards
Development

While I worked up wireframes with the other designers, the developers were building the core map functionality using ReactJS. With the designs ready, I joined in to build the surrounding components & add some much needed styling. Working side-by-side we were able to get our product out to users in a single 2-week sprint. Daily stand-ups kept the team on track.

Validation

We undertook usability testing before the launch, & followed this up with user interviews as each team member went through the review process. From the findings, I drew up the user journey, in its current state. This revealved key problem areas in the process, ranging from terminology to the architecture of the data.

pdp user journey
Iteration

With these insights we were able to start iterating on our initial design. A basic note-taking feature for each card was the number one priority, followed by a way to highlight key cards.

Work on these are underway, & the plan is to keep a continuous feedback process going to develop the product.

The product

pdp app desktop image pdp app card map image pdp app modal image

Bacon Beacon

Bluetooth retail navigation.

screen shot of project

Bacon Beacon

My role

  • UI Design
  • Animation
  • Blog

The problem

How do you efficiently navigate a complex retail environment?

The Process

It was a client hack day at pebble {code} and I was helping run it from the design side.

Having seen a presentation by the Wayfindr team, I was keen to explore the potential of iBeacon technology. Speed is of the essence on a hack day, so I quickly narrowed my area of interest to in-store navigation. Shortly after, the concept of 'Bacon Beacon' was born. The goal: to navigate directly to a product in a store.

We split the team into two strands. While the developers did the hard work attempting to pinpoint beacon locations, I worked on the user journey and produced wireframes. I finished off by visualising the proposed app experience through animation.

For the full story, check out my blog post about the day.

The product

bacon beacon app animation

ADF Portal

Explaining project management.

screen shot of project

ADF Portal

My role

  • Design
  • Front-End Development
  • Project Management
  • Analytics

The problem

How do you guide teams through a new project management framework?

The Process

Introduction

As a client at pebble {code} continued it's Agile transformation, they needed a way engage staff with the various project management frameworks available to them. It was named The Adaptive Delivery Framework (ADF) Portal.

Workshops

Through a set of workshops, we mapped out the key stages for the Agile, SAFe and Waterfall frameworks. While the client gathered content for each stage, we designed an interactive SVG that connected them all together.

Development

The developers mapped the SVG to unique urls using Google's Angular JS library. Once this framework was set up, the design could easily be tweaked where necessary and the relevant content coded.

The site is tracked using Google Anayltics and receives an average of 2000 hits per month. Our next step is to undertake some user testing sessions to add context to this data.

The product

adf app desktop image adf app images adf app images

Blues Harp

Browser-based music maker.

screen shot of project

Blues Harp

My role

  • Concept
  • Design
  • Front-End Development

The Problem

How do make a harmonica more portable?

The Process

Inspired by the Blues bars of london, I had decided to take up the Harmonica. On Christmas morning I unwrapped a beautiful metal instrument, and blew my first note.

Sadly, I quickly realised it was far too cumbersome to carry. My pockets were already full of my phone, wallet and keys. I searched for a more portable solution. The pebble {code} music hack day provided me with the inspiration I needed to create a new musical object I could access anywhere. The digital Blues Harp was born.

In one day, I designed, coded and performed on this new instrument, powered by the Wad.JS library and a dash of JQuery. Amazingly, the performance won me the hack day!

The product

Why bother looking at some images when you can try it out first hand in the browser:

Move your mouse or touch device screen to play.

Play the harp GitHub Repo

Whisky Map

Discovering flavour profiles.

screen shot of project

Whisky Map

My role

  • Concept
  • Design
  • Front-End Development

The Problem

How can you tell where your Scottish Whisky comes from?

The Process

As I say sipping the golden spirit in my glass, my mind wandered to the landscapes of Scotland...land of my forefathers.

Unfortunately, I had no clue where this particular drink originated from, so the image in my mind was left incomplete. Nothing but a blurred scene of peaty waters and drizzle.

Lucky for me, the pebble {code} data visualisation hack day encouraged me explore a solution. In 8 hours I gathered a data set of Single Malt flavours, the D3 Javas4cript library and mixed it up with a dash of Leaflet, an open-source mapping library.

The Product

Why not take a look at the results for yourself...

Explore Scotland

Agile Metrics

Tracking Agile development.

screen shot of project

Agile Metrics

My role

  • Design Thinking
  • UI Design
  • Front-End Development
  • Project Management

The problem

How do you track Agile adoption levels within a global organisation?

The Process

Introduction

As a client at pebble {code} continued it's Agile transformation, its managers wanted a way to track team progress at following the Agile methodology.

Analysis

First, I analysed their current documentation. Their teams rated themselves against pre-defined criteria, which was converted into a chart in either Excel or PowerPoint. Cross-team analysis required reviewing a number of inconsistent presentations. Their existing method of representation made it difficult to interpret data effectively.

Image of client data

I gathered the key stakeholders for a workshop to flesh out the requirements of this system, from the user's perspective. Three main personas were identified.

  • The Team Member
  • The Agile Coach
  • The Manager
Defining The MVP

We mapped out the ideal future state. Teams would engage in retrospectives with their agile coach, using an app to store and analyse data. This would allow consistent data to be tracked across all teams. Teams would be able to visualise their progress over time, while managers would be able to view aggregated reports to see how the company was doing as a whole.

Image of wireframe process
Development

We honed down the feature set to a Minimal Viable Product. I designed a mobile first, interactive assessment tool, which the developers built using node & ReactJS. I used D3 charts to visualise the data. During a second stage of development, I worked on an admin section to let the client add, edit and remove teams from the system. The system was tested for browser compatability down to IE9.

The product

metrics app desktop image metrics app images

Next steps

Iteration

The app is being trialled with teams to test its effectiveness. Meanwhile, I have been working on designs for the next set of features, aimed at improving the value of the app to the managers.

Image of new features for metrics app

The Foundry

VFX Interaction Design.

screen shot of project

The Foundry

My role

  • Interaction Design
  • Prototyping
  • Animation

The problem

How do you bring web design to life?

The Process

The Foundry is a global developer of visual effects software. They are working with London design agency AllofUS on a design overhaul of their product marketing site. I was tasked with bringing the static designs to life with my knowledge of animation and interaction design.

Working from the existing design concepts, I spent a week built a desktop-only prototype that explored video transitions, photographic parallax effects and menu interactions.

The Product

View the Prototype GitHub Repo
Image of wireframe process

Sow & Grow

Vegetable growth guide.

screen shot of project

Sow & Grow

My role

  • Concept
  • Research
  • Design
  • Front-End Development
  • Lightning Talk

The Problem

How can I know when to grow and harvest my own vegetables

The Process

In 2015 I had two goals. Firstly, to improve my JavaScript knowledge. Secondly, to sample the delights of home grown vegetables in my dinner.

When I found the existing resources on growing vegetables to be uninspiring, I decided to create this app to help fulfil my needs. I gathered data from various online resources, and got to work. As the codebase grew larger, so did my crops. You can watch my presentation on the whole experience below.

Image of process stages Image of some crops growing

The Product

Feel free to play with the app, or watch the talk below to hear more about my process.

Open the app! GitHub Repo

Discover The ADF

Modular training material.

screen shot of project

Discover The ADF

My role

  • UX
  • Design
  • Front-End Development
  • Animation
  • Project Management

The problem

How can you educate busy staff?

The Process

Introduction

When a pebble {code} client wanted a new training course, we knew the first step was to host a workshop. This allowed us to understand the training requirements of the client's employees, instead of designing by assumption.

Understanding the Problem

I took the team through an empathy mapping exercise to identify the users' key attributes and expectations.

Based on our findings, we constructed the following criteria for the new platform:

  • Modular
  • Adaptable
  • Concise
  • Mobile
  • Mixed Media
  • Personal
adf app images
Development

We proposed a four-week build schedule. I produced wireframes for a set of training modules, and used InVision to create a quick prototype before moving on to the front-end. Each module would consist of a three-minute animation, some written content and a short quiz. Users could choose to learn through video or text, but had to finish at least one before attempting to pass the quiz.

It was built as a static site, before being integrated into the client's SCORM system. I tested the browser compatible down to IE9, as per the clients requirements.

The product

cbt app desktop image cbt app images cbt app images

Emoti

Twitter Light Installation.

screen shot of project

Emoti

My role

  • Concept
  • Web Design
  • 3D Design
  • Front-End Development

The problem

Can you visualise the emotional state of the world?

The Process

The intersection between art and technology is a facinating place. At #ArtHackathon2015, our team of artists and designers created 3D light installation that visualised the emotional state of Twitter. We turned real-time data into (what we considered) a beautiful dancing display of colour.

Using the Twitter post fetcher, I altered the colours and music of a webpage according to each emotional response of tweets. This was then visualised on the browser of a Raspberry Pi. Using lazer-cut acryclic mounted on to an LED screen, a glowing, morphing sculpture was created.

The Product

Image of wireframe process Image of wireframe process
GitHub Repo