Archive for the ‘Design’ Category

The Task Pane, Redesigned

avataravataravataravatar

by Greg Slovacek, Rachel Miller, Cliff Chang, and Jennifer Nan
April 2nd, 2013

Asana’s task pane is where you go to manage the details of your tasks, and it is where most of the action in Asana happens. Today, we are happy to announce that we’ve given the task pane’s design a major upgrade.

The new design makes the task pane simpler, more elegant, and more delightful to use, without adding or removing any features. We’ll be rolling out the new design slowly, so you will see it in your Asana account sometime over the next few weeks.

Task Pane Boom

The improvements we’ve made

See critical information at a glance

Critcical Task Pane Info

One of the biggest changes you’ll notice is the toolbar at the top of the task pane. Before, the critical details of a task were strewn across the pane. Now, they key information about a task (Assignee and Due Date) are always visible in the top-left corner of the pane.

Better Collaboration

Task Pane Collaboration

Asana works at its best when it is used as a communication tool, so we made changes to the look and feel of commenting and following to promote communication.

  • We’ve moved task followers to the bottom of the task pane and made them always visible so that you know who is involved in the conversation.
  • We switched the display of followers from a list of names to a row of faces so that Asana feels more personal. (If you haven’t added your picture to your Asana profile, you should!)
  • We’ve ensured comments always stay on screen when you’re typing in them, even as you scroll up to look at comment history.

Make keyboard shortcuts obvious

Task Pane Keyboard Shortcuts

Many of Asana’s biggest advocates love the keyboard shortcuts that exist throughout Asana, but many people never find out about them. To address this, we added keyboard shortcut prompts to the tooltips that were already present in the app. We’ve seen some shortcuts quadruple in usage because of this small change.

Cleaner interfaces

Empty Task Pane

In the past, an empty task could feel overwhelming because the task pane was so cluttered. With our redesign, the task pane is much cleaner in its empty state. The pane is also physically smaller, and grows vertically as more information is added into it.

Today, Upcoming & LaterAs part of this change, we’ve reduced the prominence of the “Today/Upcoming/Later” setting, so it is no longer visible all the time. But don’t worry, it’s still there: simply click on the “Assignee” button when the task is assigned to someone the settings will appear. For power users, this feature is still quickly accessible via keyboard shortcuts:

  • TAB+Y: Today
  • TAB+U: Upcoming
  • TAB+L: Later

Improving everyday experiences

We believe that when the tools you use are well designed, you are more effective at what you do. You are able to grok information more clearly, your mind feels less cluttered, and you feel more in control. When you collaborate with others, everyone experiences the same clarity and control, so your team is able to get and stay on the same page.

Most of our users spend a large proportion of their time in Asana using the task pane, so it is important for it to be well designed. We believe that you deserve to look at and interact with something that is beautiful as well as functional.

We’ve been testing the redesign with volunteers, a subset of users, and internally at our company. The feedback has been really positive, so we’re excited to roll this out. We hope you enjoy this change as much as we do.

We Are A Product-Led Company

avatar

by Andrew Watterson
March 7th, 2013

I learned early in my career that on a healthy startup team, everyone needs to pull for all the many elements that make a company successful. Sort of.

On a small team, everyone works with everyone else: you have to care about and be able to communicate with every part of the business. So everyone: PMs, engineers, designers, the sales team, and marketing folks have to care about everything: shipping the product, maintainable code, a great user experience, and honing the business model. But each role has the one thing they’re more responsible for than anything else, so when push comes to shove, what are they quickest to compromise on? Sales people often care about a great user experience until it gets in the way of making deals quickly, and designers are sympathetic to the engineers’ architectural concerns until it threatens to delay their pet interaction.

How this plays out on a macro level across the organization can be a result of who’s in charge, or it can be a conscious decision about what the organization should value, appealing to the part of every startupper that values each of these things.

This leads to five different types of companies:

The Engineering-led Company
Above all, engineering might (even above a coherent product strategy.)
In this type, engineers are given free reign to work on whatever is fun for them, both because great code is ultimately what the company wants to produce, and because that kind of culture attracts other great engineers. Early Google was most famously this type of company: although they made a number of compelling products, many were engineered without central oversight, making it difficult to do things like standardize a design, integrate different products with each other, or roll out global features like multiple sign-on.

The Design-led Company
Great ideas know no constraints.
These teams value great design brainstorms over shipped, maintainable code. You most often see this type of thinking at design agencies: they have to prove their value to the companies that hire them by presenting radical, completely new ideas. They pursue questions like “what product would be most compelling?” blind to whether the necessary engineering cost and timeline would be as compelling.

