24 Weeks of Windows Phone Design Index

   Tweet

This blog post might not make justice to the depth and expertise that the discipline of Information Architecture deserves (although the definition of Information Architecture is still in flux) so I’m providing links at the end of this post to other websites that can take you much deeper into Information Architecture.

Demystifying IA

As deep as Information Architecture is however, it really is just a portion of a larger scope of activity called User Experience. Information Architecture is a means to an end. Information is not the user. The user is the user - a human. I’ve seen many websites or apps that sometimes seem to be primarily designed to please information itself - as if information or content was THE user. Take the typical approach of defining the ‘navigation menu’ for a content driven website. It is typical to see the navigation menu reflect the content structure available in the site, for example:

We’ve designed menus like these for years, but this is a completely anti-user view of the world. The website or app in this case is designed based on content types instead of designing it based on user needs. A user (in this case a ‘developer ‘) arrives to the website with a technical question about ‘how to set up data binding in a data grid control for a line of business application’. When the user gets to this site they know they have a need but the site is talking to them as if they knew where to search for their answer - should they go to Case Studies and hope to find how another development company solved a similar problem? Should they go to Tutorials and see if there’s an article that addresses this question? Should they go to Code Reference hoping some information is provided there? How about the Forums?

A different approach is to make the navigation menu based on a different metaphor that addresses users’ needs. If you start simplifying the sample menu I mentioned above you will perhaps find that the best result is just to substitute all those options for one single search box where users can write their need/question.

                  

While I might sound too extreme here, well, that’s actually what Google did - instead of having nested menus with tons of topics or categories like AOL or Compuserve did back in the day - Google said, let’s just give the user one simple input textbox so users type what they are looking for and voila! one of the cleanest UIs that turned into one of the most profitable and efficient user interface metaphors in the last decade. Still today the Google search page is considered a digital icon - just like the Fallingwater house from the Architect Frank Lloyd Wright in architecture or the Starry Night from Van Gogh in painting.

If you ask me, the Google.com site is a great example of how the Metro Principles would manifest on the web. There’s a lot of conversation going on right now about applying the Metro Principles to phone and tablets but a lot of people are also asking, how would Metro manifest in a website - look at Google.com. Fierce reduction of elements. Content, not Chrome (no pun intended ). Google.com has slowly been getting more elements (look at the top) but it still is quite clean.

The Google example is pretty radical (though real) and shows how Information Architecture doesn’t mean only information structure. The term Information Architecture tends to make it feel like users are not part of it (since the word ‘user’ is not included in ‘information architecture’) but users are actually the center of it. Some of today’s best and most recognized Information Architects like the folks at iA get this and while they love to give shape to information, all their projects have user as the center - Try the IA Writer app for iPad.

On October 15^th, 2008 Glenn Murphy, a Software Engineer in Google wrote a blog post titled Content, Not Chrome. It’s interesting to see how the browser ended up being named ‘Chrome’ though

In conclusion, IA is not only about “structuring content” but about crafting the axis, the foundation, the structure of your entire digital experience. Saying IA is critical for a digital experience is an understatement. Literally think of IA like the soul or spirit - the essence of the experience. And just like every spirit (that I know of… :)) it needs of a body to manifest through. This body is the app.  So there you go: IA is the spirit. The app is the body. They are so interconnected, so tightly integrated that you can’t think of them separately. They form THE experience.

IA is all about bringing order to chaos, to align the misaligned, to sequence the random, to parse the mix, to understand the complex.

What is Information Architecture?

The Information Architecture Institute defines Information Architecture as “the art and science of organizing and labeling websites, intranets, online communities and software to support usability“. The Guardian recently made this post about the definition of Information Architecture. Also, here is a really good video produced by Buuteeq on What is Information Architecture? to show their non-techie customers the value of Information Architecture. It’s a good video to understand IA in simple words.

The way I describe the activity of Information Architecture is bringing order to chaos, to align the misaligned, to sequence the random, to parse the mix, to understand the complex.

