← Previous

Version History

Role: Lead UI/UX Designer, UI Developer
Year: 2024
Company: Amazon – Business Data Technologies (BDT) organization
Technology: Figma, React, HTML, CSS, Typescript

The problem

A highly requested feature and a big pain point for dataset owners and consumers was the lack of robust version history and the inability to easily see what changed between dataset versions, particularly when troubleshooting. Users would call the Andes API for multiple versions, copying and pasting the response in an IDE, formatting it, and trying to compare the versions. In the UI, users would toggle back and forth between multiple browser tabs and do “a bit of an eye test” to try to find the differences, if what they were looking for was even logged at all.

“One thing I would like to talk about is having an audit column here, who was the actor, that would be really helpful…Any time there’s a change in description of column or inline schema change, we don’t see it here. In that scenario, I have to go to endpoint and see who created the version, but can’t find out which team deleted it, or when they deleted it…To compare the v12 and v11, one way is I can go to the UI, copy it, clean up the data, but it’s very manual process, so what I do is I get the SDL from here [API] and I can copy the SDL into [third party tool]…I want to see the changes between the two versions. I can copy the schema, use a third party tool to compare…It’s a better way to see the changes between the two versions…” – Data engineer

The project

The BDT organization hosted a hackathon in Q1 2024. Submissions were taken in PRFAQ format, Amazon’s version of a vision document, to determine which projects would be selected to compete in the hackathon. I originated the idea based on existing user research I had done and submitted a PRFAQ to redesign the version history feature. The idea was selected and I formed a team with 3 developers to compete in the week-long hackathon in Seattle.

Hackathon

I led the Version History team during a week-long BDT Hackathon in Seattle. We began with a parallel sketching session to quickly generate and explore ideas as a team, then iterated on mockups throughout the week. I created a project document that served as the team’s source of truth for the design and implementation. During the hackathon, I also coded the Version Diff UI and dark theme, and owned the final presentation and demo. By the end of the hackathon, the team had delivered production-ready components and implemented Weblabs, enabling the feature to be launched quickly. The API approach was also designed to work with nearly all existing Andes datasets, using metadata already available through the Andes API; at the P99 level, each version contains approximately 60 revisions and each dataset has approximately 10 versions.

Launch

For launch, I focused on preparing Version History for production and measuring its adoption. I instrumented the Version History UI with click metrics to understand usage and created a metrics dashboard to track adoption. I wrote user stories and managed the Version History backlog, prioritizing the work required for the P0 production release. I also conducted UXQA to ensure the experience met the intended design and quality bar, and wrote and distributed the launch announcement and newsletter content to support the release.

Explorations

Mockups

The result

The new version history feature can be found on the “History” tab of the dataset version details page (DVDP). It consists of an Audit History section that lists all revisions on the dataset and a Version Diff section where users can select two revisions to compare. The Version Diff section offers a code and visual view, as well as a side by side and single column view. Users can click on the “View diff” action in the Audit History section to auto-populate the Version Diff section with the selected revision and previous revision.

Outcomes

Won 1st place the BDT Hackathon
BDT VP wanted hackathon project released to production
Version History feature was released to production on 2/22/2024, within a month of the hackathon
Within the first 2 weeks of its launch, the new Version History feature received over 2.1k interactions and the DVDP “History” tab received a 42.3% increase in clicks from the week prior
As of 7/7/24, there were 23k page views and 9k+ interactions on the page (709 “Visual view”, 883 “Diff to value”, 2802 “Diff from value”, 378 “Code view”, 4561 “View diff”)

Hackathon user feedback

“That is…wow, that’s pretty much exactly what I was envisioning! I didn’t even consider one thing that’s in there too, which is the version “1.1” naming convention, presumably for minor version updates (like inline changes and whatnot). The changelog at the top and the side by side comparison are really clean, and they also visually look very familiar (which I assume is on purpose!) because they remind me of the CRUX tool for CRs.” – Sr. Data engineer

“This is awesome. One request would be that it can be used before submitting a new version for code reviews as well… possibly growth idea for the project 🙂 so when we use ANDES API to do new version the schema format is heinous and then trying to line it up for code review before creating new version is a pain. Also when we create a new version there is a communication created, it would be good to see it here to understand why it was created. I struggle because there is multiple times i’ve created the new version (or inline schema change) but can’t see what was send to downstream consumers to reference when they say they weren’t notified“ – Data engineer

Post-launch user feedback

“I really like the option to expand each row! It’s nice to have the description and the “diff” window…oh, and I just noticed the drop down that lets you toggle and show diffs among various versions, not just the two latest ones. Ok, yeah, I see why this won 1st place.” – Sr. Data engineer