top of page

Talon.one campaign rule builder UX/UI changes 

Screenshot 2023-02-10 at 16.52.23.png

Overview

Talon.One is a platform that allows users to create highly customizable promotional campaigns. The platform relies on Applications inside the Campaign Manager

​

The logic of the campaign is implemented by rules. They usually have a set of conditions and effects such as check if the coupon code is valid, or generate a referral code. The rules can be defined by Rule Builder.

Problem

Users are daunted by the complexity and flexibility of the rule builder

Task

Review the usability of the Rule Builder and suggest improvements to the UX/UI (whilst staying on-brand), to make it clearer and easier for users to know what they are doing and how it affects their campaigns.

Step 1: Understand the platform and its user

Why are users are daunted by its complexity and flexibility?

​

Given that this was a case study, I didn’t know who were the users and what specific concerns did they have. My first step was to  use the rule builder to understand the function.

Screenshot 2023-02-10 at 16.03.35.png

After having a quick view of the feature and the platform I used 10 heuristic principles to ‘measure’ the usability of the rule builder to list down basic principles that may be undermining the usability. However my primary source of data gathering was the reviews customers had about talon.one (particularly about the rule builder) and the review of the *competitor's rule builder

​

*Only one competitor offered a cloud based signup to explore the rule builder. rest of the product screens were found from competitor whitepaper and documentation

Screenshot 2023-02-10 at 16.07.18.png

Step 2: Gathering insights

What is happening?

After gathering user reviews of Talon.one from here and the competitor review from here(the ones that directly introduced the rule builder), as well as comparisons between Talon.one and its main competitor voucherify, I found out that…

...Users liked the clean interface but it was difficult for them to understand what they were doing with the rule builder

...The initial learning takes time and they need a lot of support from Talon.one team due to very little description and documentation on the rule builder

...Learning the vocabulary of the tools was challenging

