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
PAGE 2BOX FACTURA ONBOARDING | CASE STUDY
• 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
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
PAGE 3BOX FACTURA ONBOARDING | CASE STUDY
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
PAGE 4BOX FACTURA ONBOARDING | CASE STUDY
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
PAGE 5BOX FACTURA ONBOARDING | CASE STUDY
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
PAGE 6BOX FACTURA ONBOARDING | CASE STUDY
IMG 03: DOWNLOAD IN PROGRESS
IMG 02: DOWNLOAD INVOICES
PAGE 7BOX FACTURA ONBOARDING | CASE STUDY
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
PAGE 8BOX FACTURA ONBOARDING | CASE STUDY
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
PAGE 9BOX FACTURA ONBOARDING | CASE STUDY
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.
PAGE 10BOX FACTURA ONBOARDING | CASE STUDY
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:
PAGE 11BOX FACTURA ONBOARDING | CASE STUDY
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.
PAGE 12BOX FACTURA ONBOARDING | CASE STUDY
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%
PAGE 13BOX FACTURA ONBOARDING | CASE STUDY