CodeSandbox
Powering user acquisition through a unified dashboard experience
Year
2022 – 2023
Role
Product Design Lead
Platform
Web
Expertise
Visual and Interaction design, Prototyping, HTML/CSS
CodeSandbox
Powering user acquisition through a unified dashboard experience
Year
2022 – 2023
Role
Product Design Lead
Platform
Web
Expertise
Visual and Interaction design, Prototyping, HTML/CSS
CodeSandbox
Powering user acquisition through a unified dashboard experience
Year
2022 – 2023
Role
Product Design Lead
Platform
Web
Expertise
Visual and Interaction design, Prototyping, HTML/CSS
CodeSandbox
Powering user acquisition through a unified dashboard experience
Year
2022 – 2023
Role
Product Design Lead
Platform
Web
Expertise
Visual and Interaction design, Prototyping, HTML/CSS
CodeSandbox
Powering user acquisition through a unified dashboard experience
Year
2022 – 2023
Role
Product Design Lead
Platform
Web
Expertise
Concept, Visual and Interaction design, Protoyping, Pitch presentation
CodeSandbox
Powering user acquisition through a unified dashboard experience
Year
2022 – 2023
Role
Product Design Lead
Platform
Web
Expertise
Visual and Interaction design, Prototyping, HTML/CSS
CodeSandbox is a cloud-based development environment to create and collaborate on web applications without setup. In 2022, I led the design of a unified dashboard experience that merged the platform's two core product offerings, helping evolve CodeSandbox from a prototyping tool into a full development environment with Git support and local workflows while also supporting the company's shift toward monetization.
CodeSandbox is a cloud-based development environment to create and collaborate on web applications without setup. In 2022, I led the design of a unified dashboard experience that merged the platform's two core product offerings, helping evolve CodeSandbox from a prototyping tool into a full development environment with Git support and local workflows while also supporting the company's shift toward monetization.
CodeSandbox is a cloud-based development environment to create and collaborate on web applications without setup. In 2022, I led the design of a unified dashboard experience that merged the platform's two core product offerings, helping evolve CodeSandbox from a prototyping tool into a full development environment with Git support and local workflows while also supporting the company's shift toward monetization.
Context and
problem outline
Context and
Problem outline
Context and problem outline
Context and problem outline
Initially focused on providing a free prototyping tool for quick experiments and iterations, in 2022, CodeSandbox introduced CodeSandbox Projects as part of a strategic shift towards supporting the full development cycle and driving monetization.
The new product launch redefined how teams worked within the platform, introducing repositories and new paid features to support more advanced workflows.
Initially focused on providing a free prototyping tool for quick experiments and iterations, in 2022, CodeSandbox introduced CodeSandbox Projects as part of a strategic shift towards supporting the full development cycle and driving monetization.
The new product launch redefined how teams worked within the platform, introducing repositories and new paid features to support more advanced workflows.
Initially focused on providing a free prototyping tool for quick experiments and iterations, in 2022, CodeSandbox introduced CodeSandbox Projects as part of a strategic shift towards supporting the full development cycle and driving monetization.
The new product launch redefined how teams worked within the platform, introducing repositories and new paid features to support more advanced workflows.
About CodeSandbox
(2022)
About
CodeSandbox
(2022)
About
CodeSandbox (2022)
About
CodeSandbox
(2022)
+1 million
+1 million
registered users
registered users
+24 million
+24 million
sandboxes created
sandboxes created
CodeSandbox Projects: New Project flow
Despite multiple iterations and rounds of feedback, adoption and subscriptions rates remained low. Users were hesitant to migrate from V1, citing confusion around integration, content storage, and inconsistent feature sets across versions.
Despite multiple iterations and rounds of feedback, adoption and subscriptions rates remained low. Users were hesitant to migrate from V1, citing confusion around integration, content storage, and inconsistent feature sets across versions.
Despite multiple iterations and rounds of feedback, adoption and subscriptions rates remained low. Users were hesitant to migrate from V1, citing confusion around integration, content storage, and inconsistent feature sets across versions.
The disconnect between the two experiences was limiting growth, and the dashboard emerged as a natural starting point to realign business goals and user expectations.
The disconnect between the two experiences was limiting growth, and the dashboard emerged as a natural starting point to realign business goals and user expectations.
The disconnect between the two experiences was limiting growth, and the dashboard emerged as a natural starting point to realign business goals and user expectations.
CodeSandbox V1 and CSB Projects had very different goals before the unification
Process
and responsabilities
As the lead designer of the Dashboard squad, I lead the end-to-end redesign process, including:
Discovery and metrics analysis; Collaboration with Product Manager; Hypothesis creation; Prototyping; Visual and interaction design; Design system building and management; Engineer handover and support; Live validation (HTML/CSS)
Credits
Design directors
Danny Rutchie Zeh Fernandes
Brand Design lead
Marco Vincit
Product manager
Necoline Hubner
Process
and responsabilities
As the lead designer of the Dashboard squad, I lead the end-to-end redesign process, including:
Discovery and metrics analysis; Collaboration with Product Manager; Hypothesis creation; Prototyping; Visual and interaction design; Design system building and management; Engineer handover and support; Live validation (HTML/CSS)
Credits
Design directors
Danny Rutchie Zeh Fernandes
Brand Design lead
Marco Vincit
Product manager
Necoline Hubner
Process
and responsabilities
As the lead designer of the Dashboard squad, I lead the end-to-end redesign process, including:
Discovery and metrics analysis; Collaboration with Product Manager; Hypothesis creation; Prototyping; Visual and interaction design; Design system building and management; Engineer handover and support; Live validation (HTML/CSS)
Credits
Design directors
Danny Rutchie Zeh Fernandes
Brand Design lead
Marco Vincit
Product manager
Necoline Hubner
Process
and responsabilities
As the lead designer of the Dashboard squad, I lead the end-to-end redesign process, including:
Discovery and metrics analysis; Collaboration with Product Manager; Hypothesis creation; Prototyping; Visual and interaction design; Design system building and management; Engineer handover and support; Live validation (HTML/CSS)
Credits
Design directors
Danny Rutchie Zeh Fernandes
Brand Design lead
Marco Vincit
Product manager
Necoline Hubner
Process
and responsabilities
As the lead designer of the Dashboard squad, I lead the end-to-end redesign process, including:
Discovery and metrics analysis; Collaboration with Product Manager; Hypothesis creation; Prototyping; Visual and interaction design; Design system building and management; Engineer handover and support; Live validation (HTML/CSS)
Credits
Design directors
Danny Rutchie Zeh Fernandes
Brand Design lead
Marco Vincit
Product manager
Necoline Hubner
Process
and responsabilities
As the lead designer of the Dashboard squad, I lead the end-to-end redesign process, including:
Discovery and metrics analysis; Collaboration with Product Manager; Hypothesis creation; Prototyping; Visual and interaction design; Design system building and management; Engineer handover and support; Live validation (HTML/CSS)
Credits
Design directors
Danny Rutchie Zeh Fernandes
Brand Design lead
Marco Vincit
Product manager
Necoline Hubner
Unifying the
CodeSandbox experience
Unifying the CodeSandbox experience
Unifying the CodeSandbox experience
The new redesigned dashboard unified all CodeSandbox projects, allowing sandboxes to evolve into full projects without switching environments. To achieve a cohesive experience, the entire flow of browsing, creating and organizing content was reimagined.
The new redesigned dashboard unified all CodeSandbox projects, allowing sandboxes to evolve into full projects without switching environments. To achieve a cohesive experience, the entire flow of browsing, creating and organizing content was reimagined.
The new redesigned dashboard unified all CodeSandbox projects, allowing sandboxes to evolve into full projects without switching environments. To achieve a cohesive experience, the entire flow of browsing, creating and organizing content was reimagined.
Designing a
single dashboard
Designing 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
New product structure
3
The Personal team
4
Subscription touchpoints
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
New product structure
3
The Personal team
4
Subscription touchpoints
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
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.
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
New product structure
3
The Personal team
4
Subscription touchpoints
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
New product structure
3
The Personal team
4
Subscription touchpoints
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
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.
Dashboard sidebar: new vs. old
Introducing
a new design system
Introducing a new design system
Sandboxes
Folders
Repositories
Branches
Action buttons and templates
As a result, a cleaner, simpler and more functional dashboard
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.
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.
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.
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.
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.
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.
Content cards
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.
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.
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.
Results
While the dashboard redesign was rolled out gradually, it had a clear impact. Each structural and visual change played a role in the significant growth that followed.
1,200%
increase in new team creation,
as the new structure made team setup more visible and frictionless.
6x
growth in subscription trials,
driven by better onboarding flows, clearer CTAs, and more effective upsell prompts.
60-70%
avg. conversion from trial to subscription, supported by contextual reminders and simplified navigation that made value more apparent.
+13%
increase in Monthly Recurring Revenue, reflecting not just higher trial activity but improved trial-to-paid conversion and better surfacing of paid features across the experience.
© 2025. All rights reserved.
© 2025. All rights reserved.
© 2025. All rights reserved.