JMCQUARRIE.co.uk

James McQuarrie is a UK based Product Management Consultant who helps teams design, build and deliver digital products and services that delight their users.

Kynd

Kynd is a cyber risk prevention company, helping owners of businesses of all sizes manage technical risk.

When I first spoke with the founding team at Kynd they had a lot of ideas about what their new service would offer and the different audiences that it would target. They needed help to articulate their ideas and start prioritising the long list of features they believed they needed to start building.

Over the course of a number of workshops I worked with the team to organise their target audiences into groups and prioritise them.

I designed a number of different customer journey maps for the different audiences that allowed the team to discuss how they would be prioritised, were there was overlap between the processes and where the differences would be.

We then worked through prioritising the features that would need to be built for each experience and for each audience.

Once we had agreed on user flows and which experiences to prioritise I designed a series of low fidelity wireframes that brought to life the different elements of the flows and allowed the team to further discuss the experiences that they wanted to give their customers.

The designs of these wireframes were quickly iterated based on those discussions, allowing us to explore a number of different UI concepts along the way.

Over the course of 10 days of consultancy I delivered:

  • customer journey maps for on boarding 3 different customer types
  • 8 iterations of wireframes for each of the screens involved in on boarding and first time use journeys of the different customers
  • designs for the different states of each screen involved in the on boarding and first time use journeys.

Examples of the output of the process are shown below.

On boarding and first time use user journey maps Figure 1 – User journey maps for on boarding and first time user flows

Examples of how the user journey maps were documented are shown in figure 1. Each map shows the interactions and touch points a user will experience as they complete a task, on boarding or setting up their accounts in these instances. The maps were drawn using Jesse James Garrett’s “visual vocabulary for describing Information Architecture and Interaction Design”. These types of diagrams can be easily drawn by hand on a whiteboard while being discussed in workshops and then more formally documented once processes and user journeys have been agreed.

Screenshots showing how the design of the Kynd dashboard evolved over time Figure 2 – Evolution of the Kynd dashboard designs

The screenshots above in Figure 2 show the evolution of the designs for the most important element of the Kynd product, the dashboard. This gives users an overview of the current state of the cyber threat they are exposed to and helps them quickly address any issues that could impact their business.

The designs needed to balance showing large volumes of data in a clear and understandable way. They also needed to make it clear what (if anything) had changed between user visits. A simple “cyber threats” summary was designed to allow users to see at a glance how many issues Kynd are tracking on their behalf, how many are potentially critical, how many they need to be cautious of and how many they are already covered for.

A notification centre was designed to allow users to track activity over time and easily see what had changed between each visit to the dashboard.

Screenshots of example documentation of designs for different states of screens Screenshots of example documentation of designs for different states of screens

The wireframe designs and accompanying notes shown in the screenshots in figure 3 show how the designs were documented in detail for hand over to the client and their development team. Each element of the design has additional information about it recorded in notes in the document that developers and UI designers can use to inform how they interrupt and implement the designs.