Overview
Developer Tools
Building developer tools for a seamless development platform
At UXReactor, our Fortune 100 client was using a number of solutions to execute their development process. We were brought in to create a new development platform integrating the legacy softwares while accommodating modern frameworks, such as Kubernetes. I worked with another UX designer and the client’s product manager to gather feedback on the existing system and create a new simplified platform for these developers that enabled them to ship software faster and safer.
Background
How might we reduce the complexity of relying on multiple legacy software to enable developers to build better products for consumers?
Modern software development requires a number of tools to write, test, deploy, monitor, manage, and troubleshoot projects. Our client was using a number of industry standard tools, such as Bitbucket, Jenkins, Nexus, XLR, Splunk, ServiceNow, etc. on top of a legacy development platform. This tool caused long onboarding times, delays in approvals and responses to issues, and extra burdens to the support team. Instead of shoe-horning an existing Infrastructure as a Service (IaaS) tool onto their thousands of developers, the client wanted to create a custom platform that better fit the needs of their developers and organization.
Discovery
Interviewing developers to understand needs and pain points
We conducted in-depth interviews with internal developers to identify pain points and opportunities for improvements to the platform. Additionally, we carefully considered past feedback and service tickets from users, which provided valuable insights into their current development experiences.
UI was inconsistent across app
Our number one complaint was the lack of a unifying visual language across the existing platform. Figuring out what actions were connected across the app slowed down the developers, highlighting the need for a consistent design language in the new platform.
Causes of errors were not explained when they arose
When deploys failed, there was in-depth troubleshooting required since the system did not clearly communicate the cause.
Documentation for platform support was lacking
Developers found themselves jumping between the platform and the org's disorganized documentation during their day-to-day tasks. Many relied on their support team for troubleshooting, which led to a backlog of support requests for the overburdened team.
Console updates and approval turnaround times were opaque
When console updates were released, there was no direct method of communication to deliver the information. Likewise, the approval process was a bottleneck due to the support team's high workload.
Studying the biggest players in the field
A thorough analysis of other developer tools in the same space, such as Amazon Web Services (AWS), Google Cloud Platform (GCP), Digital Ocean, and Heroku was conducted. We synthesized a list of best practices that could be applied to our designs to create a truly exceptional experience.
Clear and straightforward documentation
These workflows can be complex and other platforms did not shy away from that fact. Links to documentation, clear labeling, and help text were used liberally throughout other consoles.
UI consistency
AWS and GCP were especially attentive to updating their products under a unified design language. This helps streamline tasks and expectations around actions and components used across the platform.
Straightforward workflows
From creating projects to deploying apps, other consoles were clear on guiding next steps and helping to streamline workflows.
Goals
Integrate tools seamlessly
Our priority was to make all of the necessary functionality fit seamlessly into the new platform.
Surface relevant information in a timely manner
With many tasks to complete and competing priorities, our goal was to help focus developer attention on their workflows, and raise alerts when needed.
Identify and resolve issues quickly
We wanted to make troubleshooting workflows as clear as possible to enable developers to maintain customer trust.
Reduce reliance on customer support
Since the support team and platform operators were our point of contacts in the organization, it was imperative to them that we reduce support requests by enabling developers to navigate the platform on their own.
Design Process
Designing with the client close by
To align stakeholders with the product vision, we conducted a product roadmap workshop to identify core touchpoints, document user and business insights for each scenario, and prioritize the scenarios for a Minimum Viable Product (MVP).
Documenting user flows
In the scope of the project, we aimed to design 10 experiences for the primary persona, app developers, including the following cases: set up a pipeline, get approval from platform operator, build pipeline, deploy project, monitor project, troubleshoot issues
Drafting wireframes of the platform
One of the biggest challenges was to find balance between surfacing lots of information to the developer while keeping their attention focused on the workflow on hand. I created 2 content hierarchies, which I referred to as the tabular approach (horizontal views of information and tasks) vs. Kanban approach (vertical views of information and tasks).
Testing with developers
After showing wireframe prototypes to developers on staff, I found they preferred the tabular approach to designs. I learned that while monitoring their projects, only the status mattered until issues were raised, in which case they would need to dig in and troubleshoot. The alerts, data visualizations, and reconfiguration flow were all easily understood.
Implementing feedback into the designs
Key deployment actions were highlighted since that was one of the core workflows. Developers desired more context on pipelines they initiated, so the terminology was updated to better match developer expectations. In addition, I made improvements to direct user attention around the statuses of their projects.
Utilizing the client's brand for a style guide
Since UI consistency was a major issue to be addressed, I created a small design system based on the company's brand guidelines to standardize their components and give other designers on staff guidance on how to build out the rest of the platform.
Handoff
I wrapped up the project after 14 weeks working with the client.
Solution
Seamless integration
To ensure a smooth and cohesive experience for developers, the design integrated their suite of tools, such as the Splunk data visualizations, ticketing linked to ServiceNow, and Jenkins to visualize the deployment pipeline.
Relevant information
To reduce reliance on support and surface relevant information in context, I included links to documentation in the homegrown help center and tooltip where additional context could be helpful.
Issue identification and resolution
To help developers resolve issues quickly and easily within the system, I included a system health check in the top navigation that would raise any issues within their project services that needed to be troubleshooted. In addition, high-priority alerts were separated out from the notifications system so that developers would know where to focus their attention first and still be apprised of other actions occuring on their projects.
Outcomes
Outcomes
Through user research, roadmapping, iterative design, usability testing, and compelling visual design, our resulting product successfully simplified the developer workflow, reduced reliance on legacy software, and empowered developers to build better products for consumers.
High learnability
During the evaluative studies, the platform exhibited high learnability for developers, so I am confident that when developed it will help reduce complexity and improve team velocity.
Next Steps
Next Steps
The new developer tool will undoubtedly play a significant role in enhancing productivity, efficiency, and collaboration within the client's development ecosystem.
Track support tickets
Since reliance on support was previously an issue, I’d track the number of tickets filed for preventable issues.
Evaluate onboarding time
Amount of time to onboard would be another measure of success for these designs. If we are able to get developers up to speed with less friction, that would positively impact the velocity of the team.
Other Projects
1
Increasing conversion through modern checkout pages
New features for SaaS e-commerce platform @ SamCart
2
Increasing engagement through gratuity
Growth feature for SaaS e-commerce platform @ Indiegogo