The story behind the Windows Phone 8 Start screen

The story behind the Windows Phone 8 Start screen

  • Comments 19
  • Likes

I remember the exact moment I fell in love with Windows Phone and its Start screen. I’d just started on the engineering team here and been handed my first Windows Phone 7 prototype. It wasn’t long before I discovered that when I “pinned” a friend’s contact info to Start, their latest status updates also started showing up.

I was hooked: My phone, it seemed, cared about the same people I did.

Flash forward a bit. Windows Phone 8 has arrived. For the past nine months, I served as the program manager responsible for driving the redesign of its Start screen—a tall order for a part of the phone that customers and critics already liked and found distinctive. I began one of our first meetings by challenging the team with a single question: “How can we make Start even more personal?”

These before-and-after screenshots show how the designers and engineers here ultimately answered that question in Windows Phone 8. In the rest of this post, I’ll give you the backstory of how we arrived there and why.

The Start screen in Windows Phone 7

Before and after: The redesigned Start screen in Windows Phone 8 (right) features resizable Live Tiles and other improvements designed to make it even more personal, fun, and informative.

The best home screen on any phone

You’re probably already familiar with Windows Phone’s award-winning design and Start screen. If not, here’s the most important thing you need to know about how it’s different from everyone else: Windows Phone replaces the static, do-nothing icons found on competitors’ home screens with an innovation we call Live Tiles. Customizable and constantly refreshed, Live Tiles provide up-to-the-instant info and updates on whatever you most care about (or app developers make possible).

On Windows Phone, Start is more than just a place to launch apps. You can pin your best friend there to see her status updates throughout the day, the CNN app for the latest headlines, or an eBay item to see if you’ve been outbid. Whether it’s a person, an app, a photo album, or a musician you care about—Windows Phone makes it possible to stick everything you love right on the part of the phone you see and use the most. That’s what makes Start so different: it’s completely relevant, personal, and unique to each of its users.

As the engineering and design teams began to discuss what made the original Start so great and how we could make it better in Windows Phone 8, a few themes started to emerge.

First, Live Tiles are popular because they’re alive with the content people care about, so let’s find ways to squeeze even more of them onto Start. Second, people care about some things they pin to Start more than others, so let’s make it possible to reflect this visually. Third, how can we make the Start screen even more distinctive?

Finally, everybody loves decorating their phones with different colors—so let’s provide even more.

How-to:  See how easy it is to personalize the Windows Phone 8 Start screen.

Squeezing more onto Start

Set a Windows Phone down next to an iPhone or an Android device and one thing you’ll probably notice is how much more empty, or “negative,” space we use. Compared to other smartphones, there are also fewer visual frills like borders, shadows, or glassy reflections. This isn’t an accident. Our goal is a more balanced, uncluttered look that puts the focus on your stuff, not our stuff.

In Windows Phone 8, we wanted to shave away even more user interface “chrome” to make room for your content on Start. So you’ll notice the arrow that formerly pointed to the App list has been relocated, while the column of space (or “gutter” in design speak) down the right side of the screen is also now gone. These changes created room for both more and bigger tiles, so you can see even more of what a loved one has to show or say. I also can’t wait to see what app developers do with this expanded canvas.

That arrow, by the way, was a tricky little guy—and provides some insight into how the software design process typically works.

Initially we figured we could safely remove it. But when we began bringing real people into our usability labs to play with the redesigned Start screen—something we always do as part of the design process to double check our hunches—we saw that quite a few of them weren’t finding the App list, which requires a quick left swipe to see.

App list

So we went back to the drawing board, trying the arrow in various places. At the top it added too much visual clutter. At the bottom it’s out of the way but still provides a nice hint to new Windows Phone owners that there’s something important off the screen. After we made that change, none of our testers overlooked the App list.

Supersize me

It’s great that Windows Phone lets you to pin all the stuff you care about to Start. But some things you like, and some things you love. Why does the tile showing my dog have to be the same size as the one I tap to make a phone call?

Now it doesn’t.

In Windows Phone 8, we’re introducing resizable Live Tiles, so you can not only position them anywhere you want, you can also make them bigger or smaller with a tap. Make your wife’s Live Tile large to see her face in gorgeous high-res; shrink your friends’ tiles to get more of them onto Start. By supporting as many as four tiles across, the range of fun and unique layouts in Windows Phone 8 is practically limitless.

Steve’s phone: Curious what Microsoft CEO Steve Ballmer’s Start screen looks like?

Design geeks might wonder: How did we land on a four-column layout? Over the months we tested hundreds of design iterations (a process that was both exhilarating and exhausting). Three-column layouts didn’t feel like enough flexibility, whereas five-column layouts left tiles too small to read and tap. In the end, four felt just right. Every app supports small- and medium-sized Live Tiles. But since Start screen real estate is valuable, only apps with something useful to show (like Calendar, Mail, or People, to name just a few) offer a large option.

Color me beautiful

