The project is a re-write of online Casino site www.dublinbet.com, including a rebranding and a completely new web site, designed with the goal of adding clarity to their product offering and to increase downloads and registrations.

The project is now in the development phase.

Research and Definition

My work involved creating a number of Personas based on client-supplied customer data, mapping out key user journeys for these personas, creating a sitemap that demonstrates how these journeys will be realised, and ultimately creating a set of functional wireframe prototypes.

Important considerations for this project where:

• Current site is functioning fairly well in terms of registrations & conversions, but we did not have access to key analytics in order to better understand this
• A broad existing user-base which is familiar with the current deposit & withdrawal functionality, and care should be taken not to impact or change this process dramatically

Therefore it was decided that a “light touch” approach would be adopted, with minimal functional changes made to core transactional pages and that A/B testing would be used post-go live for additional amends.

What this translates to in the first instance is a restructuring of site content in order clarified the client’s USP and better support new customers & potential customers, and a layer of best practice applied to all form designs.

• View the Code Computerlove press release →

Meanwhile, here’s some previews of the rather lovely creative mockups the team have done based on the research and definition work I’ve done:

Homepage mockup

Attractions mockup

What’s On mockup

Beaverbrooks are a UK high-street jewellers founded in 1919, with approximately 70 stores nationwide. They approached Code Computerlove to redesign and re-architect their ecommerce-enabled website www.beaverbrooks.co.uk in order to improve brand perception through good design and usability, and increase the conversion rates for jewellery sales and jewellery protection (insurance).

Research and Definition

Prior user research was made available to me in the form of a set of detailed personas and a detailed technical specification. I was tasked with combining these elements with best practice techniques and findings gleaned from my own competitor research in order to define the new site.

As part of this definition I produced a set of user journeys to satisfy the personas & scenarios, which fed into the creation of a site map and a set of process flow diagrams. From there a set of interactive wireframes were produced that defined the site structure, key page layouts and any interactive elements on the site, such as refining search results and adding products to the shopping basket.

Tools Used

Microsoft Powerpoint was used to create the expert reviews, competitor analysis, personas and scenarios, Visio was used for sitemaps and process flows, and the interactive wireframes were produced using Axure RP Pro.

Assets & Resources

Competitor Analysis

Sitemap

Wireframe – Branded search results

Sample slide from Competitor Analysis document (blue = good, red = bad, yellow = a bit of both)

Sitemap overview

Sample wireframe – Branded search results

Working with 3^rd parties

Code are building the site templates and then handing them over to a 3^rd party who will integrate the pages into the site infrastructure, based on the process flows and wireframes I’ve produced.

Working with 3rd parties in this manner means that detail and supporting annotations are critical aspects of any documentation I produce, and I feel that this project is probably one of the most well-documented projects I have worked on.

At the time of writing, the new site is still in the development stage. However, here are some previews of the rather lovely mockups Code’s creative team have done:

Homepage mockup

Search Results mockup

Product Detail mockup

• View the current Beaverbrooks website →
• View the Code Computerlove press release →

Code Computerlove are currently in the middle of a full research, design and development job for The Car People.

The Car People are a regional chain car supermarkets, selling nearly new and used cars. They are very proud of their “no hassle” approach and their brand proposition promises customers “a positive car-buying experience with no pushy salespeople, no inflated prices and no nonsense”.

They want to offer a very different customer experience compared with other car supermarkets, and their new website has to reflect the “no hassle” and “here to help” propositions and communicate them effectively.

Research and Definition

As principle IA on the project I first carried out a detailed content audit of their current site in order to understand what they have and evaluate it’s merits. I also produced a competitor analysis document which evaluates the client’s main competitors’ sites.

I combined my findings from this research with existing market segmentation data provided by the client to create a set of detailed personas and accompanying scenarios.

Using this combined information I then created a set of user journeys to satisfy the new scenarios. These journeys then fed into the creation of a site map and a set of process flow diagrams.

The diagrams identify key paths through the site (including the “happy path”), which then informs the design and development process.

Design

The project is being run according to Agile project methodologies and we have now entered the definition phase of the project, where I am working with key stakeholders and our creative & technical teams to incrementally create a complete set of detailed interactive wireframes which will outline all pages within the site, and demonstrate key functionality and interactions.

Tools Used

Microsoft Powerpoint was used to create the expert reviews, competitor analysis, personas and scenarios, Visio was used for sitemaps and process flows, and the interactive wireframes were produced using Axure RP Pro.

Assets & Resources

Sitemap

Process Flow Diagram

Wireframe – Search Results

Wireframe – Car Details

Wireframe – Favourites List

Process Flow - the critical path is marked in red

• View the current Car People website →
• View the Code Computerlove press release →

 


