Asana

Product Design Internship


During Summer 2016, I worked at Asana as their first Product Design Intern. During my time there, I worked across Android and iOS, designing team pages for android, iterations to the visual design system, and Quick Actions for iOS. I also explored possible design directions for features on our future road-map using design research and interactive prototyping. In addition to this post, you can read more about my personal experience interning at Asana on Medium: Cameron@Asana for CMU Design League.


Team Pages for Android

My primary project while at Asana was designing new team management and navigation functionality into Asana's Android application. This involved working with the interaction flows and related visual & pattern design decisions that make up the Asana mobile experience. But first, what are teams in Asana and how did this functionality already work on desktop? Watch the below video from the Asana Guide on Team Basics for a basic understanding.




Design Territory Map

After understanding how Teams existed in the web version of Asana, I drew a map of the territory within the Asana system on Android where the team-based functionality would be introduced — this helped me grok the complexity and interrelated aspects of the Asana experience on Android.









While designing team pages, I consulted our mobile user research and found, in summary, that users were sometimes confused about 'where in the application' they were. To address this, I prototyped multiple directions on how we could denote greater hierarchy and understanding around team pages, project pages, and the navigation between their task lists and conversations. Changes to the interaction design of Team Pages was ultimately scoped-out of the project.







Conclusion & Reflection

Reflecting back on my experience designing team pages, it was an incredibly difficult and messy design assignment to receive as an intern. To address the design problem I had to work across and introduce entry points throughout a large swath of Asana's mobile experience, which required knowledge of a vast amount of the system — just acquiring the necessary knowledge to properly design and then advocate for my design took the majority of my internship.

Moreover, gaining the respect of my peers and learning how to adequately make arguments for changes that touched multiple parts of the Asana experience was harder still. Suffice to say, this wasn't a sandbox project with a clear slate, and explaining what I did while at Asana isn't the cleanest "A to B" story. However, learning how to get up to speed on a complex product with lots of stakeholders and decision history was an experience I wouldn't trade for anything.

My two biggest takeaways from working at Asana:

(1) "Ship Cupcakes," which derives from a conversation I had with my PM on how to get design out the door and into the product; the alternative to cupcakes being 'wedding cakes,' which are large and perfect, but never get built.
(2) Large systems take time to learn and it takes more time to to learn how to design for them. It's something I'm better at now than ever before, but also something that I realize makes me an abnormal observer and user of a product — trying to put yourself back in shoes of a first time user is something I always try to do.



My work on team pages shipped in the middle of December 2016, you can read about it on the Asana blog.



Researching & Prototyping Future Features


Throughout my internship, I was occasionally involved with projects that fell outside my main work on Team Pages for Android. I worked on prototyping, design research, and exploration for Boards in Asana, Mobile Quick Add, and Calendar for Mobile.

Boards

Boards in Asana is a new feature that makes Asana more visual and usable for multi-stage work. Boards launched in November 2016, but I had the opportunity to co-design on the project with Paul Velleux during my time on the mobile team. One of the issues Boards faces on mobile, is the aspect ratio of the smartphone display: portrait. This doesn't map well to desktop, where the standard landscape orientation makes seeing multiple columns at once easy. Because of this, many issues arise, including the navigation between boards and movement of cards across boards.



Mobile Quick Add

Near the end of my internship, I had a brief moment to investigate the Quick Add button on Mobile Asana. It's the entry point for a lot of primary functionality (i.e. new tasks) and was going to be overhauled in the near future, I didn't get to finish this project, but I do have some niblets of early research and design.



Mobile Calendar

Before starting my primary work on Team Pages, I briefly got up to speed by researching the possibility of bringing desktop Asana's calendar view to mobile. One interesting quirk with this project was modeling a certain aspect of the desktop's design while working on ideation for the mobile version — that aspect was a gradual colour change in grey values used across the n number of days in any given month. To save time clicking in sketch, I whipped up a quick DrawBot application that would spit out all of the steps between the two greys for any number of slices.




Quick Actions for iOS

During the last week of my internship, I had the unique opportunity to write the spec for my own feature and work with Asana's engineers to ship Quick Actions for 3D Touch. The final spec included Quick Actions for New Task, New Task with Photo, Inbox, and Search.

New Task with Photo, in particular, was a feature that I advocated hard for, using information from our mobile user research to reinforce the idea that Asana was missing opportunities to capture 'the seeds of work' on mobile and precedent from other applications, like Google Keep, to make the argument for its inclusion.



¬ not all features here shipped exactly as represented.
June 2016