MSN HOMEPAGE
After shipping both the Bing Windows 8 and Windows Phone 8 apps, my team (Application Experiences, APPEX) merged with MSN. The new division was now called Information & Content Experiences (ICE) and needed to reinvigorate the MSN classic portal. As Principal Design Lead, I drove the MSN homepage redesign and led the team establishing a common UX framework & common controls for all the MSN verticals.
Concept
My team designed dozens of layouts for the homepage. Our desire was to put beautiful content front and center while balancing page density (since more density meant more clicks and more revenue). In addition, we sought to promote the Microsoft ecosystem with links to other Microsoft services such as Office.com and Skype.
Homepage
The final design of the homepage balanced information density and beautiful content. We created a hero module at the top of the page to emphasize the most important story. Unlike the previous version of MSN, the redesign (using a card layout) was fully responsive and worked at all resolutions and on all devices. The stripe design organized the page by topic, which could be customized and reordered by the user.
Homepage - Outlook
Like the BingBar before it, the “Me Bar” under the header provided a set of applets with which the user could access personal data across the Microsoft services. One of the applets was mail, which allowed the user to preview their latest messages from within the MSN homepage.
Homepage - Office
Another of these applets was office.com. If the user was subscribed to Office 365, we displayed recent documents and action buttons to create a new Word, Excel, PowerPoint or OneNote document.
News
One of the pieces my team designed was a set of layout templates for the main page of each vertical (vertical homepages). The challenge was not unlike the ones we had on the MSN homepage. We used rich imagery and data to deliver experiences which put the content front and center.
Finance
On MSN Finance, we wanted to give the vertical a dashboard look and feel. The user could see the main stories, market trends and favorite stocks at the top of the page.
Sports - Concept
As a design lead, there are several ways to inspire your team, one of my favorite is leading by example. I created a conceptual sports page to demonstrate how we could use imagery, large type and textures to infuse personality and achieve a more modern/immersive design.
Sports
The final MSN Sports homepage used some elements explored in the conceptual phase while maintaining an overall structure more consistent with the other MSN verticals. It was important to have a unified top of the page system so all the verticals felt like part of a family.
Weather
For MSN Weather, we achieved an immersive look and feel like the sports page concept (it was more appropriate for this page). Like the Windows 8 desktop app, we utilized a full bleed ambient background and redesigned the data visualizations.
Design contributors: Rodney Edwards, Denise Trabona, Lew, Christina Koehn, Tasha Lutfi, Jason Gouliard, Katrina Mendoza, Will Shown, Eric Sexauer, Emily Voreis, Ping Li, Sooyun Yun, Michael Catbagan, Erica Cheshire, Daniella Mezzacasa, JR Reyes, Vanessa Milan, Sandesh Halarnkar, Vaibhav Jain, Yash Misra, Dhaumya Mehta; Jason Campbell, Gauravi Chaudhari, Masato Sudo
OTHER PROJECTS
To view my older projects (2005-2009) visit my old site.