Dropbox developer tools
CI tools automate software development, which leads to faster delivery, higher quality, and increased efficiency.
As the Lead Product Designer on the CI Tools team, I accomplished the design of a customized developer tooling platform that streamlined engineering workflows. The fragmented experience of third-party tools presented an opportunity to create a unified solution tailored to Dropbox needs. The result was a platform that enhanced functionality, visual coherence, and scalability, ultimately reducing the engineering time on task and driving 50% improvement in satisfaction scores. These outcomes translated into measurable gains in engineering efficiency for the business.
Problem
Based on the volume of complaints from engineers through a dedicated Slack feedback channel, 1:1 manager check-ins, and discovery user interviews, we identified pain points that slowed down the engineering workflow and impacted the business performance.
Objective
Improve the speed of development cycles and code integration by creating a unified platform that consolidates all dev tools. Make it flexible and scalable to accommodate for future functionality.
Establish an intuitive, user-centered and consistent experience by standardizing UI and interactions across tools and adhering to the Dropbox Design System visual language.
My role
Shaped product strategy by prioritizing features.
Conducted qualitative and quantitative user research and iterated on concepts and prototypes.
Validated solutions with engineering stakeholders and the design system team.
Delivered high-fidelity mockups and supported engineers through implementation.
Conducted pre-launch QA and identified defects.
Collaborators: Engineering leadership, Code Workflows engineering team
Understanding the user
Personas and workflow
I defined 3 main personas and a high level developer workflow.
New Droplets
Engineers that started at Dropbox in the last few months.
AI / ML Devs
Engineers with a longer tenure at Dropbox that build with AI and ML.
API Devs
Engineers that started at Dropbox in the last few months.
Current state
Engineers built three CI applications with basic UI representations. Users viewed them as a significant improvement, but noted that the basic user experience was lacking.
Flakes application design
As the most critical touchpoint in the workflow Flakes was prioritized as the first deliverable.
User feedback
It takes a long time to find the test information. Switching between the apps is cumbersome.
Challenge
Design an app that will enable developers to get to flaky test results and act on it as fast as possible.
Requirements (take it down and make more concrete)
Cross platform path to easily access other application in the workflow
Intuitive UX, information architecture, navigation and interaction patterns
Improved searchability, search categorization (e.g., by team, by test status), breadcrumb trails
Optimized, actionable test data display
Defining user interactions with Flakes
I started with a discovery research to define a day in the life of the users. Based on it I created a workflow diagram that specified user entry points (HP or directly the Test Detail page), and the actions they need to perform.
Initial HP dashboard concepts
Based on brainstorming with engineers/users I created minimal req mvp wireframes that let me identify the crucial functionality needed.
Further concepting and iterations
Taking this as a starting point I proceeded with generating ideas to meet the requirements. I explored personalization. I created iterations and validated it with the management stakeholders and users that were around the ideas:
A global header pattern with consistent layout and functionality to be implemented across the platform that will include an app switch and a unified search methods in one Search field.
Replaced Help text button with an icon only button per web standards. Removed the ambiguous links from the page header and moved them to the left navigation.
Created left nav with link info/action categorization that increases searchability and scalability, and offers fast access to actions.
Customized the main page content by displaying an intro banner for first time users and a list of their teams tests with status idicated.
Aligned with Dropbox design system.
Abbreviated onboarding flow on the By Product Page
After design hand-off to engineering, I handled additional questions from the team during implementation, for example when and if we should allow users to dismiss the banner. Eventually we conducted User Accessibility/QA Testing identifying defects and logging them into Jira as blockers or backlog items.
Defects examples that were logged into Jira
Phase 2 - Assign Users, Access and Install
With the initial launch showing a positive impact on administrator experience metrics, we proceeded to the next phase to address additional user feedback.
“I want to assign users, install, update licenses and set up SSO as quickly as possible.”
Based on user feedback, we defined the feature requirements. The module needed to confirm key purchase details—such as the number of seats, purchaser role, plan, subscription, and offering type—and then guide the administrator through the remaining setup tasks so they can start using the product.
Module 2 requirements
I applied a consistent design approach using an accordion pattern and placing it in a high-visibility top section of the account dashboard. With a clear hierarchy of information we confirmed the purchase conditions and showed user the path to actions.
Module placement and responsive view
After establishing the overall functionality I defined design for different use cases depending of the kinds of purchase.
Selected cases with different offering types
Results
“Get Started for Admins” onboarding improved the CES (Customer Effort Score) by 70% and the 30-day assignment rate by 8% (4 to 12%).
The move subscription between teams workflow has dropped from 890 to 137 per month.
A 30% reduction in Teams-related support cases was recorded.
Engagement with module is increasing traffic to Account pages By User +39k, Custom Install +12k, Product detail +20k visits.
Next steps (future state)
Make it easier for the administrators to self-serve by combining the modules into one. Allow them to assign subscriptions to teams and completed the remaining tasks in one flow.
Add the SSO setup capability to the module.
Convert it into a smart component/pattern that can be reused at different customer touchpoints to ensure design consistency and save design and engineering time.