Asana
Product Design Internship
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