The goal of the Information Architecture (IA) stage is to define three things:

-  Information

-  User Tasks

-  Relations between Information & Tasks

That’s what the user has in a digital experience: 1) information and 2) the potential of doing something with this information - whether it’s consuming information to help take decisions and/or for generating new information.

Most of us will start creating a Windows Phone app for either A) a client B) an idea of our own (startup idea). In both cases when the project begins we will be exposed to shapeless and scary ‘blobs’ of information like names, dates, prices, images, temperature ranges, zip codes, phone numbers, avatar images, scores, in-app purchases, stocks, locations… in the Information Architecture stage you take that shapeless blob and deliver structured information. Doing it in single try is impossible. It needs many passes. If I think I’ve nailed it on the first pass I’m wrong - Only Zeus himself could do it in a single pass But in all seriousness, force the IA to go through many passes whether you do it or you have others take a stab at it and provide feedback.

Tools to Define Information Architecture

We have three very useful tools that help us define our IA:

1.       IA Document

2.       Application Flow chart(s)

3.       Low Fidelity Prototypes

Something very important to consider here is that at this point we are not designing the user interface or the app itself. We are still working at the ‘essence’ or ‘spirit’ level - so no need for us to over invest time in visual design, user interface or animation details. Right now we simply want to straighten out our blob of information, bring order to chaos.

IA Document

The IA document I usually create is quite simple although you could add as much detail as possible. The truth is in many cases this document grows to become the actual specs of the app. But in our case we will keep this document nice and short. Here is an example that shows how we have brought our now more orderly blob of information into a document that shows the main and primary hubs as well as the spokes. This is a sample IA Document for a simple ’stock price’ app.

Download the sample IA Document in Word format. 

 

App Flow Charts

Remember the good old flow charts for software engineering (or any other process)? That’s what App Flow charts are, it’s just that the visual nomenclature we use is focused on user flow, experience and interaction design. I take the IA Document, with its early stab at the main, primary, and secondary hubs and also the spokes and transform it into a App Flow chart. Initially I add little visual information to each screen. Just enough to see the different modules connecting to other modules.

Then little by little I start adding more details to those screens for example I start adding some UI controls - only the critical ones that allow me to start telling user stories. Later I start turning some of these screens into abstract Pivots, Panoramas or Pages.

And so, little by little App Flow charts become more detailed going from simple task flows to screens that show an idea of content views and even navigation. I wouldn’t call high end fidelity App Flow charts wireframes but many people would. Low fidelity wireframes certainly.

Low Fidelity Prototypes

Once the IA Document and the App Flow chart are more solid, it is always a good idea to start working on paper prototypes - our third tool in defining the IA for our app. These can be helpful due to their low cost ($ and time-wise). A paper prototype is a paper version of your app - how fun is that! You can put together one of these bad boys by simply sketching out the different screens of your app, or for a more refined paper prototype you can use wireframes of your app. Just like with an IA Document or an App Flow chart, Paper Prototypes also evolve little by little and go from low fidelity to higher fidelity. Notice I say “higher” and not “high” fidelity because I personally don’t think it’s worth producing a super refined, polished, high fidelity paper prototype. The idea of a paper prototype is *precisely* to keep it rough, quick and dirty. The good thing about a paper prototype is that it is something that you can actually place in front of an actual test user.  The IA Document and the App Flow chart are too abstract for mortals to go through You and I sure… but for our dear user testers, a paper prototype is something they can actually use.

Please refer to the Paper Prototype section of the #3 Ideation and Concept post of this series for more information on how to create Paper Prototypes.

Now, it might seem, when I tell you that after the IA Document, comes the App Flow chart and afterwards comes the Paper Prototype, that I’m implying there are days or weeks or months in between these different stages/steps, but no In fact we are probably talking about minutes or hours between IA Document to App Flow to Paper Prototype. That’s the whole point of this process - to make it quick and dirty.

