CodeSandbox · 2022 - 2023

A single dashboard as part of a unified CodeSandbox experience

About CodeSandbox (2022)

+1 million registered users
+24 million sandboxes
Codesandbox is a cloud-based code editor that allows developers to create, edit and collaborate on web applications in a browser-based environment with virtually no setup/configuration time. 

In early 2022, Codesandbox initiated an strategic movement to set the tone of a new CodeSandbox – bold, sharp and action-driven. By March, a new identity had been rolled out and a new product had been introduced with the goal of repositioning the company's product offering as an option for the full development cycle.

Dashboard UI and Prototype by me. Editor UI by ZehFernandes.

New strategy,
new product

The launch of CodeSandbox Projects redefined what working in teams meant for CodeSandbox. It reintroduced the concept of repositories and new Pro features were included.
However, after months of iterations and feedback rounds, users were not actively migrating from V1 and we were missing a massive opportunity of user acquisition.
Confusion and concerns about the integration, storage and migration of content and the disparity of features between both versions were cited as causes for hesitation.

The solution

Unifying the
CodeSandbox experience

Integrating the new possibilities of CSB Projects into the original experience meant that all features and content would be located and managed in a single place. Sandboxes could quickly evolve into complex projects and the user would not have to switch environments.
To achieve this single cohesive product, it was necessary to redesign the experience of browsing, creating and organizing content.
Dash-V1-Green
Dash-v2-Purple

CodeSandbox and CSB Projects dashboards had very different goals before the unification.

Desigining a single dashboard

1. Updating V1

Technically it was easier to migrate the new V2 features into the original CodeSandbox dashboard. Labels, icons, colors and typography were reviewed to match the brand’s new identity and positioning.

2. A new product structure

Sandboxes and repositories should live together but their organization should reflect their differences. It was important that the user was reintroduced to the concept of the Repository as a new building block of CodeSandbox.

3. The Personal team

Every new user starts with a one-person team, formerly listed as their username. This team was rebranded as Personal, as there are some unique features available to each team type.

4. Subscription touchpoints

All Free teams received a Free tag to reflect they were on a limited tier of features. More impactful touchpoints and a new page for subscription accompanied this change. 
sidebar-new sidebarold0

Introducing
a new design system

Sandboxes

1
Sandbox
Sandbox4

New

SDX-Mesh2
SDX-Vanilla
SDX-Dots2

Folders

Folder-React3
Folder-Java
1

New

Folder-react-NEW-2
Folder-Java-New
SDX-Mesh2

Repositories

sanpack
Old-Repo-static
Synced-old

New

Repo-sandpack
Repo-static
Synced-new

Branches

branch-master
featuresidebar
Contrbution-branch

New

new-branch-master
new-branch-feature
new-branch-contr

Action buttons and templates

New
Import-repo-OLD
React-Template-OLD-outline

New

New-from-template
Import-from-Git
Template

As a result, a cleaner, simpler and more functional dashboard

Sandbox-New Sandbox-OLD
Repo-New4 Repo-OLD
Branches-NEW4 Branches-OLD-1

Listing all branches

To facilitate navigating through many branches, a new and improved layout was designed. Shortcuts to create new branches and quick access were pinned at the top. All branches were displayed in a list format to facilitate browsing and new search and filtering options were added.
Branches-NEW-List Branches-Full

The first steps
toward action

Data showed that many users signed up but didn't create a habit of using the product. To improve the user's initial experience, the dashboard's empty states were redesigned to deliver informative content through the newly introduced content cards.
Open-Source
Content-1
Content
VSCode
All-repos-EMPTY
My-contribution-EMPTY

The Recent page

To increase user engagement, the 'Home' page was rebranded as 'Recent', where the latest sandboxes and repositories where shown together, action buttons were highlighted and new offers were introduced to facilitate action.
Recent-NEW Dash-V1-1
View