The Ideology-led Company
Live free, or don’t ship.
This is the type of organization that characterizes the Free Software Movement. Companies like The Mozilla Foundation make product decisions based not on what is most pragmatic for their users, but rather what fits their immutable values. Firefox still doesn’t support playing the most popular format of web video (H.264) because of a philosophical aversion to the licensing conditions of that format.

The Sales-led Company
The customer is always right.
Strong sales are important to any business, but this type of company skews their product and strategy decisions based on feedback from their sales team. The sales team primarily communicates with executive customers making purchasing decisions rather than daily users of the product. Salesforce is this type of company – they have well-selling products with feature sets and complexity (in the name of customizability) that appeal to those making buying decisions, but not the ultimate users.

The Product-led Company
Balance in all things.
I started this post talking about this type of company: where the rubric for decisions is based on people in every role stepping back and understanding how to best make a product that makes their users happy and productive, generates revenue, and ships.

Where Does Asana Land?

At Asana, we seek to balance our roles to create a superlative product for our friends, collaborators, and the world. It’s not that we don’t value fun engineering problems – our Luna framework performs tremendous feats behind the scenes to make development of user-facing features both faster and more consistently polished.

It’s not that we don’t value our business, but investing in a large sales team is only a Plan B for us. We believe that a great product aided by just the right amount of compelling marketing and sales touch can gain the financial momentum we need to keep growing.

It’s not that we don’t value our values – we go out of our way to articulate these on our jobs page, our blog, and on Quora. Our first principle, however, is pragmatism – the understanding that we must be sure to reflect on how well our most cherished processes have stood up to time: do they still support our goal of growing a superlative product that makes our customers more productive?

And it’s certainly not that we don’t value great design ideas – we’ve been devoting more resources than ever to growing our design team and thinking critically about our major design directives: Are we the command center for your work life? Are we accessible to those without a Master’s degree in task management? Do we reflect the humanity of your teammates as well as a tech product should?

We write code, design new UIs, grow our business, and hold to our principles for the purpose of enabling people to do great things. And that doesn’t happen without shipping. You won’t find our engineering team going off in a thousand different directions, our design team digging its heels in for something beautiful but infeasible, or our business team telling us to rewrite the entire product to make a mid-sized deal happen. Each of us does different work here at Asana, but no matter the role it’s in service of shipping a great product.

DesignerFund Bridge: Be a Designer-in-Residence At Asana

avatar

by Andrew Watterson
February 27th, 2013

We’re thrilled to announce that we’re participating in DesignerFund Bridge, a program that offers a three-month design residency to people outside the startup world. We’re joining a number of other design-savvy startups in this venture: AirBnb, Dropbox, Stripe, Path, and Pinterest (many of which use Asana).

As part of this program, we’ll be hiring an experienced designer this Spring to lend us fresh eyes and outside perspective. In exchange, we’ll offer a true look at the joy of designing – and shipping – experiences that have a deep positive impact on those who use them.

Asana is in a very solid place – the number of teams that use us is always growing and we have a large number of passionate users, but there are an endless number of things we’d be excited to pick up and work on next:

  • Can we bring you a whole new way of looking at tasks, that’s simultaneously more powerful and more approachable?
  • Now that we’ve got a great iPhone app and will be on Android soon, what’s next for mobile?
  • Your email inbox and calendar have a lot of useful information about things you have to do that may not be in Asana yet – can we leverage them somehow?

We’re full of ideas, and the thing that allows us to get the fruit of these ideas to you is to hire engineers fast and hire designers almost as fast.

Along with DesignerFund, we’ll take good care of our Designer-in-Residence. It’s a paid position, we offer relocation benefits, and you’ll be able to take advantage of the great programming that DesignerFund has set up. DesignerFund Bridge is accepting applications through March 10, after which we’ll begin an interview process with selected candidates.

You can apply on the DesignerFund Bridge site.

You might also check out co-founder Justin’s post on what it’s like to work with at Asana on the problem we’re trying to solve: Come Design the Future of Work.

Let’s Talk About Fonts (Video)

avatar

by Andrew Watterson
February 11th, 2013

One of Asana’s traditions is the Learning Lunch, where members of their team share their personal expertise with each other in a casual setting. We move fast at Asana, so I appreciated being able to take the time to put together a little talk on typography in between design projects.

Typography is the study of the way typefaces (or fonts) are designed. Pretty much all the text you see in the outside world has been consciously put together to communicate some concept or another: everything from the labels on the food in your fridge to the major advertising campaigns you see during the Super Bowl.

