Enhancing the Asana iOS app — Tate Henry's Portfolio

Enhancing the mobile experience for work management

Asana iOS application

Scope of Project

Asana is a work management platform that was created to allow teams to organize and manage their work. Asana’s mission is to help humanity thrive by enabling teams to work together. With this in mind, our team was tasked with creating a new feature and updating one existing feature in the Asana iOS application. As none of our team was familiar with the Asana app, we spent a couple of days familiarizing ourselves with it in order to deliver a realistic end product that could benefit Asana iOS users.

Company: General Assembly
Responsibilities: Design System, mid and high-fidelity prototypes, user research, user flows
Timespan: 2-week sprint, April 2022

Background
Asana’s brand identity is one of streamlining work management to catalyze productivity. With over 11,000 reviews and an average rating of 4.7 out of 5 on Apple’s App Store, the Asana iOS app seems to be delivering its brand effectively.

Problem
Realizing this success, our team sought to see how Asana can facilitate work management even better. By conducting user research and scouring Asana forums online, we were quickly able to pinpoint two areas that could do just that.

Conducting user research to identify
user pain-points

In order to gain a better understanding of the company, its role in work management, and its iOS application, we conducted open-source research. Utilizing the official Asana forums, we pinpointed two areas on the iOS app that users were frustrated with: the lack of task duplication and the inability to assign multiple people to one task. With this in mind, we moved on to user interviews to see if these frustrations were felt by users outside of the forums.

Our team interviewed five people who had experience using mobile work management applications. After gathering insights from these users, we made an affinity map—a way to synthesize feedback to see trends. Upon completion of the synthesis, it was clear that users expected a way to assign multiple people to one task. Furthermore, one user who was very familiar with Asana and had substantial managerial experience expressed their frustration with the lack of task duplication.

After understanding these pain-points, we conducted a comparative analysis to see if multiple assignees and task duplication features are available on other work management platforms. We realized that companies like Trello and Monday do offer these features.

Creating a persona to bring the user needs to life

Goals
01 Increase on-the-go productivity
02 Keep his team updated on tasks

Meet Shane, a 29-year-old project manager from San Francisco

As a product manager, Shane is always working to ensure his team is on the same page. While in the office, Shane utilizes the desktop version of Asana on his MacBook. He enjoys being able to duplicate tasks on his computer. It saves him time and allows him to focus on other important aspects of work, like meeting with stakeholders and his team members.

As a dedicated PM, Shane often works on his commute to and from his office while on the train. Shane is frustrated because he can’t easily duplicate a task from his phone like he can on his MacBook. Moreover, Shane has several interns on his team. He wants to assign them to the same tasks as some of his team members so they can work together on them. Being unable to do this, Shane is stuck creating subtasks of original tasks and assigning interns to those subtasks.

Needs
· A way to maintain workplace clarity
from his iPhone
· An easy way to assign interns and
mentors to the same task

Frustrations
· Being unable to do the same tasks
on mobile as on desktop
· Redundancy

Building focus through creating need & how might we statements

01: Shane needs a way to quickly duplicate work tasks from his phone so he can focus on providing clear and effective management to his team.

How might we create a way for Shane to duplicate existing tasks to enable him to work on his phone?

How might we incorporate the new duplication feature in a way that is intuitive to Shane and other mobile Asana users?

02: Shane needs a way to assign multiple people to one task so seniors and interns can cohesively work together and stay on task.

How might we expand the current assign task flow by allowing Shane to assign multiple people to one task?

Creating user flows to plan out our design

Once we created the two problem statements, we moved on to creating user flows to map out our design. Understanding that Shane needs a quick way to duplicate tasks and assign multiple members to one task, I designed these two flows. As a team, we established that these relatively simple flows can address Shane’s needs.

The user flow for the new task duplication feature

The user flow for the redesigned assign task flow

Creating sketches and mid-fidelity prototypes to begin user testing

Each member of our team created sketches on their own and then compiled them. We did this to try and come up with as many possible design solutions as we could. When we came together, we noticed that we had similar thoughts on how to implement our designs.

After sketching, we began working on a mid-fidelity prototype. We chose to design in dark mode because Shane spends a lot of time in front of a screen and dark mode is easier on the users’ eyes. We decided to include the task duplication feature in the overflow menu. We designed the multiple assignee feature utilizing the same method for assigning one member already found in Asana. We made these design decisions so users would not be forced to learn drastically new processes and so developers would not be overwhelmed with new features to code.

Conducting usability testing to validate our design

During the first round of usability testing, 100% of users were able to duplicate a task and assign multiple users to a task. We measured the time it took for users to complete both steps. On average, users took 91 seconds to finish both flows.

After asking testers how they felt about the features, the general consensus was that the new features were intuitive. However, there was feedback on the organization of the overflow menu. We originally placed the “duplicate task” feature near the bottom of the overflow menu, near the “delete task” option. Usability testers stated that this made it difficult to find the feature. With this in mind, we moved to the creation of a high-fidelity mockup.

Creating a Design System to maintain efficiency and stay on brand

Asana does not have an open-source design system so I needed to create one for our team to use while making cohesive wireframes. Overall, my goal was to recreate the design system as accurately as I could. However, I did make a couple of important adjustments to optimize the design for iOS:

01 Brought up the type sizes to iOS standards for accessibility

02 Went with the iOS system default typefaces so that the app could feel seamless with phone UI

Along with these changes, I created components as assets in Figma so we could standardize micro-interactions while building the high-fidelity prototype.

Creating a high-fidelity prototype to test iterations

After receiving feedback from the first round of usability testing, we created a high-fidelity prototype. We strove to create a design as close as possible to the existing Asana iOS app. This mockup shows the task duplication flow that can be accessed from the overflow menu icon.

At this point, we conducted another round of usability testing. Again, 100% of users were able to complete both steps. The average time to complete the steps went from 91 seconds to 88 seconds. There was, however, one outlier that took over three minutes to complete the tasks. Without the outlier, the average time to complete both tasks would have been 65 seconds.