Power Apps in Teams: Onboarding

April 2022 | Microsoft

Feature work

Sole design owner partnered with a Product Manager, a content designer, a researcher, and a dev team.
This project was a high-visibility project that greatly contributed to the MAU growth of 170% from FY19 to FY20.

What is Power Apps.. in Teams? ๐Ÿคจ

Power Apps in Teams was a huge initiative to be able to allow Teams users to seamlessly create apps and share them within their teams and channels. During this time, the rest of the Power Platform also was working to integrate with Microsoft Teams.

Problems ๐Ÿคฆ

Before this project, the Power Platform as a whole (and a great deal of Cloud and AI products in the Business Applications organization) didn't have a proper onboarding story, and the experience overall was basically dropping off users into a deep ocean of complexity and leaving them be, hoping that users would google anything that they didn't understand. It wasn't sustainable, good UX, and I decided that with this feature, I was going to make that big change.

Goals โœจ

To create a thoroughly researched, strong onboardinging experience that relies on good UX to educate the user, not documentation.
To establish this experience as grounds for onboarding experiences for the Power Platform.
To lead the user to create an app and to publish the app, encouraging them to use the app in a Microsoft Teams team channel.

A uniquely new persona for Power Apps

Normally, Power Apps has generally pro-dev leaning users and often didn't have non-dev type personas, due to it's complicated inner workings dealing with solutions and environments. After persona analysis from researchers across the Power Platform, we learned that Microsoft Teams users want "magic". they don't really care how exactly things work, but they want these apps to be visually customizable and help their day to day work simpler. They freaked out at the sight of a formula bar. Power Apps could no longer ignore the not-friendly nature that it had for the past 7 years (at this point).

Planning the overall flow ๐Ÿค”

This full onboarding experience was a self-managed, fully coordinated mixture of 5 different features that I knew were coming in quick succession in planning: redesigning the home page, save and publish updates for Power Apps in Teams, Onboarding modal, the ask to create a full FRE experience, and finally a technical ask to separate a function from the canvas loading to improve performance. I'd designed each feature with the bigger onboarding experience in mind.

Juggling 5 consecutive features with a final goal in mind took a bit of foresight, early planning, and lots of persuasion. I had many syncs with my feature crew (PM and developers) to discuss what we felt was our best options to work towards. My PM and I were big fans of sketching and whiteboarding, and came up with the following optional flows for us to consider.

We'd decided there were three main stages to ship for this project, and together we established a crawl/walk/run. First was shipping a helpful homepage, then was adding an onboarding modal, then ultimately wiring a whole learing flow together for the user.

My PM and I also decided the flow generally needed to go something like this:
Onboarding modal
Home page with banner (CTA)
Create an app
Simplified get started (result of decoupling)
Preview your app
Publish (if they want to)

We needed the flow to be quick to keep the user's attention, and simple to not scare them off. Working in Microsoft Teams too, we ran into many technical difficulties based on how they'd built their web application and our role as an app in their app.

I'll be going over the flow refining and research process during the Run phase of the project :)

Crawl ๐Ÿ‘ถ: Building a home page

I started with explorations with the home page, mostly pulling inspiration from Microsoft Teams, and some past banner work I'd done for Dynamics in integration work. Office was also exploring banners at that time.

Having a casual chat with my colleague on Power Virtual Agents and surveying the Power Apps design team on preferred design, decided to test the following screens among others in research along with some different content design options and how users felt about it.

Crawl: Research ๐Ÿ“”

We ran the study primarily with Microsoft Teams users who were interested in what Power Apps had to offer. Users were ecstatic about the visuals for the home page, saying that they'd felt it was fresh and new. Users told us they craved information behind the "What can I do and why is it important to have Power Apps in Teams?" Users also craved an image to represent the outcome of going through this process. Also, if anything, they felt very inclined to click that button on the banner.

Users also mentioned they love having the home page represent a way to "jump right back into [whatever they were doing]", with the recent apps being shown if they've worked with them. At this point in time, I acknowledged that we didn't have funds to make a fully thought-through learn section, which I had plans for as well.

Ultimately, we landed on these screens with some tweaks :)

