For Windows 10, with the introduction of Universal apps, we redesigned a fully responsive Store to work on multiple platforms and scale from a large desktop monitor to the smallest phone.
Windows 10 Store
Every element within the Store has variables depending on the screen size or the platform type, so it's easy to read in whichever device you use. Item sizing, margins and spacing will also adapt as you shrink your screen.
App scaling and responsiveness
After the scaling strategy we created for the Store, I created a system that could span across all 1st-party apps in Windows. I noticed that every app had different breaking points, different margins, and different reflows - this system would align all apps without any consequences to each app's content.
Scaling Alignment Diagram
The Store information architecture is composed of Hubs or Landing pages for Home and each content type; Galleries, which could be editorial, personalized or algorithmic; and Product Details Page. There were secondary paged for Search results, Settings, and Downloads.
Information Architecture Diagram
To simplify and align design to dev processes, we created a modular system. We had detailed spec for every item type and its behavior depending if it was shown in a module, a list, or a gallery.
Landing Page
Gallery and Filters
Product Details Page
