HelloSign Onboarding on Mobile Apps

A new design opportunity was identified thanks to previous research (Customer Effort Score and User Interviews) conducted by the Lead Product Designer. The opportunity was to streamline the onboarding process after new users reached the home screen of the mobile apps.

I created a user journey to identify the key onboarding parts needing attention – ignoring login and account authentication. This user journey combines qualitative data from previous research (CES scores and User interviews) and quantitative data from the onboarding funnel*.

*It is important to note that the onboarding funnel starts on the home screen and finishes on the success page of the signature request

KEY TAKEAWAYS & AREAS OF FOCUS

• The FTUX (First Time User Experience, when the user lands on the home screen for the first time) is too abrupt for users, who wait for more guidance or key actions; this reflects on the conversion data;
• Even after the user taps the plus button, the user struggles to move forward;
• The third focus should be on the editor, which shows bad qualitative reviews and conversion rates.

After gathering all this information, I decided to map the current flow to see how these key takeaways would reflect on the user flow. I included How Might We (HMW) statements () and Assumptions () that tackle different parts of the experience.

Besides focusing on the key takeaways of the previous research analysis, it was also necessary to revisit the initial goals to include other possible increments that were left out, such as: communicating the value of the app for new users.

To generate design solutions for the abovementioned problems, I looked for UI patterns within the Dropbox Design System library and made some adaptations following the guidelines.

After a round of design critique with other Product Designers from the Document Workflow team and further consideration with the HS mobile team, I could choose which UI pattern to use. I added the selected UI patterns to two different user flows, explained in the next session. Below, see all options that were created.

ENTRY POINT TO ACCESS 'GET STARTED' INFORMATION

DISPLAYING INFORMATION

BOTTOM SHEET

Before redesigning the bottom sheet, I analyzed the usage data of the different CTAs of the current design. Thanks to this data, we could make more informed design decisions regarding placement. Check out the data and key takeaways below.

Key takeaways & Observations:

• "Upload file" is the most used option among new users;
• "Use template" is the second most used option (but it is only available to paid users);
• Tied in third place are "upload photo" and "scan document";
• "Share from another app" is not an action and leads to an education screen.

BOTTOM SHEET REDESIGN

Besides working on the hierarchy and spacing, I reviewed the microcopy with a Content Designer. Thanks to that, some options' microcopy also changed.

High-fidelity Prototypes & User Flows

We decided to create two different onboarding approaches:

• Option A - "Action-driven": focus on guiding users to key actions early on in the user flow;
• Option B - "Educational": focus on educating the user about the app's capabilities.
  

OPTION A

"Action Driven" flow if you select "Upload files"

"Action Driven" flow if you select "Skip"

User flow

OPTION B

"Educational" flow if you tap the banner

"Educational" flow if you close the banner

User flow

User Testing

To validate what was working and see if the users leaned more toward one flow than the other, we ran an unmoderated test with six people (using usertesting.com). All of them were unfamiliar with HS mobile app, and only one had used HelloSign before.

Even though I was the one who created the research plan, I had the opportunity to review it with the team's UX Researcher. Thanks to that, we made some critical adjustments to get more reliable results, especially in the screening process.

WHAT WE TESTED

• First, each participant tested a preliminary screen displaying a value message that simulates the first screen you see when opening an app for the first time;
• Later, the testing platform guided each participant to two different flows in randomized order:
  • A - "Action-driven" flow;
  • B - "Educational" flow;
• Both flows explored the use of rich tooltips on the editor;
• Prototype A - "Action-driven" used rich tooltips on the home screen;
• In addition, prototype B - "Educational" also guided users to test a sample document.

DECISIONS

Thankfully, we were able to reach a few conclusions after running the unmoderated test.

Keep

• A - "Action-driven" option;
• Simple tooltip pointing to plus button;
• Rich tooltips on the editor screen.

Delete

• B - "Educational" option;
• Rich tooltips on the home screen.

Reevaluate

• Abstract illustration in the value message;
• Sample document.

The following elements were not the focus but had a good performance during the user testing:

• Signers' options screen;
• Labels below fields (on the editor screen);
• Bottom sheet redesign.

New Design Proposal

See below the new design proposal taking into consideration the unmoderated test insights.

User flow if you select "Upload files"

User flow if you select "Skip"

User flow

HAND-OFF & SPECIFICATIONS

The image below is just an example of the specifications of one of the screens handed to the software engineers.

Implementation Phases & Experiment ideas

As the new design proposal had considerable changes in the current flow of the HS mobile app, I designed an asynchronous workshop. The workshop aimed to measure the level of effort and impact (2x2 Matrix) of the new product increments with the Product Manager, Tech Lead, Lead Product Designer, and two Software Engineers (iOS and Android).

IMPLEMENTATION PHASES

The workshop's outcome was an implementation plan split into different phases. Each phase could fit one sprint of two weeks.