Autel Robotics
E-Commerce Purchasing Funnel
Responsive Laptop and Desktop Design
I drew a storyboard in three frames in order to pinpoint the 'what' and 'why' of the problem.
Problem
Our client, a startup drone company, lacked an onsite purchasing platform, resulting in lost business, loyalty and the ability to gather customer data.
Challenge
Innovate a simple, intuitive and delightful shopping cart experience, as good as or if possible, better than Amazon's or Apple's.
Outcome
Our funnel tested 6 System Usability Score points higher than Amazon's, Apple's, or the client's main competitor, DJI's, in contextual interviews. The client built out the flow, which you can view at Autel Robotics.
High Fidelity Team Design Project
3 Week Sprint
Tools
Axure, Paper and Pens
Project Highlights
Dividing our team into primary researchers, planners, and visual designers made us efficient. My roles included point of contact and visual design co-lead. I owned the storyboard, screen sketches, confirmation page and footer.
The nine drone users and online shoppers we interviewed helped form our persona and determine functions we would need for each page.
I created a style guide of our prototype, using best practices. While we were given room to change the style, since Autel is an established national brand, in the end we resisted the urge to change the flagship color to orange.
I spearheaded guerilla testing at Marymoor Airfield, gaining five rounds of in-person insights into our paper prototype. These lead to our second iteration where we made buttons bigger and more colorful, and moved the sticky chat button to the side.
The initial screen sketches I created carried the essence of the team's research and planning and formed the working model of our prototype in Axure.
The digital version of the previous sketch showing the "added to cart" popover. While the stakeholder cautioned against too many greyed-out screens, this screen tested well, so we went with it in our final version.
Design Process
Screen Sketches
Distilling our user research into affinity maps and a persona led to a brainstorming session about functions and features needed on each screen. When it came time to compile our ideas, I took on the role of visual secretary, sketching the screens in real time as my teammates called out the requirements of the flow. These sketches, copied for each person on the team, became our roadmap as we started building out the flow in Axure.
Design Process
User Testing
A personal highlight of this project was the day we traveled out to Redmond, WA to conduct some guerilla testing of our first digital prototype, which we had printed out on paper.
Our first attempt was the manager of an RC (Remote Controlled) hobby shop. After I approached him with questions about drones, he was happy to test our mockup with us and then told us we should visit Marymoor RC Airfield.
At first it looked daunting. The hobbyists were busy flying their craft on the other side of a fence. But since I grew up in a family of aircraft fanatics, I decided to just walk up and say hi. I was soon called over my teammates to meet everyone. The day yielded six successful tests with our target audience and some excellent feedback. We made several changes to our prototype based on theses notes, and tested again, this time online with usability.com
Design Process
Iterations
Our testing surfaced issues in the first and second iterations which we addressed in the third version. For example: A feature of the site that testing revealed our users valued highly was the ability to chat online with drone experts. We made our Live Chat button sticky, but tests showed it got in the way. After researching solutions on other sites, I advocated to move it to the side and make it red to retain visibility.
Success
“It couldn’t have been any easier. No glitches, nice clean website. If I had Bill’s credit card, I’d probably buy a drone right now.”
Opportunity
“I was surprised when clicking ‘Same as Shipping’ jumped to the next step.”
Testers on usability.com