<!doctype html>
<html data-current="post" lang="en-GB">
<head>
<!-- COMMON TAGS -->
<meta charset="utf-8">
<title itemprop="name">Microsoft's Design Evolution</title>
<!-- Search Engine -->
<meta name="description" itemprop="description" content="The blog of Steve - Web* Developer">
<!-- Twitter -->
<meta name="twitter:card" content="summary">
<meta name="twitter:title" content="Microsoft's Design Evolution">
<meta name="twitter:description" content="The blog of Steve - Web* Developer">
<meta name="twitter:site" content="@steveworkman">
<meta name="twitter:creator" content="@steveworkman">
<!-- Twitter - Article -->
<!-- Open Graph general (Facebook, Pinterest & Google+) -->
<meta name="og:title" content="Microsoft's Design Evolution">
<meta name="og:description" content="The blog of Steve - Web* Developer">
<meta name="og:url" content="https://steveworkman.com">
<meta name="og:site_name" content="The blog of Steve - Web* Developer">
<meta name="og:locale" content="en-GB">
<meta name="og:type" content="article">
<!-- Open Graph - Article -->
<meta name="article:section" content="Web Development">
<meta name="article:published_time" content="2010-03-01T00:00:00.000Z">
<meta name="article:author" content="Steve Workman">
<meta name="article:tag" content="post,Microsoft,Mobile,User Interfaces">
<link rel="alternate" type="application/rss+xml" href="https://steveworkman.com/feed.xml" />
<link rel="me" href="https://webperf.social/@steveworkman" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>:root{--turkey:#fff0eb;--white:#fff;--blue:#1777af;--headingBackground:#bbdce8;--textColor:#282828;--visibleGrey:#ccc;--pageBackground:#fff;--articleBorder:#fff;color-scheme:light dark}@media (prefers-color-scheme:dark){:root{--turkey:#fff0eb;--white:#fff;--blue:#29b0ff;--headingBackground:#083444;--textColor:#f5f5f5;--visibleGrey:#ccc;--pageBackground:#333;--articleBorder:#2a2a2a}}*,:after,:before{box-sizing:border-box}body,html{color:var(--textColor);font-family:Avenir,Avenir Next,-apple-system,BlinkMacSystemFont,Segoe UI,Helvetica,Arial,sans-serif;margin:0 auto;padding:0}header{grid-area:header}main{grid-area:main}aside{grid-area:aside}footer{grid-area:footer}body{background-color:var(--pageBackground);display:grid;grid-template-areas:"header header header" ". main main" ". aside aside" "footer footer footer";grid-template-columns:auto 3fr 1fr;grid-template-rows:auto 1fr auto auto;height:100vh;max-width:50em}@media screen and (min-width:750px){body{grid-template-areas:"header header header" ". main aside" "footer footer footer";grid-template-rows:auto 1fr auto}main{max-width:37.5em}}code,p,pre{line-height:1.5}a[href],a[href]:visited{color:var(--blue)}a[href]:not(:hover){text-decoration:none}footer,header,main{padding:1em}main{margin:0 auto;max-width:100%;padding-bottom:2em}main :first-child,main>article :first-child{margin-top:0}pre{direction:ltr;font-size:14px;-webkit-hyphens:none;hyphens:none;margin:.5em 0;padding:1em;-moz-tab-size:2;-o-tab-size:2;tab-size:2;text-align:left;white-space:pre;word-break:normal;word-spacing:normal}blockquote{position:relative}blockquote:before{color:var(--visibleGrey);content:"\201C";font-family:Georgia,Times New Roman,Times,serif;font-size:6rem;left:-2.5rem;position:absolute;top:-.5rem}header>em{display:block;font-size:2em;font-style:normal;font-weight:700;margin:.67em 0}header nav ul{list-style:none;padding:0}header nav ul :first-child{margin-left:0}header nav li{display:inline-block;margin:0 .5em}header nav li a[href]:not(:hover){text-decoration:none}header nav li a[data-current="current item"]{font-weight:700;text-decoration:underline}article{border-bottom:1px solid #eee;border-bottom:1px solid var(--articleBorder);margin-bottom:1em;padding-bottom:1em}article>h1,article>h2,article>header{background-color:var(--headingBackground);border-radius:.5em 0 0 0;font-size:2em;line-height:1.2;margin-bottom:.75em;padding:.25em .5em}article>h1>a[href],article>h1>a[href]:visited,article>h2>a[href],article>h2>a[href]:visited{color:var(--textColor)}article>header>h1{font-size:1.2em;margin-bottom:.25em}article>header>.subtitle{font-size:.8rem;margin-bottom:0}article>header>.subtitle>small{display:inline-block;width:50%}article>header>.subtitle>small:last-child{text-align:right}article img{display:block;margin-left:auto;margin-right:auto;max-width:100%;text-align:center}main>section>article>*{margin-bottom:.5em;margin-top:0}a[rel=tag],a[rel=tag]:visited{background-color:var(--pageBackground);border:1px solid var(--pageBackground);border-radius:.25em;color:var(--blue);display:inline-block;font-size:.625em;height:2em;letter-spacing:.1em;line-height:2em;margin:0 .5em .5em 0;padding:0 .5em;text-decoration:none;text-transform:uppercase;vertical-align:text-top}a[rel=tag]:hover{background-color:var(--blue);border:1px solid var(--blue);color:var(--pageBackground)}a[rel=tag]:last-child{margin-right:0}ul.taglist{font-size:.8em}ul.taglist li{padding-bottom:.25em;padding-top:.25em}form{display:grid;padding:2em 0}form label{display:none}button,input,textarea{font-family:Avenir,Avenir Next,sans-serif;font-size:1rem;margin-bottom:1em;padding:1em;width:100%}input,textarea{border:1px solid #000}button{background-color:var(--blue);border:1px solid var(--blue);color:var(--white);cursor:pointer}@media screen and (min-width:768px){:root{font-size:1.1rem}}.pagination>ol{list-style:none;padding:0}.pagination>ol>li{display:inline-block;width:50%}.pagination>ol>li.previous{text-align:right}table.speaking{border:1px solid var(--turkey);border-collapse:collapse}table.speaking td,table.speaking th{padding:.25em}table.speaking thead>tr{background-color:var(--headingBackground);border-bottom:1px solid var(--turkey)}table.speaking th{text-align:left}table.speaking .label{background-color:var(--headingBackground);border-radius:8px;color:var(--textColor);display:inline-block;padding:4px 8px}</style>
<script></script>
<script src="https://paulirish.github.io/lite-youtube-embed/src/lite-yt-embed.js" async></script>
<link href="https://paulirish.github.io/lite-youtube-embed/src/lite-yt-embed.css" rel="stylesheet">
<!-- Global site tag (gtag.js) - Google Analytics -->
<script async src="https://www.googletagmanager.com/gtag/js?id=UA-18282110-1"></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());
gtag('config', 'UA-18282110-1');
</script>
</head>
<body>
<header>
<em>
<a href="/">Steve Workman's Blog</a>
</em>
<nav>
<ul>
<li><a href="/" >Home</a></li><li>
<a href="/about/">About Steve</a>
</li><li>
<a href="/speaking/">Speaking</a>
</li><li>
<a href="/bookshelf/">CSS Bookshelf</a>
</li></ul>
</nav>
</header>
<main>
<article>
<header>
<h1>Microsoft's Design Evolution</h1>
<p class="subtitle">
<small>
Posted on <time datetime="2010-03-01T00:00:00.000Z">01 March 2010</time> by Steve Workman
</small>
<small>About 2 min reading time</small>
</p>
</header>
<p><a href="/static/img/2010-02-15win7phonepr-4-1266243856.jpg"><img src="/static/img/2010-02-15win7phonepr-4-1266243856.jpg" alt="Windows 7 Series Phone UI" title="Windows 7 Series Phone UI" loading="lazy"></a></p>
<p><em>This is an opinion piece about Microsoft's Windows 7 Series phones. The opinions are my own and not that of my employer.</em></p>
<p>I remember the 'good old days'. Back in 2004 (at uni) I tried to create a Windows CE program for a little mobile device. My friends and I spent months trying to get it to work (at one point resorting to Java, quickly realising our mistake), and in the end all we could produce was a list of menu items and a few forms. The overall user experience (UX) was horrible and it was slow and unintuitive. That was the standard for Microsoft products of the time.</p>
<p>The turnaround began in 2005 when MS hired their new head if UX for Office, Jenny Lam. Jenny revolutionised the tired <a href="http://office.microsoft.com">Office UI</a> with the ribbon, and hence inspired the Windows 7 UI. A few years later, the Xbox team developed the <a href="http://www.google.com/url?q=http://www.xbox.com/en-GB/live/NXE/&ei=vu2IS_ibD47u0wSslrnWCw&sa=X&oi=nshc&resnum=1&ct=result&cd=1&ved=0CAcQzgQoAA&usg=AFQjCNFB_WWXFGZoxsAf9kXLLNY7GjIwAA">NXE</a>, based on ideas from the Windows Vista media centre interface, which was leaps and bounds better than the XP MCE UI. This "text focused" design, using Jenny's <a href="http://en.wikipedia.org/wiki/Segoe">Segoe UI</a> typeface found it's way into he <a href="http://en.wikipedia.org/wiki/Zune">Zune</a>, and came to fruition in the <a href="http://en.wikipedia.org/wiki/Zune_HD">Zune HD</a>. From this, we get the next evolution, the 7 series phone.</p>
<p>With such a clear evolutionary path, it's hard to see why so many people are surprised by the new phone OS. When the Zune HD launched, people cried out for this UX to be made into a phone. Now that wish has been granted and Apple should be scared.</p>
<p>The <a href="http://www.windowsphone7series.com/">7 series UI</a> is everything that the iPhone is not. It's got a home screen that displays useful information, with integration into multiple web services out of the box. It's got cloud-enabled apps, not relying on purpose built sites but working with service leaders. It's got a calendar that's useful, and a UI paradigm that is consistent, though, as with the ribbon toolbar, will take some getting used to.</p>
<p>And that's the thing with MS's UX strategy. They are now prepared to go out on a limb to try new stuff, even if it may require a learning curve.</p>
<p>We had a question go round the office a few days ago: name a MS app that was rubbish at first, and is now a market leader. We named pretty much every product that MS make (except IE). With 7 series phone, MS have completed their line up. Far from being a dead company to the consumer, Microsoft are still the king of the hill.</p>
<p>Where do MS go from here? The evolution will continue, and although it will seem slow, with product releases every 2-3 years, innovation will continue to flourish. MS will never be a trend setter, and will mostly go their own way, but their way is rarely wrong. I predict that MS still have their best work within, and you would be a fool to ignore them.</p>
<p>
<a href="/tags/Microsoft/" rel="tag">Microsoft</a>
<a href="/tags/Mobile/" rel="tag">Mobile</a>
<a href="/tags/User Interfaces/" rel="tag">User Interfaces</a>
</p>
</article>
<nav>
<a href="/">Back to home</a>
</nav>
</main>
<aside>
<h2>Find me online</h2>
<ul>
<li><a href="https://webperf.social/steveworkman" target="_blank">Mastodon - @steveworkman@webperf.social</a></li>
<li><a href="https://www.threads.net/@steveworkagram" target="_blank">Threads - @steveworkagram</a></li>
<li><a href="https://www.instagram.com/steveworkagram/" target="_blank">Instagram</a></li>
<li><a href="https://www.github.com/steveworkman/" target="_blank">Github - steveworkman</a></li>
</ul>
<h2>Posts in other categories</h2>
<ul class="taglist">
<li><a href="/tags/Browsers/" class="tag">Browsers (10)</a></li>
<li><a href="/tags/Conferences/" class="tag">Conferences (1)</a></li>
<li><a href="/tags/CSS3/" class="tag">CSS3 (14)</a></li>
<li><a href="/tags/Facebook/" class="tag">Facebook (3)</a></li>
<li><a href="/tags/Genesys/" class="tag">Genesys (1)</a></li>
<li><a href="/tags/Gigs/" class="tag">Gigs (1)</a></li>
<li><a href="/tags/Google Wave/" class="tag">Google Wave (1)</a></li>
<li><a href="/tags/Hiring/" class="tag">Hiring (2)</a></li>
<li><a href="/tags/HTML5/" class="tag">HTML5 (20)</a></li>
<li><a href="/tags/Interviewing/" class="tag">Interviewing (1)</a></li>
<li><a href="/tags/iPhone/" class="tag">iPhone (12)</a></li>
<li><a href="/tags/JavaScript/" class="tag">JavaScript (14)</a></li>
<li><a href="/tags/Learning/" class="tag">Learning (1)</a></li>
<li><a href="/tags/Microsoft/" class="tag">Microsoft (10)</a></li>
<li><a href="/tags/Mobile/" class="tag">Mobile (12)</a></li>
<li><a href="/tags/Node.js/" class="tag">Node.js (1)</a></li>
<li><a href="/tags/Off-topic/" class="tag">Off-topic (11)</a></li>
<li><a href="/tags/Performance/" class="tag">Performance (5)</a></li>
<li><a href="/tags/Projects/" class="tag">Projects (2)</a></li>
<li><a href="/tags/Rails/" class="tag">Rails (2)</a></li>
<li><a href="/tags/Ramblings/" class="tag">Ramblings (20)</a></li>
<li><a href="/tags/Reading List/" class="tag">Reading List (1)</a></li>
<li><a href="/tags/Sketchnotes/" class="tag">Sketchnotes (19)</a></li>
<li><a href="/tags/Speaking/" class="tag">Speaking (7)</a></li>
<li><a href="/tags/Steel-Software/" class="tag">Steel-Software (2)</a></li>
<li><a href="/tags/Usability/" class="tag">Usability (9)</a></li>
<li><a href="/tags/USE/" class="tag">USE (16)</a></li>
<li><a href="/tags/User Experience/" class="tag">User Experience (11)</a></li>
<li><a href="/tags/User Interfaces/" class="tag">User Interfaces (10)</a></li>
<li><a href="/tags/Web Design/" class="tag">Web Design (12)</a></li>
<li><a href="/tags/Web Standards/" class="tag">Web Standards (33)</a></li>
</ul>
</aside>
<footer>
<small>
This content is © 2003-2023 Steve Workman and does not necessarily represent the views, strategies or opinions of my employer.<br>
This blog is made with <a href="https://www.11ty.io/">Eleventy</a>.
</small>
</footer>
</body>
</html>