Interaction design case study: GPhC

Happy users = happy clients

Our goal is to build websites which make our clients happy, by making their users happy.

Key to this is excellence in interaction design.

We adopt a flexible interaction design process, built on industry best practice and years of in-house experience, and heavily adapted for the specific needs of each and every client and project.

Below is an example of this interaction design process in action. These days, we're increasingly influenced by a Lean UX methodology. This places an emphasis on the end result using a responsive, cost-effective approach to interaction design.

An example interaction design process

An example of the interaction design process is shown below, with sample visuals taken from the GPhC website, phase 1 site development. We chose this project for its simplicity, to demonstrate a typical interaction design process:

1. Background Research and Requirements Analysis

We help our clients determine exactly what we they are looking to achieve.

2. User Persona

Breathing life into the users of the web site, we create personas for each type of user. This helps the whole team focus on who our users are, and what they want.

For each user persona, we give a brief biography and define their needs / goals in using the site. Personas are typically based on interviews with real users (typically a fictionalised combination of several of these).

3. Site Map and 4. Taxonomy

This is a section of site map showing the entire layout of the site and the names of all screens.

5. User Journeys

Showing, for each user persona, how and why they would interact with the site (as mapped) to achieve their goals. This enables us to validate and / or amend the site map, to ensure it facilitates our user’s needs.

6. Interactive Wireframe Prototype

We use a variety of tools to create interactive HTML prototypes to show how the site navigation would operate from within a web browser. Typically, we create wireframes for every type of major page on the site (i.e. one wireframe for each template).

The public area home page wireframe is shown above, with the design for this and the staff area shown below (see Visual Design).

More intensely interactive sites than this phase 1 site often benefit from interaction modelling, showing in detail how key user interactivity will operate.

7. User Testing

What do real users think of the interaction design so far? This can be done at various stages in the design process. For instance, the 1st set of interactive wireframes is often an excellent opportunity to seek input from typical users.

This user feedback is iteratively fed back into the interaction design.

8. Functionality and Behaviours Document

Late in the interaction design process, we create a paper document defining all functional elements on the site and – for each of these – we specify both the expected behaviour and ‘error’ behaviours (i.e. behaviours which support users who don’t use the functionality in the correct way). i.e. this document specifies what the site will do.

8. Technical Specification

This defines in technical detail how the site functionality will be delivered.

9. Visual Design

Interaction design is translated into a visual design, often building on an existing corporate brand – and on iterative feedback from our clients.

Above are screen grabs from the phase 1 GPhC open site (left) and staff intranet (right).

An on-going process

Here is a case study on the GPhC, showing how the website has continued to evolve along with the organisation itself.

And here’s the latest version of the site itself: pharmacyregulation.org