How Design Principles Shaped the New Adobe Developer Console

Shannon Rhodes
Jul 8, 2020 · 6 min read

If you are a developer building anything using Adobe technology, you have likely used the Adobe Developer Console at some point in your process. Whether you’re creating an Adobe XD plugin and distributing it, getting API keys, or setting up the ability to call events, the Developer Console is the place to go to get everything you need.

Abstract illustration of hand holding a box that is opening with sparkles coming out.

When the Developer Ecosystem team set out to reimagine the Developer Console experience, its experience designers were tasked with creating a new look and feel for it. The goal was to create an experience that would allow room to grow for Adobe’s extensibility ecosystem while providing a great experience for end users — the developers creating apps, integrations, plugins, or extensions with Adobe solutions.

Collaboration is vital to a redesign’s success

The developer console serves a lot of internal product teams and these teams were our main stakeholders for the redesign project. To make sure we were serving them properly, one of the key components of our initial research phase was to conduct stakeholder interviews. We wanted to hear in their own words how developers used the Console and which pain points needed to be addressed for them. This also gave us an opportunity to learn how these teams wanted to grow their extensibility ecosystems in the future. We quickly saw patterns emerging between teams that allowed us to focus on solutions that could work for everyone.

Abstract illustration of hands building something out of abstract shapes on a screen.
Abstract illustration of hands building something out of abstract shapes on a screen.

From Carmen Sutter, the group product manager for Adobe I/O Developer Ecosystem:

One of the tricky things about building cross-functional and cross-solution products, is how to create a consistent experience for your end users, while incorporating requirements and feedback from dozens of stakeholders. From the start, we worked closely with our internal stakeholders and made sure they were a part of this journey by inviting feedback, discourse and sharing the rationale for the decisions we landed on.

Through these interviews, we were able to gain an understanding of who our users are and their processes, where our stakeholder teams want to go in the future, and the internal goals and constraints we needed to meet. From what we learned, the design team worked closely with product management to create a set of design principles, vetting them with engineering and stakeholders before locking them down. We used these design principles throughout the process as a guiding light for any new features, functionality, or design decisions made.

Let’s take a closer look at each design principle and some examples of how they are brought to life in the redesign.

1. Set me up for success.

The key to designing tools for developers is understanding the different types of developers that are using the Console and their overall processes. We needed to provide context and guidance for newer developers, while allowing more experienced developers a faster workflow.

This can be seen in the helpful guidance areas throughout the experience.

screenshot of a guidance box that instructs users how to use webhooks
screenshot of a guidance box that instructs users how to use webhooks
Screenshot of guidance found on the Events Registration page within a project.

These areas provide contextual help based on the page the developer is on, but can also be closed to minimize content and maximize workflow.

2. Be flexible and cohesive.

The previous I/O Console had limitations on growing its functionality. We set out to design a new tool that has plenty of room to grow while providing an easy and cohesive experience for developers. One of the top examples is the introduction of projects.

Screenshot of an example project page within the developer console.
Screenshot of an example project page within the developer console.
Example of a project page that includes multiple APIs, an Event Registration, and Runtime.

With the I/O Console, developers were limited in what they could create at once. In the new Developer Console, a project is a container for all the pieces the developer might need to create an app, plugin, or integration. Multiple APIs, Event registrations, and other services can all be connected together in the same project.

3. Do it here.

One of the common pain points we heard from external developers and internal stakeholders was the amount of times they would have to leave the I/O Console to perform a task, then come back to complete it. From research, we know that context-switching and forcing the developer to leave the main surface to perform dependent actions can lead to a reduction in overall engagement. The redesign implemented several new functionalities that allow the developer to complete tasks within the Developer Console.

Generating a key pair within console is simple and quick.

One of the top goals for the redesign was to get the developer to the code as quickly as possible. After all, the Developer Console is just a tool in the overall journey to creating.

4. Take care of our own.

The Developer Console serves many teams within Adobe. We worked closely with these internal teams from the beginning to make sure we fully understood each of their goals, as well as the needs of their developers. The redesign has introduced new ways individual teams can surface the information and resources they know their developers will need, when they need them. The redesign was also built to be API-first, allowing internal teams to perform Console functionality outside of the UI.

Screenshot of a plugin that was recently added to a project in the developer console.
Screenshot of a plugin that was recently added to a project in the developer console.
The team working on extensibility for XD was able to customize the messaging and resources for the XD plugin detail page within a project.

In future updates, we’ll be looking to introduce even more flexibility for product teams to provide the right tools and resources for their developers within the console.

screenshot of adobe developer console homepage
Screenshot of the homepage for the developer console.

The Developer Console redesign is the first step to fulfilling the design principles above. The experience design team, product management, and engineering teams continue to work together to build a better experience for external developers, who are working hard to build great things with Adobe technology. We all look forward to hearing your feedback on the new Developer Console!

Adobe Tech Blog

News, updates, and thoughts related to Adobe, developers…