2019 (3 months)
Azure PlayFab Onboarding
In the summer of 2019, I was re-hired by Microsoft to lead the design of a new game developer onboarding experience for Azure PlayFab. Over the course of the next 3 months, myself and a small engineering team were able to design, build, and ship a new scalable onboarding framework.
Key responsibilities — Design execution, Research
Impact — Launched new onboarding pattern to the service
Azure PlayFab is a full stack live-game operations platform that helps studios of all sizes more effectively build, launch, and operate their games post-launch.
Potential studios were having a hard time evaluating PlayFab. This is the case even after signing up as they are unsure of what to do or how to begin. This is reflected in our developer funnel as there is a large drop-off between people making their studios and starting to get their game connected.
I looked at direct competitor products such as GameSparks as well as other major cloud service providers like Firebase to see what features they had offered. I also spoke to PlayFab’s community forum leaders to find out what potential customers were asking for.
Hypothesis
What I found out was that nearly everyone had a clear idea of what their game was going to feature. People just wanted to know which service would best suit their needs.
However, getting started is hard
Potential customers are first met with empty states that show no real direction or link to documentation that could help them out. In some states, we have preset tables and charts but we do not explain why they are there even though our latent intention is to be helpful.
Lack of direction or links to documentation
Two sources of truth
We were migrating our documentation and so there is a lot of confusion as to which documentation site developers should follow. Developers who have been with PlayFab for a longer period of time are used to the old site (left) where as the documentation team wants to promote the new and updated site (right).
Two different documentation sites
Barriers in monetization
In paid features like Multiplayer Servers, we do not tell new developers that they need to contact a sales representative before it can be enabled. Currently, users receive an error when they click to enable the feature.
Old experience: Enabling multiplayer servers
Make evaluating PlayFab easy
Most game back-end service providers faced the same issue that PlayFab was struggling with. The aim of this project was to challenge convention, and deliver an experience that helps customers more easily evaluate PlayFab. This meant that the solution needed to be split into two parts. Part 1 consisted of giving people a place to start, while part two would need to encourage feature exploration based on people’s needs.
Solution Part 1: Onboarding checklist
Everything you need to know to get started with PlayFab as a developer. We have everything from step-by-step guides to copy and paste code to get you well on your way.
Getting Started Guide
The idea for the an onboarding checklist started with the quick start guide for developers on the documentation site. It listed out three steps that every developer needed to take in order to get real value out of PlayFab.
Exploring onboarding patterns
Leveraging my opening insight, I then went super wide looking at how other products and services onboard new users. Doing this helped me pick out a pattern that I felt suited the best for what we were trying to achieve.
DocuSign Checklist Experience
DocuSign has a really intuitive onboarding checklist experience. When you click into each of the steps, the platform takes you to exactly where you need to be.
Discord Hotkey Tips
One of the problems I encountered early was figuring out where this feature would live on PlayFab. I found discord’s placement of tips on the left navigation to be really helpful as the tips are able to stay persistent no matter which chat room you are in.
Narrowing down and refining the design
I then focused my efforts on going deep with the checklist making tons of iterations then meeting with stakeholders to get their feedback on it. My style of working is to move fast and share often, which allows me to make sure that not only am I producing quality work, but everyone knows exactly what I am working on.
Color Theory
The design team was looking at refreshing the PlayFab colors and so I worked with my design mentor in integrating some of the work he was doing into my own designs.
I ultimately stuck with the green to emphasize the metaphor that green means (Finished, Complete).
Component Naming
I explored a few names in which the team could call this new experience. Initially I named the component “Developer Quickstart” but then later changed it to “Getting Started”. This is because these links can also be a valuable to other persona types who are coming to evaluate PlayFab.
Checklist Logic
Lastly the most important part of the project was top figure out where we will be taking people once they click into each of these steps.
I was able to pinpoint exact page locations and scroll lengths by working closely with documentation and engineering teams.
Empty States + Feature Prerequisites
I am proposing a new empty state system that product owners will be able write content to help people evaluate our features.
Getting started guide
In PlayFab, some features have mandatory requirements before users are able to access them. Currently, we do not have a system like this in place so there are cases where people are shown error states because they haven’t done something else first.
For example: I need to sign in players and set up a Leaderboard before I can enable Prize Tables.
It is therefore important that we tell people what exactly PlayFab needs first, and point them in the right direction to get it done.
A system that could work on all features
On PlayFab, many features currently have their own page template. Some like Segments have pre-filled tables where as others are just empty. It was my challenge to find a system that could work everywhere.
Iterating on Message Cards
I began by iterating through many versions of a pre-existing message card pattern and found out that I could use the same pattern to highlight both empty states and feature prerequisites.
Reusable patterns
Left Image: Now, when we have prize tables that require other setup, we will now disable the main call-to-action and display the Prerequisite Message Card to tell people exactly what PlayFab needs first.
Right Image: When the prerequisites have been met the message card will dismiss, and people will be able to access the feature.
Now in a feature like Segments, we can repurpose the message card into an empty state to help give the feature more context.
Messaging Guidelines
Currently we do not have content strategists available in the studio so all the content would be up to the product owners. There is an opportunity for myself and the design team to set some messaging guidelines. There are a lot of benefits to having these guidelines set up. For example:
Help product owners become more self sufficient.
Maintain a consistent tone across PlayFab.
Below are some sample strings I have written to help make this process easier.
Why is this valuable?
When people come to evaluate our product against our competitor’s, first impressions are really important.
“Nearly 1 in 4 people abandon apps after only one use.”
By making these updates to PlayFab we will expect to see a reduction in churn and an increase in feature usage across the product.
Learnings
Easiest way to get started is by leverage existing resources. Meet with domain experts from Marketing, Growth, Documentation and Design. By leveraging these resources, I am making sure that I am not doing duplicate work, but building on top of what is already existing. Having weigh-in from all these stakeholders also meant I had increased buy-in when it came to my proposal.
A low cost solution that could be implemented quickly. PlayFab engineering was currently migrating the entire product from Knockout over to ReactJS. I wanted to make sure that I designed something we could fit into budgeting and deadlines while also making sure my proposal was technically feasible with Engineering.
Design to scale. The design team is currently working on a new design system as well as a UI refresh. I wanted to make sure that whatever I designed aligned with the higher vision.