Most of the feedback came from Growth Manager and system administrator (which was also surprising to learn as users with prior tech knowledge also struggled to understand the tool in the beginning. Infact, one of the system administrator said:

​

''...It isn't obvious where the help tools are located, especially when struggling with the code logic''

Why is it happening?

This can be due to:

  1. The phrasing of attributes and logic statements across promotion engines are different.

  2. Users learn by recognition rather than by recall. Many of the icons at Talon.one had a completely different meaning than they would have elsewhere. e,g hamburger icon wasn’t used for menu but for variables.

  3. Some of the disabled text on the rule builder was barely legible. It caused more clutter than direction

  4. There was inconsistent microcopy on the boolean logic

  5. Warning statements are not well communicated

​

​

On the bright side…

Talon.one is one of a kind with the utmost flexibility in their logic statement. After the initial learning phase, users have reported being granular and creative setting up campaigns. A head of the product reported

​

‘Literally any data point can be used as the basis for a rule and therefore allows full creativity in promotion campaign design…’

​

Furthermore the customer and competitor review showed:

  1. Initial learning in these platforms is expected

  2. Users of Voucherify had less complaints regarding the field ambiguity

The absense of helpful cues as well as its own unique terminology and icon usage could be increasing the learnability of the platform. At this point the idea was to add improvements to the while staying on brand. To understand the brand, I reviewed their website and their instagram feed to assess their brand traits. Based on the data, I formed the three customer opportunities

​

How might we

Reduce initial learn and setup time?

make our terminology, fields and options understandable?

highlight warning statements

Make help and documentation accessible?​

Step 3: Ideation

Talon.one UX Case study123.png

i started collecting and reviewing how rule builders across platforms look like. Right away I noticed that the the nested logic were clearly distinguished either by visual cues or proximity. Also users can drag logic sentences within a condition and there were examples of rule builders that clearly illustrated the affordance of moving a logic statement around.

This is also possible on Talon.one rule builder however I discovered that accidentally and noticed that there was no such signifier.

Screenshot 2023-02-11 at 12.49.15.png

I drew some quick sketches to explore some dramatic interaction changes however at this point starting slow and addressing UX changes that aid onboarding seemed like a rational way forward

Talon.one UX Case study.png

Step 4: UX Changes

Design system

Screenshot 2023-02-20 at 18.10.07.png

Talon.one uses a variation of Ant Design system for their components however my UX changes called for some modification in their pattern library (particularly for their dialogue box)

UX/UI changes

Before

The current layout is clean and has one action to guide the user. This is already a good design principle (Fitts law). Though the competitors has example templates of frequently used campaigns that the user can look at and build with minimal intervention. This can introduce familiarity.

Rule builder no rules - before.png

After

Depending on the most common campaign use cases, Talon.one can also have templates where the user can just observe and see which attributes are used to form which conditions and actions.

Rule builder no rules.png

Before

Some of the disabled attributes were difficult to read. Furthermore the context on why they are disabled  is available on hover. However I noticed that the language was passive and did not provide help on how to enable the attributes.

Screenshot 2022-12-21 at 20.09.png

After

To make the learnability and onboarding smoother I added the context above the attributes rather than have them available on hover. The text redirects to actions user can take to enable those attributes.The lightness on disabled text was increased for better visibility.

Rule builder advanced shown.png

Before

  1. The current layout has access to documentation on the bottom right side under support. Given that many users have flagged lack of documentation, it can be possible that they not have been able to find it.​.

  2. Advanced functions on the top right may scare the new users as many competitors had further options tucked away under 'advanced'

  3. There is also inconsistent delete icon color (red and black)

  4. Many icons that have a different meaning across platforms had a different meaning in Talon.one. This can confuse users. E.g. the hamburger icon primarily used for menu was used here for adding variable text

image 12.png

After

  1. Functions that couldn't be translated into icons are shown as links

  2. There is a quick access to documentation on the top right

  3. Consistent delete icon color

  4. Advanced options tucked away under advanced

Rule builder conditions expanded.png

Before

Nested logic is shown as box within a box however this can be more obvious. Furthermore its hard to know if the logic statements can be dragged up and down

nested rule.png

After

I added rules to show the nested logic to establish hierarchy. I also added an signifier to show that the statements can be dragged. Furthermore the dropdown option for and/or was made visible to users.

Rule builder with a line nested loop.png

Before

Warning statement blend into logic statements  -no clear error prevention

t-pm-candidate.talon 8.png

After

Warning statements communicated clearly for error prevention

Rule builder conditions expanded--.png

Before

The copy on some of the buttons in the dialogue box was long 

content exploration.png

After

Perhaps the type as well as the warning can be communicated in the header and the copy on the buttons can be kept small

Rule builder dialogue 3.png

Accessible color swaps

The warning and error colour on the left did not pass the WCGA AA compliance when they were placed on a light blue background.

​

And similar to conditions, some icons were replaced either with icons that closely resembled the function or links.

Group 15.png

Before

Screenshot 2022-12-21 at 20.34 1.png

After

Group 15.png

Reflections

  • Customer reviews are not enough to suggest that talon.one rule builder is more complex than its competitors

  • Interviews and usability tests of the suggested tweaks would quickly prove/disprove the suggested designs

  • While UX/UI plays an important part, the entire service design can help onboard new users

  • Most of the competitors seemingly have a learning curve. It is expected for the users to invest time in understanding the interface

  • More research can help improve the interaction as most of the focus was in making the documentation accessible and UI and microcopy consistency

  • User onboarding and progressive disclosure based on user behavior can reduce the learning time

Next steps

  • Test the designs with actual users

  • Focus on rule builder onboarding 

  • Iterate on the rule builder after AB testing, customer and stakeholder feedback

Curious?

Let's get in touch

Thanks for submitting!

You have reached the footer

Vector.png

© Arika Dodani 2021 | Designer | arikadodani0@gmail.com

bottom of page