Adobe Creative Cloud

February 2, 2016 /UX/UI Design /

Building Project Comet: Evolving Onboarding

As a design-driven Product Manager, working on Project Comet is a surreal experience—the momentum and excitement from the UX/UI community has been nothing short of humbling, all before we even launch a product. Great expectations come with a heightened sense of getting it right since when we release (soon!) everyone is using this for the first time. Along with building amazing design and prototyping features, we’ve been developing the first-use onboarding experience to help make the first launch of Project Comet a good one.

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.

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

The tl;dr Project Comet workflow

The tl;dr Project Comet workflow

 

Our task is to dissect the complexities of this workflow to keep key concepts easy to digest, reducing any ambiguity on how to navigate the Project Comet interface. Making things easy isn’t easy (but where’s the fun in easy anyways).

Where do we start

Onboarding customers to an entire product for the first time is a big task. Go too broad and no one understands what they’re supposed to do. Go too narrow and you end up getting in the way by micro-managing the interface with annoying messages. We took a look at onboarding experiences we liked and didn’t like, noting patterns and trends generally used in products used by UX/UI designers.

Design should never say “look at me”. It should always say “look at this”. — David Craib

Many onboarding experiences we saw lead you through a scripted set of interactions with messages or attractor animations. This works well for something like a mobile app which has a single workflow — but at design time comes at the cost of deliberate attempts to interrupt the user for the sake of promoting a message. This often works for the product but not for the user, and people generally get pissed off when you block them from doing something.

For freeform design applications like Project Comet, the workflow is more of a choose-your-own-adventure experience. It’s not up to us to prescribe where you’ll be in the design process. We expect you’ll constantly dip in and out of each mode as you iterate on a project.

After looking at the onboarding landscape and conducting user research, we evaluated how we could improve our approach to onboarding. We decided to explore methods which would give zero interruption to the user while they’re trying to work.

Starting with 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.

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.

From better understanding how people discover and learn, we know we can’t rely on a single approach and declare success. We can’t assume people are wired to learn in the way we want them to learn. Sure we could pop up a message that says “Hey, use feature x! You’ll like it we promise!” but if we don’t offer help at the right time, in the right way, for the right reasons, all we’ve built is a really expensive close button.

Understanding learning behavior

A side effect of working on a product is knowing all the intimate details of how to achieve success. For us, we could design and prototype with our eyes closed as self-made Project Comet power users. This knowledge starts to work against you when making assumptions for onboarding experiences; it becomes much more difficult to differentiate between the obvious and the hard to find.

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.

Our straightforward workflow from above, after behavior mapping, now looks like this:

Behavior map showing the possible steps a user could take to share a Project Comet prototype

Behavior map showing the possible steps a user could take to share a Project Comet prototype

These maps serve as a great cheat sheet for knowing where to introduce contextual, reactive messaging — and to evaluate which cases we would even need to use that for.

Reactive onboarding

We moved away from proactive messaging towards an “onboarding with features” model. This allows us to help users as part of the design process instead of interrupting them. An issue with the in-app messaging approach to onboarding is it’s very difficult to know when said message is actually helpful. Even with engagement engines and intelligent predictive behavior, a pop-up which says “Hey, check this out!” errs on the side of annoying rather than valuable. Since experience is a core value proposition of Project Comet, we want to avoid any experience which would be perceived as aggravating… even if it would be useful in the short term.

This model led us to consider a reactive, instead of a proactive approach to onboarding. Reactive onboarding places a certain amount of trust in the user that they will try and do something on their own. For example, if we want to tell someone about how to make a prototype, we assume they’ll click on the big “Prototype” button at the top of the workspace.

Reactive approach

Reactive approach

Proactive approach

Proactive approach

 

The difference is subtle but significant. With proactive messaging, you’re pulling the user away from a task they’re currently performing. This is hit or miss because they may or may not do what you want them to do. With reactive messaging, the user has already opted-in and this is your opportunity to educate them on next steps.

