Overview
This prototype began as a personal initiative to streamline internal design reviews. I rebuilt outdated Photoshop files into dynamic, component-based systems in Figma and XD. These files allowed real-time copy and layout updates across devices, reducing the need for redundant, manual changes. I created flexible content card components, responsive text styles, and pixel-accurate layouts to match and improve the original PSDs.
Component-based UX Build
Rebuilt static PSD comps in Figma/XD with dynamic layout elements.
Prototype Optimization
Enabled internal and client-facing comps with interactive previews.
Internal Initiative
Voluntarily created scalable tools to improve design consistency and client reviews.
Click to inspect the figma file to see the structure and logic that went into the design.
To skip directly to the high-fidelity prototype, click this one.
Case Study
Background
This wasn’t an assigned project—it was a fix-it-before-it-breaks effort I built alongside my actual responsibilities. Microsoft’s homepage review process relied on outdated Photoshop files that didn’t scale across devices or allow for quick content/layout swaps. I rebuilt those static comps into a into a responsive, component-based desktop prototype in Figma (and Adobe XD, originally) to make internal reviews faster and less prone to last-minute fire drills.
What I Made
-
A full component library: cards, buttons, badges, banners, and responsive type styles
-
A wireframe with scrollable layouts (top/middle/bottom) in both toggle and full-page formats
-
A high-fidelity mockup with playful banners and content variations, just to prove it could look good and still follow the system
-
Responsive layout logic that mimicked the real site behavior—without all the fragile, break-prone pieces
What Worked
-
Everything was faster. Stakeholders could view content across devices without swapping between 5 separate PSDs.
-
Copy tweaks were instant. No re-exporting layers, no slicing banners, no emailing six versions of the same file.
-
It actually looked and felt like the real site, with better internal consistency.
What Didn't
-
It didn’t get adopted. (I wasn’t asked to build it in the first place, so not a huge surprise.)
-
Most teams were too deep in their existing process to switch tools mid-stream—even if the new one was cleaner.
-
I made it a little too smart. The flexibility required more setup than people were used to. (Not a flaw, just... too early.)
Why It's Here
This prototype focuses on the desktop viewport, which carried most of the layout complexity and content volume. Mobile/tablet builds weren’t necessary to demonstrate the system’s logic—or its flaws. It’s a solid example of how I approach messy systems: take the parts that almost work, rebuild them to scale, and make them easier to use by actual humans. It also shows that I can translate marketing visuals into modular design logic without flattening everything into a boring grid.
Also, yes—some of the content cards and banners have robots and weird copy. That's on purpose. The framework is solid; the personality is just a bonus.