Windows Phone has always embraced color more than any other smartphone because we think it’s one of the best ways to express personality. And the only thing better than great colors is more great colors. Windows Phone 8 now supports a total palette of 20—twice as many as before. Besides vibrant new options like cobalt, yellow, and indigo, there are more muted tones like olive, steel, and mauve. And these don’t just show up on Start. We’ve sprinkled more accent color throughout the phone, including on places like the keyboard. I’ll leave it up to you to find where else we snuck in a little bit of color in.

Picking these might seem like a fun job, but it’s actually really hard work. Our design studio spent countless hours creating a palette for this release that’s beautiful yet always works with whatever’s showing on screen. Accent colors, for example, can’t make the white text of Live Tiles illegible, or clash with the black or white backgrounds of the phone’s dark and light themes.

New hues: The new Windows Phone 8 Start screen comes in lots of new colors—and makes possible all kinds of new arrangements for Live Tiles.

Meet my Start screen

So that’s the story behind the new Start. It’s been really fun watching folks on the Windows Phone team use it: Everyone’s Start screen is different, and the moment you look at someone’s, you get a real sense of who they are and what they value.

It’s been even more fun reading some of the new Windows Phone 8 reviews, like this one from The Verge:  “Windows Phone 8 has the best home screen — the perfect combination of flexibility, design, and simplicity — of any major platform right now.”

By the way, here’s a look at my real-life Start screen. Trust me: No one else has a one like it. I can’t wait to see yours.

imageimage

RELATED:

Q&A: The new Windows Phone 8 lock screen

Learn more about the Start screen and how it works in Windows Phone 8