The Pancake

Carmen Ruse, an experience designer on the Project Comet team, helped create what we have lovingly called “The Pancake”. The Pancake acts as a hub for contextual keyboard shortcuts to discover as you use Project Comet.

onboarding5

The Pancake lets you discover keyboard shortcuts as you use Project Comet

 

In this approach to onboarding we can surface discoverability of features in a way people actually want to use. The Pancake reacts to the actions taken inside Project Comet. For example, if you select an object we can tell you the keyboard shortcut for using Repeat Grids (one of my personal favorite features). If you’re using the pen tool, we show keyboard shortcuts for manipulating anchor points. We chose to omit the obvious commands such as Cmd+V for the sake of redundancy but keep the useful actions present. We’ve heard from hundreds of designers learning keyboard shortcuts can be painful when learning any new application, and want to solve this problem with the added benefit of discoverability.

The version in the picture above evolved from many iterations which had accompanying messages, such as “Use repeat grids to duplicate objects” or “Now that you have some artboards, try prototyping.” This type of messaging goes against our core value of “don’t annoy the user”. In the end we decided to trust the intelligence of our audience by removing as much messaging as possible.

Drive action through empty states

Keyboard shortcuts help in feature discoverability, but we still had a problem helping users understand the conditions they need to meet to be successful to create a prototype, or share that prototype. Our behavior maps led us to use the Pancake — very selectively — to help give guidance when you need to do something to move forward.

For example, you need to have artwork to bind interactions for prototyping (i.e., click a button to show a screen). If you try and make a prototype without any artwork, we instruct you to draw something first. This method is reactive to a user exploring the interface or just learning the workspace, educating them on features in the process.

As of this writing, we’re still working on the final design but the intent is to make all empty states actionable. No one likes an empty state.

Actionable empty states with the Pancake

Actionable empty states with the Pancake

Product experience > onboarding

At the end of the day no amount of onboarding beats a strong, intuitively designed product. When the onboarding process goes beyond a single click, we take a step back to ask if the feature needs improvement instead of papering over the problem with onboarding. We’re a little obsessed with the details of user experience. Nir Eyal, one of my favorite experience experts, says it best:

“Influencing behavior by reducing the effort required to perform an action is more effective than increasing someone’s desire to do it. Make your product so simple that users already know how to use it, and you’ve got a winner.”
― Nir Eyal

Onboarding is just another consideration of user experience; done right it’s transparent, done poorly it’s painfully obvious. With any luck you won’t even notice our work.

UX/UI Design

Meet Project Comet, Adobe’s Complete UX and Prototyping Solution!

Design and prototype websites and mobile apps faster than ever with Project Comet, the first all-in-one solution for UX designers. Coming in early 2016.

SIGN UP TO STAY INFORMED