The fonts we use today have their roots in the earliest forms of writing: handwriting (which developed into calligraphy) and carving on stone walls and tablets. These beginnings have spawned a dizzying array of typeface choices, and the choice you make can have dramatic effects on how your writing is perceived: Do you use a showy font that will instill emotion – the way brands choose fonts in their logos? Or do you use a beautifully simple font that will keep the focus on your message – the way newspapers use the same font regardless of tone?

Share this video with anyone who would be interested in the personalities of different typefaces, and how to use them in compelling, readable text.

If you liked this video, I’ve also spoken about our design process at Asana

Come Design The Future Of Work

avatar

by Justin Rosenstein
January 3rd, 2013

Prototyping-Overhead.jpg
Dustin and I started Asana to bring great product design, great user experience, and even beauty to a place they haven’t gone before — into the part of people’s lives where we spend most of our days, contribute to the world, and do great things.

Back at Facebook, we felt constantly stymied by the friction and overhead of coordination. We tried everything. But from email to expensive enterprise software, existing solutions were too hard to use, or cumbersome, or poorly considered, or just plain ugly. This was shocking to us: these are the tools we all use at work all day. There had to be a better way.

Great user experience is, ultimately, Asana’s raison d’etre.

We’re now looking to add one more person to our talented four-member UX/Product Design team. Someone who is looking for a big challenge to work on a fascinating design problem with a potential for positive world impact, in an environment that’s optimized for turning ideas into reality with speed and joy.

The Impact You Can Have

Enable human achievement. From skyscrapers to software, from vaccines to space travel, greatness is the fruit of human collaboration, of groups of people with a shared vision working together. But coordination is notoriously difficult. That’s why human progress is basically the story of improving the technology of coordination: language, writing, telephones, and email increase the scope of what can accomplish. By re-imagining how teams work together, we want Asana to be the next step in unlocking human potential.

Already, Asana has customers who are building great businesses, curing disease, alleviating poverty, and building large-scale art. Asana isn’t just making them incrementally more efficient; many say it’s fundamentally changed the kinds of goals they can accomplish.

By designing tools that make everyone more effective, we get to play a small part in all of their goals, from curing cancer to helping Dropbox cross the 100M user mark.

Create happiness. I don’t know a single knowledge worker who doesn’t feel overwhelmed and stressed by information overload. How do we create a world where we feel calm and in control — aware of just the information we need and undistracted by all else?

Eliminate drudgery. I often ask people how much of their workday they spend on this “work about work” — like sifting through low-priority email or sitting through status meetings — and frequently hear answers like “70%.” This isn’t just time-consuming; it’s soul-sucking. We believe software can automate most of it, and make all of our lives better.

Solve a universal problem. “Business software” conjures images of faceless IT department in gray buildings, but this is really about software for people, when they’re at work. People deserve great design, not just when they go home, but from 9 to 5, or 10 to 10. There’s an untapped opportunity to build software environments that are beautiful, thoughtful, and humane — particularly important for Asana, which you leave a tab open for and interact with all day.

Inspire love. The upshot is that our core users love Asana. They send us love letters and marriage proposals. They love it in a way that was formerly unimaginable for “business software.” We’re making emotional in-roads into a part of people’s lives they really care about: How do I accomplish my life goals? How do I actualize my potential?

This is a great start. Now we want to make Asana useful for and used by hundreds of millions of people around the world.

Asana Design Team

The Environment You Can Work In

To help us achieve that impact, we’ve been very mindful about creating a great culture and a great design team.

Design-driven. Asana is a company driven by vision and design, not A/B tests. We look at data, but aren’t slaves to it. We take customer requests seriously, but we interpret them in the context of our larger vision. This vision is developed to a large extent by our design team.

Size & Ownership. At four designers, the team is still very small, especially relative to the amount of functionality in the product. It’s big enough that you have peers to bounce ideas off, but small enough that every person is working on meaty projects that are essential to our roadmap. Our next designer will have ownership on big parts of the product, and even the opportunity to influence the team’s culture and process.

A mindful approach. We value mindfulness and reflection, and are constantly finding ways to improve our process. (Recently we’ve experimented with design sprints.) It’s a highly collaborative environment (including weekly team-wide design critiques), but it also leaves space to be alone when it’s time to do creative flow work.

Mutual mentorship. The team is structured around everyone helping everyone improve their craft.

Great engineering. Asana has a phenomenal engineering team. We look for design-minded engineers, who work closely with designers to bring ideas to life. Working relationships are strong and frictionless. Both the design and the engineering teams have a culture of pride and craftsmanship in getting the details right, but also in moving quickly. We push new code every day, and have invested a lot in Luna, our proprietary technology stack that enables us to go from prototype to production very quickly. The result of that is that it’s not uncommon for someone to have an idea in the morning, design it in the afternoon, and ship it that evening.

