JMCQUARRIE.co.uk

James McQuarrie is a London (UK) based User Experience Consultant who designs and helps build digital products & services that delight their users.

Arcadis

Arcadis is a global Design and Consultancy company specialising in natural and built assets

The Learning and Development team at Arcadis is responsible for the professional development of the company’s Consultants, from the most junior Apprentices to the most senior Directors.

They approached me to get help structuring the requirements for a new version of their internal website that they planned on building. The site provides information about the courses they offer, how they fit into an Employee’s “Personal Development Plan” and details of how to sign up for the courses.

I provided six days – two days a week for three weeks – of consultancy during which I:

  • helped the team understand the audiences for their site
  • developed the content and functional requirements
  • provided a set of wireframes for the key screens within the site
  • built a set of HTML & CSS mock ups of suggested interaction designs for those key screens.

Discovery workshops

The first stage of my involvement in the project involved running several discovery workshops in which the Learning and Development team helped me understand how they operate within the wider business. These sessions allowed me to understand the strategy and scope of their work, and uncover who the audiences for their new website would be.

The workshops also helped me uncover that the team had not considered how the site would be managed and maintained once live. To address this we added Admin’s and their needs to the requirements, allowing us to consider the workflows and interactions needed to update and maintain the website once live.

Setting the scope

Based on the identified audience’s needs and the site’s objectives I then worked with the team to agree the content and functional requirements for the site and its admin portal.

Much of the content for the site was planned, but did not yet exist. To account for this we catalogued and categorised the content that did exist and worked through the types of additional content that could be added in the future. We considered the medium (video, text, pictorial, etc), length, complexity, sources and longevity of all possible content.

From this work we made an example set of all possible types of content that the site would need to accommodate which we used throughout the rest of the design process.

Developing a structure

Using the example content set that we’d developed I next focused on understanding the User Journeys that our various audiences would follow in order to consume, edit and maintain the content throughout the site. These journeys were then documented as a series of Information Architecture diagrams that allowed me to review and iterate the designs with the Arcadis team until we were happy with an agreed structural design.

Building a Skeleton

Building on the structural designs I then focused on sketching out a series of wireframes that were reviewed with the team in order to bring the designs to life. First this was done quickly through a series of discussions around a whiteboard. Once we had agreed a direction to take, I then mocked up a collection of simple HTML & CSS screens to show how the ideas we’d discussed would work in browsers on different devices.

These mock ups went through their own series of iterations until the basic navigation, information and interface designs were agreed.

The visual design was not addressed beyond applying basic colour and text treatments based on the Arcadis branding style guides, as this was out of scope for this stage of the project.

Deliverables

At the end of my six days with the team I left them with a requirements document that described the design process we had been through, listed the conclusions of each stage in the process and included a series of wireframes (produced in Omnigraffle) for the key screens throughout the site with full annotations. I also provided the team with the HTML & CSS mock ups I’d developed to allow them to demonstrate how the site would work to other teams around the business.