This work precedes and becomes basis for a v-team I'd lead later on, where we align home pages across the Power Platform.

Walk ๐Ÿšถ: The onboarding modal

At this point in time, another Power Platform team had implemented an onboarding modal which had successful reception from their users. With no budget at this time to do a fully guided tutorial, the PM and I thought the modal was the next best thing to add in the meantime with limited resources. With the help of a content designer and grinding through concepts with my PM, we came up with the following images, while aligning with the preceding onboarding modal from Power Automate.

We ran a quick research study on this modal since we knew it was successful in a sister product, and our users in Teams received the modal with just as much enthusiasm. We ran the study because historically, modals tend to be very intrusive and have had studies in the past say that users do not enjoy modals in their faces and made them mad. Luckily, it was delight rather than anger.

Walk ๐Ÿšถ: The "Quickstart"

Also around this time I was working on the onboarding modal, I was actively working on this "quickstart" experience, which originally was an ask to separate this feature from the Canvas studio's initial loading experience, but I'd twisted it into a delightful new way for Power Apps to surface ways to start an app in the canvas.

Hold up. The heck is the canvas studio? Why was it important to split that feature out? Why'd you change the purpose of that feature?

The canvas studio is what we call the place where a user would be customizing their app. Originally, we'd throw the user into something like this with no other help:

A table creation experience used to appear on top of the canvas studio when you went to create an app. Both the canvas studio and the table creation experience loading at the same time greatly tanked the canvas studio's loading performance, so this feature was an ask to separate the two. I saw it as an opportunity as well to improve on the existing empty canvas studio (shown above), since we had past user studies show that users weren't really sure where to start.

Long story short, many explorations were had, a test was run, a review was had with the design team, and had ended up with the following design:

WOOF. ๐Ÿ• We are finally at the Run stage ๐Ÿƒ: stringing everything together!

So remember a while back I mentioned my PM and I had a general idea of how to string these together?
Onboarding modal > Home page with banner (CTA) > create an app > simplified get started (result of decoupling) > Preview your app > Publish (if they want to)

It's finally time to flush it all out! The following image was a result of a long sit-down working session with my PM, thinking of all the crazy permutations our flow could have.

With this, we've gathered some information regarding the flow with a few research studies. We came up with a strategy, and here bringing on our content designer to sweat details out with us, figured out our first research prototype with a few big key questions in mind:

How much customization should our user do?
What kind of customization would the user care to do?
Does the user appreciate having the option to opt out of the onboarding experience? (Our product team and leadership wanted us to lock users in)
Do the users maintain context through the flow? (Don't feel lost?)
What part does the user care about most/brought most delight?
What does the user wish that happened that didn't?
What did the user expect to happen at certain points?

...to paraphrase a few.

Ultimately, through three research studies, we'd landed on the final, and following flow.

PHEW. We finally made it! ๐Ÿ˜…

And with that, we finally finished shipping a large and influential feature! After this feature shipped, our Teams users were ecstatic to have been lead through an experience and to expedite creation. Functionally, we didn't add much more to what Power Apps originally was, but the power of a great onboarding experience can mean retention numbers, satisfaction, clarity of a product's purpose, and feeling cared for as a user.

Final reflections

This is one of my most favorite projects I've done because I had a wonderful PM partner who had infectious, positive, and imaginative energy, and also eventually got to have every aspect of this feature content designed and thoroughly researched every step of the way. I went through the project confident that each piece was well received, and results proving the value of research equating to being a user-centric designer's necessity. This design went on to influence major initiatives throughout the design org. I was excited to move on to iniatives that this work had touched, like a better learning experience overall, an exploration deeper into a contextual help pane, and how we can ween off of the cheap solution of "just let users google for answers!" and having truly delightful, intuitive, and thoughtful experiences to help our users unblock themselves.

I'd say the biggest challenges through this project was juggling and designing multiple features at once towards a unified experience in the end, along with, since this general area was super high visibility, found a lot of random rocks in the road for where the direction of this feature should go. Thankfully I stuck to my instincts and had made it through, with a mostly satisfactory result for me, and a delightful new experience for our new persona.