Crafting a New Tutum

new tutum

When the company first embarked on our redesign of Tutum, the team wasn’t prepared for how fast things can move. Many of our initial UI solutions are no longer applicable as we’ve seen our user’s needs evolve along with our product. This has made us take a step back and create a well-defined path forward.

According to Darwin, our lives are ruled by emotions – we’re human. These emotions come from our DNA; you can’t learn how to feel anger, happiness or sadness. These inner emotions will guide our relationships with other humans, products, and even inanimate objects – because of this, it’s important to appeal to these emotions when building your product.

Every single product has its own personality, whether it’s been painstakingly planned for or left as an afterthought. A well-crafted product can express a range of emotions people can connect with. A perfect example of this is Slack, the more you use it, the more you want to use it (we even have two members of the Tutum team using it with their significant other as their primary tool for communication!).

The beginning

Aarron Walter, Director of UX at Mailchimp, wrote a book where he talks about the concept of a “design persona” and how to delight your audience through emotional design. This is the perfect starting point to craft our product’s personality.

We’ve already studied our users and now we are turning Tutum into a person. Is it male, female, or gender agnostic? What is its personality? How will it express happiness, concern or even anger? Is Tutum like somebody we know? How would they interact with a happy user? What about a dissatisfied one? And what’s the reasoning behind our decisions? Answering these questions will help define our relationship with our users.

A well-defined personality can inform visual design, and make the entire design process smoother. It can help us choose the right tone and kind of messages to send to users, inform our copy text and error messages, help choose and personify a mascot, create a greater sense of ownership and pride from the team, and help grow a meaningful relationship with your users. In this day and age when it’s so easy to jump from product to product, personality is critical in creating loyalty.

Next step

Once we have our design persona crafted, we need to do some research about the status of Tutum. To do that we studied the pyramid of “user needs”,  which is based on the “hierarchy of needs” by Abraham Maslow. Maslow proposed a theory that describes the patterns that human motivations generally move through as they grow.

The pyramid of “user needs” was defined in the book Design for Emotion and defines the various stages as functional, reliable, usable, and pleasurable.

Screen Shot 2015-07-01 at 15.10.28 -2-

Start the change process

We started with the design sprint in the New York headquarters. We polished the user experience and completely rebuilt our navigation, which will give users access to all of the product’s objects within a single click.

We’re also including more navigational context clues, so you always know where you are. We simplified the experience to reduce friction with our users, and focused on improving usability.

Now that we know Tutum is on its way to a functional, reliable and usable product, we want to climb one step further to make it pleasurable. So now, we are focusing on the top of the pyramid.

We started by defining a color palette which expresses modernity and freshness. Our “Tutum blue” has a new subtle sparkle to it and we chose a secondary color to accent some parts of the new layout, giving us a new and harmonious way to express our personality.

This new modern color palette is just the tip of the iceberg in our new design, in our efforts to make using Tutum a true pleasure.

Screenshot 2015-07-13 19.24.00
SERVICE LISTING hover@2x

Closure

The details of visual design are not trivial when crafting a new product. I think the developer software ecosystem has gotten away with offering poor usability and aesthetics, far behind the curve of consumer products. However, developers are quickly realizing that they shouldn’t have to settle for a sub-par experience. After all, we only remember 10% of what we hear, 20% of what we read, but 80% of what we see – the visual design of your product will leave a lasting impression.

Achieving a delicate balance between functionality and aesthetics must be pursued from an informed frame of mind – not just based on personal taste, but using various resources and tools at our disposal: usability research, stakeholders and customers, design personas, our own developers, pyramid of user needs, and design sprints. This will help ensure you create a beautiful and useful product.

We’ll continue working hard and I hope to show you more very soon!

Tagged with: , , , ,
Posted in Design
5 comments on “Crafting a New Tutum
  1. Bach Le says:

    Looks really nice guys. Good job. Would suggest you use labels next to those icons. You’re introducing a new set of icons that aren’t prominent/existing now and will be hard for users to understand what they mean without labels.

    • davidrogers85 says:

      They will likely have tooltip popovers. That’s how most websites do it these days when trying to minimize distracting texts 🙂

    • Bryan Lee says:

      Thanks!

      Yes Bach, we plan on revealing the category and name of all of the sections when opening up the menu, and as davidrogers85 mentioned there will be tooltips.

  2. davidrogers85 says:

    Looks great! I’m excited to see the new design when it rolls out.

  3. Bryan Lee says:

    Thank you! We’re really excited to get it in your hands too 🙂

Leave a Comment

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

Categories
%d bloggers like this: