Creating Metro style apps that stand out from the crowd

When you submit your app into the Store, there will no doubt be other apps in your category that will compete for people’s attention. Being able to crisply showcase the differentiation points in your offerings and staying focused on delivering the core scenarios that you are best at are crucial to a successful Metro style app that will stand out from the crowd.

Windows 8 provides a set of design patterns, common controls, and built-in platform functionalities such as contracts that can help you focus on what you are best at. For example, just to name a few: the app bar is a common control that helps people focus on your content and minimize distractions; the touch pattern prescribes a set of gestures that are used consistently in platform controls, such as swiping from the edge to bring up the app bar, so that people can focus on confidently use your app without having to learn new interfaces; the Share contract is the glue that lets two apps work together so that users can accomplish more with your content.

This post is a little different from some of the other posts – rather than talking about coding patterns, we talk about design patterns that you can use in your planning process. I introduce an example app, Food with friends, and start by answering the question that is key to standing out from the crowd: “What is my app best at in its category?”. Then I illustrate some practical steps to designing the app’s structure and layout to highlight the core scenarios and differentiation points that it is best at. This is the first in a series of occasional posts that will come over the next few months. The later posts will continue to use this app as an example and walk through ways that you can take advantage of these various aspects of the Windows 8 platform to create experiences that feel immersive, crafted, fast, and fluid.

Let’s get started!

Example: Food with friends

Say we are building an app that helps people find restaurants. Let’s look at the design process for this app.

1. Identifying the differentiation points

We will start by identifying a focus that will allow to differentiate ourselves from other competitors in the restaurant and dining category:

My app is the best in its category at helping users and their friends find a restaurant to eat at tonight.

The unique point of view of this app is on helping users and their friends and dining tonight. This app will revolve around getting friends to agree on a place to eat, and will focus on bubbling up friends’ preferences so a user can take them into account when making decisions. This emphasis makes our app stand out from other generic apps in the same category that may simply be providing local restaurant listings.

This “best-at” statement describes the reasons why user will want to buy this app and not a competitor’s in the same category. We will be referring back to it many times as we make design trade-offs and decide on which feature set and platform functionalities to use.

Given this, let’s call this app Food with friends.

2. Picking the right scenarios

Next, let’s identify the core scenarios our app will focus on based on our best-at statement. In the process of brainstorming and selecting scenarios, there may be a great number of interesting ones that we could support (such as seeing nutritional value of dishes). But to actually deliver the unique, differentiated, best-in-class experience that our best-at statement promises, we must say no to them if they don’t tie back to our vision. Based on that, here are the core scenarios that this app will be great at:

  • Find restaurants that I want to eat at
  • Find restaurants that my friends want to eat at
  • Make dinner plans for tonight with friends

We want to start by thinking about scenarios that describe why people want to use the app, before we start thinking about features, which are how they will achieve those goals. Each of our scenarios will encompass a number of features. When we know what the core scenarios are, we can then think about features that will enable those scenarios. We will get to more details on feature selection and design in the next post, but here are some examples of possible features:

  • Find restaurants that I want to eat at:
    • Browse restaurants on a map or in a list
    • Search by name or keyword
    • Filter/Sort by category, price and rating
    • Add/remove restaurants to/from wishlist

3. Creating the landing experience

The landing page is the key to any Metro style app. It is your chance to tell your user what your app is best at. When users open your app you want them to immediately understand what your app’s core scenarios are and how they deliver unique values. A good landing page motivates users to open the app by always providing new and up to date content, and convinces them to stick around and spend more time in the app. It is like a hub, the center of interest and shows the best of the app.

Designing a great hub is about creating a layout that optimizes for bringing content and functionality to people in an easy to explore way. Typical navigation in apps or on the web involves showing a default section of an app, and then relies on users choosing to go to a new section from a navigation bar or table of contents. The trouble with this pattern is that it doesn’t encourage exploration. In order for people to decide to click a tab and navigate to a new section, they need to believe that there is something in there that would be interesting or useful to them. If there are no interesting sections, they’ll switch to another app. For example, this newsreader app uses a tab-based design where people land in a single section, but then have to consciously make a decision to navigate to other sections of the app just based on the name. You cannot tell if any of those 4 other sections are interesting until you switch to it:

Tab-based landing page design

Instead, convert this to a hub and simply add panning, which requires no hard decision from users at all, and they will see why the content or functionality of the app is interesting to them.

Hub-based landing page design

By laying out the app so it’s easy to explore, we show users why they should stick around. We show them the full breadth of what our app is best at.

So with that in mind, let’s start with a basic hub layout using the Visual Studio Grid project template (XAML, HTML). Its landing page (the groupedItemsPage) has a number of sections and selected items from each one:

Visual studio Grid project template’s landing page

We want this page to really represent the best-at statement of: My app is the best in its category at helping users and their friends find a restaurant to eat at tonight. The first step is to make each section of our hub represent one of our three core scenarios. Each core scenario must be represented (though there could be multiple sections that tie back to a scenario):

1. Tonight

Focuses on making dinner plans for tonight with friends

2. Friends’ wishlists

Focuses on finding restaurants that my friends want to eat at

3. My wishlist

Focuses on finding restaurants that I want to eat at

4. All Restaurants

Also focuses on finding restaurants that I want to eat at

Hub with sections for Tonight, Friends’ wishlist, My wishlist, All restaurant

The order of the sections is strategic. The reason tonight is first is because it is the most relevant section to what is going on right now and so it is likely to change every time you open the app. Info about tonight is also a great candidate for live tile content because it’s fresh, personal and relevant. This lineup means that if people see what is happening tonight on the app’s live tile on the Start screen, they can open the app and see the content they just saw on the live tile right on the hub page. Your app should reward users for opening the app with info that’s new and most important to them. For more on live tiles take a look at Kevin Michael Woley’s Creating a great tile experience post.

Next we put Friends’ wishlists, and then My wishlist – these are in that order for two reasons:

  • The focus of Food with friends is on my friends – that’s the differentiator, and is what Food with friends does that nobody else does in quite the same way.
  • Like the Tonight section, others will update their wishlists while a user is away from the app and so it can change often. It contains info user doesn’t know, while they are more familiar with their own wishlists and so it is less critical to explore it.

We put All restaurants at the end. We expect users to go to this section only when they want to manage their wishlist, but according to our best at statement, most of the time users will be making decisions about where to go tonight which means most of the time they will be looking at the wishlists that are already there and at the suggestions for tonight. Having it at the end also provides a nice benefit that the section can expand as long as you like, without pushing off other content. You may be concerned that All restaurants is so far over, but don’t be. Quickly jumping through a list is what Semantic Zoom is for.

4. Designing the sections

A key to designing a section to optimize it for its corresponding scenario. It doesn’t need to be a uniform grid of tiles across the whole hub! This is where we can get creative, demonstrate how our app is different from others and bring forward what our app is best at. We also don’t have to show all items in a given section on the landing page because that may be overwhelming. Instead we may want to only bubble up a curated set of items that are the most relevant and up-to-date. For example, we show only the top friends under Friends’ wishlist, and the most recently added restaurants under My Wishlist.

For this app, the first section, Tonight, is all about deciding with your friends where to eat tonight. Because this requires collaboration between your friends and you, this is best as a discussion:


My friend’s wishlist is all about my friends and what they want, so in that section, let’s really make it about the people!

foodwfriends landing

For my wishlist, it’s about the restaurants that I’m most interested in going to, so we bring the restaurant forward:

Landing page with My wishlist section filled in with my restaurant list

And lastly, All restaurants is about navigating the giant collection of restaurants that is out there, so let’s present some of the most popular ones that users might be interested in, and then present categories for easy browsing. With all these parts in place, you can now see how the app’s hub landing page now looks:

Landing page with All restaurants section filled in with restaurant list

A crucial part to delivering a differentiated experience is expressing your product’s brand. This is a topic that deserves its own post, so stay tuned for a deeper dive into layout and visual design tips and techniques that will help your brand’s personality shine through while still maintaining a look and feel consistent with the platform it is created for. For now, let’s take a look at a simple example:

Food with friends landing experience with branded colors and background image

5. Laying out the rest of your app

Now that we have our landing page, it is really easy to lay out the rest of the app.

We know that not all of the sections in the hub were exhaustive, so we need pages entirely dedicated to showing the full set of content for each section. The groupDetailPage in the Visual Studio Grid template is designed for this purpose. We tailor the layout of the ListView on that page to best suit the content type.

My friend’s wishlist:

Friend’s wishlist page with full list of friends and their favorite restaurants

My wishlist:

My wishlist page with my full list of favorite restaurants

All restaurants:

Full list of all restaurants grouped by featured and cuisine type

We also know that there are two core entities reflected on the hub: restaurants and people. That means we need two variants of the item detail page (itemDetailPage in the Grid project template) where users can see info on an item when they tap/click it:

A friend’s page with her profile information, her wish list, and her reviews

A restaurant’s page with its hours, location, contact information, photos and reviews from other users

When designing each page, it is just as critical to continue to think about what each page is trying to be best at, and how it contributes to helping your app deliver on its “best at” statement.

6. Navigating the UI

Now that we have the various pages, all we need to do is provide the user a way to move between them. Navigating the UI is quite unlikely the thing that any app is designed to be best at. We can apply existing navigation patterns that users already know so they can quickly get to our app’s content and functionality. In this example, we use the Grid project template, which follows the hierarchical system pattern. For example, tapping a tile takes you to the item’s detail page. Tapping a section header in the hub takes you to that section. Tapping back takes you to where you just came from (not up). Much of this is built into the Grid project template. In a future post, we will go into more depth on the implementation and tips for building more advanced in-app navigation.

A screen shot showing the hierarchy of the app's content


Figuring out what you are best in its category at is the first and most important step to creating great Metro style app that will stand out from the crowd. As we have seen, identifying and focusing on the differentiation points influences many foundational decisions that you will make around your content structure, landing experience, page layout, and navigation. In future posts, we will continue to build on this and show how you can use the Windows 8 platform to make your app the best in its category. To review some of the resources that are mentioned in this post, take a look at the content on

-- Bonny Lau, Senior Program Manager, Windows

