Microsoft. Speaking the native Fluent in a product redesign.
Services
Information Architecture
UX Design
UI Design
Design System
Concept Design
Deliverables
Custom Icon Set
Internal concept
Engagement
Microsoft Web is an internal design concept applying Fluent Design across Microsoft's product lines.
We designed it as an internal concept applying Fluent Design principles across homepage, shop, Windows, Surface, Xbox, Office 365, and HoloLens presentation flows. A legacy commerce-style environment needed to work within Microsoft's design language and high-recognition UI patterns – and the concept demonstrates that coherence across product lines. Microsoft was not contracted.
Responsive Homepage Across Microsoft's Product Line
Homepage concept spanning Surface, Xbox, Windows, Office, Skype, Azure, and HoloLens. The same card layout and copy carry over unchanged on mobile, confirmed across three breakpoints.
Store Structure for Devices, Xbox, and VR
Five top-level tabs branch into dedicated shop layouts — Xbox nests its own console/accessory/game-catalog structure, Devices nests a Mixed Reality/HoloLens aisle. Mobile mirrors this hierarchy
Audience-Segmented Structure for Windows 10
One scrolling page branches into distinct audience sections — Overview, Business, Education, and Gaming. On mobile, that same order collapses into a single dropdown navigation, mirroring the Store hierarchy.
Comparison Page for the Surface Family
Landing page for Microsoft's Surface line and accessories under one sub-nav. Compare Models and Video Presentation links sit above a device lineup shot.
Surface Studio Product Detail Page
Product page for the Surface Studio desktop, framed within a Product Rebuild & Redesign concept that applies Fluent Design to a legacy commerce shop. A PixelSense resolution claim sits inside a scrolling carousel.
Surface Pro Specs and Modes Page
A device-mode block leads into a press-quote carousel, then the same customer-story-to-accessories funnel as Surface Studio, closing on shared footer links. Mobile drops the customer-story step, keeping the rest of the order intact.
Console Page Structure for Xbox One X
Console product page for Xbox One X, built for gamers scrolling through hardware claims. The hero and power-stat proof repeat mid-page as a second buy banner, before accessories and community sections close the page.
Office 365 App Suite Overview Page
Product page for Office 365, covering home, education, and business users across eight core apps. Icon row, live preview, and device callouts share the same Design System as the rest of the concept.
HoloLens Mixed Reality Product Page
Microsoft HoloLens closes out the concept for developers and enterprise buyers exploring mixed reality. Case-study photos appear once as full stories, then resurface as recap thumbnails before the same footer template closes the page.
If your enterprise product portfolio needs one coherent web experience inside an established design language, this concept shows the method. Reach out with your product lines.
Ready to start your own project?
