This project took place over 8 weeks in 2006, while working with Ixxus. It involved spending some weeks in Hereford, with some incredible long drives across beautiful countryside, starting out at 6am from London to start work-shopping at 10am. As intense as it was, it turned out to be a great project and working with some really nice people.

We started off with a User Profiles workshop (see above) that focussed the client to identify our target audience, which in turn helps to inform the design process. Herefordshire has an unique blend of demographics – that included job seekers, seasonal workers, tourists, young families and the over 50’s. The portal needed to appeal and communicate to all of them, covering leisure, work and life events. We also had to factor in that some communities in rural Herefordshire are more isolated than others and relied on accurate up-to-date information about events in the area and were most likely to be on a slow internet connection.

A Brand Development workshop gave us an opportunity to brainstorm with the client. They had already chosen the name and URL ‘myherefordshire.com’, which was a blessing as we worked to such tight timescales. Together we defined some core characteristics that the online portal should have. It had to be ‘FRIENDLY, FAST & RELEVANT’. This become our mantra for the following weeks and became the driver to develop the brand.

The ‘FRIENDLY, FAST & RELEVANT’ inspired a 3 look and feel mood-boards for the portal’s brand. The preferred one (pictured) was chosen as it leant more on the ‘friendly’ characteristic.

Using the soft edged ‘VAG Rounded’ font (VAG is Volkswagen & Audi Group is you were wondering) gave a warm and friendly quality to ‘my Herefordshire.com’ brand. The colours chosen reflected the rural nature of Herefordshire, while the swooping line echoed the contour of its landscape. Later in the process we came up with a tagline ‘Bringing Us Together’ to voice the community aspect of the portal.

The UI design of the portal all fell into place once the brand was developed. Behind the scenes we had sessions to define the scope of the project, working out what functionality would be present in the first phase. This mapped out a set of page designs that needed to be considered. The most interesting page for me was creating the homepage. It was crying out to have a human element to it, so we commissioned a photographer to take photographs of local people in the county. These formed a set of homepage visuals that appeared and rotated on a regular basis, keeping the homepage looking fresh.

Looking at the portal a few years on, it still holds its original qualities of friendly, fast and relevant. For example, parents are able to check out children’s events or emergency numbers; while tourists to the area can find accommodation and places to visit. In addition, seasonal workers will be able to find out more information about living and working in Herefordshire in five different languages – English, Portuguese, Russian, Lithuanian and Polish.

Source is a secure search engine for international law firm Allen & Overy. It allows people at the firm to search simultaneously across files, Know How and other data sources from one central point. It is powered by Autonomy and can search around 70 million different documents – really, I didn’t make that up.

The starting point of a Source search

My role on the project was to define the user journeys and develop an intuitive user interface that was designed for legal PAs in mind. The design of the UI had to be familiar to users, so the design had to be clean, simple and quite minimal, much the Google approach to UI design.

The results page, before the refining begins.

The biggest challenge was around letting users to refine result quickly. This was achieved with a set of filters on the left hand side for specifying and refining data sources, author, document type, client, matter, topics, countries and languages. By having the filter controls on the left of the same page, it allowed the user to see their results getting narrower within the same page view.

Another trick we adopted to keep the user experience focussed around the results pages was to introduce light-box overlays for settings and saved searches.

Designing the Source brand came about as a side project. They already had chosen the ‘Source’ name and had their art department mocked up a quick logo. I used that as my starting point and then formed it into something tighter, punchy and plush, echoing some of the characteristics of the Allen & Overy brand.

Creating a ‘Getting Started Guide’ was a nice little exercise in introducing users to the UI and keeping the guide so simple it could be read in a few minutes.

A page from the Source 'Getting Started Guide'

Another page from the Source 'Getting Started Guide'

All hail to the beauty of the font Gill Sans...

Rulefinder is an online legal risk management resource covering the rules relating to international shareholding disclosure. It’s a clever bit of kit that analyses and pinpoints disclosures across 70+ jurisdictions, something I imagine is complex and would take an age if attempted manually.

The blue ball confidentially guiding its way out of the complex labyrinth was the concept we used for this service to tell the story behind the powerful software.

