The Prompt
Teams using DigitalOcean need a better way to get up and running with the product quickly. Currently, the onboarding process is optimized for single users, who can only create teams after completing account creation. How might we create an ideal onboarding process that works for both individuals and teams (while improving the experience in general), from signup to droplet creation?
My Process
I started with a lot of reading and research. I compiled a list of questions, met with Earl, then pulled ideas and learnings from the meeting. I did more reading and research, including how other products handled onboarding numerous members and handled teams/personal accounts. I used Swipies to sketch out each flow while determining screens, features and content in Google Docs. I created screens in Sketch and built the prototypes in InVision. Once in InVision, I poked more holes in the work, made some refinements, built this presentation page, and then wrote about decisions and learnings.
Google Drive doc (click to enlarge)
Debating when to split the Individual and Team tracks
Creating a linear path through onboarding steps
Handling adding multiple teammates, and their roles
Working through adding team members to Droplets
In a typical team environment, here's the general process I follow:
1. Discovery: ask a lot of questions, read, see what's out there, dig into the data we have, leverage every team member, talk to customers, etc.
2. Break the problem down into the simplest form, removing any existing notions about what it is or should be. Throw out any/all ideas without committing to anything. Write, make lists, whiteboard, talk, think, do design exercises.
3. More concrete sketching, wireframing, flow planning.
4. Work through ideas with another designer, the PM, etc.
5. Go digital, keep getting feedback.
6. Prototype
7. Test
8. Learn and repeat any necessary steps.
9. Polish: layer in higher fidelity touches. Determine all the errors and blank states to design for.
Focus
To narrow my focus on this assignment, I picked a few of my favorite things about DigitalOcean and a few of the things I wanted to focus on improving.
5 favorite things about the DO product
Adaptive labels in form fields
Badass illustrations
Minimalist style
Blank states
Brand colors
5 things I set out to improve
Improved team functionality based on customer needs
Add team members quickly
More permission levels + restricted access on Droplets
Ability to manage multiple accounts from one login
Addition of Dashboard to ease new users into the product and create a home for large-format alerts
Deliverables
I built out 3 onboarding flows: Alfred - the team creator and owner, Kelsey - a team member new to DigitalOcean, and John - a team member with an exisiting account. Please follow the flashing blue tour points to see commentary along the way.
Design Decisions
Below are a few call outs of my favorite elements from the exercise. Please be sure to view the InVision prototypes before reading this section (for context.)
Team / Individual sign up track
I debated about when to split the onboarding track of an individual user and a team owner. Below is my favorite solution because it tells new users up front that teams are supported. I would test to be sure team owners find the team tab, but I assume at this point that it's clear enough.
Clarifying the onboarding process
I wanted to house the entire onboarding process in this view, instead of directing the user to the billing section, then the Droplets page. The steps are outlined and visually change as progress is made.
Easily add multiple team members
There is a lot of customer feedback regarding teams, which influenced how I created this feature. It seems clear the different roles are important, so I created Owner, Admin, Member and View-Only roles with a run down of each. By default, 5 email address fields are available, and I envision 5 more appearing when the user chooses "Add More" so they don't have to click the button over and over (grrr, Slack). Alternately, the user can select "Paste Email Addresses" to paste or type a simple list (thank you, Slack).
Modify team access per droplet
Another common piece of feedback was modifying permission or access per droplet. This is a first iteration that allows the user to select Entire Team or add individuals. I'd definitely continue to develop this with the team. I'm curious to know if a "Private" or "Only me" option would be necessary, if users with access would need modified roles from their already determined team role, and we'd need to dig into how inviting someone by email address works if they aren't already on the team.
Introducing a dashboard
I think having a dashboard is important for new users and admins. It's also useful for DO to communicate with users (regarding new features, changes, etc.) that have turned off email notifications. I started working with large-format alerts, like the "Welcome" one shown here. In this view, the user is presented with tools to get started, rather than being dropped into the Droplets page. Below the large-format alert, the user would be able to get a 30,000ft view of Droplets, usage, team, etc. At any time, they could dismiss the alert.
Switching between accounts
Assuming that merged accounts will be rolled out at some point, I wanted to show how a user could easily toggle between a personal account and their teams. Also, here's an example of another contextual large-format alert. In this case, the user already had an account, so they didn't need the "Getting Started" view. Instead, they see an alert tailored to their experience of just merging a personal and team account.
Conclusion
I really enjoyed getting to know the product and look forward to hearing what you have to say about my solution. Thanks for giving me the chance to work on this!
Caylee
206-909-5736
caylee.betts@gmail.com
My Portfolio