BACKGROUND

The field of computational chemistry is highly complex and specialized, and the existing tools used (by academics) are designed for experts in the field and also require extensive technical and programming skills.

While there is a growing demand for computational chemistry, the existing tools on the market are inaccessible to chemists who don't have computational chemistry expertise.

The UBC Chemistry team wanted to develop a solution that would solve this problem by creating a new type of tool that would serve the needs of chemists of all skill levels. They sought Spatial's help to create an exceptional product design.

DISCOVERY PROCESS

Understanding the problem space

Starting with an open-ended brief, we conducted market and competitive research and conducted user interviews with several chemists with varied backgrounds and areas of focus. We also interviewed subject matter experts to understand the challenges they faced when using computational chemistry in their work.

Forming insights and providing recommendations

Based on discovery findings including research, we recommended starting with a Proof of Concept prototype that would focus on solving this problem to have the most impact.

DESIGN PROCESS

Iterative approach

We followed an iterative design process that included input and feedback at each step. The first iteration created the end-to-end flow for a first-time user – taking them from login to setting up the parameters for a job, to completion of a calculation. The second iteration involved designing detailed screens to enable a calculation to be set up. And the third iteration delivered the interactive prototype.

Leveraging AI to support concepting

Given the complexity of the subject matter, we used ChatGPT to answer a range of questions about how a non-expert might approach the task. It was a valuable tool for concepting as it allowed us to quickly get answers to help shape the UI design.

We validated the information with input from subject matter experts – and we all agreed that using ChatGPT allowed us work efficiently.

It also sparked a whole new way of thinking about the possibilities of using ‘large language models’ and AI to support further rounds of interaction design.

Prototyping

Once we vetted our design assumptions, we developed the prototype in Figma, creating fundamental interactions and flows. We also established a basic visual design for a professional, polished look.

We delivered an interactive prototype that would enable a guided walk-through of an end-to-end journey, from setting up a calculation to understanding and interpreting results.

In addition to delivering an interactive prototype, the design package included notes captured during the design process to inform further design.