I chose Gill Sans for the Rulefinder logotype. It was so good to work with that classic 20th century font again. It has a clarity and authority about it that was just right for Rulfinder. A subtle touch is the dot on the ‘i’, which is the blue ball from the maze imagery.

Rulefinder brochure

To support the launch of the Rulefinder, some materials were developed – a printed brochure, 2 large format exhibition banners, some web banners and a PowerPoint template.

Large format exhibition banners for the launch of Rulefinder

Since 3Store contains a growing range of products and plans, it took a number of clicks for users to navigate to a particular phone or a price plan.

In our previous design of the homepage (see below), there was a small, simple, bog standard ‘Quick finder‘ with 3 dropdown panel with limited options. It proved to be popular, with Googe Analystics statistics revealing that Quick finder attracted over 10% of all clicks on the homepage, which is a lot when you consider there were 53  clickable areas on the page.

May 2009 - Stats for the previous homepage design from Google Analytics

It became clear from the web stats that some users, who knew exactly what they were looking for and needed a way to get straight to the product or plan that they had in mind. In the fast and furious world of online retail, this becomes essential.

August 2009 - 3Store design refresh featuring the improved Quick finder

This user motive become the inspiration to design the Quickfinder panel that presented a full list of products, plans and price points under three separate tabs. It provides users with a route straight to specific product in just 1 click from the homepage.

Find a product shows the full range at 3Store offers

The product panel can navigate to a manufacturer or a specific model of phone, laptop or modem. The plans panel lists every variation of plans (minutes + texts) and grouping them into plan types and contract length (e.g. 18 months) The last panel lets users browse plans by price.

Find a plan allows users to find minutes & texts specific plans

I had further ambitions for Quick finder – for it appear on every page on 3Store since it is such a powerful tool, so hopefully the new 3Store team will consider to roll it out further into the website.

However, between 2001-02 I found myself working and visualising several scenarios that painted pictures of the world in two or three years time in the future. These ‘day in the life’ scenarios created a vision of how the end user’s life and job was made easier by the power of multi-channel applications. It was ‘user experience’ at a high level, showing the touch-points that pushed and pulled the user to interact with a system.

i-merrill : A vision for Merrill Lynch

Looking back at these ‘day in the life’ scenarios, they feature some of the concepts that we have now become accustomed to on the internet such as personalised content, forums, subscriptions and e-alerts, team collaboration and document management. Back then these were new and cutting edge ideas that got clients excited.

I must admit that I am fond of these as they remind me of a time when I worked at Rubus in the Shaftesbury Avenue office. It was a company that had boundless optimism and a appetite for innovation. Typically we’d turn around a scenario in a few days if a couple of us worked on it , but that still involved long days hunched over a light box followed by hours of sequencing frames and transitions in good old trusty PowerPoint.

e-Pulse : A vision for GPs to keep up-to-date with medicine

Creating the scenarios was much like writing a comic book, where you needed to craft a snappy storyline across a series of visually concise frames. Initially, we would produce ‘roughs’ of the frames. These frames would often consists of the user going about their business to a backdrop of something happening on-screen. One of us would focus on the characters and the storyboard while the other designer would work on the screens.  We’d always rope in someone in the office to feature in the scenario so as visual reference we’d take some snaps of them to posing at their computer or pretending to walk with a mobile phone glued to their ears. Yes, happy days.

We originally branded Synopsys about a year ago in quite a hurry when the focus was mainly around designing the UI for the application itself, so this time we put in a bit more love and care into the brand.

One of the main challenges of this project was to align the two products accordingly in the brand architecture. Both Synopsys and NAVigator serve as a suite of products available as part of a docGenix inSight service. To position those products we devised a tagline ‘powered by docGenix inSight’

The visual treatment of these brands feature the use of Franklin Gothic Condensed ( a favourite of mine, it’s classic) with a vertical gradient of colour to add a richness to the logotype along with a soft shadow to make it more tangible.

Each brand can occasionally be seen a visual device to support the logotype. A compass device was created for NAVigator and a document device for Synopsys. As a rule the visual devices do not appear in conjunction with the tagine. There are other occasions when the logotype stands alone without a visual device or tagline. Some further work will define how and when these combinations can and can’t be used.