Stephanie Hornung


Asana Web Product

Asana is an enterprise product aimed to help teams work together effortlessly. Teams of all shapes and sizes can manage projects, hit deadlines, and have clear responsibilties over their work.

As the first designer at Asana, I saw the company from pre-launch to over 140,000 companies actively collaborating on the platform everyday.


I was responsible for designing and launching the first paid product, as well as Organizations, which allowed large teams to work together more easily.

Organizations enabled teams within organizations to collaborate by adding more robust permissions, project organizational structures, and automated signup of new employees. Read more in this NY Times coverage of the launch

Both of these products are responsible for 10s of millions of ARR and a revenue growth rate of 2.3x in the last year.

Asana Redesign Architecture


As Asana grew in functionality, we were finding that the early simplicity of the product no longer held true. Users were having trouble finding features, and reported a general feeling of being overwhelmed. We had a vision of being a powerful and flexible tool, so we knew we needed to do something to make the experience more extensible to the features our users were asking for, as well as where we saw our business going.

An Asana project showing the project overview on the right. Users were confused by this hierarchy, and we were constrained by our two-pane model.

Object map and sketches


Prior to emarking on a full redesign project, some of the larger company initiatives were struggling with creating a clear hierarchy within the current structure. We used these projects as the basis for understanding the needs of a new product architecture.

  • During one of my projects, I developed several concepts aimed at creating a more robust space for our growing feature-set.
  • Once the redesign project was scheduled, I created an object map to get a better sense for the kinds of information we wanted available and where. This ensured we were creating something extensible and focusing efforts in the most worthwhile area.
  • As a way to quickly generate ideas and gather buy-in from the team, the team spent a few days off-site focusing on and our key use-cases.

Variety of ideas from the team generated during the off-site.

Iterating on the Structure

Two primary ideas came out of the ideation; the use of cards to create a more friendly feel, and the modular and tabbed page hierarchy to create a more robust structure.

  • User-feedback indicated that a panel + card layout helped our customers feel less overwhelmed when viewing content-heavy pages.
  • Extending the panel methaphor to views outside the LIST view was proving constraining and difficult.
  • I encouraged the team to rethink the constraints by suggesting that we design for other views first instead.
  • By removing the page title from the primary panel, we were able to create a clear page hierarchy that was consistent across all pages and views as well as creating a system that was easier to work with and extent.

Three views using the panel concept. We felt they were awkwardly different.

Comparison of the changes we made to the page structure. Followed by the next iteration, which lead to what was implemented.


The launch of the redesigned product was highly successful by any measure, even outside the impact of the visual change/rebrand.

  • Half of a percent (.5%) of current users chose to stay with the old design by the end of the day the product was launched
  • Much of the qualitative feedback implied that users thought new features were added, when in fact they hadn't. The design had just made it clearer.

Asana Design Language

A major part of the recent Asana Rebrand was the development of a clear design language that was representative of our new brand.


The design system had several goals that guided the work and ensured we stayed focused.

  • Be a clear implementation of brand attributes, allowing to suffuse personality and differentiation throughout the experience.
  • Empower designers to do their best work, not constrain them with seemingly arbitrary rules.
  • Foster collaboration and empower design partners to make decisions that are inline with the brand.

Inventory of buttons in use

New button styles


The design system was set to work across Product, Marketing, and Mobile, so it was important to involve the entire design team in the process.

  • To get started, I did an inventory of the items in the current product that should be considered a reusable element, even if they weren't implemented that way.
  • This served as a basic framework to design the new language, where we started with the simplest, most low-level ones.
  • The team test elements in key flows early and often to identify new patterns and places to iterate.
  • We compared across platforms to stay cohesive.
  • We consistently document guidelines through the entire process stay focused and on the same page.


While the design system will never be complete, documenting the language and having it available to the greater team had further reaching impact than we had expected.

  • Design time to re-skin features took a matter of hours rather than days.
  • Design handoffs to engineers no longer requires redlines or detailed mocks of every screen.
  • Design/engineering collaboration can now focus on user goals, instead of implementation details.
  • Product and brand is stronger and more cohesive.

Asana Feature Highlights

As the first and most senior designer on the team at Asana, I was responsible for a large portion of the product features, updates, and overall direction. Included here is a smattering of my favorite features for which I was responsible.


While Asana was succeeded at capturing a large bulk of work conversations that happen about specific items of work, Conversations was aimed encouraging users to have less task-oriented discussions as well.

  • Conversations cut back on noise by allowing users to opt-in to each thread, but be able to read threads on their own time if they hadn't.
  • Using groups of people that already existed in Asana made it easier to send out messages knowing you were reaching the right people.
  • Being able to link conversations to task, and create tasks out of conversations made the transition from idea to work more seamless.

The conversation card used on Team and Project conversation feeds; the composer; and the features available on each card.

The simple view menu combined sort order with completion state, to match the most common use cases. The customize view let users create any view they wanted by breaking out the menus.

List View Variations

In response to a multitude of customer requests for completed tasks to stay on screen and in the the same list position, I did some exploratory research to discover a few different ways our users managed their lists. This lead to not only fulfilling that request, we also provided a more flexible yet simpler way to view both completed and incomplete tasks.

  • To keep the list focused on the most important work, completed tasks were removed from the list upon completion. This was instead of moving completed tasks to the top of the list, as we had been.
  • By combining the ability to show completed tasks with sorting into a single menu, users were able to get to the view they needed more easily. The new menu was focused on the most common use cases, but had the ability to expand to a customized view, to meet less common needs.


One of the largest feature launches at Asana, Organizations was aimed at medium to large businesses by providing more robust permissions, easier sign-up, and a stronger content hierarchy.

  • By having Organizations strongly tied to email accounts, we were able to simplify the invitation process and get users collaborating more quickly and in the right place.
  • Adding permissions to groups of projects, allowed teams to easily be transparent with the right people.
  • Public permissions, the default, also allowed teammates to have a sense of what others in their company were working on, without adding extra noise.

Updates to the navigation structure as another level of hierarchy was added. People was moved into a facepile that transformed a list to allow for navigation and adding new.