Update 6th July 2010:

The new Car People website is now live. View the new Car People website →

The campaign was a joint promotion by the women’s charity Refuge and Avon cosmetics.

The site’s main goals were to promote the wearing of a symbolic necklace, to encourage the signing of a petition, to raise awareness by allowing site visitors to download a poster and display it where other members of the public can see it.

There was also a facility that allowed users to import their address books from their PCs and from most of the larger email services (GoogleMail, Hotmail, MobileMe, etc) and send your friends an email encouraging them to visit the campaign site.

There were a number of challenges to this project, such as a relatively light amount of content and some potentially complex interactions, and a couple of forms that users were asked to complete, and my role on the project was to define the overall information architecture, page layouts, and user journeys for all the site’s interactive elements.

Coupled with this was an over-arching requirement that the site be simple, clear and easy to use for even the most inexperienced web user.

The campaign was endorsed by the actress Reese Witherspoon, who was interviewed on Jonathan Ross’ BBC chat show, promoting the campaign. A large screenshot of the microsite homepage was shown on the video screen in the background for the duration of the interview.

Reese Witherspoon on Jonathan Ross

Watch on YouTube →

• Reese Witherspoon on Jonathan Ross (via YouTube) →
• Refuge: Four Ways To Speak Out campaign →

Refuge is a UK-based charity offering a range of services which provides women and children with access to professional support. They run a domestic Violence helpline, offer advice and counselling, and even provide safe houses for victims of domestic violence and abuse.

Brief

The charity had a legacy website with a huge amount of content: articles, white-papers, campaigns, progress reports on lobbying, etc. Their old site had grown organically over a number of years and was badly in need of an overhaul in terms of look & feel, structure and information architecture.

Further to this, the current economic climate had forced the charity to shift priorities away from requesting volunteers, towards requests for donations and fund raising. Their new website needed to mirror this shift in priorities.

Implementation

A competitor analysis piece was undertaken first, in order to evaluate other effective charity websites and identify how they related their charity’s values and goals, and how they handled donation requests. Learnings from this were fed into the eventual solution.

I then carried out a full content audit of their legacy site in order to understand the nature, quantity and value of their current content, and then redefined the site’s structure around this, reflecting the shift towards calls for donations.

User journeys where constructed for different use-cases, reflecting the role the charity plays in offering information and support to victims of domestic violence, it’s work lobbying government, and it’s requests for donations, volunteers and other forms of support.

A new site map was created to draw all this definition work together, and a set of interactive wireframes where created to demonstrate page structures, information architecture, and navigation principles.

The homepage wireframe was also used to demonstrate how prominent calls to action and contextual messaging would work hand-in-hand with the site’s look & feel to communicate both the “we are there for you” aspect of the charity, and their need for donations and support.

Assets & Resources

Homepage mockup

• Refuge.org.uk →

Müller Little Stars ran an on-pack promotional tie-in with the children’s TV characters from Peppa Pig, allowing parents to collect codes from packs to redeem online against a series of Peppa Pig books.

Brief

The site’s target users were young families, predominantly mothers, and the site had to allow users to register their tokens (4 codes = 1 book) across several visits, and save them for later retrieval, until they had enough codes stored to redeem.

Code entry, validation and retrieval processes had to be clean, simple and well sign-posted, and several nice-to-have features were identified to support the the registration process, such as Facebook Connect integration.

My Role

My role on the project was to define the user journeys around registration, codes entry, codes retrieval and book claims, and to create a set of interactive wireframes to demonstrate key user interactions and journeys.

Best-practice form design techniques were supported by fun, engaging interaction and strong visual feedback to create a friendly and rewarding experience for users.

The promotion has now finished, thus the site is no longer available. However, while the promotion was active the site performed way above expectation with many thousands of users redeeming their codes and claiming free children’s books.

The site received a great deal of positive feedback from users, the client, and other industry professionals.

The process for token entry has subsequently been used for several other Müller promotional sites.

Assets & Resources

Wireframes

Homepage Screenshot

• View the Müller Little Stars Peppa Pig Promotion website →

The brief was to redesign the UK website for Brother Printers.

Brother’s existing website was several years old and it’s design, structure and content were no longer reflective of their brand or the market in which they operate.

Research & Implementation

A new website was planned that was to contain high-impact visuals with a strong identity and a focus on the features and simplicity of Brother products.

Demystifying the choice a printer and supporting the user in their decision-making process were key themes and were to be the primary consideration in the site’s design, structure and content.

Research was undertaken to assess the strength of competitor websites and the client’s own marketing data was analysed in order to understand their customer segmentation.

Initial creative concepts were then elaborated upon and learnings from the research were applied.

