Set up for product success: Designing Qubit Aura's interface

Share this article


The goal with Aura’s product design has always been simple — create a clear and easily navigable platform for people to digest the rich content of a complex algorithm.

Initial feedback from alpha and beta customers seemed to feature a number of points around how the visual design lined up with their own style guides. These could vary wildly from brand to brand. We needed some customisation options so that brands could adapt Aura to suit their style.

So many options

Settings environments can be a struggle. You quite often only want to change one thing, if you’re lucky there’s a search. If not, you have to trawl through lists of options for things that you didn’t even realise were features, let alone that they were customisable.

 Image-SB

Breaking the possible configuration options down into bite size chunks was key for creating an easy to navigate workflow.

We had various types of settings to accommodate:

  • Visual settings — header options, font, image styles
  • Icon colours and styling
  • Language and brand name
  • Triggers
  • Traffic allocation

We ended up dividing the configurable options into two sections: things that affect what you see when Aura is open, and things that affect where, when and how Aura is shown in the first place.

 Image-2-SB

What the end user sees — “Configuration”

Early on in the design process we discovered the need for multiple previewing formats. We’d factored in having a preview when you were making changes, but not before that point. This meant that even when people only wanted to preview Aura, they would have to go into edit mode — not a particularly secure workflow! So we added an immediately accessible preview onto the main settings tab for people that just wanted a quick overview.

That then enabled edit mode to be a separate, more focused environment, housing everything to do with what the website visitor sees.

Initially we looked at a step by step process, cutting groups of settings down into manageable chunks.                                                                        

 Image-SB-new2

This made it easy to set Aura up first time, but it was less good for the people who just wanted to make that single change. On top of this, some settings like font colour and header colour would need to be edited side by side to see how they interact with each other.

So we adapted the designs to keep all these settings in one view with collapsible menus so it’s quick and easy to find the area you want to customise.

IMAGE3-SB

Where, when and how — “Advanced”

The advanced section allows brands to make adjustments to how Aura is shown. This makes it possible to only show Aura when you want website visitors to be in discovery mode. This is particularly useful on basket and checkout pages where you normally want the user to be more focused, and only really have recommendations for quick addons.

Removing Aura from these pages leaves buyers to fully focus on filling out their delivery and payment details.

image6-sb-1

Where are we now?

The configuration environment being out in the open has an effect on how we design and build every new feature or iteration. After coming up with the default approach we look at how much flexibility we can give clients to style the elements in a way that we can still maintain and improve.

We try to double up controls where we can to keep Aura as simple to set up as possible. That way users don’t have to spend hours choosing each individual button colour.

This post is part of a series about the business facing interface of Aura. For an overview of where this sits in the bigger picture, click here.

Subscribe to stay up to date