[Prisjakt – The Story is a series of blog posts about our experiences helping Prisjakt to write a Windows 8 Metro Style App using HTML/CSS/JavaScript. Today’s post talks about how we designed the PriceSpy/Prisjakt app and is authored by Tess Ferrandez]

Introduction

When you start designing a Windows 8 Metro app there are a few things you might want to do before you begin.

1. Think about what the main purpose of the app is and develop a few user scenarios that you can test your app against to stay focused on what the purpose of the app is.

2. Read through the Metro design principles
http://msdn.microsoft.com/library/windows/apps/hh781237/

3. Look through existing Windows 8 Metro apps to see how they solved different UX situations

There are also a few good articles that are worth a read before getting started.

Designing UX for metro apps
http://msdn.microsoft.com/en-us/library/windows/apps/hh779072.aspx

Case studies (Web->Metro and IPad->Metro)
http://msdn.microsoft.com/en-us/library/windows/apps/hh770549.aspx

In this article we will talk about how we migrated the existing PriceSpy web site to Windows 8 Metro.

The website

The main purpose of PriceSpy/Prisjakt is to allow users to search for products, compare products and find the best price and retailer for the product.

PriceSpy was first developed as a web site and has since been complemented with apps for most smartphones.

The web sites main page (as of May 2012) can be seen below:

HomePage-web

1. The logo/brand recognition

2. Search elements (main feature)

3. Product categories that you can browse through and search in

4. Popular products

5. My own product list

6. About/Options etc.

The main page of the Metro version of PriceSpy looks like this.

image 

image

PriceSpy has beautiful product images so we wanted to put them front and center along with the most important information about the products (name, price and reviews)

To look at the details for a particular product you simply click/tap on the product tile. One of the Metro guidelines is that you should navigate through content rather than for example a popup menu or similar which is pretty natural here. This is a bit more touch friendly than the original web site that was designed for mouse and keyboard.

We wanted to keep the category listing for easy category access but rather than displaying all the subcategories at once you can use the categories to drill down in a category and show the subcategories to keep the UI light and clean.

In accordance with the Metro look and feel we swipe sideways and by using the standard grid controls we got a lot of the animations and “fast and fluid behaviour” for free.

Finally we chose to leave the PriceSpy logo on all pages so that the user always knows where they are.

Search and recent appbars

Normally Metro apps should search through the search charm and PriceSpy does as well, but since search is the core functionality of the website we decided to also add it as a UI element in the app.

We implemented search and favorites in a similar way to what Internet Explorer does to make the user feel comfortable and at home. The top appbar shows all the products that the user has navigated to recently for fast access.

image

Search results

The PriceSpy website shows the search results in a list format with prices, reviews etc. and allows the user to sort and compare products

image

1. Search results listing

2. Compare and sort

 

For the Metro app you can get to the search results either by searching in the app bar or by searching through the search charm (even when the app is closed).

Here we show off the search results in a grid format, again displaying the beautiful product images, grouping the results by category (or by manufacturer if you sort by name).
image 

image

All the commands like sorting and comparing products are placed in the app bar so that it is out of the way of the actual search results.

Since there are often many results we use semantic zoom to allow the user to quickly move to a different category/manufacturer.

image

Product details

The product details page posed a bit of a challenge because of the sheer volume of information available about the product with everything from images to product details, reviews, resellers etc.

image

1. Up to 8 product images

2. Product details

3. Reseller list with links to reseller websites

 

At first we had created a design where we used a lot of side swiping with all the different detail sections laid out side by side. We liked having all the information available at once but the problem it posed was that a section (for example the resellers section) could have a large number of items and thus we would be scrolling both sideways and up and down which is not desirable.

We finally settled on a tabular design with two columns, one where we have a flip view of the images and one with all the details. We also put the images of the price statistics and popularity diagrams along with the other images in the flip view in order to reduce the number of tabs.

In larger resolutions we separate out the product properties tab into a separate column and also show thumbnails of the images in the flip view.

image

image

Using this layout it was very easy to adapt to portrait mode by exchanging the columns for rows in a grid.

image

In snap view for the product details page we only list the resellers section and this works extremely well since clicking on a reseller takes you to the reseller web site so we could work in symbiosis with IE in filled view.

image

Conclusion

Design turned out to be the one single thing that took the longest time and the most effort to work out in the application. We started off with a very different UX design at first and went through a few iterations before we ended up with this one. Our biggest learnings from working with this are:

1. Think about what the app is really about

2. Walk through lots of different user scenarios

3. Keep it clean and simple, remove everything that is just chrome or extras

4. Think about different resolutions and orientations in advance

5. UX Design should come first, not last.