box factura onboarding · box factura chose the red as part of its identity because it was the...

www.boxfactura.com

Created by: Rafael Soto

[email protected]

Box Factura OnboardingUX CASE STUDY

Benchmarking

Best practicesCustomer journey

Analytics dataInterviews

RESEARCH METHODS

Improve retention3

Make it friendlier2

Simplify1GOALS

A successful content marketing strategy years prior started bringing thousands of visitors related to the service they were looking for. They were signing up, but they weren’t understanding how the product could help them in their businesses’ administration.

PROBLEM STATEMENT

We helped Box Factura to effectively teach its users the product’s features through a step-by-step onboarding process, striving for the aha! moment and pushing them through an email automation program.

SUMMARY

PAGE 1BOX FACTURA ONBOARDING | CASE STUDY

She will find Box Factura via a non-tutorial content, or by referral. She knows everything about tax reports and how a missing invoice will affect the business, so she wants to wants to have as much control and order as possible.

“If we don’t control the invoices, the tax report will be a mess!”THE ADMINISTRATIVE MANAGER

She’ll get to Box Factura mostly by a referral. She won’t grasp fully how an invoice works, but gets that it’s a requirement for her accountant to make the tax report. She also thinks it’s a chore, but it’s more cautious about it, since any mistake would either make her pay more taxes, or get in trouble.

“Invoices are a chore, I just want to get to work”THE ENTREPENEUR

He’ll find Box Factura through one of its 300+ tutorials on how to get an invoice for different services. He doesn’t really understand what an invoice is and only knows that his employer is requiring it, and otherwise he’ll get in trouble or won’t be refunded for this expense.

He’s in a rush and will click on everything without reading.

“I just want to get my invoice”THE SALESMAN

UX Personas


• Business’name

• Tax code ID

Legal Person

• Person’s name

• Tax code ID

Physical Person

Sending an

invoice

•

4

User’s Box

Factura account

•

3

Business name

Tax code ID

•

•

2

Email

Password

•

•

1

Step 2 was found to be the bottlenecks we found through the

interviews and analytics info—many people were giving up on this step

because they don’t understand the jargon, and the tax code ID format

depends on whether you’re a natural person or a legal person.

The new step 2 began asking the type of legal entity the user does

business as, with graphics that begin asking whether you’re legally a

person, or a corporation.

We began wondering if the current process was asking for more

information than required. It turned out that while we couldn’t simplify

more, the process could be a lot cleaner.

INFORMATION REQUIRED

The Design Process


Almost all of its competitors used a serious and business-like image, using stock photos and blue/gray colors. Box Factura chose the red as part of its identity because it was the competitor’s polar opposite, as well as custom, sketch-like illustrations to convey a relaxed tone.

It was decided that following that identity was the way to go, so we started sketching some graphics to be vectorized later.

VISUAL LANGUAGE


Within our benchmark and best practices study, we found three or four layouts that were very popular, so we started prototyping on them.

We ended up with a contrasting two-columns layout, in which the sidebar would include contextual tips, as well as a progress indicator, to reduce user’s uncertainty.

THE LAYOUT


IMG 01: ACTIVE ACCOUNT

While steps 1 through 3 were about asking for information, step 4 was about doing something—finding an invoice they already had, and sending it to their new invoices mailbox.

The last iteration had the right idea, but it included a spinner which confused the users because they thought they had to wait for something, while the real message was we’re waiting for you. So the spinner had to go, we conveyed the same message through a lock, which they could open by sending an email with an invoice.

Forcing this user action was deliberate—we wanted to make sure they get the idea of Box Factura helping them sort their digital invoices. If they didn’t take action, the email lifecycle program would invite them to finish this process.

Once they sent their email, we wanted them to feel like they had taken a big step, so the graphic had to be cheerful.

THE AHA! MOMENT


IMG 03: DOWNLOAD IN PROGRESS

IMG 02: DOWNLOAD INVOICES


And for the final sub-steps through step 4, we showed them how her

invoices will be received, stored and how she can download them with

an Excel file included (which in itself is a second aha! moment, because

it solves the data capture part of their job).

After deployed, through data we observed that some users were having typos with their email address, so we suggested blocking them if the domain looked wrong for the more popular email services: Hotmail, Gmail, Outlook and Yahoo.

FINAL TOUCHES

If the button doesn't work, you can copy and paste the next URL in your browser: https://twitter.com/rafael_soto_/status/1243223192086421504

Some subtle transitions were implemented inbetween steps. The feedback was well received, as these effects were perceived as friendlier by the individuals we interviewed.

You can see the process in its final form here: PLAY ANIMATION

ANIMATIONS


https://twitter.com/rafael_soto_/status/1243223192086421504

To invite them to keep using the service.

The whole process was finished.Created account, sent invoice

To send an invoice.Created a Box Factura account but didn’t send an invoice.

Created account, didn’t send invoice

To finish the process.Began the process but desisted before creating their Box Factura account.

Registered user

To begin the signup process.

Didn’t sign up, just left their email via a leads-capturing form.

Leads

OBJECTIVEDESCRIPTIONTYPE

1. The messages should be short, we don’t want to overload the user with information

2. The email design must not rely on images3. The design must be responsive4. The implementation should be easy

After this, we settled with the team on a few goals:

Most new users were not finishing the onboarding process—worst of it, they were not even reaching the final step. We were getting signups, but they were not effective (they didn’t get to the aha! moment).

A push approach was needed, so we began analysing each one of the steps, as well as the goals we wanted to convey these users.

Email lifecycle


With these goals in mind, we decided on a LEGO-like assembly for the whole email lifecycle, in which each email had a main subject, a short description, an optional FAQ/additional element, a CTA, a list of 3 smaller features and a client testimonial.


IMA

GES BLO

CKED

BY CLIEN

TW

ITH

IMA

GES

For earlier steps, we wanted to show the user the reasons they might like the product, and inviting them to finish their signup process, so we chose one of the big features as the email’s main theme.

For the third group, the main message was not about the big features, but for the action they needed to do (send an invoice).

And finally, for the effective users, the messages were about next steps and to remind them to keep sending their invoices.

Vendor portaladd-on

Travel expenses add-on

FilteringSearchQuick reports

SMALL FEATURES

Additional servicesAutomatic Excel generation

Check against black list

Invoice validationCloud-based backups

Invoice reception service

BIG FEATURES

We worked on two lists of big and small features:


Twenty four emails were created rapidly with this LEGO assembly approach. Design-wise, the emails relied on features easily done with only CSS and typography, the graphics were not required to understand these emails and were used just for small details.


E-mail title

Alert message

Referral image + CTA

Benefits

Testimonial

CTA

Social media

Branding element

Footer

THE LEGO ASSABLY STRUCTURE

Results

Higher retention rate31%

Effective users increase19%

Revenue increase22%


box factura onboarding · box factura chose the red as part of its identity because it was the...

Documents