My Role: UI/UX Designer / Team: 2 PMs · 4 Engineers · 1 Designer / Timeline: Sep 2023 – Apr 2024
Background
The Surface IT Toolkit is a Windows application designed to support enterprise IT administrators managing Microsoft Surface devices. For many of our commercial customers, managing a fleet of devices requires having the right tools for deployment, configuration, and troubleshooting. However, those tools were often scattered across multiple locations, inconsistent in versioning, and difficult to discover or use efficiently.
When I joined the team, the existing tool had either been developed without design support or was based on developer-driven UI — a common scenario for legacy tools at Microsoft. As a result, it lacked visual consistency, clear structure, and user-centered design principles.
Despite the scale and complexity of the project, the team was committed to delivering within a tight timeline. I partnered closely with PMs from day one to begin structuring the experience and aligning on scope. Collaboration with engineers followed shortly after, as wireframes and early prototypes took shape. This phased approach allowed design to stay slightly ahead of implementation while enabling an iterative, responsive workflow.
Surface IT Toolkit
Final designs
Screenshot of UEFI Configurator final design
Challenges
- Tight delivery schedule with design and development running in parallel
- Existing UI was created by engineers — inconsistent, hard to navigate, and lacked foundational UX structure
- Limited time and resources to design and implement both light and dark modes
- The tool was built for expert IT admins, and as a non-user, I had limited domain knowledge — there was no time for full onboarding before design work began
Design Solutions
1/ Built a scalable Figma component system to reduce rework and speed up final-stage updates
2/ Implemented Figma variables to support both light and dark modes for reducing visual rework and helping engineers implement themes more efficiently
3/ Reorganized key workflows to improve clarity, reduce friction, and align with accessibility best practices
4/ Stayed flexible and open to feedback — adjusted designs quickly based on input from PMs and engineers to keep things moving smoothly
Legacy Designs
Legacy Design and flow – UEFI Configurator
Legacy Design and flow – Data Eraser
Wireframes
Wireframes – Data Eraser
Wireframes - First Run Experience
Flowchart
Customized icon set
I created a custom icon set tailored to our context, maintaining consistency with the Windows design language using Figma.
Reflection
This fast-paced redesign demanded clarity, precision, and efficiency. Being the sole designer, I focused on establishing coherence and usability quickly. The outcome: a polished, intuitive toolkit and a smoother experience for IT admins. Leadership recognized the impact. I’m grateful for a team that trusted my design judgement and delivered on the vision together.