19 Comments
You must be logged in to comment. Sign in or Join Now
  • sajeshu
    0 Posts

    Few of the things which need to catch up with other OSs are:

    -Export option for messages to Excel. Zune also should have this option.

    -On a phone reset, we loose all apps/messages/photos/contacts. This should not be the case. Old Nokia phones used to handle this very well.

    -No much personalization options. There should be profiles like Office/Home/Silent etc which is configurable.

    -Unable to select multiple options/pictures to attach in mail in One go. There should be a multi select option.

    -Unable to attach PDF or other file types in mails.

    -There is no option to transfer documents using Zune.

    There were so many simple functionalities which used to be in earlier Nokia/Samsung phones which were lost when  Windows came in. Looking at phones like Nokia 5800 will be a good idea to build feature rich OS.

    Please do not ignore WP 7.5 users, we are the ones who are feeling left out because of an early entry of WP 8.

  • toybook
    0 Posts

    The really challenge wud be the issue of social/data noise and clutter but quite frankly it's based on what the user decides to put up there. If it gets to cluttery, just take down the delinquent tiles. http://www.bankinfoonline.com/

  • Amazing article and marvelous start screen. I luv my WP live tiles so much. But when is the 7.8 out? I feel kind of being left here lol

  • Hawk
    61 Posts

    What's the story behind only showing 10 comments?  What's the story behind WP7.8 for us loyal customers?  What's the story MS?  

  • @haen: For some of the pinning functionality you want you can use Apps like ConnectivityShortcuts, which allow you to pin tiles that take you to Wifi, Bluetooth, Mobile Network, Airplane Mode and with the upcoming WP8 Update Location Settings.

    Aside from that many 3rd Party applications allow you to pin certain pages to the start screen although I agree with you that it might be a good idea for Microsoft to allow more pinning than they currently do.

  • robble
    4 Posts

    Yeah this is cool but how can I back up and restore ALL of my current Windows Phone info (including SMSes and savegames) onto a WP8 phone? Why does it feel you're doing your best to drop your existing userbase? We're the ones who gambled on you, and currently it feels as though we lost.

  • eriqc
    0 Posts

    One of the features that I greatly miss is the ability to see MORE THAN ONE upcoming appointment on the home & lock screen. From the previous WindowsMobile 6 all the way back to Windows CE, we've had this capability.

    it was a very productive feature being able to quickly glance at my entire day of appointments + notifications on the home page without opening up a single app. Thousands of people voted to return (or add back?) this feature to WindowsPhone 7, but I feel that our votes were futile.

    WindowsPhone 7.8 and 8 allows us to resize live tiles now. And there are multiple ways to approach showing more than one appointment on the calendar tile. Since we can now resize tiles, we should have the OPTION to show at least 2-3 more upcoming appointments (that would  be ideal). Or maybe it could fade/in out to the next upcoming appointment every X number of seconds.

    As a strong supporter of Microsoft's mobile platforms since the Windows CE days, My biggest frustration with WindowsPhone is that many small but EXTREMELY useful features that made a big difference in our productivity were all thrown out the window in favor of some trends and cool LOOKING features, that didn't really make much of a difference in actual productivity (in fact we went backwards in some important areas).

    If Microsoft could have somehow merged the FUNCTIONALITY of WindowsMobile 6.5 with the awesome UI of WindowsPhone 7/8, Microsoft would have a platform that met the needs of casual AND power/business users alike, and would be far ahead of the game.

    I wish I could have a sit down conversation with Ballmer the WP dev team some time. :-|

  • haen
    0 Posts

    The ability to "pin" particular things to start screen is one of WP's strongest features but I think it could be so much more powerful.

    Pinning is about allowing the user faster access, not just live tile information. I am always adjusting my start screen for the situation at hand. Just yesterday, I needed to constantly reference a map I saved to my phone's picture album so I pinned the album to my start screen and unpinned it at end of the day. It would have been great to be able to pin that particular image to the start screen, not just the folder. What is needed is the ability to pin a particular page within an app, not just the app, to the start screen.

    What if I'm trying to stay on top of an email thread for work? I should be able to pin that thread to the start screen. Same for text message conversations. This saves me having to go through multiple windows to access what is important to me at the moment. This would also be great for heavily used settings. Maybe I turn on an off my wifi repeatedly throughout the day. If I could pin the wifi window to my home screen, I would no longer have to go through settings for access.  

    Thanks for taking the time to hear me out. Keep up the good work.

  • image
    0 Posts

    One thing i'm confused about is that on wp7 at the top of the screen the signal strength, battery indicators disappeared and only the clock was permanent. However, when swiping up and down this left a convenient blank space which didn't overlap with the live tiles. Additionally, due to the space at the right hand of the screen, the clock was always visible. However, in wp8 due to the larger live tiles, there is no blank space for the clock anymore. So why isn't the clock disappearing too along with the battery and signal indicators? Or perhaps a better solution is to keep them all on and have a small band at the top where the live tiles wont overlap with? It seems like it hasn't really been thought out properly..

  • hethler
    0 Posts

    Wow! It felt like I was there the whole time of developing these items. Great walk-through :D

  • I like pretty much all of the changes, especially the new tiles sizes (and those being available to most/all apps), so thanks very much for all of your work on it. And I'm glad you're bringing this to WP7 devices, both as a user and as a dev assuming that most of the capabilities on the home screen will be the same.

    I know this is probably a dead horse at this point, but you wrote that "... the arrow that formerly pointed to the App list has been relocated, while the column of space (or “gutter” in design speak) down the right side of the screen is also now gone. These changes created room for both more and bigger tiles...", which just isn't true. You can see this in the very first screenshot on this post, where the WP7 phone has essentially 8 full "medium" tiles shown but the WP8 phone can only show 3 and a small strip of the 4th, which is basically worth an entire row of the new small WP8 tiles. Any chance of giving us an option to see the gutter again so that we can fit more tiles on our homescreen? The new WP8 tiles flexibility + higher density of the WP7 layout would be perfect!

  • @ Josh: This is beautiful. I think the start screen experience can be made better. In the App List screen the search currently offers to search only the apps.. Why not make the search in the App list screen more universal adding search for settings and files as in Windows 8.

  • tN0
    41 Posts

    Are there Silverlight videos embedded? Maybe the Windows Blog team didn't got the memo but your company now makes computers that are incompatible to Silverlight on websites.

    Fix this please. Fast! Even the ads on the Surface.com website are using Silverlight. Is this supposed to be a joke?

  • Thanks for these posts.

    What you should consider to do to get nerd cred, too, because these partially control what others around them buy, is to go a little into how the development pace will pick up now, since the move to the NT kernel is done. Other MSFT personnel has been posting in places saying that this effort lagged development of the consumer features.

    With the start of WP7, an agile pace was promised, this didn't turn out to be. Mango was OK, but after that, it was pretty unimpressive.

  • its part of the plan. They are going to be rolling out an update for the existing Windows Phone User to upgrade to Windows Phone 7.8. We are just waiting when the update will be out after Windows phone 8 or before it comes out to the market.

  • Please release the Windows Phone 7.8 update for the early phones, even blog posts or news about would help us not lose hope...I hope you are still working on it...seems you are already so busy with 8.

    we want that start screen :D

  • My idea for Calendar App: The Live Tile be able to scroll through events of the next few days (customizable).

  • abm
    268 Posts

    Thanks Josh for the flashy details on Start screen.

    We need a migration tool OR back-restore app which should collect the list of third party apps, their settings, their data, phone settings, personalization, IE favorites etc. and restore it on the new WP8 device. On Android they offer many apps for this purpose. One of them (perhaps the best) called "Titanium backup", which takes *complete backup* of your device, zip it and gives you option to store it on phone-memory, cloud (dropbox and google-drive) or PC. You can even take backups from multiple devices and on-restore, it shows list of apps by device. From there, you can restore any app on any device (in case an app is not compatible with the current version of OS, it will disable that particular app in the list).

    Unfortunately we, the WP users, are confined to text-messages, pictures and phones to sync with cloud.. Please create such app with hand full of options and customizations (granular approach; select what to backup and estimated space required), so the stakeholders have more breathing space in Windows Phone ecosystem.

  • m1o2
    0 Posts

    what about REAL Live Tiles ? tiles that can show running video and fancy animations ?