Project Overview

One of the first major initiatives my team worked on once I became a manager was the redesign and re-architecture of the developer console. Due to an unscalable framework, the overall experience had not evolved as the console added new functionality which led to a confused developer experience.
My responsibility was to lead the definition phase of the project, get alignment on the vision, and guide the designer on creating the workflows and detailed screens.
before and after screenshots of the developer console

Developer console homepage - before and after


To better understand the specific opportunities for improvement, we met with internal stakeholders across Adobe whose external developers relied on using the console. I helped lead the internal research plan and synthesis alongside a couple product managers. At the same time, a designer on my team did a comparative audit and looked at other developer experiences across the industry.
Project Brief

The most important part of the early stages of the project was to present a project brief to get alignment across all of our business stakeholders. In a meeting with almost fifty people, we set the context of the overall problem and opportunity, discussed common personas, shared the design principles, and presented some initial wireframes for the framework.
Getting alignment early and often was key when so many people relied on the experience that we were rebuilding. Because we did this at the start of the project, our business partners were able to be a part of the process from the beginning, and we set up biweekly office hours and a shared Slack channel to share our progress throughout the project.
overall problem overview showcasing the journey and major surfaces
CO-CREATION WITH Cross-functional partners

Almost every week, we met with the group product manager, lead architect, and engineering manager on the project to workshop different areas of the console. At the beginning, we focused on nailing down use cases, personas, and design principles which all ended up in the project brief. After we got alignment, these workshops moved into figuring out detailed workflows and features. 
For a team that wasn't used to working with Design, bringing them into our process made a tremendous impact to building a trusting relationship. They better understood how we came to a design conclusion, and with both of our teams planning roadmaps together, we were able to efficiently work towards the launch date.
collection of whiteboard images from different workshops

Keeping our design principles as a focus, my team created workflows and wireframes detailing out all of the different sections of the website. We introduced new features like the concept of a "project" which is a container that allows multiple integrations and credentials to be associated with it. This was something developers needed, but didn't have before, and included a major change in the architecture. Keeping our designs lo-fi allowed us to quickly share and pivot as we got feedback.
Designs by Shannon Rhodes
overall information architecture framework of the console
Final Workflows

The developer console was fully rebuilt to provide a modern and scalable framework that could accommodate new features without losing consistency of the experience. Our stakeholders were not only pleased with the final outcome but also how we approached the process keeping everyone involved.
"The new wizard is awesome, you can do everything in one flow without hopping back and forth...You have no idea how much stuff I've deleted from the API documentation. It's super simple now!"
Peppe R., Sr. PM
This project showed the importance of including Design from the beginning, using a design-thinking process, and has been our working model on other projects our team has been involved with. View the console live.
Designs by Shannon Rhodes
screenshot of first time experience to the developer console

You may also like

Back to Top