The simple beautiful thing that inspired Asana to be more attractive
About Material Design and delightful objects
On June 2014 Google announced Material Design. That was two weeks after I joined Asana. A couple months later, we embarked on a full-on redesign that would take more than a year to ship. With more than ten years of visual and UI design experience, one of the skills I bring to the design team is to make the user interface look beautiful.
Material Design says this on its introduction:
Surfaces and edges of the material provide visual cues that are grounded in reality. The use of familiar tactile attributes helps users quickly understand affordances.
I hold this as a core concept in UI design. I held it too close to me when I was younger and skeuomorphism was trendy, but it made designs too complex and it made designs too complex and noisy.
Later on, when I explored the extreme opposite of skeumorphism (“flat” design), my designs suffered. Everything on screen was so similar that there were not enough visual cues for users to know how to interact with the interface.
Balance is key, I resolved.
As the redesign process started, we came up with mockups of what Asana could be, in our wildest dreams: interface concepts that would change how people collaborate and how we understand hierarchy and the mental model of Asana. In my mockups, as in many others’, there was a strong idea that the previous visuals didn’t use that much: objectifying the interface. Cards appeared, resembling sheets of paper on the screen.
This is not a new idea. What is so great about making a task list look like a sheet of paper? By solidifying and grounding a task — the core element of Asana and something that doesn’t exist in reality — we create affordances for the user to understand the boundaries of each task, conversation and project. We turn a bunch of data into a thing: a real-life object.
As we looked at those concepts, we saw the potential. We kept trying to turn tasks into physical objects, the hypothesis being that making each list, task, and conversation a card would allow users to more easily separate information and understand what things are.
One of my strengths is visual design. To me, a user interface has to be pleasant to use. For that to happen, it has to be beautiful and harmonious. Not just pretty colors, but nice fonts and images too.
Whitespace, clear font hierarchy, and proportions play a strong role. Everyone likes pretty, shiny things. But it’s the sobriety of beautifully crafted objects that makes them timeless. I wanted that for Asana; I wanted it to be timeless. Yeah, I know, how timeless can software design be?
As I looked for inspiration, I thought about the notebooks and agendas that people used to use (and still do) to keep track of their tasks and to-do lists before computers entered the scene. Those bonded sheets of paper were usually empty, waiting for us to fill them using our own handwriting and sketches. And I thought of one of the most elegant notebooks I could think of: Moleskine.
We’ve come a long way since that first concept, but if you open a project in Asana, and you look at a Moleskine notebook open wide, you might realize what I am talking about. A sheet of paper, rounded corners, faint lines… an empty canvas waiting for you to write on it.
To me, those notebooks are one of the most elegant ways to write, draw, or keep track of things. They come in different sizes and colors, which allows you to personalize your notebook — just like how you can resize your browser window and change the background in Asana. And notebooks only store what we put in them, just as Asana does. It makes me happy to look at a task list in Asana and see the resemblance.
Is that the best solution? I think so. It’s helping the user navigate the information, and at the same time adding value. Visual value. Yes. When it comes to product design, being different for the sake of being different is not beneficial for the end user. But having a particular style that conveys ideas and visually pleasant concepts is beneficial. And that’s what we aim for.
When the tool you’re building is useful and the experience is good and reliable, seducing the user’s eyes is not only desirable but necessary to make the experience as pleasant as possible.
A beautiful pen and a fresh notebook inspires you to to create and creates an irresistible urge to start writing, drawing, sketching.
If you found it interesting, don’t forget to click that heart, comment, or share.
Thank you for reading.
