Replit Product Design Intern (Summer 2024) · UX Design, Design Engineering
CONTEXT
A Little About Replit
Replit started off as a multiplayer web-based IDE. In recent years, Replit has shifted from servicing professional software engineers to a broader genre of software creators: citizen developers. These include founders, sales engineers, designers, product managers, and other folks who wish to make bespoke software but lack traditional computer science backgrounds.
Replit Deployments Turn 1
The launch of Replit deployments in 2023 was pivotal to retaining citizen developers on Replit, giving them a way to publish their software projects without switching to other (harder to use) managed cloud services. We had a couple of high-leverage fast follows planned to bring our deployments feature to parity with other managed cloud services — one of them being deployment rollbacks: restoring a previous deployment build to production.
A cloud services PM speaking about the necessity of rollbacks ^
It’s a Pipeline
Rollbacks are not quite a standalone feature… for a user to activate a rollback, they would have to do the following:
Identify regressions: find something wrong or undesired in their current deployment
Review deployment history: identify which past deployment they would like to promote in place of the current one
For an ideal user experience, I realized I would have to address these two concerns alongside the rollback mechanism itself. Here’s a quick visual summary of the design deliverables I scoped out for myself:
ID REGRESSIONS
Code comparison between deployments helps users spot issues.
DEPLOYMENT HISTORY
Deployment notes offer affordances for discriminating annotation.
ROLLBACK
In-place rollback activation ensures minimal workflow interruption.
How might we refresh deployments UX to support all three stages of the rollback pipeline?
Here’s a sneak peek!
CODE COMPARISON
DEPLOYMENT NOTES
ROLLBACK ACTIVATION
RESEARCH
Let’s Go Back to the Beginning...
Since we were pursuing deployment rollbacks to bring Replit to parity with other managed cloud services, this process began with a competitive audit.
While rollbacks designs are generally similar across all managed cloud services, the visual context with which a rollback is activated differs and impacts the overall experience. The table below summarizes features from other managed cloud services that would inspire Replit’s approach to more useful deployments management.
Synthesizing Research
Regardless of the variance in UX, the underlying DNA of deployments management was very similar across the audited providers. That is, their deployments are powered by Git.
Each deployment is tethered to a Git commit, which innately provides a snapshot of the code at the time of deployment.
= easy to identify regressions
These managed cloud services then add a UX layer to showcase Git-based features (e.g. commit messages) and actions, alongside platform-specific perks, for ALL deployments.
= easy to review deployment history
That’s how we arrived at the product requirements from earlier!
But First, a Note on Git
Unlike other managed cloud services, Replit deployments are not innately synchronized to Git commits: this is a decision made to accommodate citizen developers who have little experience working with Git. In fact:
76%
of Replit deployments users have never used Git.
We needed a clever way to facilitate intuitive regression identification and deployment history with Replit-native design and engineering primitives.
DESIGN HIGHLIGHTS
Feature Development
The ideation for the following features arose as I considered how to address product requirements uniquely for Replit.
Code Comparison
To debug any regressions in production, it is helpful to reference code from various historical deployments.
Legacy Design:
For Git-based managed cloud services, clicking on any deployment instance generally leads the user to the associated Git commit. For Replit, deployment instances only have hover interactions — no click interactions, or way to view code at the time of deployment.
New Design:
After discussing with cloud services engineers, we determined it was possible to tether historical code to each deploy instance through operational transformation: Replit’s form of recording code changes.
I also made it such that a click lands the user immediately in a diff view, allowing for code comparison between that deployment and production code by default — the primary use case discovered in user testing. This would require secondary action in Git-based UX contexts.
Deployment Notes
Deployment notes enhance deployment history by offering an agnostic text field, representing any information that cannot be (easily) captured through code. It could serve as a deployment description, tag, or social thread.
Manual Mechanism:
The manual mechanism for writing a deployment note could have gone in two directions:
Force a note on each deploy or redeploy, in the same manner as Git commit messages
Add and edit notes only after the deploy flow
We decided it was not worth it to force a message on each deploy since the note field may be useful to some users, but a pain for many others who enjoy the quick turnover of simply pressing “redeploy.” Commit messages = a Git native workflow, and are not necessarily applicable to citizen developers.
AI Autogeneration:
Taking inspiration from the recently launched AI logs debugging tool, which renders actionable bug fixes on every failed deployment build — my team also took interest in using AI to autogenerate deployment summaries (can be toggled off).
Other Visual Changes to History:
Enumerated versions: v6 is less cluttered and more self-explanatory than abae8a4b (build IDs)
Profile pictures: help distinguish users in collaborative settings; Replit deployments have just become multiplayer via Replit Teams
Secrets Manager
I previously considered the rollback design itself to be the most straightforward aspect of the multifaceted cloud power ups proposal I had. My final proposal was:
Hover to reveal deployment actions (including rollback CTA)
Confirmation of rollback in-pane
Discord in the Conference Room
At the all-hands cloud services project sync, engineers argued back and forth about how we manage environment variables during rollbacks. I realized there was a critical engineering problem I had not thought about while creating my designs: what do we do about secrets?
What are Replit Secrets?
Secrets are encrypted environment variables you can store within your Repl to keep sensitive information (APIs, authentication tokens) safe. Typically, rollbacks on other managed cloud platforms will revert all environment variables given they are simply written into code files. But since Replit manages secrets separately, there was room for two arguments:
Yea
We should rollback secrets like other managed cloud services; users expect this behavior.
What if an API key in a rollback isn’t used in the production deployment? If we don’t roll back secrets, then their rollback won’t work.
Nay
We shouldn’t rollback secrets because they are managed separately in a secrets pane on Replit.
What if an API key in the rollback deployment has since expired, while that same key in production is up to date? If we do roll back secrets, then their rollback won’t work.
I left the meeting with the thought that if we just had some type of secrets diff, the way we support code comparison, we could defer the decision responsibility of choice to the user. In the secrets manager design, the user can choose which secrets from production vs. the rollback target they would like to retain.
This was the feature pitch I was most proud of in this project. Secrets management was slated to be a stretch goal, but got bumped in priority to be a milestone 1 feature as it relieves both engineering and user pains. It was very rewarding to be able to fix an engineering blocker with careful UX!
Bonus
Search, Filter
These are small things that count as a user or a team’s usage of Replit Cloud scales.
Search:
Filter:
REFLECTIONS
Thank You to Everyone at Replit!
I am really grateful to have been trusted with so much ownership over this project. It was incredible seeing my work come to life and learning from some of the strongest critical thinkers I’ve ever met.