Comments (21)
  1. Wouter de Kort says:

    Great post! Currently in the process of designing an App for our company and this gave me some great ideas!

  2. Ranbeer M says:

    Excellent post… waiting for next set of posts…

  3. Very cool post. Inspiring. Can't wait to be able to submit our own Metro applications, without registration code.

  4. Red77Star says:

    And how this helps productivity on desktop? It looks like Windows 8 is just consumer product where Windows 7 is both. Again this all makes sense on Phone and Tablets. As Desktop user i will start IE and type the full web address and get full experience of what i am looking for. Again Windows 8 will work on Phones and Tablets but those devices are not PCs. Industry badly needs to introduce a new term called PM -> Personal Mobile which emerged in recent years. However PC will continue to grow with its own pace and has nothing to do with PM devices. Looks like MS is obsessed with Apple and instead of trying to play own game they decided to chase Apple, unreal.

  5. lkajdlkasf says:


    Why cant you use the app on Desktop? Do you feel too good? Website are not everything. They are complicated and can be navigated much easier with a real app.

    And you should realize that the traditional desktop will disappear. We will carry our desktop's in the future with us.

  6. Red77Star says:


    This is Metro App, not a desktop app. I cannot use on desktop because:

    1. I already have an alternative in form of web application or real win32 desktop apps i get full experience with.

    2. Metro App makes my 27" screen look like 10", clearly designed for Tablets and Phones.

    3. Multitasking doesn't exist with Metro Apps, Metro Screen in general. Clearly MS thinks people use one app at the time, how mistaken.

    4. Metro Screen gets between where i am and where i want to be simply breaks work flow.

    5. Metro Screen brings duplication to desktop. It works for Phone because there is no other way to communicate with user.

    6. It brings small device limitations to Desktop PC, basically Windows 8 is much less than Windows 7 for Desktop, Laptop, Notebook users.

    7. UI solutions in Windows 8 are made for phones and tablets and when you apply such thing to Desktop PC you get 'freak show'. Why do we need lock screen on 25" LCD screen connected to Desktop PC which requires from me to do such unnatural mouse movement so i can finally type the password in and login. It is absolute none sense. I am developer for 25 years worked on Mainframe and currently .NET developer and i have never seen such usability failure. It goes against all book of how to design things propertly.

    8. How bad thing is i will give you example:

    With Windows 8 MS decided to remove gadgets from Desktop because gadgets are being replaced by Live Tiles in Metro Screen.

    I use couple gadgets on my Windows 7 machine and one of them is Weather. Are you telling me that i should switch my focus to completely different 'mind set' to look at weather metro app where i could simply peak at weather gadget on Desktop (Windows 7). It is absolutely horribly designed.

    Just in order to sell couple tablets and phones MS will sacrifice whole Windows ECO System, namely piss of millions of Desktop and Laptop users. Quite a big risk they are taking. They need to understand that PC and PM (Personal Mobile) devices are not same, i wonder where they found = sign between them. Same user experience they want to have across all platforms doesn't make things better infact Windows 8 will be not good enough OS for any device.

    9. Someone will say fine don't use Metro Apps at all and be on Desktop all the time. I agree but the problem is that MS doesn't give me ability to use computer as i want as they claim to be the case meaning i want Desktop to be default screen after i login and i want to be able to disable Metro Screen and get back Start Menu which is perfect solution for Desktops. Why? I don't want my focus while i monitor performance graph in HP Load Runner to be switched to this odd flat boring looking screen just because i hit start button on keyboard to quickly search/launch some application.

    10. Honestly i want MS to succeed but i have to be honest. Windows 8 -> is going to flop.

  7. Red77Star says:


    You don't carry desktop but tablet or phone and in those devices you cannot do many things you can do on desktop. Desktop won't go away because people have to be productive. Infact touch as gesture has no future but virtual reality which is quite different thing.

  8. job says:

    Exploration? Personally, I don't like this….lots of wasted screen real estate…lack of density of information. Why should a user keep panning to the right…constantly in discovery mode? If there are 5 tabs, I have to keep panning right until I arrive at the right tab. I would prefer all the tabs to be visible and just tap on the appropiate tab. Why is MS trying to change a UI paradigm that has work perfectly for users, both on a tiocuh screen and on a desktop for this metro foolery with its HUGE title text and cut off text…? All this scrolling sideways to the right is too awarkward…you should be scrolling up down..

  9. job says:

    Microsfot needs to fix the transition between apps or when opening the apps from the desktop.  Apps should smoothly glide in like iOS or Android instead of the silly flip.

  10. floopydoodle says:

    I wish they would have used the pivot and snapping panorama UI that Windows Phone uses. The free gliding panorama can be annoying at times, because it doesn't snap to new content when scrolling like WP7 does. I think people will experience major scroll fatigue after using Windows 8.

  11. Red77Star says:


    I agree. The thing is that Metro Screen is coming from limited device called Phone and then MS is trying to apply that to other devices including Desktop. Completely out of mind. Of course we cannot flip 30" LCD screen around like phone so we drag some content from left to right and some up and down. They just didn't think through well when they decided to proceed with Windows 8.

  12. It is quite funny that with CP and RP release Desktop UI and Metro Screen UI (Metro App UI) have nothing in common infact looks like someone slapped two OS into one. It really makes eye commit suicide when you snap Metro App to Desktop which btw is useless given amount of screen it takes. From the latest Windows 8 leaked screenshots looks like MS realized it and they decided to do something about what was wrong design to start with. Let's kill Aero Glass and make Desktop flat boring looking as much as we need to match Metro Screen down to the level where Windows 3.11 UI wise looks better. It is quite irony that Metro screen is very alike to AOL application written back in 1996 which we know failed. See the problem is that MS wants us to think about Desktop is just another application which sits under Metro 'Eco' system which is not true. Win32 is older than WinRT and infact combining those two under same umbrella is beyond comedy.  I am not bashing Metro on Windows Phone and future Tablets because it represents decent solution for those devices and that is just fine. I own WP7 and Metro works ok there because it is only way of communication between device and end user. When you cross the line where you start mixing Apples and Oranges the things are getting bad. That's exactly what's happening with Windows 8 on Servers, Notebooks, Laptops and Desktops. Touch screen is not something which will get into peoples household at all. It doesn't require rocket science to understand that as screen gets bigger keyboard and mouse becomes ultimate choice of interacting with computer. Imagine someone asks you to use mouse and keyboard on phone with the size of screen of few inches. Quite laughable. The only reason people bought into Apple iPhone, iPad 'Something MS didn't understand it' is that those people were looking for something which will give them quick access to very basic information and notifications they need to obtain but not to replace their desktops and laptops at home which they still use for productivity, entertainment and all the things PM devices cannot properly do meaning Phone is not and will never be Desktop and Desktop is not and never will be Phone or Tablet therefore they do not require to have same user experience but their own UI which fits them the best.

  13. brian says:

    Nice article as far as it goes –  trouble is, apps are becoming so passé.

    Oh for a real good app that is genuinely ground breaking and actually useful!

    Now an article about how to create that – now that would really be something……

  14. Great Article.  It really helps clarifying the importance of thinking in new ways.  Helps me see how to think from the user's point of view which will help me write the apps that succeed.  Thanks for taking the time to make this a great post

  15. phil says:

    How you make different sized groups in one listview? Is there source code available for this sample?

  16. Jill says:

    This is a most instructive article. Let me illustrate it with a short parable.

    When I go to the supermarket, I discover the items I want to buy in one of several possible ways:

    – If I have time, I stroll thru the alleys, look at the products, encounter possibly some friends that tell me “you should try this or that”. On occasion, after comparing different offers, I walk back to choose the item I finally want.

    – If I have less time or when I am getting bored of walking around, I look at the giant boards that hang at the top of gondola for each alley and use them as a shortcut to access more rapidly those items that I really need for cooking. My guests are arriving in half an hour and I must be productive. In my supermarket, those boards are displayed in the main alley in such a way that I can discover the write-up without my vision being cluttered with other information.

    – And if I have no time at all, I call upon the clerk to help me find the precise item I need.  Usually I ring for the clerk whilst standing at the alley where the head of gondola board informs me about the kind of item I am looking for: this optimizes my chance to access the item in a pertinent manner.

    Kind regards, Jill

  17. michele says:

    "Scrolling apps" are the first ones that i uninstall.

    The first thing that i look for an app is all the functions that it has; if i have to scroll to discover -> garbage.

  18. rtpHarry says:

    Your screenshot for the restaurant profile has a typo in the restaurants web address 🙂

  19. @Phil

    There is not source code available for this example. However we do have some other samples on the Dev Center and the forums which show how to make items different sizes in different groups.

    For HTML you can find an example in Scenario #4 of the LIstView item templates sample:…/ListView-item-templates-7d74826f

    For XAML we have a sample posted in the forums here:…/966aa897-1413-46f0-bef7-663de36f9423

  20. Excellent Article.

    I have a question about how to achieve the main Hub page in this article.  

    You show in one of the screenshots that this is a customised version of the groupedItemsPage, however, I'm wondering if you can elaborate (or know of any tutorials/docs) on how you get the different layouts for each of the groups in the groupedItemsPage.  

    For example, there is the Tonight Section which has it's unique style, then the "Friends Wishlist" which looks like a horizontal listview of some sort, then the MyWishlist which is a GridView, etc.

    Is there some particular controls, or Templating elements I should be looking at to achieve this effect… or are these distinct controls in a a scrollable horizontal stackpanel.

    Thanks again for the aricle, was excellent

  21. Sam says:

    How to Metro apps differ from websites?  All they do is organize and present information.  I have yet to see a Metro app that actually does anything.

Comments are closed.

Skip to main content