Jessica Peng

Sandbox Artifact Copy App


ceem-cover

Technologies

React, React Spectrum (React implementation of Adobe’s design system), Unified Shell (Adobe’s UI framework for internal apps), HTML/CSS.

My Role

I led design and front-end implementation on a five-person team.

Glossary

  • AEP: Adobe Experience Platform
  • artifact: an object holding customer data
  • sandbox: virtual partition within an instance of AEP that allows customers to manage and monitor artifacts

Notes

N/A

Problem

Transferring artifacts between sandboxes in Adobe Experience Platform is time-consuming and error prone.

Objective

Build a tool that simplifies and streamlines sandbox management.

Features

The customer should have the ability to:
  • Copy all foundation artifacts (schemas, datasets, segments, sources, destinations) and first level dependencies from one sandbox to another sandbox
  • Review dependencies before copying
  • Sync artifacts between the source and destination sandboxes
  • Revert artifacts (once) after syncing
  • Log actions for documentation and troubleshooting

Research

All team members participated in the research process. We gathered requirements from internal consultants and solution architects whose customers needed to efficiently manage multi-sandbox environments. We identified the following pain points across all customers:
  • Painful and time-consuming to copy complex artifacts between sandboxes
  • Need to easily kickstart new business implementations between environments
  • Need to deploy sandboxes with a baseline configuration, support customers that wish to benefit from faster sandbox deployments that include tested AEP configurations
  • Need a separate set of APIs for AEP versus AJO for migrating development work to higher sandboxes
A competitive analysis of other sandbox management apps:
competitve-analysis
Throughout our design and implementation process, I led internal demos and testing sessions to debug the app, improve its usability, and fine-tune requirements.

Version 1

Our initial design lacked scalability and helpful reporting. More specifically, it lacked a consolidated view of all dependencies for large copy operations, an organized audit log for troubleshooting, and a modularized/scalable UI to easily incorporate additional features.

image-0

Image Caption

image-1

Image Caption

image-2

Image Caption

image-3

Image Caption

Version 2

Based on existing design patterns in AEP, I drafted a re-design in Figma.

We faced a lot of challenges with semantics; aside from renaming a couple terms, we also discussed the distinctions between authoring and deployment. This topic is reflected in the Version 2 improvements.
Problem #1Users cannot view more than one artifact's dependencies at a time.Solution List all artifacts and their dependencies in a separate window.Thought processPreviously, the user could only view one artifact's dependencies at a time in a tree diagram, which was a useful but buggy feature. During the testing sessions, we agreed that a separate window was necessary to have an organized view of all selected artifacts and their dependencies. I decided to follow the AJO Object Copy UI and display them in a list.
ceem-problem-1
ceem-problem-2-1
Problem #2Lack of modularization makes it hard to incorporate new features.SolutionSeparate the artifacts into their own tabs.Thought processWe received two additional requests to sync and revert artifacts between sandboxes. Incorporating these features (each requiring multiple UI components) would've been time-consuming and unreliable in our single-page UI. Given that our highest priority was to implement these features for schemas and we already faced issues running asynchronous calls across different artifact types, we decided to move each artifact type to its own tab.
Problem #3The audit log is hard to follow and unhelpful for troubleshooting.SolutionTurn the audit log into a table and put it on another tab.Thought processThe audit log outputted asynchronous calls across all copy operations, which made it hard to trace what was actually happening for each copy workflow. Since we already created tabs for each artifact type, we decided to extend this to the audit log and put it on a separate tab. We also narrowed down the information to main actions taken in the app and organized it into a table.
ceem-problem-3-1

Current Design

image-0

Image Caption

image-1

Image Caption

image-2

Image Caption

image-3

Image Caption

image-4

Image Caption

image-5

Image Caption

Feedback

From the audit log, we've tracked over 100 internal consultants and solution architects using our app. We've also added an additional capability to copy artifacts across IMS orgs. Overall, we've received positive feedback on the usefulness of this tool to facilitate and streamline sandbox management in AEP.