A detailed site map was produced alongside interactive wireframes for key sections within the site, demonstrating the site structure, typical page layouts and any interactive elements the site was to contain, such as the printer recommendation tool, developed to match devices to user’s requirements in a simple and engaging manner.

The project has undergone several iterations of design refinement and is currently in development.

Assets & Resources

Prototype →

Screencast of the Prototype

This is a demonstration of some of the key interactive elements of the forthcoming Brother.co.uk website.

The wireframes were created using Axure RP Pro and are being demonstrated here using the Safari web browser.

Parasol are the UK’s leading PAYE umbrella company. They make it easier for people starting out in contract work to establish themselves, taking care of billing, expenses and most other admin duties you would have to do if you set yourself up as a Limited company.

Parasol’s registration process was a complicated one, with several lengthy steps that all had to be completed in order to begin using their services. Numerous pieces of documentation were required (eg: Passport details for ID verification), requiring the user to have everything they needed with them at the first sitting.

The process had several identifiable drop-off points and a great many prospective customers were ringing the Customer Support help-line to complete registration instead, while some prospective customers where leaving altogether, never to be heard from again.

Brief

The brief was to simplify the initial registration process, restructure the post-registration capture of additional information, make the task seem less intimidating, reduce drop-offs and support calls, and add clarity to the process generally.

The final deliverables were to be a fully annotated interactive prototype of the entire registration process, so that Parasol’s in-house creative and development team can build the new system themselves.

Implementation

Understanding the user

Stakeholder meetings with the Parasol team revealed several distinct types of customer and highlighted the key areas of drop-offs on the site while conversations with members of the Customer Support team revealed areas where the process seemed to be causing the most problems for customers.

Some of the more experienced members of the Customer Support team were also able to describe how they handle problems over the telephone: the tone & language used, the amount of hand-holding required for certain tasks, frequently used workarounds.

I created 3 distinct personas representative of Parasol’s archetypal customers, outlining their wants, needs and expectations of Parasol’s website, and then created a number of scenarios, placing each persona within the context of attempting to register for Parasol’s services.

Building a system for the user

I then began plotting the ideal user journeys through the system, ensuring that the scenarios described above were catered for and that the system fit the identified user expectations as much as possible.

Once these user journeys were defined I began the process of creating wireframes for each page in the process. By mapping established best-practice principles in form design on to Parasol’s brand guidelines I was able to quickly and effectively develop a prototype for the initial registration phase.

The wireframes were produced using Axure which allowed me to create and annotate rich interactive prototypes from the mock-ups, demonstrating alternate states and flows through the application.

Results

I changed the structure of the registration process by breaking it up into a number of distinct stages, akin to completing one’s profile on Social Network sites such as LinkedIn or Facebook.

Positive messages were introduced on the logged in user’s home page to encourage them to complete additional information, and helpful explanatory text was shown in context to demystify the process and encourage data entry.

Removing the need for the user to have all the relevant documents to hand at the same time and breaking the various steps up into individual processes effects the user’s perception of the whole process, making it seem like a number of smaller steps rather than one long process. As well as increasing the general usability of the process this also removes a great deal of pressure from the user, allowing them to complete the process at their convenience.

Assets & Resources

Personas

Scenarios

User Journeys

Prototype →

• View the Parasol Group website →
• View the Code Computerlove press release →

First TransPennine Express (FTPE) is a train operating company in the United Kingdom. It operates regular services in the north, including services linking the west and east coasts of England across the Pennines.

Brief

Code Computerlove were originally appointed in April 2007 to review FTPE’s digital strategy and develop an online marketing campaign. Following the successful original redesign and digital marketing activity, Code were asked to develop a new site in 2008 with a number of key objectives including a more engaging design and more prominence given to key customer and sales information.

Implementation

One of my first tasks after starting at Code Computerlove in May 2008 was to define the site structure and page layouts for this new site.

I conducted a full content review of their existing site, cross referencing my findings with the analytics reports to help determine useful or important content.

From there I constructed a site map for the new site and then developed a set of wireframes in conjunction with a member of Code’s creative team.

Together we established an informal, hand-drawn visual style for the site in deliberate contrast to most other travel and rail company websites, which were typically quite formal and corporate. By doing this we gave the site a personality which helped establish it’s reputation and created an emotional bond with it’s audience.

With this visual style in mind a crated a set of interactive wireframes that allowed the graphic designer to quickly and easily design a complete set of page templates for every type of page within the site.

Assets & Resources

Sitemap

• View the First TransPennine Express website →
• View the Code Computerlove press release →

 


Update 18th November 2009:

The TransPennine Express site wins Best Travel/Leisure Website or Campaign at the 2009 DADI Awards.

More details:

• http://awards.codecomputerlove.com/dadis09/tpe/
• http://www.dadiawards.com/