Join the discussion

  • By Paul J - 10:53 AM on February 2, 2016  

    And where may we beta test project comet? And what’s the ETA now? Last I heard early 2016 and well, it’s currently early 2016…

    • By Nick C. - 9:47 AM on February 4, 2016  

      Haha, yeah but early 2016 isn’t over yet.

    • By Viswam - 11:43 AM on February 6, 2016  

      I saw yearly January 2016 but now feb

  • By Patrick M. - 2:44 PM on February 2, 2016  

    I have a big project ready to start, i would like to enter beta program to start this project with Adobe Comet.
    Thanks to reply.
    Best regards.

    • By Alexander M. - 5:39 AM on February 5, 2016  

      Of what I know, you are not allowed to make productions or “real work” in Beta programs, but just make something for test it out and feedback.

      • By Ulrik - 1:44 AM on February 9, 2016  

        From a product developer point of view that would be really stupid. If people don’t test with real life use cases, then it’s gonna be really shitty feedback 🙂

  • By Christian H. - 1:33 AM on February 3, 2016  

    I’m also eagerly awaiting the public Beta release. Any chance to get in on the fun now (Alpha)?

  • By Thierry C - 4:44 AM on February 3, 2016  

    Same here. I am daily checking all adobe channels I can to find when I will be able to use this amazing product.

  • By jerz - 5:33 PM on February 3, 2016  

    willing to try the beta. where is it?

  • By jerz - 5:35 PM on February 3, 2016  

    Same here ,,im about to work on a My Account pages and depending for this tool to make it happen.

  • By shashi rupapara - 8:50 PM on February 3, 2016  

    really help full

  • By Phil - 8:25 AM on February 4, 2016  

    My company has been trying to get involved in your beta program for some time now. We have several large ongoing products in development and would very much like to evaluate this tool and provide you with feedback. Please contact me to let me know how we can get started.

    Best Regards.

  • By Phil - 8:25 AM on February 4, 2016  

    Our company has been trying to get involved in your beta program for some time now. We have several large ongoing products in development and would very much like to evaluate this tool and provide you with feedback. Please contact me to let me know how we can get started.

    Best Regards.

  • By Pat - 8:26 AM on February 4, 2016  

    You keep giving little bits of info but never mention when it will be available. It’s getting annoying just hearing about it and never any idea of when it will be available.
    Would almost prefer if you didn’t talk anymore about it until you can tell us when it will be available.

  • By Filip - 8:35 AM on February 4, 2016  

    Really excited about this. Hope I get that beta invite soon 😉 Keep up the good work!

  • By STEVO - 8:38 AM on February 4, 2016  

    I WANT IT NOW!!! >___<

  • By Graham - 8:43 AM on February 4, 2016  

    I really wish you would release this.

  • By Arantxa - 8:48 AM on February 4, 2016  

    CAN’T WAIT

  • By Bart - 8:51 AM on February 4, 2016  

    Take my money

  • By Dennis Hendrik Adriaan - 8:52 AM on February 4, 2016  

    From my (desk)point of view, this seems to compete with inVision.app and maybe erase Adobe Muse CC + Animate CC (Flash) in the long run.

    The guys at Macaw.ca joined forces with inVision.app instead of trying to produce a project for a bunch of fan to small to generate a revenue to live from.

  • By Anderson - 8:56 AM on February 4, 2016  

    Hi, i would like to enter beta program of Adobe Comet.
    thanks.

  • By Stephen - 9:01 AM on February 4, 2016  

    This was slated to release in early 2016? So, when are the betas going out?

  • By Gregor - 9:03 AM on February 4, 2016  

    I’m looking forward to the release – for Windows.

  • By John - 9:23 AM on February 4, 2016  

    A GREAT example is how the 3D modeling program SketchUp demos each tool as you select it, and in a window that can be hidden or accessed at any point. The demos are repeating animations showing the action and use of the tool.

  • By Nick C. - 9:54 AM on February 4, 2016  

    When they demoed Comet, what were the specs of the computer running it?
    https://youtu.be/IwV-TY8pSJ8?t=4m55s

  • By Lane - 9:55 AM on February 4, 2016  

    TOAST – to the wonderful people behind Adobe Comet. Designing Interfaces for Interface Designers :/ No pressure!

  • By jerz - 10:18 AM on February 4, 2016  

    Invision implemented some of the Poj Comet function in photoshop with their add ons.
    They just introduced “CRAFT”
    http://labs.invisionapp.com/craft

    • By smartino - 1:09 PM on February 4, 2016  

      It seems very cool, thank you for sharing, I’ll try right now

    • By DG - 2:20 PM on February 4, 2016  

      Also Sketch has prototyping features coming thru plug ins. http://silverflows.com

  • By Rick - 10:24 AM on February 4, 2016  

    I’m also eagerly awaiting the beta

  • By Rodrigo Oliveira - 10:43 AM on February 4, 2016  

    I’m waiting for the beta release

  • By Shelley - 10:59 AM on February 4, 2016  

    I have a whole family of creative individuals looking forward to this utterly. Not to the point where our mega-Website can exist yet, but ramping up. For my learning experience, I like going through the tutorial first, then kamakazi clicking (love that) everything in sight, then getting to work.

  • By John Hourihane - 11:04 AM on February 4, 2016  

    Looking forward to testing this out.

  • By Renan - 11:53 AM on February 4, 2016  

    ALL MY MONEY BELONGS TO YOU

    • By Todd Clary - 12:24 PM on February 4, 2016  

      LOL

    • By cedric - 10:48 PM on February 4, 2016  

      who, me?

  • By Monika - 12:21 PM on February 4, 2016  

    Really great article. Gives me good ideas for my own projects. Thank you.

  • By Todd Clary - 12:24 PM on February 4, 2016  

    Who do I have to sleep with?

  • By Dan Connors - 2:44 PM on February 4, 2016  

    I am a newbie to website work and would be happy to provide feedback from that perspective as a beta user. Might as well start with a great tool!

  • By Col - 4:18 PM on February 4, 2016  

    We have a game design business and are really looking forward to Project Comet, we develop a lot of apps that use gamification and we could really benefit from this product. My point is about onboarding though. I agree that it is really important, and I agree with a lot of what’s been said. However, with such an anticipated product, you might be better getting a beta out to the community with little or no onboarding and then start to track how people are using it. We find that actual user data is much more valuable than trying to second guess how people will use your application. As Elsa would say…. It’s time to Let It Go 🙂

  • By Joe - 12:22 AM on February 5, 2016  

    Great thinking there at Project Comet, I enjoy the pancake idea and reactive guidance.

    My favourite example of this in practice is Ableton Live with their “help” pane bottom-left. When user points a mouse on any feature, it gets explained, including best practices… clever.

    Best of luck & looking forward to the release.

  • By JeffH - 4:40 AM on February 5, 2016  

    Good content but a comment on the blog itself. I’m reading this on my iPhone while traveling. Found I can’t zoom any of the blog content. Unfortunately while I can read the text seeing what’s in the sample images was hopeless without at least a double-tap zoom. If the blog restricts that, I suggest removing the constraint.

  • By ElbertW - 6:56 AM on February 5, 2016  

    I like ‘The pancake’! I’m excited for the BETA.

  • By Adam Twardowski - 3:59 AM on February 7, 2016  

    Great article. Very interesting and wise quotes Sarah. I can not wait when the project Comet lands. I have a small question . Will it be possible to send the project to the Muse, or synchronization, as in the case of Illustrator? Co-operation with Muse files is important. Is Project Comet will be able to create pages into the web? I am a designer from Poland but I think that great ideas are changing the world in a better direction, just by people like Sarah Hunt. Great article. Regards

  • By Jack - 6:49 AM on February 9, 2016  

    hi, how can i be a a tester? i realy want this!

  • By Helmuth Maidl - 2:38 PM on February 11, 2016  

    Hi, i am actually work with Adobe Edge Animate to do this. The experience is a lot to design Application since beta Edge Animate. Edge Animate is a great tool. What are the relations between both products? Are you interested on experience with Adobe Edge Animate to do similar Jobs you about to do with comet?
    contact me to have a live presentation.
    Helmuth
    Greetings to Mike Zahorik. We will see us at drupa !!

  • By Maryna - 7:57 AM on February 17, 2016  

    Hello, we are interesting in Adobe Comet product and want to try beta version.
    Please, let me know how can I become Adobe Comet beta user?
    Thanks.

  • By Maryna - 8:01 AM on February 17, 2016  

    About Share functionality. Does that mean functionality like in Invision? Will it allow to share prototype with customers? And could it be used for user testings?

  • By Javier Lacambra - 1:23 PM on February 25, 2016  

    Hi, I’m a student of interactive graphic design of Spain and i would like to try the beta of Adobe Comet.
    thanks.