Design and
the Datacenter

by Shaun Modi, Partner @ TM


The Beginning

At Airbnb several years ago, my now co-founder Steph Bain and I had the privilege of sitting next to Tobias Knaup and Florian Leibert (aka “Tobi” and “Flo”). As Airbnb experienced hyper growth, Steph and I were impressed by the patience and creativity they and the team exhibited to accommodate the rapid increase in traffic. Large LCD screens with colorful graphs showcasing the health of the services running on our infrastructure were mounted above our desk pod. Tobi’s desk would transform into an ad hoc command center for the entire engineering team during down times. As a designer, it was fascinating to watch the rapid collaboration and communication among the team. Fast forward 3 years and Tobi and Flo are the founders of Mesosphere, an exciting new company leveraging the open source Apache Mesos project to build the next generation of datacenter software.

The famous screens Tobi and Flo always had their eyes on.

The Vision

When Mesosphere approached TM to help design their new flagship product, the Mesosphere Datacenter Operation System (or “DCOS”), Steph and I were thrilled. While we initially did not fully understand all of the technical aspects of the DCOS, we were certain that we could learn. Tobi explained to us that

“the time has come for the datacenter to have it’s iPhone moment.”

We were in.

In layman’s terms, the Mesosphere DCOS is a new kind of operating system that spans all of the servers of a datacenter or cloud. It treats an entire datacenter as a one big computer, allowing engineers and operators to easily install and scale up and scale down services such as Spark, Cassandra, Kafka, Hadoop and more. This is an a easy to use, human-centered infrastructure solution for modern digital products and services.

We needed to design an interface that was simple, intuitive and utilitarian. Most important, the DCOS should serve the needs of developers and operators. If we were to get anything right, we had to make our customers’ lives better. The team decided on the following (high level) features:

  • Easily launch, monitor and destroy processes.
  • Allocate and deallocate resources across servers.
  • Provide an API that allows developers to program against the datacenter like it’s one big computer.
  • Provide a datacenter command line interface.
  • Public and private repository for third-party and custom-built datacenter services like Hadoop, Spark and Kafka.
  • Make building a distributed systems application as straightforward as building a mobile app.

Process

The first step of the project was to immerse ourselves with the team and problem space. TM’s approach is not to “throw design over the wall”. Rather, we embed with our clients and join the company. TM spent several weeks asking questions, researching and brainstorming with the team responsible for shipping the DCOS.

Product manager Thomas Rampelberg critiquing a concept.
Technical lead BC Broussard sharing an idea.
Features in the making.
Sketching away with Mesosphere designer Anastasia Tumanova.

Inspiration

A great user experience is a result of the thousands of decisions made in the design and development process. There are no silver bullets.

Users should feel informed, empowered and in control when using the DCOS. Developers and operators will be spending a substantial amount of time in the experience, so it should be visually calming. The application should have the aesthetic beauty seen in consumer grade products. TM spent quality time looking for visual inspiration from a variety of sources including transportation, art and software. Behind a stunning visual layer is an incredibly powerful tool.

The Porsche Macan has tremendous engine power underneath a luxurious user interface.
Work by the artist Sol Lewitt.
Sol Lewitt close up.
Animation inspiration.
Interface mood board.

Under a tight deadline, we quickly iterated through many versions of the DCOS. We collected feedback from a multidisciplinary group including engineering, marketing, design and real users.

Concepts

Early DCOS wireframes.

Via a rigorous feedback loop of critiques and live prototyping, many designs did not make the cut. The team learned something useful every step of the way.

Designs that didn’t make it.
Iterations.
Server graphic explorations.

Every detail was considered in relation to the needs of developers and operators.

Datacenter overview service hover and time scrubber.
Navigation experiments.

Colors, shapes and proportions were meticulously selected to honor and build upon the Mesosphere brand.

Improved server graphics.
Color spec.
Scrolling servers.
Server reallocation.

Final Product

Final DCOS overview.
Final DCOS server detail view.

Modern Day Bridge Builders

Stereotypically, designers are more likely to be attracted to the newest consumer app instead of enterprise or data infrastructure companies. We at TM are genuinely excited about enterprise and data infrastructure projects because they speak to our company’s core values. Projects we take on must have the potential for large-scale societal, cultural and economic impact. When you have the opportunity to design and build for the enterprise, you can empower nascent businesses to flourish and solve interesting problems at scale. We think the vision that Tobi, Flo and the team at Mesosphere have is analogous to the vision of the engineers and workers building bridges in America at the turn of the 19th century. Bridges connect people, enable new opportunities and grow societies. The design and engineering of a bridge complement one another. Bridges are more than just a connection between two bodies of land. They symbolize the culture, spirit and potential of the cities they serve.

Brooklyn Bridge builders.

We’re honored to have worked with such a talented and design focused team at Mesosphere, bridging the gap between the present and the future.

To learn more about DCOS or try it out yourself, visit Mesosphere’s website.

-Shaun Modi and Steph Bain, Co-Founders and Partners at TM, a design firm specializing in UX, UI and service design. Follow us on Twitter, @wearetmsf.