UX Designer at YouTube
Windows 8.1 Store
Redesigning the Windows 8 Store
Overview
The Windows Store was used to download apps for Windows 8 tablets and desktops. Windows 8.1 brought the first major redesign to the Store since its initial release.
On the Store team I was responsible for driving the key changes to the shopping experience. I led improvements to the information architecture, tile designs, page patterns and responsiveness to different screen sizes, orientations and snap feature. Visual improvements came from successful collaborations between the Windows Personality team and Store designers.
Role
Senior UX Designer
Responsibilities
Information architecture
Interaction
UX and visual design
Company
Problem
Data from field research on the Windows 8 App Store showed that people had difficulty finding apps and responded poorly to the flat design.
-
Organizing apps by categories was confusing and required tedious amounts of panning.
-
The sterile white background and simple app tiles were considered bland.
-
Search, which adhered to official Windows 8 guidelines, was off screen and hidden.
Solution
Restructure
With thousands of apps to choose from, the Store needed to help people find relevant apps quickly.
-
Organize apps by suggestions instead of categories
-
Put search on canvas
-
Update app tiles with descriptions
-
Show the category options in a viewable list
-
Responsive scaling
Improve Visual Design
The Store needed to look thoughtfully designed and alive with activity so people would want to return to shop frequently.
-
Make the front landing page, called the Spotlight, delightful with curated, frequently updated content and movement.
-
Add color and shape to the background
-
Break app tiles out of simple rectangles
-
Create consistent page patterns throughout
Challenges
Buy-in across multiple teams
Restructuring the store and making changes to the Windows design guidelines would require approval from the Core OS team, Personality team, and Store team. Changes to Windows guidelines would affect a large ecosystem.
Short design and development time
Windows 8.1 was released one year after Windows 8.
Discovery and Planning
To begin, I reviewed and inventoried the existing Store before working with researchers to evaluate Windows 8 study results and usage data. This allowed me to identify areas of inconsistencies and user frustration. I then put together several shopper personas, goals, and simple wireframes for a proposal on new navigation, hub style layouts, changes to spotlight, on-canvas search and categories.
These early wireframes were presented to the Core OS and Store teams. New navigation, hub style layouts, changes to spotlight, on-canvas search and categories were all proposed.
Buy-in
The Store researcher and I worked together to successfully influence the Core OS team to modify guidelines for on-canvas search. This change affected all the Windows apps. It was important to be respectful of the long-term design vision, while advocating for the best user experience within the Store.
Though getting search on canvas was successful, moving categories to the canvas was not. Despite citing data from Windows 8 and Store usability studies, it was decided that the guideline to use the Navigation bar without affordance took precedence. The navigation bar was not visible and required a swipe down on tablets. In a large ecosystem like Windows it was necessary to have a unified story across the OS even if it meant a lesser experience in one area.
These later wireframes incorporated the categories in the navigation bar which adhered to Windows 8 guidelines.
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.
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.
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.
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.
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.
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 three layers for a faux parallax. I worked on a prototype to illustrate the layers: a static background, a scrollable image, and a static top layer of controls. 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.
Categories, like Games, got thoughtfully designed layouts with spotlight sections. The wireframes below the high fidelity comps illustrate the difference in layout.
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.
Results
Meet the new and vastly improved Windows Store...
Windows 8.1. brings a redesigned and much improved Windows Store that should make it easier for users to find applications.
Ars Technica
The original Windows Store was something of a mess — poorly curated, badly designed, and overly flat, with far too much data crammed into rows and columns with little other context. The Windows 8.1 Store, in contrast, is something altogether different and significantly better.
Extremetech
A huge improvement over the version in Windows 8.
PC World
Impact in Numbers
After the Windows 8.1 release, daily downloads almost tripled from 1.4 million to 4 million.
1.4 M
October 2013 daily downloads
Windows 8
4 M
Early 2014 daily downloads
Windows 8.1