Adoreboard brought me in to work alongside their product team to redesign Emotics, an emotion analytics product used by consultants and agencies that analyses data to provide actionable insights for brands and research institutions.

UX Audit

Before jumping in with the redesign it was important to get familiar with their current iteration of the product and start figuring out the pain points. Emotics was still in beta at this stage and hadn't yet been released to customers but the internal consultants were already utilising it for live projects. They proved to be invaluable for gathering feedback on current weaknesses in the product and discussing new features.

Old version of Adoreboard Emotics
The old version of Emotics

The old version of Emotics suffered from a lack of clear hieracrchy and a confusing UI. Some of the key issues were:

Storyboards

Once I had spent time with the current product and gathered feedback on the aspects of the product that needed improved, I started storyboarding and creating low fidelity wireframes of the product.

Storyboards for Adoreboard Emotics
Emotics storyboarding

Upload flow

One of the most important aspects of Emotics is uploading datasets that can then be analysed by their engine to display actionable insights. Originally, this was all done within the sidebar — which was too much functionality for a small section of the app.

Upload flow for Adoreboard Emotics
Emotics upload dataset flow

Components

Adoreboard Emotics Components
Some of the designed components

Onboarding

Adoreboard Emotics Onboarding
The onboarding flow

One of the challenges with Emotics is that it is a complex product with terminology and methods that wouldn't be immediately apparent. It was important to showcase the value of the product without overwhelming or trapping the users in an onboarding flow that would only frustrate them.

Adoreboard Emotics Onboarding

Modals are used to introduce users to each section of the app. Users can take the optional tour, at which point they'll be guided through the key features of that page.

The finished product

Adoreboard Emotics Preview

Just kidding.. a product is never finished.

One of the interesting things from talking directly with customers was discovering that conventions that you assume would be obvious to the average user turn out to be far from it. One of these such conventions was the "ellipsis menu" that was being used to group dataset actions within a dropdown menu.

Iterative feedback

After speaking with numerous users and gaining their feedback, it became apparent that this action was too abstract. They weren't aware you could interact with it. So I redesigned it to make the actions more apparent.

As Luke Wrobleski says, obvious always wins.

Redesigning the Adorescore

Adoreboard Emotics Adorescore Redesign
Redesigning the Adorescore

The Adorescore is a pivotal aspect of the Emotics product. Discussions within the team however concluded that too much emphasis was being placed on it and that the score, by itself, wasn't a key indicator of the data. This was leading to confusion from users who felt that the score was too inaccurate and not reflective of the data. To combat this, I tackled two things:

  1. Revisit the hierarchical layout to place less emphasis on the dataset's adorescores from a visual perspective.
  2. Give a visual breakdown of each adorescore that will allow users, at a glance, to distingish if their datasets consists of mostly negative, neutral or positive data.

Logo Design

One of the last tasks I undertook with Emotics was redesigning the brand. The original brand was dated and didn't fit with the new tone of the product.

Emotics branding
Emotics rebrand

I also animated the logo for use on loading screens and marketing material.