Wireframes-Cliff-1.jpg

The Design Problems You Can Solve

Asana’s day-to-day design challenges require inventing ways to deliver great experiences that strike a right balance between important but seemingly-contradictory impulses. Sometimes balance entails compromise, but we strive for clever solutions that achieve the best of both worlds.

Power and simplicity. Asana enables people to communicate in rich sophisticated ways that weren’t possible before, and to tackle complex goals with many people and moving parts. Delivering this power in a way that’s simple to understand is a fascinating problem.

Efficiency and emotion. Knowledge work is stressful. We spend a lot of time asking: How can we make productivity software that feels warm, engaging, and inviting? How do we create emotional connections not only between Asana and its users, but also among teammates — to help them “feel like a team”?

Power users and casual users. Asana must work for everyone on a team, from power users and project managers to people still getting used to Gmail. How do you give power users a high-powered command center while giving normal users something usable and pleasant? How do you empower them to work at the rate they think, to minimize the latency between having a thought and the computer understanding it? We optimize interfaces down to individual mouse clicks, obsessed with achieving the ultimate efficiency.

Unobtrusiveness and beauty. The user is here to focus on their work, so it’s critical to stay out of their way. On the other hand, users spend so much time living in Asana, it should be beautiful and emotionally appealing in its own right. How do you achieve both?

Information density and serenity. Eye movement is the fastest form of navigation, and it’s useful to be able to process and manage lots of information on one screen. Building something dense — not only in static information but also in interactive elements — that is also simple, clear, and beautiful is hard. There are few other products you can work on as a designer that are as rich with information as Asana.

The Opportunity

Building a great design team is one of the most important things we do, and my hope in writing this essay is to connect with the perfect fit for the role of the fifth Asana designer. Someone who’s stirred by the opportunity to solve intellectually-meaty design challenges, in the service of improving our world. This is a really special opportunity for the right person, to help design the future of how people work together. If you are or know that person, send me an email.
.

Design Town Hall: Skeuomorphism vs. Simplicity

avatar

by Andrew Watterson
November 6th, 2012

Designers are a fun bunch: we’re people-people at heart (our job is to understand exactly how you guys are feeling every moment you’re using our product and how to communicate with you), but design teams are usually among the smallest – it’s common to have just one designer for every 10-15 employees at a tech startup. The design team at Asana is four-strong now (and we’re hiring!), but we’re always looking for ways to hang out, drink, and reminisce with other designers.

sketchnoteDesigners tend to agree on a lot of things (a room full of designers is easily mistaken for a thick-rimmed-stylish-glasses-convention), but one of the big issues that’s come up since the success of iOS is whether the style of using hyper-realistic textures and metaphors (called skeuomorphism) is useful or just overdone and pointless. You can see this inside iBooks (which looks like an actual book), Game Center (which is styled to resemble a casino), and countless other apps made by Apple and others. As counterpoint, more recent interfaces like Microsoft’s Windows 8 have taken the opposite approach – the experience instead focuses on collections of your photos and data instead of visual flourish, and you’re guided by large blocks of color and typography.

So last week Asana hosted a panel discussion with some pretty talented designers to duke it out. Together with DesignerFund, we had panelists Kerem Suer (who has worked with FitBit), Wilson Miner (of Facebook/Rdio fame), Mark Kawano (recently at Apple), Alan Urdan (worked on Windows 8), Naz Hamid (Weightshift), and Stephanie Hornung (from Asana) sit down for a great chat. Susan Lin‘s sketchnote captured the panelists & some of their perspectives especially well.

We were lucky enough to get an overwhelming response, and ended up not being able to fit everyone in our space. For the ones who couldn’t make it, we recorded the event and the full video is included below.

Asana has been known from the beginning as a strong engineering company, but that’s only half the story – we hire engineers who care about design (many were in the audience the other night) and designers who care about shipping products to solve any number of product design challenges every day. I’ve been making it my job recently to hang out with other designers in the area, so we were psyched to be able to hang out with a bunch of awesome product people the other night. Pixelworkers pride!

(Want to say hey? I’m @andrewwatterson on Twitter)

A new look for a new year

avatar

by Greg Slovacek
January 5th, 2011

Over the last couple of weeks our customers have been experiencing a change in the look-and-feel of our product. If their feedback is any indication, this has been a very welcome improvement. Readers will notice that these modifications have now made their way to our public website.

It’s worth mentioning that we’ve wanted to make our product nicer-looking for a long time. Virtually every successful new product starts out as a prototype that matures into a more refined, streamlined offering as it makes its way into the hands of more users. And we’re all excited that our product has come far enough to deserve its shiny new clothes!

Read the rest of this entry »