xdbanner.png

Adobe XD Onboarding

Adobe XD Onboarding

Adobe XD is Adobe's most recent design tool for UX/UI design. My role was to work with a team of designers to solve onboarding for first-time users and new feature usage.

 

For onboarding, I’m talking about the in-product experience users see as they use Project Comet for the first time. Onboarding is undoubtedly a critical part of the development process for any product and our team has been heads down figuring out what works and what doesn’t.

My role during this project was leading user research, leading user experience and interaction design, working with a visual designer on execution and ensuring release quality.

In its simplest form, the Project Comet workflow is fairly straightforward:

1_bJkqPV21gZLvFKvqukGpTw.png

The Problem

XD is a brand new application, so along with helping users discover features we have to strong consider how they use the application for the first time. If everything has an empty state, how do we solve for that? How do we help users know how to use the application? My task was to dissect the complexities of this workflow to keep key concepts easy to digest, reducing any ambiguity on how to navigate the XD interface.

 
 

Research

To break any mold of convention takes research. We wanted to better understand how people would approach the Project Comet interface and where they were most likely to learn.

We conducts weeks worth of in-person discovery with product designers. After a series of in-person research and testing, it turns out there’s no one-size-fits-all method to discovery (no one on our team was particularly surprised by this). We took all of our data and observations and found patterns in the way people approach learning a new product. Some learn from tutorials, some learn just by working, and some learn by kamikaze-clicking every button they see.

User Journey Mapping

To combat our own assumptions, we dissected the customer journey into a series of behavior maps to understand that success is not necessarily linear. What if someone tries to make a prototype without creating artwork? What if someone tries to share a prototype without adding any interactive elements? By breaking down all the nuances of conditions it was clear a popup saying, “Hey, make a prototype!” isn’t going to cut it.

 

Design Explorations

I worked with a designer on the XD team to create what we lovingly called “The Pancake”. The Pancake acts as a hub for contextual keyboard shortcuts to discover as you use Project Comet.

pancakelayers.png
pancake1.jpeg
pancake2.jpeg

Once we had a design in place, we spent weeks preparing sets of high value actions we wanted users to take. These actions were hypothesized to encourage repeat usage of XD and help customers reach early success. 

Interaction Design

Interactions are a significant part of the customer experience. We spent weeks evaluating transparency and attractor animations to help improve discoverability of features without distracting the user in a negative way.

cx99cqCM5O.gif

Empty States

To help users be successful, we needed to help guide them along with empty states in the product. XD is unique in how it has mode switching between designing and prototyping so we wanted to leverage these empty states to encourage feature discovery.

 
 
Preview - no artboards.png
Preview - with design on artboards.png
Preview - empty artboards.png
Prototype - empty artboards.png
Prototype - no artboards.png

Announcement

I had the privilidge of announcing XD (then code named Project Comet) for the first time publicly to a 7000-person audience at Adobe's 2015 MAX Keynote. I was a great experience to announce this project for the first time on behalf of the team!