At the end you will have a solid IA document with structured information, a solid set of App Flow chart(s) and even some low fidelity Prototypes.

Architecting Information (for a Windows Phone App)

As I mentioned before, I won’t make justice to the practice of Information Architecture in this post but the method I use to define the IA for a Windows Phone app is the following:

1. We capture the needs of the project. We work with our client and write down the different needs, requests, data types, questions, wishes, and even ponies and unicorns in post it notes.

Important

Write user tasks or needs in post it notes of the same color. Write information/data or content on post it notes on another color.

2. We host a creative analysis session with at least one person from engineering and one person from our creative team and we go through the post it notes, we explore, we best guess, we inquire, we question and we debate to define and understand what the client really needs (which might be different from what they think they need).

3. We add our own flavor. Based on this analysis we add our own post it notes with needs, questions and also ponies and unicorns.

4. Create logical groups of related items. Group things in a way that makes sense. Pair things up, group them, relate them and highlight cross over connections.

5. Define hierarchies and give order by capturing the general structure of the blob we are dealing with in an IA document.

6. Create an App Flow chart. Once the IA Document is at least a bit readable - transform it into an App Flow Chart. Notice our natural approach here will be to create a tree like structure but this is precisely where you can break the mold - you could approach your app structure in different ways, radial, layered, multidimensional, hub & spoke or others… however, talking about Windows Phone apps in particular, where the app structure is based on the Hub & Spoke model, it is best to from the beginning of this exercise define a Hub & Spoke structure to your information. A Hub & Spoke model would define a 1) Main Hub 2) Sub-Hubs or Spokes of top level 3) Spokes of secondary levels. Eventually these different hubs or spokes will end up manifesting as Panoramas, Pivots or Pages in Windows Phone but in this stage we are not yet looking into this. Notice I mentioned “eventually” J No need to get too concerned about Panoramas, Pivots or Pages during the first few passes.

Microsoft will not reject your app if you decide not to adopt or follow the Hub & Spoke navigation model - so feel free to explore other models if they make sense to your app. That said, the Hub & Spoke navigation model is arguably the best one and the one that will become the most familiar with users so it is better to use it.

7. We identify relations (or dependencies) between different branches in the structure and we capture them in the IA document or the App Flow Chart.

8. Put the IA Document and/or App Flow chart to the test by telling user stories against them. Look for showstoppers - gaps or excess tasks and/or content/information and/or relations between tasks and content that are blocking you from being able to tell a user story. Based on these run-throughs, refine your Document and/or Chart and test it again with the same and/or more user stories. Do this a few times until your structure reacts firmly to all the user stories you are trying to address with your app.

9. Create a Paper Prototype. After a few passes, it is good to transport the IA Document and/or App Flow Chart to a Paper Prototype. And from there you have 3 things to iterate on, IA Document, App Flow Chart and Paper Prototype. Test the Paper Prototype with user stories and refine it until it can stand the test of all the user stories you want to address in your app. The Paper Prototype is useful because it takes your IA to the next level and it starts feeling more real (even if just in paper). You might be able to capture other pieces of data with a Paper Prototype vs just using an App Flow Chart. Also note that a Paper Prototype is something you can actually put in the hands of a test user whereas the IA Document and the App Flow Chart might be too abstract for a non-techie user or simply someone outside of your team…

The process of defining the Information Architecture for your app is not a one shot or one pass type of activity. It requires of many passes and many tests to your IA Document, App Flow Chart and Paper Prototype. Also, a reminder that at this point we are not fully designing our UI so you do not need (and I would probably not recommend) to invest a lot of time making the screens look beautiful - that comes later. Right now we are just trying to bring order to chaos.

Conclusion

At the end you will have a solid IA Document and App Flow chart(s). Not sure I’d say Paper Prototypes are something that you end up with - I personally see those more for iteration and to refine your specs. Things you will throw away at the end. Everything that you learned with the Paper Prototype(s) will be reflected in the IA Document and the App Flow chart(s) anyway plus the Paper Prototypes can easily get really messy J

