Asana Mobile Restructured
A UX Case study on the hierarchical navigation of Asana’s mobile app - San Francisco
Asana is a tool to help teams manage their projects and tasks. I decided to analyze the usability of the Asana mobile app to hone my design methods and explore the possible adoption of a new project management tool. Recommendations to address key navigation issues were explored over a three week sprint and at the end, the testing proved the proposed changes were successful.
Note: This is a personal design project, I am not affiliated with Asana. I am an iOS user and only tested with iOS users.
Research — Identify User Needs
I tested eight iOS users who had never used Asana’s mobile app before, three of whom had used Asana’s web platform (interesting side note, all three users were unaware that Asana had a mobile version). The users were given a pre-defined scenario and asked to perform a number of tasks revolving around project management on an iPhone 6S.
The largest problem that jumped out at me: independent of which view they were in, the user did not have an immediate sense of location within the app. For instance, if they moved between views, they seemed lost in the app.
“I think I remember seeing that before” was referenced four times with different users trying to complete different tasks. None of the users could complete.
Synthesis — Define and Prioritize
After reviewing the interview recordings, I jotted down the difficulties the user had in completing some of the tasks. I sifted through all of the pain points, organized them by issues/insights per user to in order to decide which pain points to address. The theme that emerged confirmed my initial perception.
I proceeded by framing the design problem in a Job, focusing on the triggering event or situation, the motivation and goal, and the intended outcome to help clarify the problems I was trying to solve. I choose to use the job story rather than creating a persona to remove any assumptions and focus on the job-to-be-done.
This iterative process helped me identify what was best for the user.
- Anything that makes the user have to work to keep organized cross-functionally is their highest priority.
I decided to focus on restructuring the main navigation to create consistency across different views (My Task, All Projects, and Favorite Projects).
Ideate — Brainstorm & Sketch
The Proposed Solution
During the user tests, users struggled with completing tasks between the different views (individual project, all projects, task lists, and calendar). Creating consistency in the navigation seemed to be the most important to accomplish. Looking back this was a bit daunting to overcome because I had to make sure not to loose any functionality.
Hierarchical Changes
In order to understand the organization and hierarchy, an audit of the current information architecture was important. Two major changes were pulling out the filtering component and the calendar/list view from under the header dropdown to the top navigation for every view. Here is a chart showing the current and proposed hierarchal changes for all:
Prototype — LoFi & HiFi
#1 Inconsistent Navigation (All Projects Overview)
I focused on removing one level of hierarchy between Project Overview and the Project views by bringing all of the tasks under each project into the overview. In order to do this, the navigation needed to be consistent across all views.
Here’s what the screen looked like from the Project Overview to the Project View. The before (left) shows when you click on project it opens up into a new screen and the after (right) shows how you can expand to show hidden task in the same screen:
#2 Clarifying icons and bringing all projects in calendar view: The before (left) and after (right) on screen focus on the changes to the calendar view; including changes to the expansion/collapse icon which was now more easily comprehendible:
#3 Adding calendar and list view as icons in the navigation: The before (left) and after (right) on screen focus on the new icon that allow the swap between the calendar and task list view:
Validate
After recreating a mockup in Sketch, I created an interactive prototype to test my solutions with users. I used the same tasks that I used with the original testing. Below are the results from the validation and iteration process. Check out the prototype here.
Key Takeaways
Users need a sense of location to utilize the tools that make their lives easier. Making them have to remember how to do certain core tasks creates unwanted frustration and unwillingness to try new systems.
Although I am not affiliated with Asana, I completed this exercise as a new user of the product. In retrospect, I would have been interested to test users in a team setting. I would be excited to see these changes to the information architecture, and to witness its effects on users of the mobile app.
