ADOBE

Modernizing the developer console

While Adobe has many established products spanning across fields from creative to business analytics, it’s extensibility ecosystem is new and growing fast.

Product extensibility provides users with ways to build plugins to make Adobe apps their own, integrations that allow Adobe functionality or data in other apps, or even build entire new standalone apps using Adobe’s technology and data.

my role: Lead Designer     

timeframe: 2018/19

Untitled-1

What is the Adobe Developer Console?

One of the core tools these third-party developers use is the Developer Console.

Here, developers get the keys needed to actually use our APIs and services.

For those building plugins for Adobe XD and wanting to share those plugins publicly, the developer console was also where they went to submit their plugin for Adobe review and have it show up in the plugin marketplace.

This surface has to work for all APIs and services that Adobe offers, across products and business units.

Group-49@2x

The Project Goals

Modernize the experience

Create a modern experience for developers up to par with industry standard.

Create a scalable framework

We needed a framework that could grow as Adobe’s extensibility needs grow.

Constraints

• No budget in time or resources for dedicated research support.

• Tight timeline for a complete re-design and re-architecting of a large surface.

• Tight timeline for a complete re-design and re-architecting of a large surface.

Who are we designing for?

While product strategy around extensibility varies across the different Adobe products and business units, it’s clear that the core audience for this experience is third-party developers. These are developers as a customer, those who primarily work outside of Adobe for other companies or themselves to build technology. There are different types of developers that we categorized by the types of work they do.

np_persona_410787_000000
np_persona_410774_000000
np_persona_410776_000000
np_persona_497838_000000

Enterprise Developer

These developers work in-house for their enterprise company and are looking for solutions to help them with their workflows.

Consultant Developer

Usually working for an agency, they are brought in to enterprise companies to help with specific needs.

Software Vendor Developer

Similar to the Enterprise developer, but they are typically looking for ways to integrate their software with Adobe’s software.

Independent self-starter

This might not be a developer by trade, but someone tinkering in development to solve a need they have.

RESEARCH

How did we come up with these personas to focus on?

Our team did extensive ad-hoc research by talking to our stakeholders that included product managers, developer evangelists, and engineers that know their products well and who their users are. We also utilized industry research around developers.

DEFINING OUR USE CASES

To help us create use cases we would design around, we created an ad-lib.

I’m who building what for audience because of motivation.

WHO

Enterprise developer
Consultant developer
Software Vendor developer
Independent self-starter

WHAT

Extension / Plugin
Integration
App

AUDIENCE

Private
Public

MOTIVATION

Efficiency
Retention / Engagement
Revenue

DEFINING OUR USE CASES

I’m a designer building an XD plugin for myself to create efficiency.

I’m an enterprise developer building an app using Adobe APIs and services for my company to create efficiency.

I’m a software vendor creating an integration between my app and Adobe Photoshop for our joint customers to retain existing customers and engage new ones.

I’m a consultant developer building an integration for Adobe Analytics for our client to use externally to create engagement.

Design principles

To understand what drives the creation of the experience, I collaborated with other design team members, product management, and engineering to create the principles that would guide our design.

I wrote an article on the Adobe Tech Blog about how these design principles aided in the cross-functional collaboration of the project.

Next-Gen-Console-PPC-072319@2x

Ideation

In the beginning phases of the project, we had many cross-functional collaboration workshops to understand the technical aspects of the tool and start defining what the new experience could be.

Mask-Group-1@2x

Creating a new framework

We centered the experience around an abstract container called the “project.”

Projects allowed the user to customize it however they needed and provided flexibility for future services and experiences.

Next-Gen-Console-PPC-072319-IA@2x
Next-Gen-Console-PPC-072319-home-wire@2x

To pull everything together, we linked our design choices back to the design principles.

The project guidance and information shifts as the the project grows and matures.

Next-Gen-Console-PPC-072319-project@2x
Next-Gen-Console-PPC-072319-project-overview@2x

We aimed to provide relative context when needed but not over-explain.

We wanted to provide guidance and next steps to the developer whenever possible.

Next-Gen-Console-PPC-072319-project@2x-1

Designing out each page and edge case

I created over 300 screens across 6 iterations for the entire developer console redesign. I utilized multiple rounds of feedback from stakeholders, business partners, engineers, and design teammates. Adobe’s design system, Spectrum, was used to define visual aesthetic.

API-Detail-API-Key-cred-–-1
API-Detail-API-Key-cred-–-8
API-Detail-JWT-cred-–-9
API-Detail-JWT-cred-–-12
API-Detail-OAuth-cred-–-1
Browse-API-–-5
Browse-API-–-11
Browse-API-–-13
Browse-EVENTS-–-2
Browse-EVENTS-–-3
Configure-API-create-jwt-cred-–-2
Configure-API-create-jwt-cred-–-3
Configure-API-oauth-–-1
Configure-API-oauth-–-web-and-iOS-–-3
Credentials-–-Serv-Acct-–-Details-–-2
Credentials-–-Serv-Acct-–-Details-–-6
Credentials-–-Serv-Acct-–-Details
Enterprise-org-home-FTE-no-projects-–-1
Enterprise-org-home-FTE-no-projects
Enterprise-org-home-onboarding-modal-–-1
Enterprise-org-home-returning-2-–-2
Enterprise-org-home-returning-2
Enterprise-org-home-returning-–-1
Event-details-–-4
Event-Reg-Debug-Tracing-no-error-open-request-tab-–-1
Event-Reg-Event-Details-–-8
Event-Reg-Event-Details-–-9
Event-Reg-Event-Details-–-11
Event-Reg-Event-Details-–-success-send-sample-event
Event-Reg-Event-Details-–-view-sample-payload
Insights-APIs-–-1
Insights-APIs
Insights-events-–-3
Insights-events
Insights-runtime-–-1
Personal-org-Distribute-–-1
Personal-org-Distribute
Personal-org-plugin-overview-–-1
Personal-org-plugin-overview-1
Personal-org-Project-Overview-New-–-12
Personal-org-Project-Overview-–-1
Personal-org-Project-Overview-–-4
Personal-org-Project-Overview-–-8
Personal-org-projects-empty
Personal-org-projects
Personal-org-Distribute-submission-–-1
Personal-org-Distribute-submission-–-2
Personal-org-Distribute-submission-–-5
Personal-org-Distribute-submission
Production-approval-rejected
Project-Overview-Filled-Project-–-1
Project-Overview-New-–-5
Project-Overview-New-–-6
Project-Overview-New-–-8
readOnly-Project-Overview-Filled-Project-–-4
Runtime-Namespace-–-3
Runtime-Namespace-–-4
Runtime-Namespace-–-6
Subscribe-to-events-–-2
Subscribe-to-events-–-4

Project go-live

The new developer console was launched in two phases, based on timing of the two main conferences Adobe holds each year.

Phase 1 - Oct 2019

This phase introduced projects and new workflow for plugin distribution.

Phase 2 - Oct 2020

This phase brought the rest of the dev console experience to fruition, including new detail pages and workflows.

Retrospect

Just like with any large-scale redesign project in a corporate company, not everything went smoothly.

Quite a few design pieces were de-scoped throughout the development process. I collaborated with engineering closely during the development phase to help pivot when needed while still keeping the original goals of the experience intact.

After the redesign launched, I created a “UX Debt” list to go alongside engineering’s “tech debt” list. I fought for key experiences to be added back to the tool and worked with engineering to make solving the ux debt a critical piece of the process.

Links

Resume     LinkedIn     Medium     Twitter

   

© 2021 Shannon Rhodes