So with IA Document and App Flow chart(s) you are ready to go to the next step which is to really start nailing down your Pivots, Panoramas and Pages with more detail.

More Resources on Information Architecture

The Guardian - What is Information Architecture?

Information Architecture Wikipedia

Usability First - Information Architecture

Web Monkey - Information Architecture Tutorial

What is Information Architecture?

Complete Beginners Guide to Information Architecture

Information Architecture - A List Apart

Information Architecture 101- Techniques and Best Practices

Design Your Windows Phone Apps to Sell

Understanding Information Architecture Differently

Next Post | #7 Layout and Composition in Windows Phone. In the next post we will review a couple different techniques to compose and layout Windows Phone UIs. The first one is using the Windows Phone design grid and the second one is using lists.

Hello!

A month ago I decided to leave Microsoft. Today, I’m writing to say thank you to all of you for your support and friendship throughout the years. It’s been quite a ride. I could write a book (or two) about all the things I learned while at Microsoft, the stories, the products, the people. It’s definitely been an amazing, life changing experience to be here. Microsoft has this special something that keeps you hooked, motivated and inspired.

I feel very lucky to have started and closed my career in the company with two very different but each outstanding leaders, Forest and Corrina - both passionate about design and about growing personally and professionally and about pushing yourself to the next level every day.

I am taking sometime off with my family and then as soon as I can, will spend about a year working on personal illustration, design and speaking projects. I plan to continue to be involved with Metro

Hey, where’s the Windows Phone Design Series? - Well, now we will actually have time to finish it - and the promise of turning it into a free e-book at the end is still the goal.

While I’m offline  my brother Alejandro will help me publish the next few articles starting this week.

7 Years of Design Evangelism

8 years ago after reading about the leak on Sparkle, I found out about Creature House Expression 3 and started using it (Secret: the original Creature House Expression 3 that Microsoft acquired from a one man company in Hong Kong and that later became Expression Design, also inheriting the name ‘Expression’ to the rest of the studio - is still available for free here… check it out!). Back then I was also posting doomsday notes in the Macromedia Flash forums (you have to read this lol - I wrote on January 2004, just a couple months after that memorable 2003 PDC when Longhorn was announced) announcing Flash’s death due to this thing called “Avalon” (WPF) that Microsoft was creating… The story turned out to be much more interesting than that

Then, 7 years ago I joined the Expression Product Management founding team working for Forest Key and with other amazing folks like my dear and kawaii friend Miwa Mueller, Wayne Smith and Brad Becker.

Forest is the most inspiring, sharp, creative business leader I met during my career in Microsoft. I was lucky to join Microsoft working for him. He really pushed me to grow. He encouraged me to learn how to communicate to people - to demo and talk, to sell and pitch and even to make people laugh - I also learned how to motivate people and keep them encouraged and focused. Today I cannot measure the impact of his influence in my life - After Forest started growing (quickly) within the company, I started working for Miwa - I will always remember the first time we went to Japan, the dream of my life, being in Tokyo blew my mind away! By then I knew a tiny bit of Japanese and had friends in the city so it was a very fun experience. Miwa and I presented together in front of almost 700 Japanese developers. Fun! We stayed at her parents and the experience of actually sleeping, eating and even using the bathroom in a 100% japanese home was so interesting (and confusing too :)) - Arigatou Miwa-San

During these almost 7 years at Microsoft, I had the opportunity to be part of the founding teams that launched Expression Blend (and Expression Studio) version 1 to 4, Silverlight version 1 to 5 and WPF. I was there during the genesis of these technologies and learned tons from my Product Management team (aka Marketing), Product Team (aka Engineering) and DPE (aka Evangelism).

