UX Design Challenge
Challenge: design an onboarding flow for Asana in ~85 hours.
My personal challenge: Creating the onboarding flow for an app I have never used before while avoiding getting biased by my own first time experience with the application.
Asana is a productivity and project management tool that boasts the ability to maintain project timelines and tasks in collaboration with all the team members. It attempts to make working together and across different applications a seamless experience by visualizing deadlines, task assignments and progress completely digital and all in one place.
While the desktop application is Asana's primary and more widely used product interface, due to its prevalence in the workspace, for this challenge I chose to focus on the mobile onboarding experience. I decided to go this way because I believe the mobile app brings a unique set of constraints and user experiences that would make for an interesting challenge to design for.
Before hitting the drawing board, I wanted to read more about designing for onboarding experiences and Asana as a product. Onboarding UX design is not new and instead of reinventing the wheel, I wanted to learn about insights that already exist and build up from there.
To refresh my memory on onboarding best practices and the most up-to-date guidelines, some of the best resources I came across were Material Design's Onboarding Overview and this guide for user onboarding flows from Toptal.
Some of my key takeaways from these readings were:
- Spending time to understand the user context and onboarding goals for the app to design within those specific constraints in key to developing a good onboarding flow.
- Onboarding flows can be categorized in different ways: self-select, quickstart, top-user benefits, the nickel tour, coachmarks and tooltips, guided task completion, etc.
- Similarly there are different approaches to onboarding and each approach employs a different combination of types of flow: benefit-focused, function-focused, doing-focused and account-focused.
-To ensure users would feel engaged with the app and continue using it beyond their first attempt, it is key for me to understand the user goals and pick the best combination of an onboarding flow to address that.
Some takeaways from my research on Asana's mobile product:
- The main focus for the mobile app is to act as an extension of the existing desktop version, to provide users with the ability to access their work and tasks on the go (example scenario: wanting to check tasks for the upcoming day during the morning commute to work).
- The mobile UX lays emphasis on notifications, providing feedback on work, marking progress for tasks etc. Essentially, it highlights the shorter and quicker features as opposed to some of the heavier ones such as laying out an entire project's timeline (a task that might be more suitable to wide screen desktop interfaces).
Another thing I discovered during my research was that when creating their onboarding experience, Asana dubbed it as "NUX" (New User Experience) and the tool internally used a set of algorithms to lay a personalized "NUX egg." This egg basically determines the best trail of tasks and cues to onboard that particular user based on things like the user's role on the team, who they are, etc. I personally thought this was a neat analogy to help connect the UX with the backend infrastructure while personalizing the onboarding experience to the user.
I combined these takeaways with my research on Asana as a product to develop some personas. These further provided me with the basis to build the user context and onboarding goals for the mobile app specifically.
First I want to acknowledge how sketching personas can all too often exclude some users the designers didn't stop to think of. Given the limited time frame of this task, I think creating personas is helpful to define user context that considers a variety of perspectives. If I had more time, I would base these personas on real user interviews and research to avoid any bias caused by my own assumptions.
Building upon the personas I came up with the following user context:
- The user has already installed the app and used the Desktop version before. They don't need any more marketing of the product itself.
- They are eager to use the app without reading the instructions manual.
- (OR) the user has never seen this app before, heard of it through word-of-mouth and decided to give it a shot
These helped frame my onboarding experience goals:
- Welcomes users and excites them about the experience ahead
- To convey enough information and drive actions that increase engagement and retention rate
- Help the user differentiate the value provided by mobile app from that of the desktop one to some extent
- Show users specific tasks that are possible and anticipate their urgency to skip by providing easy access to the same tips later.
To begin narrowing my focus from this higher level thinking of the user experience, I sketched some storyboards. Here's an example:
Keeping in mind the context and goals, one thing was clear to me: the need to differentiate between the user who has used Asana previously but is new to the mobile version and the user who has never used Asana before.
My first thought was to have a pop-up that asks "Have you used Asana before?". However, this felt redundant because the same set of information can be collected when the user is either "signing up" or "logging in" and combining that with whether it is the first time login on a mobile device.
This gives us two kinds of users: First-Time User (FTU) and Returning User (RU) for Asana but first-time for mobile.
For a new user, I decided to combine a benefit-focused approach with coach marks, tooltips and guidestones. This is because I first needed to convey the value of Asana to this user. Why should they use this one out of a million other productivity apps? What sets it apart? How would it make their lives easier? My hypothesis was that answering these questions in the first minute of interaction with the application would help convince the user to stay and build retention for the app.
For this benefit-focused approach, I brainstormed some sample screens for a classic carousel that a user can swipe through quickly. Here's a low-fidelity mockup (text source: Asana's website):
Once a FTU has seen the carousel, they would be asked to either join an existing team in their organization or create their own (this is how it is done in the current version of the app - I have no changes to make here).
Next I worked on the tooltips (also known as breadcrumbs) that would be essential to getting the user started. While the first part (carousel) was to develop retention, this part address the engagement end of the spectrum that nudges the user towards taking actions as they navigate the app.
Before creating tooltips, I questioned: what might be the end goal for a FTU?
One possibility is that they may have just started in this new role and are responsible for managing their project so they wanted to try out this highly-recommended tool.
The key takeaway here for us is "managing their project"
Let's try to reverse engineer from here. What are the key steps to achieving this from the very first screen that the user sees?
- How to create a new project and name it
- How to add collaborators from their team to this project
- How to add tasks and assign them to the collaborators
- How to set deadlines and progress markers for said tasks.
This breadcrumb trail builds each task upon the previous one and encapsulates most features that would get the user started on setting up and manage their first project on Asana. Here are some low-fidelity wireframes for a set of tooltips like this:
In the beginning, I thought that only a breadcrumb trail of tooltips would be sufficient for returning users (like the one in our storyboard) because:
- The user would be in an urgency to get to their work that is likely already set up on the app (one of our user contexts from before) and
- This type of user does not need to be convinced of Asana's utility under the assumption that they have previously used it and are returning because they found the app useful.
As I set out to design this function-focused approach for RUs, I realized something. I could still convey the value of using the mobile app specifically with the goal of getting them excited about using this app (our first user onboarding goal from before) as opposed to letting it be something they just have to do to support their work.
So, I decided to include a quick 3 step carousel for the RU as well, but this time focusing on the specific features of the mobile app.
After the carousel, RUs need to familiarize themselves with the mobile functionality in way similar to the FTUs, so the tool tips would remain the same for both use cases.
I designed an onboarding flow for two kinds of users coming to Asana's mobile app: first-time users who have never used Asana before and returning users who are new to the mobile version.
Both onboarding flows begin with a 3 step carousel that highlights the benefits of using Asana. For a FTU, it emphasizes the qualities of Asana as a whole and for a RU it spotlights the features that make the mobile app helpful. The carousel is followed by a trail of action-driven tooltips that nudge a user into engaging with the app and achieving their end-goal right from the get go.
Here are some next steps I would take if I were to continue working on this task:
- Collecting user research to base personas and user goals around and to address any potential assumptions of my own.
- Addressing other areas such as errors and feedback and creating a fail-safe system for unexpected behavior.
- Considering user scenarios beyond the ones I limited myself to.
- More brainstorming and divergent-thinking for specifics of visuals (for both the carousel and tooltips).
- Considering potential approaches other than my current combination of benefit-focused and function-focused.
- Creating higher-fidelity mockups for conveying my ideas more visually and accurately.
- Iterating more on the designs and user testing to refine ideas.
I would love to hear feedback if you have any, thanks for reading this far!