© 2019 by Sandy Wu

Before and After

In the short design and development cycle, several big changes were accomplished. 

Organizing apps by suggestions

The Windows 8 Store was organized by categories. It was not obvious to customers how many categories there were or how they were arranged because the ordering was based on popularity. With over twenty categories, it was tedious to pan to the end of the list.  Users were unfamiliar with pinching to zoom out in the Store so they rarely saw all of the category options in one view. 

 

The Windows 8.1 Store was organized by timely suggestions such as new releases, top paid, and trending. New tile designs accommodated more apps in view with less space. Fewer sections created a manageable list to pan.

Navigation Change Large.jpg

Panning was greatly reduced by changing the navigation from categories to suggestions.

Easy-to-find search

Field research from Windows 8 showed that users were unable to search for apps within the Store. Windows guidelines were updated in 8.1 to allow for on-canvas search.

Search On Canvas.jpg

The Windows 8 Store used the charms bar for search, which was off screen and required a swipe from the right. The Windows 8.1 Store search was placed on-canvas in the upper right.

App tile improvements

In the Windows 8 Store there were four sizes of tiles that showed the same amount of information. The grouping of apps required work from the content team to arrange the tiles in an attractive configuration.

 

In Windows 8.1, I worked towards:

  • Adding descriptions to the medium and large tiles.

  • Allowing in-app screenshots to make large tiles more informative.

  • Adding an inline purchase or install button for large tiles.

  • Reducing the number of tile templates which lightened app developer requirements.

  • Simple layouts for tiles that were data generated. No work was required from the content team.

Tiles.jpg

The Windows 8.1 Store tiles allowed for data generated layouts that were more engaging, functional, and informative.

Categories menu

Categories did not disappear from the Windows 8.1 Store, they were moved to a menu in the navigation bar. This allowed all the categories to be easily viewed in one succinct list.

The Windows 8.1 Store tiles allowed for data generated layouts that were more engaging, functional, and informative.

Responsiveness to varying screen sizes and orientations

The small number of tile templates and the straight forward list-style layouts allowed the 8.1 Store to scale responsively to varying screen sizes and orientations.

Along with accounting for portrait, landscape, and monitor resolutions up to 2560 X 1440, I also worked closely with the Core OS team to ensure that the app looked correct in the multi-tasking views known as Snap.

Scaling.png

The Windows 8.1 Store tiles allowed for data generated layouts that were more engaging, functional, and informative.

Enhanced Spotlight

Because the Spotlight was regularly updated and all the apps were vetted for quality and timeliness by the Content Publishing team, I pushed for a show-stopping "storefront window" with embedded video and full bleed imagery. Due to time constraints, the final version was a vertical slideshow.  Even this smaller change was able to create a more unique and visually pleasing section.

Spotlight explorations.jpg

The 8.1 Store spotlight went through many iterations before finalizing on a vertical slideshow.

Background pattern and movement

The Windows 8 Store had a very plain white background.  Store and Personality designers worked together on geometric patterns for the 8.1 Store background. My design featuring a layered diagonal pattern and corner flourishes to delineate sections was chosen as the final style.

 

Traditional parallax was not built in for apps in 8.1. Because adding movement was important, I suggested having two image layers for a faux parallax. I worked on a prototype to illustrate a moving layer over a static background image. This design would later be patented.

Diagonal background patterns, corner flourishes, and layered background images gave the 8.1 Store more appeal.

Standardized page patterns

The original Store category hub pages were a monotonous group of small tiles. The 8.1 category hubs were like the home page with a spotlight and a variety of tile sizes organized by suggestions.

The product description page in the older version was inconsistent with the other pages of the Store. It changed the panning direction from horizontal to vertical and was the only page to use tabs. I proposed correcting the panning orientation and eliminating the tabs. The information previously hidden in tabs was moved to sections on the page. The final page design was completed by a designer I mentored.

Category page pattern 2.jpg

Categories, like Games, got thoughtfully designed layouts with spotlight sections. The wireframes below the high fidelity comps illustrate the difference in layout.

PDP.jpg

The original product description page used vertical scrolling and tabs which was at odds with the horizontal panning of the Store. The 8.1 Store changed to a horizontal layout to keep a consistent panning direction throughout.