Applying Design Thinking to the Favor Runner Onboarding Experience

A couple of months ago, I was invited to do a design challenge for an interview process. The employer wanted to understand my design process by improving the contractor onboarding process of a delivery app. This was a great opportunity to show a condensed version of my design thinking process that I commonly used with the Growth Team at Pingboard.

The prompt had me choose any delivery app to improve the contractor onboarding process. The employer requested that I limit my process to less than two hours. I chose to focus on Favor due to the company being based out of Austin, Texas and owned by HEB Grocery.

Heuristic Evaluation

If I had more time, I would’ve done a scripted user test with a diverse group of people who have not experienced the onboarding process before. Heuristic evaluation provided a time-saving alternative though. Pretending to be a user seeking an extra form of income helped me identify pain points and moments of confusion during the process.

After identifying sixteen interaction-level pain points, four bugs, and two content gaps, the problem statement became clear.

List of labeled pain points, content gaps, and bugs I identified during a heuristic evaluation.

The onboarding process was linear, but long and dense with content. So, I came up with the below problem statement:

We need to provide new Favor runners an onboarding experience with minimal barriers to start earning their supplemental income.

Big Ideas + Concepts

Big ideas are abstract goals that can take shape in many different ways. I timeboxed myself to come up with five of these big ideas and then ideate more granular concepts within them:

  • Idea A: Minimize the requirement of jumping between experiences (multiple websites, text + email, and separate app).

  • Idea B: Constantly confirm how close the user is to completing the onboarding process.

  • Idea C: Present content in easily digestible formats no matter where the user is.

  • Idea D: Help the user answer additional questions that arise while content is being presented quickly.

  • Idea E: Provide a feeling of accomplishment as reassurance throughout the long process.

Next, many concepts were generated and doodled within a short period of time for each big idea. This left me with thirteen concepts to prioritize:

Big ideas were labeled with letters and each concept was an attached number (ex. B2) to quickly reference different concepts. The goal here was rapid divergence rather than convergence. So please excuse the chicken-scratch doodling.

A proper time allotment for this project would have called for a big ideas workshop! I would’ve gotten together teammates, stakeholders, and subject matter experts to come up with as many ideas. Placing a diverse group of people in a room allows them to bounce off of each other and push the creativity of the project.

Prioritization

A prioritization grid helps me plot each concept relative to each other based on impact and feasibility. Each concept number was plotted with the letter of its big idea.

The real value reveals itself when you add curved lines to segment the concepts from no-brainers (high value, high feasibility) all the way down to un-wise concepts (low value, low feasibility):

For the sake of time in this short design challenge, I chose two similar “big bets” and two distinct “no-brainers”:

  • Idea B: Constantly confirm how close the user is to completing the onboarding process.

    • B1. Visual progress bar

    • B2. Percentage or stepper

  • Idea D: Help the user answer additional questions that arise while content is being presented quickly.

    • D1. In-Page Live Chat

    • D2. FAQs at bottom of each video

A common theme throughout this short design challenge was realizing how valuable other participants are. Prioritization grids are best done collaboratively with product managers (experts in value) and engineers (experts in feasibility).

High Fidelity Designs

I chose to quickly iterate on top of a screenshot of the first instructional video in the orientation process. There are five long videos in this process, so the starting as-is screenshot represent most of the process:

A screenshot of the existing onboarding experience. Completing long videos was required to move forward in the orientation process.

Idea B: Constantly confirm how close the user is to completing the onboarding process.

The progress bar comes off as an easy way for the user to track. However, keeping the progress written in the header keeps the status at the top of the page (and user's mind). A simple typography adjustment makes this easily possible:

Idea D: Help the user answer additional questions that arise while content is being presented quickly.

Live + async chat support is immensely helpful in preventing the user from leaving the process due to unknowns. Tools like Intercom and Drift keep the feasibility high:

Adding a collapsible FAQs section next to video content is a way to include the questions that come up most within the chat:

Final Recommendation

After mocking-up all four ideas, it was clear that the progress header, chat support, and collapsible FAQs could all compliment each other together:

James loves to design, code, and talk about weird web apps from ATX. He also writes snippets from the third-person.
Follow on Twitter