Categories
Creative Design Personal

Leveraging Frameworks

Looking back at the last year or so, one theme kept surfacing in all the projects I worked on – the need for a user experience framework. Many of these projects focused around Xfinity.com, part of Comcast’s branding initiative that launched last year during the Olympics. Overall, the projects focused on how to introduce new Comcast subscribers to the XFINITY service and the benefits that come with it, while providing more initiated customers deep access to the wealth of content available online. One project was to design a future version of the site, which would grow alongside individual customers and present an experience tailored to them. This project focused on optimizing both the experience of customers as well as Comcast’s understanding of its customers’ needs.

Clearly these projects needed something more involved then simple wireframes, design guidelines and some magic in Fireworks/Photoshop and HTML…they needed systematic frameworks to support both the design process and the business needs. Besides coming up with concepts and designs that fueled these projects it was my job to create said frameworks.

The embedded Seven Steps to Creating a Framework is the distilled process I employed to conquer the challenges presented to me over this past year. I believe it is universal enough to guide you through creating UX frameworks of your own.

View Seven Steps to Creating a Framework on SlideShare

Please comment if you have questions or comments on this framework to creating a UX framework.

Categories
Creative Design Thoughts

Metro: Guidelines to the Next Generation of Mobile UX

With Surface, Zune HD, Bing…and now Windows 7 Mobile it seems that Microsoft has finally embraced the design/experience side of technology. While most people will never encounter a Surface device, at least not at it’s current state, this was a huge leap for Microsoft and human/computer interactions in general. For the most part it’s a living experiment of what the future may hold. The Zune HD and Windows 7 Mobile, on the other hand, are designed to be used by the masses, in the present and take their respective markets to a new level.

Inspired by the simplicity and universality of transportation graphics Microsoft calls there new design guidelines Metro. Beyond the name is the focus on creating a modern, stripped down, easy to navigate user interface based on common elements and typography.  The use of typography as a key design element in the digital world is almost unheard of ; I would think design geeks should be overjoyed with this though I’ve barely seen any references to this from the general design world.

Along with typography here are a few of the highlights of Metro:

  • Based on transportation signage: simple, universal, easy to skim
  • General feel: Clean, light, open and fast
  • Experience: should lead the design
  • Consistent: common design treatments and transitions
  • Flexible: Inviting developers to personalize their use of the guidelines to allow them to make their apps unique yet consistent
  • User focused/Task focused: one primary action at a time
  • Panoramic: apps not locked to a single screen
  • Typography: as an element of beauty as well as to demonstrate hierarchy
  • Transitions: are as important as the static page. Guidlines request to keep them simple and related, noting “the more you use it (transitions) the less special it becomes”
  • Simplify, Simplify, Simplify: fierce reduction in unnecessary UI elements (chrome, non-related actions…)

Here is a link to a long but worthwhile video
http://live.visitmix.com/MIX10/Sessions/CL14
(Silverlight required for inline, but you can also download non-Silverlight version)

Here’s the official Window’s phone site:
http://developer.windowsphone.com/

Overall, I’m excited to see smart-phones continue their evolution and Metro looks to be a great step forward.  It’s also nice to see Microsoft (or anyone) not play catch up by porting over the status quo, but rather innovating beyond it.