THE OPPORTUNITY

Autel is a commercial drone company based out of Bothell, WA that began shipping their product in March of 2016. Like many hi-tech products, they struggle with creating a seamless first experience in part because their user base spans many demographics, ages and tech savviness. 

In order to make their product stand out above their competitors, my design team worked during a 3-week sprint to bring them a condensed version of their quick start guide in an inspiring mobile interface to launch with their next round of products.

MY ROLE

For this project I was responsible for the following aspects:

  • Point of contact between our team and the client
  • Development of our SOW
  • Competitive analysis & heuristic evaluation
  • Task analysis
  • User Research
  • Scenarios
  • Landing Screen
  • Battery flow
  • App download leafllet
 

TOOLS

  • Pen & Paper
  • Whiteboard
  • Sketch
  • Adope Photoshop
  • AxureRP
 

RESEARCH

In order to understand how customers view the unboxing experience, we conducted both contextual inquiries and task analyses. We talked to a range of drone users from novices to seasoned experts. Regardless of how familiar customers were going to be with hobby drones, we needed to design a first-time unboxing experience that facilitates setup for all experience levels.

COMPETITIVE ANALYSIS, KEY TAKEAWAYS
Our first step was to learn what Autel's biggest competitors (3DR & DJI) did well and did poorly within their onboarding expriences:

 
 

USER & TASK ANALYSIS, KEY TAKEAWAYS
We performed 4 User Interviews & 6 Task Analyses (had users go through the motions of setting up the Autel X-Star with their current unboxing/onboarding experience) and determined the following key takeaways:

  • Participants do not understand diagrams
  • Participants would rather look at pictures/videos than read the manual
  • Enthusiasm declines throughout unboxing
  • Participants are confused by the "connect app" step
"Learning" concept map

"Learning" concept map

Key takeaways:  user interviews

Key takeaways:  user interviews

affinity diagram

affinity diagram


PLAN

After gathering our user research, we created affinity diagrams and developed a persona to base our designs off of. As a tinkerer, Gary wants minimal guidance through the setup procedure while still having access to it when needed. Gary is an amalgamation of the user data we gathered on current drone users looking to upgrade to the new Autel X-Star Premium model.

 
primary user persona

primary user persona

 

DESIGN

The challenge within the design of this app was fundamentally in both the amount of information we were choosing to present as well as the method of demonstration. Our first iteration was a grayscale prototype that included diagrams currently in the Autel manuals shown through progressive disclosure. Our primary focus was to give a one screen overview with the ability to click through for more detailed information. After our first round of testing, we made some fundamental changes in how we displayed our designs and came up with a hi-fidelity mockup with inspiring visuals. 

design studio

design studio

click-through ideation #1

click-through ideation #1

click-through ideation #2

click-through ideation #2

 
Hi-fidelity mock-up : primary screen

Hi-fidelity mock-up : primary screen

hi-fidelity mock-up : tool tip

hi-fidelity mock-up : tool tip

hi-fidelity mock-up : menu screen

hi-fidelity mock-up : menu screen


During this process, I also designed a single-page leaflet directing users to download the Starlink app to begin the setup process (see below).

leaflet front

leaflet front

leaflet b

leaflet b

 

TEST

We conducted usability tests with our grayscale prototype to determine pain points with or design decisions before iterating to a hi-fidelity version. The main takeaways were that users were reluctant to click through for more information so the primary screens offered too much confusion. We also decided to trim what information we were presenting as they were not necessary for a user taking their first flight, and instead created more sections in the "quick guides" section. We altered how we displayed instructions versus taught through visuals as we found that users were prone to looking at pictures and ignoring text completely. However, the manual diagrams were also confusing so we took our own photographs for use in this prototype. 

 
 
 
 

SUGGESTED NEXT STEPS

While we only had 3 weeks to create this initial design, we handed the following suggested next steps to Autel to work with their next iteration:

  • Align our design solutions with current established design patterns
  • Build out additional quick guide walkthroughs
  • Add in video tutorials from Autel's existing video library
  • Test with alternative user flows to fine-tune design decisions