David Hall logo David Hall

Cover

Designing a powerful compliance solution for the world's leading companies

Compliance & Risks

Product compliance solution

Imagine that you're launching a revolutionary new product, but there is a mountain of regulations that stand between you and getting it into customers' hands. Keeping track of these ever-changing rules, spreadsheets, emails, and paper files can be a nightmare and we've all seen news reports of dangerous products causing injuries or fires.

Companies need to make sure that their products meet safety standards without drowning in paperwork. That's where Smart Specs comes in. 👏

How do I know if I can sell my product, say my coffee machine in to the UK without risk of violating the regulations of the UK and making sure this product is safe so as not to harm the consumer? There are so many moving parts, it can be an impossible job.
Product compliance officer, top 10 multinational
1. The challenge

How do I stay compliant?

The question our clients are asking is, 'how do I know if I can sell my product, 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 a coffee machine company can make their coffee  machine. Currently there are no efficient ways for compliance teams to do their work. 🤯

2. Our goal

Centralising the work

Smart Specs brings everything together in one system, acting as a central hub for product compliance, and an end to manually sifting through data.





3. My Role

Lead product designer

As design leader on the project, I worked alongside a fantastic team to bring our vision to life. From understanding user needs to designing the final interface, my focus was on creating a solution that's as intuitive as it is efficient, and using the power of AI to streamline tasks.

Roles of a designer
4. Research & discovery

Starting with the Jobs to Be Done approach

Instead of jumping straight to solutions, we used the Jobs to Be Done (JTBD) framework to understand the core needs and motivations of our users. This framework focuses on the "jobs" users are trying to accomplish, giving us valuable insights into the goals they're trying to achieve.

To put this into practice, we started by interviewing users of our platform. We asked them about their daily experiences and the challenges they faced. This helped us create user personas that reflected the real people using the platform and their specific needs.

Pain points we discovered

  • Regulation overload and figuring out which regulations to prioritise is a constant struggle
  • Keeping up with the latest regulations feels impossible, often leaving us scrambling to catch up
  • Gathering and exporting safety certifications is a time-consuming nightmare due to them being scattered across different teams

When we gathered as much data as we could, we created job stories in this simple format below.

Job stories

Using Storymapping as a design tool

Storymapping is a powerful way to map and visualise the user's journey through your product or service, in a visual and dynamic manner. Taking the job stories as a base, I diagrammed many possibilities becasue of 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 users on track.

From user needs to design research

ACM website

After collaborating with the wider team on the user story maps, I shifted my focus to the conceptual design phase. Here, I looked into established design patterns and best practices to find inspiration. To stay up to date, I like to explore academic databases for new research in psychology and other relevant fields.

Some of the resources I found valuable were the Nielsen Norman Group, ACM Library, and Baymard Institute. As I explored, I challenged myself with design questions. For instance, I looked at how to make selecting items from a massive list more efficient, how to display endless product lists without images effectively, and what user behavior strategies could be used.

product team The product team working with the complex content we must design for.
5. Design principles

Starting with design principles

With a clear understanding of your needs, the team used our core design principles to guide the development of Smart Specs. We also considered how AI integration would influence the overall design.

Learn more about design principles

6. Design explorations

The best way to display lists

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

Design exploration

Cards versus lists

I tried many lists 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 the main content would be. The darker, heavier elements, the higher in the hierarchy and importance the content is.

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 to filter by less accessed sections more easily.

exploration_wireframes

Creating an efficient wizard

By far the most challenging design was how the user selects a large range of items easily and efficiently. 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.

exploration2

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 the 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.

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.

exploration_wireframes2
7. Visual approach

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.

palette
8. Design solution

Bringing it all together

After more testing with hand-picked and engaged users and the internal team, we felt we had a strong user flow and end product.

screens_library screens_two screens_components screens_save
9. Outcome

Happy customers 😊

We trialed Compliance Specs six months ago, and the uptake was immediate. Being a new concept for many companies, and knowing their needs, we were still amazed by the enthusiasm. The feedback is that our Compliance Specs platform is the way forward for all Product Compliance teams, and it will be the future to their success.