Visit DigitalOcean

DigitalOcean

Cloud computing, designed for developers.

My Role

Product Design, Visual Design

Responsibilities

UI, UX, HTML, CSS, Testing

Intro to DigitalOcean

My work at DigitalOcean involved a lot of individual features that amounted to an extremely complex product. Those features included user onboarding, team accounts, an internal tool for handling abuse, DNS, floating IPs, and the Droplet—also known as a virtual private server—experience as a whole. I was also a part of the team that was building the future of the DigitalOcean Community, a staple for our early-stage customers, and the reason many of them continued coming back.

When I joined the team in 2014 as the first design hire under my Creative Director, the product's experience was a very simplified version of what others in the market were offering, which made DigitalOcean an attractive competitor to our customers. However, after a short period of time, it became clear that offering a simple experience wouldn't quite cut it. To maintain our user-base and possibly surpass other providers, we had to start building new features that our customers wanted, while still offering the simplest user experience on the market. The major players that we were up against included Amazon AWS, Google, Microsoft and Rackspace. As the product evolved, I had the pleasure of working on everything from building the living style guide and defining system-wide patterns, writing some of the HTML and CSS, to speaking with our customeres one on one to help further improve our already outstanding user experience.

DigitalOcean's onboarding.

Less than two years after joining the team, we had achieved the status of the second largest cloud hosting provider in the world, with a key aspect of our success being credited to the design and simplicity of the user experience.

Where to Begin

Joining a rapidly growing startup is unlike anything I have ever experienced. It's exciting, terrifying, fulfilling and an all-around incredible journey. I had learned more in my first few months there than I had at any other point in my career.

Historically, the product that DigitalOcean provides to it's customers is very much the same.

There is a running joke that no one truly understands what the cloud really is. Who could blame them for not knowing? Cloud computing is an extremely complex thing, and we were out to change that.

A Closer Look

DigitalOcean's IA had been designed to support our primary product—the Droplet. However, as we built new products including storage and networking, that continued to change the landscape of the product in many ways that are still being tested and validated by the product design team. For now, I will walk you through the hierarchy of DigitalOcean's control panel, including all of it's core features.

  • Droplets

    Create a new Droplet, or manage & monitor existing Droplets. Each Droplet has its own management page where actions can be performed, servers can be reprovisioned and resized, and users can monitor server performance. This is the core of our product.

    Droplet Management View
  • Images

    An image is simply a backup of a Droplet at a point in time that can be restored or easily transitioned into a new Droplet.

    Images View
  • Networking

    The networking section allows users to set up Floating IPs, which are IP addresses that can be instantly moved from one Droplet to another. This is generally used for highly available setups. In addition, the networking page allows users to add domains & configure DNS records.

    Networking View
  • API

    Many large customers configure their app to size up or size down their infrastructure depending on server load using the DigitalOcean API. The API section allows users to create new apps and tokens, and manage their access & permissions.

    API View
  • Support

    The support section attempts to help answer user's questions by surfacing documentation and community tutorials. If the problem persists, a user can open a ticket and await a response from our support staff.

    Support View
  • Settings

    User and team settings, billing, referrals, security, and notifications are found here. These settings do not relate to infrastructure, but are user and team-specific settings.

    Settings View

The Process