With a design background I drove design content, training, evangelism and messaging for Silverlight, Expression and Windows Phone. My audience were both designers and developers. Looking back at my career here, it is clear to me that my focus - the one big thing I did was drive Design Evangelism & Education. That’s what I do. While I love being an Architect and do actual design - my real contribution these years (and in the future) will be Design Education.

When I get back, you will hear more about my plans for the future on this area.

Artist in Residence

One of the most fun projects I drove during this time was hosting the Silverlight Artist in Residence event (originally kicked off by my friend Barak Cohen, then taken over by Nishant Kothary). In this event we would invite designers and developers (in pairs) to spend a week building a Silverlight app or game. It was sort of a Survivor-like, reality show experience for attendees and was always highly praised by internal teams as well as top agencies who visited us in Redmond. It became the de-facto training method for depth partner enablement. We trained the top design agencies in the U.S. as well as other top development shops. In a week, developers and designers would be ready to go back home and start working on real client work immediately.

.toolbox

After that I had the pleasure of working on Brian Goldfarb’s and Brad Becker’s group. The legendary and awesome Silverlight team. It was during that time that my friend (and “work wife” :)) Vivian Chan and I partnered to build .toolbox which basically solved, in one shot, the need of the community to get Expression Blend and Silverlight (design) training. Today .toolbox has more than 40,000 members from 100+ countries, hundreds of thousands of lesson videos watched and training content packages downloaded. Vivian has taken good care of our baby and added a fantastic series with additional badges on Windows Phone Design.

Metro Design Tour

This last year has been a blast! I started to explore a switch in my career from Product Management to UX Design. I was rescued by my dear friend Corrina Black from the claws of SQL Server and I joined her team. I learned so much! - Being in a UX team in Microsoft was a completely different experience!

Her group was nested right at the intersection of all of our client teams and the platform & tools group so we had exposure to everything - like a candy store of design. I had the opportunity to collaborate with the XBOX group in the early stages of design for the new experience released last Fall that brought the concept of “apps” to the XBOX experience. I explored and learned about designing Kinect-based experience thanks to some amazing people in the XBOX Design Studio including Grant Hinkson (oh nooo…) and especially Ali Vassigh (a must follow). I also worked on a number of Windows 8 BUILD sample apps - some of them like CheckMate, made it to Developer Preview.

Later, as part of the Windows Phone Design Studio, we reached out to our friends in the Western Europe region and partnered to put together a Design Day tour. We spent two months traveling and visiting 11 countries in Western Europe + South Africa meeting thousands of developers and designers, reviewing hundreds of apps and learning a lot from all of you who are making Windows Phone your own and are pushing it to the next level. Recently we also visited San Diego and Vancouver in partnership with Nokia - good times. Nokia folks are really great people.

The coolest thing throughout all these years has been the opportunity to be exposed to the end-to-end user experience and design vision and execution in Microsoft (Windows Phone, Windows, XBOX, Silverlight…). I’ve always enjoyed influencing, driving and contributing to the larger picture.

Microsoft

I will always be grateful to Microsoft for changing my life. For giving me so much support and so many learning experiences. For opening the doors of the world for me to discover and meet wonderful people inside and outside of the company - people from all sorts of cultures and countries. Today I know people and have friends in all 5 continents and it’s a blast to learn from different people who speak different languages, with different cultures and that live in all corners of the world.

For those of you exploring or interested in joining Microsoft - Do it! - It is an amazing company to work for. There’s always fun things to do, you have a great (and huge) campus in a beautiful city - Seattle and the surroundings are gorgeous. Tons of lakes, everything is green - Sure it rains a lot but that gives you infinite amount of trees, lakes and snow in winter time. Lots of trails for running, biking, hiking and the best adult hockey league You get free access to the ProClub which is one (if not) the largest gym in the US - it really pumps you up if you are into running or working out. The Company Store is cool because you get really good discounts on XBOX games and software. The ski and snowboard resorts are as close as 45 minutes away so many people leave earlier on Thursdays or Fridays and head up to the mountains for some evening action. You get free drinks at the office - I will really miss my Mango Talking Rain (Zero carbs! :)).

