FTU experiences



Project: Introducing Machine learning/AI technology

IVA is BILL’s super cool, automation feature that stands for intelligent virtual assistant. It can do a lot of things, but mainly, it’s used to scan documents to extract data and populate forms for you, such as invoices, bills, receipts, etc.

Really cool, but getting users to understand this technology was one of the challenges at our company. User feedback was consistent in that they didn’t understand what this technology did, and they struggled to understand the concept.

My hypothesis for this is because we were trying to overexplain (I call it TechSplaining) the feature. Here’s how the previous content explained what IVA does:

What are we trying to say here? Does the user understand what’s actually happening?

There’s a few issues with the content here, the first of course is that it’s way too long. But some other questions I would have as a user would be:

  • What is IVA, and what does it mean for me?

  • What is “auto-save” and how is it related to IVA?

  • Do I have to do anything to activate IVA?

  • How long is this going to take?

  • Is it really efficient if I have to read all that?

When we tested this with users, they often stated they didn’t quite understand what was going on, or what we were trying to tell them. This caused cognitive overload, so the next resulting page confused them when it either returned positive or negative detection results.

Approach

Don’t over explain a feature when a simpler explanation will do. This isn’t the time to “brand” your feature, it’s a time to give the user the simplest, easy-to-digest information while they’re uploading their bill details.

I took a more user centric approach by thinking through the user research, and answering the question of “what does this actually mean for me?”.

Revised content

Revised for simpler, more intuitive read

The revised content is simpler, more concise, and provide just as much value and information as the previous version, without causing too much cognitive overload. The user understands that we’re simply scanning their document to auto fill their data, and that’s all they need to know about how it works.

By giving some reassurance with the time it takes to process, we’re alleviating concerns, giving them confidence that this feature is beneficial for them.

When the scan completes, our help text provides contextual information to further assist users in understanding what we were able to do for them.

Partnering with my designer, we also created overlays to call attention to important details. While the overuse of this treatment isn’t always ideal, in this case, we felt the amount of attention needed here was appropriate.

Now, users were able to better understand the automation process, and most importantly, which fields were auto-filled vs which ones still needed input by the user.

Project: introducing grabpay

The Brief

Grab, the leading car-riding app in Southeast Asia, is introducing a new payment system called GrabPay, in a partnership with Moca. Providing the current introductory UI, they have seen a low click-through rate due to what they believe is a poor UI and confusing terminology.

The introductory screen is a set up to verify some bank information with the user’s institution, and there was a disclaimer the client wanted to make sure to include about any leftover Grab balance.

Approach

Remove unnecessary cluttered language and focus on the benefits. I advocated that the introductory screen should be used as an opportunity to get the user excited, and if they had any more concerns about privacy, security or other, we can always provide links in the following screen.

Before

grabuitemp.png

First iteration

Grab1st.png

1ST DESIGN

Focusing on a clean call to action button and simplified visual structure, I designed the layout to be read more vertically to account for users thumbs, and maximizing button size without occupying more space. Used icons to highlight benefits and made the focus points stick out with Grab branded colors.

Exercise 1 Final.png

FINAL RESULT

Simplified visuals even further and ruthlessly cut out any unneeded copy. The simpler text makes it easier to localize in various languages, and offers the user immediate reasons why they should activate this service. The new design was well received by the design team.

How I would do it differently today

Focusing on a cleaner, simpler layout with a minimal color palette and less distracting elements, I’ve condensed the microcopy down to its essential elements. I ruthlessly remove any words or information that isn’t particularly useful, focusing on only what the user needs to know at this point.

grabpay.png

The CTA is rewritten to convey a low-risk, minimal commitment. The subcopy focuses on one unique benefit/value proposition, while giving the user what they need to know in order to enable/learn more about this feature.