Pretty pictures are always fun to look at, but beautiful products with a great user experience can't be built without a solid process! Here's what that looks like at DigitalOcean.

  • Feature Roadmapping

    DigitalOcean's feature set has come from every corner of the organization, which is something we pride ourselves on. Each member of our team has ownership when it comes to the product and because of that, we have a very rich backlog of features to be built for our customers.

    While we would love to build every little feature that comes across the board, we have to be realistic as a team and as a company, and select the features that provide the most value to our customers. Some are small, many are large, but no matter the size, they have to provide our customers with the thing they need most. And because technologies and expectations are forever changing, so is our list of priorities for what that thing that we need to build truly is.

    Like many stages of our process, we work iteratively and collaboratively to come up with the best possible result.

  • Prioritizing

    Even after we've established our feature roadmap, we have to prioritize the list further to make sure we are working on the right things first. Sometimes that's easier said than done.

    As a team, including Product Managers and Product Designers, we gather to discuss the possibilities and limitations some of the features may present. Long winded conversations, many many cups of coffee and some passionate exchanges on what new feature should be built first and we have our prioritized list of new features to be built!

  • Getting Started

    Depending on what we're building, and whether or not we have any history surrounding the new work, the first thing we do is look at the data. In the case of no data, generally something we run into when working on a brand new feature, we create a list of assumptions that we can make based on our typical user. Along the way, those assumptions will be tested to ensure that they offer real value and don't simply remain assumptions. A motto our team lives by is test often, ship fast.

    When a new feature has minimal data surrounding it, and we're forced to make assumptions, we will fall back on our user personas created to help us understand the different types of people using our product. They help us understand if the feature is targeted at our power users—advanced developers with a deep understanding of the complexities of cloud computing—or our mid to lower level user that is technical enough to hold their own and can get by with a simple UI to guide them.

  • Sketching

    With a solid understanding of what we're building, and who we're building it for, we move into the sketching phase. One of my personal favorite steps in the process. It allows me to begin visualizing the information architecture of the UI and trying out ideas that came up during the discovery phase.

    Everything from the individual elements to the overall structuring of the page is considered at this stage. Also, while making certain decisions, the thought of how interactions and transitions will come into play are constantly in the back of my mind.

    Once I've established a good foundation for the design of the new feature, page or product, I will move quickly into the wireframing stage so I can expand on the sketches in more detail and eventually begin validating certain assumptions with a small user sample.

  • Wireframing

    For my process, this is the most important step. I get to try out all of the ideas that came up during the sketching and discovery phases, and more importantly, it gets me one step closer to validating my assumptions. Without the risk of creating high fidelity mock ups that may or may not make it into the final cut, I have freedom to explore options with different patterns and layouts.

    This step has proven to be an invaluable asset to our team when exploring every possible option for solving our customer's problems.

  • Usability Test

    Our goal is to test our work often. That means as soon as we have something, no matter what the quality of the visual design, we are putting it out in front of users to get important feedback. In many cases, it's more about the quality of the feedback, rather than quantity.

    A small user sample is generally pulled for us to conduct our testing with. We seek out a wide demographic, but always with our focus set on the developer community; our core user-base.

  • High Fidelity Designs

    Armed with user feedback on a series of wireframes along with validated assumptions, we finally move into the design phase.

    At DigitalOcean, we have an internal styleguide we've come to call 'Buoy.' With this styleguide in place, things such as typography and color selection are already handled for us.

    After I have applied Buoy styles to the new feature, I will tighten up the visual design around the wireframes while considering any feedback from the testing. In some cases, I will introduce new patterns that ultimately will be added to our styleguide.

    Our team holds itself to the highest standards of design and therefore, we spend a lot of time reviewing and improving our work throughout the lifecycle of a feature's development. We gather daily for design reviews to go over anything new, where we will present our work along with our thinking behind certain decisions to which we will receive feedback for how we might push it further and make it even better.

  • Build, Ship & Iterate

    Finally, after we have a solid design, we pass it off to our engineering team to build it out. In some cases, depending on the size of the team and their bandwidth, we will help out with some of the front-end coding. We get to get our hands dirty with HTML and CSS, which can be a nice change of pace, while also allowing us to guarantee that our designs are built to spec.

    Along the way, as certain chunks of the work is completed, we will run another round of usability tests to make sure we're on the right track.

    Our process for shipping a new feature involves slowly releasing it to percentages of our user-base. Generally, we start with 25%, then work our way up in 25% increments until we have reached a complete product release.

    After some time out in the wild in our user's hands, we focus on how the feature is performing and where improvements could be made. If we feel we have a good amount of work to be done, we will begin the process of iterating on our work, including everything from the design to the way the application was built, all with the goal being to iterate and ship as fast as possible.

This process is typically a rinse and repeat cycle. We are always looking to improve our work so we can increase conversion, gain newer and better customers as well as retain the customers we already have.

Coming Soon...

After two and a half years working on many features and products at DigitalOcean, I have accumulated a large amount of work to document. I will be working on releasing a deeper dive into some of the features I have personally lead, including the related sketches, wireframes, final designs and a thorough walk-through of the product thinking that went into some of those decisions.

If there is something that you would like a more thorough look into, please feel free to contact me!

Twitter Love

Some of our customers showing their love for DigitalOcean.

What I've Learned

DigitalOcean has been one of the most pivotal experiences of my career. Working on such a complex product has pushed me to not only think deeper as a product designer, but to also develop new skills that I hadn't originally set out to learn.

Along with the design and technical skills that I have improved and developed at DigitalOcean, I have also developed a deep understanding and appreciation for startups and what they set out to achieve. It's a quality I have, and will continue to instill into my work for the rest of my career.

LET'S CHAT!

Get in touch to say hello, talk about design or whatever you want!

colin.keany@gmail.com