Workflow01
Overhauling document management
Reworked tabs, open editors, and file affordances so multi-file work felt legible instead of noisy.
Portfolio
Visual Studio Code
Growth Through Product UX
Making VS Code feel inevitable.
At Microsoft, I worked on product and growth UX during a key stretch of adoption. The work ranged from document management and customization to website clarity, conversion, and accessibility.
Company
Microsoft
Focus
Product UX, growth, accessibility
Stage
Early scale-up to mass adoption
Why it mattered
Developer tools earn trust through thousands of tiny moments. The design challenge was to make power feel approachable without flattening what experts needed.
Chapter Map
Three product stories behind the growth curve
The strongest work was not one launch. It was a set of connected decisions that made the editor easier to understand, easier to tune, and easier to choose.
Platform02
Enabling customization and extensibility
Created room for theming, settings, and extensions to feel native to the editor rather than layered on top.
Growth03
Optimizing conversion and accessibility
Improved the website and product story so more developers could understand, trust, and adopt VS Code.
01
Workflow
Overhauling document management
Developers live in many files at once. The challenge was to make tabs, open editors, naming, and file state feel immediately legible without making the editor noisy.
What the product was telling us
- UserVoice and GitHub threads kept clustering around tabs, file state, and clutter.
- Power users needed stronger context for many-open-file workflows without sacrificing speed.
- The product needed a clearer bridge between first impression and daily habit.
Motion study
Information structure
Power user
Learns by doing
I want the editor to stay out of my way, but I still need strong affordances when I am moving quickly through a lot of files.
New adopter
Needs confidence early
If the structure is unclear or a control is too hidden, I lose confidence fast and start wondering whether the tool is for me.
02
Platform
Enabling customization and extensibility
VS Code becomes valuable when it starts feeling personal. The design work had to make settings, theming, and extensions discoverable while keeping the shell calm and coherent.
Constraints
- Preserve VS Code's speed and lightweight feel.
- Support beginners without slowing down experts.
- Fit new controls into a compact, information-dense shell.
- Keep extensibility obvious without making the interface noisy.
Design themes
- Stronger affordances for navigation and discovery.
- Customization patterns that felt system-level, not ad hoc.
- Extension touchpoints that expressed capability clearly.
03
Growth
Optimizing conversion and accessibility
The editor also needed a stronger front door. That meant making the website clearer, the value proposition sharper, and the path from curiosity to download more trustworthy and inclusive.
Focus areas
- Clarify what VS Code offers at a glance.
- Reduce friction between landing on the site and trying the product.
- Improve accessibility and legibility across high-traffic surfaces.
- Make growth work feel like product quality, not marketing garnish.
Product story
