user's avatar
Designing a successful wizard and list pattern

Designing a successful
Wizard and List Pattern

The biggest challenge facing the world’s largest companies is product compliance. Staying on top of an avalanche of strict regulations from around the world and keeping consumers safe has never been so important. ​​​​​​​

We hear news reports of kid’s toys being recalled for safety issues or mobile phone cables melting and catching fire. These events are costly for companies that make them and endanger lives of consumers. This is why companies need to keep track of how their products comply with the strict regulations of any country and they looked to us for an industry solution called PCM (Product Compliance Specs).

My role
Product designer

My central role was Lead Product Designer, alongside my UX Lead colleague and two Project Managers.

The question
How do I stay compliant?

The question our clients are asking is, how do I know if I can sell my product, say a Barista XR3 Coffee Machine in to the UK without risk of violating the regulations of the UK and making sure the Coffee Machine is safe so as not to harm the consumer? It's a massive challenge, with thousands of regulations to keep track of, with each one potentially affecting how you make your coffee machine. 

Product compliance is only now maturing, and currently there are no efficient ways for compliance teams to do their work, as they communicate over email, through large spreadsheets, and paper based files which are difficult to keep up to date and collaborate on. 

The solution is to centralise all this work in one system, and provide the company with critical alerts. The Product Compliance Spec is central to this, being an up-to-date report on the state of a product.

Using two of my favourite design tools


Storymapping is a powerful, fresh and enjoyable way to map and visualise the user’s journey through your product or service, in a visual and dynamic manner. I diagramed many possibilities based on what we learned about users’ motivations. I outlined the steps the user might go though, plus issues that arise and then add behavioural techniques that will keep the user on track. Read more about Storymapping.

Design research

Once I had created story maps and I discussed with the wider team, I move on to conceptual work. This stage is where I explore design patterns and best practice. I like to research academic databases to see if there is anything of interest that I can use, like new scientific and phycological findings. ACM Library, Nielsen Norman Group and Baymard Institute are all great resources to start.

Some design questions I asked myself were; what is the best way to select from an extensive list of items, how to show an infinite list of products without images, and what behavioural strategies could I employ to help the user?

Starting with design principles

I revisited design principles I had created sometime ago and refreshed them. These were put them front and centre in our new process to guide me and the team. Read more about our design principles.

Palette and typography

I worked off our existing palette and used the same typography with a few tweaks. I am now using a heavier weight of typeface, especially on white on coloured background to give more weight.

Design challenge
The list page

The question as 'how to list many items in a readable manner, that is easily scannable and searchable?'

Cards versus lists

I tried many list based approaches. From early feedback, users wanted to see as much data as possible in each row. I prototyped different variations in InVision and showed them to a select group of users. The feedback was that using cards felt more efficient than rows. Also, the fact that keyword search was the first thing user said they would do made the choice easier to make.

I created abstract wireframes based on what main content would be, the darker, heavier elements, the higher priority it is to read.
I settled on an expanded card list approach for the MVP. Search was easy to find and always expanded and was live filtering to make the experience feel responsive. I split the sub navigation into sections, allowing the user the user to filter by less accessed sections more easily.

Design challenge
The creation process

This was by far the most challenging. I did some deep research on academic sites, looking into the most effective ways of selecting from large lists. Going back to first principles, I wanted to keep things focused, hiding the inherent complexity.

Best selection technique

I decided out of the many display options to go for tree like menu, and without using the conventional pattern of checkboxes, to keep the visual as light as possible. There was enough affordance to let the user know that these rows were clickable. Since there was not a lot of information in these rows, I kept it to a list based view.

Step through interface

As there are different types of content to add, I used a step through interface. It might reduce the speed of completion but going back to first principles again, it focused on the job at hand. We tested early prototypes on users and found that they welcomed the step through approach. 
Early prototypes we tested with users.
Finally, I found from user testing that the step through worked well for adding disparate and complex types of data and that the slight reduce in speed from a scrollable one page list worked by allowing the user to make better decisions about what items to include. 

We completed the final step through version and added product imagery to boost recognition.

Designing a successful wizard and list pattern

Designing a successful wizard and list pattern