In terms of your career, one of the things I always liked in Microsoft is this culture that enables you to define and shape your own career. While you of course have managers and groups and VPs, at the end I feel it’s all about where YOU want to go. If you are smart then you can pick the right battles and the right growing paths and contribute to the company with what you think its best. Coming from a more entrepreneurial background, I found this to be the key for me to be happy in the company. They trust you.

If you are ever interested in working for Microsoft in any group, drop me a note and I’ll be happy to give you tips or connect you with someone in there.

If you are a designer then you will enjoy working for Microsoft. It’s a different culture and company from the one a few years ago. Microsoft has finally embraced design and is empowering design leads and designers to really drive the direction of the company. From Albert Shum to Steve Kaneko, Bill Buxton and Jeff Fong, you can see how Microsoft is a great place to develop your career doing design at scale that reaches millions of people around the world. Having had the opportunity to be part of the Windows Phone Design Studio was incredible. The design talent bar in there is mind blowing. People like Jeff Fong who guided the implementation of the Metro Design Principles to create Windows Phone or Mike Kruzeniski who has quickly grown to be one of the most influential design leads inside and outside of Microsoft.  Kat Holmes with whom I did some traveling in Europe a couple years ago and from whom I first heard of Metro. Jae Park, also a lead and member of the Microsoft User Experience Leadership team (with other folks like Kaneko, Buxton and Moreau). 

The People

Let me have my Oscars moment now…

Throughout the years I would receive emails from folks leaving the company saying something like “I’ll miss the people - it’s what matters” and I always thought of it as a cliche but nooooo… Now that I’m here, I’m like yeah - it’s true! - I will miss so many people. My always inspiring friend Corrina who kept me motivated and encouraged to run and run to the point that today it’s my favorite sports activity. My sweetest and mega-talented friend Sandy with whom I’ve spent hours and hours drawing and who introduced me to Eggs Benedict at Lola (ZOMG!) - I might finally use that 1,000 color pencil box Sandy. I’ll miss my friend Maria (born in the city of Toledo, Spain :)), Darlene - a rising star! and my buddy Jared Potter. I will miss my new and amazing Studio friends I quickly fell in love with: Jane, Jocelyn, Andrea, Jeremiah, Frank, Aaron, Kat as well as everyone else in the Studio and outside the Studio like my BFFs Miwa, Viv, Michael Bach, Joanna, Susan, Guillaume, Jon Harris & John Alwright, Emily Anderson, David Salamon, LuisDans, Tim Sneath and all my buddies in the Expression and DPE groups like Jaime Rodriguez, David Carmona, Emilio and Rick. Also my friends in the field - my dear and design evangelist rock star Sara Summers, Danwei, Katrien and Isabel, Kasugai-San, Chris Bernard, Will and Sean, no way to name everyone who is special to me. Just last weekend while celebrating my friend Jaime’s birthday I had a chance to see 3 of my favorite guys, Dan Fernandez, Brian Keller and Ben Lower (sorry @bgoldy and @jeffwilcox for missing you :))

lol this was just like when people receive an Oscar

I decided not to send a massive email to announce my departure but send an email to each person - it took a long time to send about 200+ emails but it was a joy to hear back from everyone. So much love I feel lucky and grateful. It certainly isn’t a goodbye for folks in Microsoft and especially in the community - we’ll meet again soon.

Albert Shum, the director for the Studio is the most accomplished and impactful design leader I’ve met at Microsoft. On our last conversation, he told me something I’m closing this blog post with - “it’s all about the team and the people in the team - work is fun and all, but at the end it’s about our lives, family and the people who matter to us. If we can have you take a seed from what you learned here in the Studio and plant it somewhere else, and have you grow something amazing and different, that’s what this is all about.” 

… and so that’s what I’ll do