ux.artu.tv » Blog Archive » 24 Weeks of Windows Phone Metro Design | #3 Ideation and Concept

24 Weeks of Windows Phone Metro Design | #3 Ideation and Concept

24 Weeks of Windows Phone Design Index

Twitter

In the previous post, The Design Process of a Windows Phone App, we discussed the importance of defining a theme for your Windows Phone application. The ideation stage helps you refine your theme and generate ideas to help enhance the user experience around that theme. We talked about the value of selecting a user experience as a theme, like dining, running or sailing instead of thinking of apps in terms of APIs or RSS Feeds available out there.

The Ideation and Concept stage is quite fun and it is best played with other people! - There are 3 key stages in the Ideation & Concept phase: 1) Brainstorming 2) Exploration and 3) Consolidation. In a nutshell during the Brainstorming stage you generate tons of ideas, during the Exploration stage you dissect and study many of those ideas (but not all) and in the Consolidation stage you decide which ideas will move forward to become part of your Windows Phone app. Only a few of them make it through alive.

Ideation and Concept Stage - Windows Phone Design Process

Brainstorming

Brainstorming is usually the first stage when designing a Windows Phone App (or designing anything for that matter). This stage is all about freedom of thought. It’s about coming up with tons of ideas, even if some are crazier than others. It’s about thinking outside of the box to come up with innovative solutions.

The best tools for Brainstorming are storytelling and tons of multicolor sticky notes although sketching and moodboards help too. To begin with, this article has 10 really good tips for effective brainstorming.

In general you would use brainstorming to define two things: 1) the general idea for your app and then later 2) the features for your app.

Brainstorming can help you come up with cool ideas for Windows Phone apps that provide unique value to the user and that differentiate from other apps in the Marketplace. Once you have defined the general goal of your app, then Brainstorming can help you generate and explore specific ideas (features) for your app.

First, you will need a theme or general (broad) user scenario(s) to address. One of the typical things we see here is the almost instinctive approach of “creating an app just because there’s an API or web service available out there”. So we end up with dozens of Yelp!, Twitter or Foursquare clients. While there’s nothing wrong attempting to create the best client for any of these services, the real opportunity to innovate is found by thinking in terms of user experiences and not APIs or Web Services. So, instead of saying “I will create an app based on the Yelp! API“, say: “I will create an app to aid the user in the dining experience“. Decide what user experience you want your app to be a part of, based on your business area, your personal preference, your hobby, or something you hear people really want. You will find that most successful Twitter (Seesmic) or Foursquare (4th and Mayor) clients are the ones that think beyond the API.

Another common approach we see at this stage is some people condition themselves from the very beginning. For example they begin the Ideation stage knowing for sure they will create an app “to check the price of stocks“. So we end up with yet another stock trading app, or another RSS Feed reading app. The key to come up with good and original ideas for apps is to think of a user experiences. So instead of thinking “I will create a stock portfolio app” think “I will explore how to help the user in the experience of stock trading” - ah! Much broader, gives you more room to come up with ways to contribute to the experience.

A great brainstorming technique to accomplish this type of approach to generating ideas for Windows Phone apps is Subjects + Objects + Verbs. I remember we put this one together back in Architecture school and it was fun! Last year we started using it for UX design as well.

Subject + Objects + Verbs

We hosted this group brainstorming technique during the Windows Phone Design Day tour. It consists of having a group of people write a bunch of Subjects, Verbs and Objects related to a user experience and then choose some of those words to put together a new scenario. This exercise ignites creativity because it forces you to come up with solutions for scenarios based on words you didn’t write yourself - scenarios you would have never come up with yourself if it had not been for the collective consciousness of the group.

  • Get some multicolored sticky notes and markers. Preferably all the markers have the same tip width and the same color (black). Sharpies work great.
  • Get 3 different colored sticky notes and write the word Subjects in the first one, Objects on the second one and Verbs on the third one.
  • Paste these 3 sticky notes on a big wall.
  • By now you should have defined a theme for your Windows Phone app - remember to think of user experiences like dining, sailing or working out (no specific solution at this time). We’ll be using dining (eating at a restaurant) in this example.
  • Ask participants to write one Object, one Verb and one Subject related to the activity or experience of “dining”. One word for each, on separate sticky notes and to paste them below the header sticky notes you initially created.
  • This will fill up the wall with a bunch of Subjects, Verbs and Objects related to the experience of dining (or any other theme you and your team chose like running, sailing…)
Subjects, Objects and Verbs
  • Next step is to divide the group into smaller teams of 2 or 3 people (or 1 if few team members) and ask them to select 3 words they like as a team: One subject, one verb and one object. Encourage them to select words that trigger ideas or imagination for user scenarios. Some teams struggle with agreeing in which words to pick. A tip here is for each team member to select one word so they end up with one subject, one verb and one object. In reality you could assign random words to each team - this will force them to think outside the box and come up with unique app user scenarios to solve.
  • Once teams have selected their 3 words, they are ready to start generating ideas about how to solve or address the scenario that magically appears by selecting a random subject, verb an object. For example:
    • Vegetarian Girlfriend + Yell + Double Cheese hamburger
    • Children + Play + Food
    • Chef + Cook + Tomatoes
    • Grandparent + Propose + Check
    • Lady Gaga + Meet + Dishes
  • Participants then have to come up with scenarios that are inspired in those 3 words, for example, Gaga + Meet + Dishes… we know we won’t design a Windows Phone app specifically for Lady Gaga right? J and unless we are huge fans we won’t create an app focused on Lady Gaga alone but what if we translate Gaga to a broader concept like “Famous Personality”. So, Famous Personality Meets Dishes. What if we created an app to track personalities who attend different places for lunch or dinner? There could be maps and personalities and when users spot someone famous, they tag that person. I’m not talking about a paparazzi app J but just an app that would give users an idea of how possible it might be for they run into their favorite actress or hip hop rapper if they go to X or Y place for dinner or lunch. Hook that up to Foursquare and Yelp and you have some good APIs to support your user experience. Just an idea. It is important to encourage participants to feel free not to take the words literally but to extrapolate to whatever makes sense like in the case of Gaga which we elevated to Famous Personality or the verb “Yell” which could be broadened to “being upset in general” or “having a problem”. This idea of spotting personalities in restaurants is something I would have never come up with myself if it had not been for those words some other people in my group wrote down on those sticky notes.

Here’s another example with three words that really called my attention: Kids + Play + Food. I would have never come up with that scenario myself - I don’t have kids but thanks to 3 different people who wrote those words I now I have a scenario to work on. Kids playing with food in a restaurant can be a real problem. How could we help solve this scenario?

This is where some techniques described in Gamestorming can be helpful. Here is one example with the Impossible Scenario Brainstorming technique. Remember these are games so if you take it too seriously you won’t get far J no need to start thinking of how you will build the app or what backend server architecture you’ll need. Just have fun. In future stages you’ll have enough time to prioritize, explore technical feasibility and be picky with ideas. Right now just play this game with your team.

Impossible Scenario for Kids + Play + Food

A mother and father might have 2 or 3 kids that play with food and that’s a problem but an impossible scenario would be the same couple having 100 children! Impossible right? (I guess…) what would you do as a parent of one hundred children that play with food when taking them to a restaurant? Sounds like a nightmare - you’d have to know all their names, their preferences, who they hang out with, are some of the vegetarian, their age groups? Who are the most well behaved and the worst? Etc. As a caring parent of a 100 kids you’d know these things J that’s the impossible scenario. Now bring it back to reality: while it’s not really possible for a parent to take her/his 100 kids to a restaurant, it is indeed possible to have a 100 children (from different parents J) in a single restaurant or other public facilities like a museum - ask McDonalds or Chucky Cheese! Now translate all your “learning experiences” as a parent of one hundred kids and leverage those as the restaurant manager or the restaurant itself. How would a restaurant help these one hundred kids (or their parents) not play with food and make a mess out of the place? What if the app sponsors social activities while at restaurants, a sort of mini social media for parents to meet and get children to play activities together or simply for children to learn about other children’s cultures based on the other children who have checked in?

100 Children

Another technique to test your Object + Verb + Subject is Alternate World, where you’d say something like, what if the restaurant was on the moon? What would happen to a meat ball being thrown by a kid? I can see the meatball floating across the restaurant hitting a grumpy old man on the other side! This gave me an idea… What if your app becomes an actual game where children can make all the mess they want? With actual food from that particular restaurant? J Like throwing little Big Macs or McNuggets. If we have Fruit Ninja why not Messy Food. It kinda makes me thing of Angry Birds meets Fruit Ninja meets Cooking Mama.

One more technique is In Other’s Shoes. Here you have to pretend you are someone or something in the dining experience. Sure, you can act as the waiter and discover the dining experience from his/her point of view. This will help you open your mind to scenarios you would have otherwise not thought of. Allowing you and your team to think from a completely different point of view. Now, instead of being a person, think you are… I don’t know, the spaghetti plate J think of how you got to the restaurant, the ingredients that made you who you are, how you were cooked, served, eaten. This will also expose you to the dining experience from a point of view that you would have otherwise not thought of before. Does this mean we will create an app for spaghetti plates? Not necessarily… but having explored the lifecycle of spaghetti will have taught you more about what happens behind the counter, back in the kitchen, with inventories or storage in the restaurant and I’m sure that’d open new ideas for apps.

Spaghetti Plate

Very different approach from thinking first of the availability of an API out there right? :) APIs, Web Services, and all those goodies should just be tools to help your app contribute to making a user experience better.

There are some great brainstorming books out there like Gamestorming and Thinkertoys. These tend to be more focused on brainstorming techniques for marketing/business groups (in my opinion) but you can adapt some of those techniques for design groups too.

Play these activities (that’s the word - play) with your teammates or with friends and family if you are an independent developer. These are games to come up with ideas. You can’t be too serious at this stage. Things will get serious on the next few stages.

Pecha Kucha

At the end you can present your ideas to your team (or some friends) using the Pecha Kucha (Chit Chat in Japanese) presentation model where you have 20 slides and 20 seconds per slide to present a summary of your ideas. This model is great as it will force you to remove garbage and noise and leave the best ideas. It will also force you to “start” bringing those crazy ideas down to earth.

Pecha Kucha

 

Exploration

In this stage you and your team Explore the feasibility (Business), desirability (Experience) and viability (Technology) of the ideas you came up with during the Brainstorming stage. I will focus on Experience in this post as I’m sure if you are a developer or a product/marketing manager reading this post you will know much more than I do on how to explore the technical viability of ideas.

When it comes to Experience, the goal is to take some of the ideas generated during Brainstorming and dissect, stretch and test them. You can do this with some of the following tools:

Sketching

Storyboarding

Paper Prototyping

Storytelling

As mentioned previously, design is not a one shot activity - not a “one try” type of activity. Design is a process where we take shapeless blobs of concepts and ideas and we start working them out, exploring them and treating them as clay. Little by little we get to know these ideas better to the point where it all starts taking shape. Sketching, Storyboarding, Prototyping (focusing on Paper Prototyping in this Ideation stage) and Storytelling are any creative person’s tools that allow for idea exploration.

“Every block of stone has a statue inside it and it is the task of the sculptor to discover it.” - Michaelangelo

 Sculpting Process

Sketching & Storyboarding

The boxing glove technique illustrates precisely what sketching is all about, particularly during this exploration stage.  You do not need to become an artist to convey ideas with sketches. In fact during early sketching phases it works even better to be more abstract and generic with your strokes. That’s what a boxing glove (or better yet, a thick pencil or marker) will help you accomplish. Try the following exercise: get a black marker (like a Sharpie) and a sticky note (one of the little ones) and try to sketch a full Windows Phone panorama in there. The paper size and stroke thickness will immediately restrict you from adding detail and that’s what sketches should be, general non-detailed manifestations of your ideas.

Sketching

Sketching: the Visual Thinking Power Tool by Mike Rohde is a terrific post about sketching with many great links and resources. The Messy Art Of UX Sketching by Peiter Buick is a must-read UI sketching post with lots of practical techniques.

This is a great series on sketching tips by Anders Toxboe

User interface sketching tip 1: Drawing rectangles and corners

User interface sketching tip 2: Drop shadow

User interface sketching tip 3: Use a thick pen

User interface sketching tip 4: Get your arm off the paper

User interface sketching tip 5: Constrain yourself

Finally, these are 50 sketching resources for user experience designers - There are some nice articles, videos and presentations there for those of you who want to go deeper into sketching.

Paper Prototyping

Paper Prototyping means literally using paper to build an “interactive” (or more like a guided I’d say) interactive experience. You can produce a paper prototype by sketching on paper. For Windows Phone apps you could sketch it all in rectangular shaped paper. I personally enjoyed sketching Panoramas, Pivots and Pages using 3″x 5″ sticky notes. They are cool because you can stick some next to each other and layout Panoramas with 4 to 6 panels, or Pivots with 3 to 6 items. If you are doing user testing with your prototypes then you might want to formalize the presentation a bit more and sketch in letter size page. How do you make objects interactive? Well, you literally sketch-out the different screens or UI modules that would be displayed or change when the user “interacts” with them. In this guided prototype you would aid the user by pasting, removing, changing parts of the paper prototype depending on what the user wants to do. This is a great way to start testing concepts early enough and it’s cheap not because it’s paper but because in one 15-60 minutes you can put together a good paper prototype vs investing hours, days or weeks building something interactive. Remember at this point we are still in Ideation technique and we are still giving shape to the “shapeless blob of ideas”.

Another way to do paper prototyping is something I learned from Jared Potter, a Sr. Design Integrator in the Studio. He sketches Panoramas, Pivots, Pages and then takes a picture of them with his phone. He then emails those photos to himself and imports them all into Expression Blend (you could also use Powerpoint…). In Expression Blend he then creates buttons on top of his sketches, over areas where he drew interactive elements like Push Buttons, App Bar buttons, List items. He then uses Behaviors to enable the buttons to take him to other screens (other sketches). In 15 minutes he has a full paper prototype (interactive) working in Blend and he is ready to start testing some of his ideas. This is a sort of hybrid paper-digital prototyping technique but is just as cheap (considering you have Blend, Powerpoint or similar J).

Paper Prototyping by Shawn Medero is a great read with theory and practical tips. Paper Wireframing is also another good read. Notice in this case, the author explain a technique that uses pre-created wireframe-like UI elements. They print these out and then they compose UIs. It is still paper prototyping although they do not sketch things out with pen/pencil - instead they use these pre-created UI controls and patterns. Should I create some of these UI control stencils for Windows Phone? J Ok, will do.

These are 3 great articles about paper prototyping theory - not many practical tips but good reads to understand the value of doing low fidelity prototyping.

Paper Prototypes: Still Our Favorite

Looking Back on 16 Years of Paper Prototyping

Using Paper Prototypes to Manage Risk

Storytelling

Some people (including myself) would argue this is the most important of the tools for ideation. Storytelling is indeed fundamental for the whole UX design process. Storytelling allows you to convey scenarios and describe users, problems and solutions in a way that makes sense, that engages people and helps them immerse into a future world where you app exists. Not only it helps you and your teammates and clients understand your vision for an app but it helps in digging deeper into the app and making it more interesting. Good storytelling is also what makes your app sell… selling it investors, to teammates, clients and users. Flat story telling will yield flat apps. Structured and engaging storytelling usually renders in apps that are unique.

A good way to explain the value of storytelling in user experience design is with words:

“Storytelling traditionally begins with a “Once upon a time…” opening, and then a storyteller’s silent pause to gather his thoughts. The traditional openings, of which there are many (often with responses from the audience), were “rituals” that served as a signal that the teller was suspending “time and space” as we know it and transporting the audience to a world of imagination and play.” - Barry McWilliams

“As experiences now span multiple media, channels & formats, we need to look to narrative, interaction, emotional elements to sustain transitions across channels and formats” - Joe Lamantia, Beyond Findability Workshop at IA Summit 09

“To create a truly memorable and satisfying experience, a UX designer needs to understand how to create a logical and viable structure for the experiences and needs to understand the elements that are important to creating an emotional connection with the product users.” - Cindy Chastain

“If emotion and meaning can emerge from the harmonizing of elements that make up a story, then to design for optimal experiences we need a story by which to harmonize the elements of a product, service or system. - Cindy Chastain

Storytelling is the foundation for every other way of communicating User Experience and User Interface ideas. Stories can be told with your voice, sketches, storyboards, moodboards and/or videos.

Telling User Experience stories is not too different from writing movie scripts or novels. Similar elements of storytelling exist for developers and designers to craft engaging and revealing details about user experiences. Common elements of storytelling are: Theme, World , Character(s) , Props (Objects),  Story(ies)(Plot).

Theme is the one sentence that describes everything. Your foundation. Your mantra. The phrase you and your team will live by. Every scenario, feature, decision, you take about your app needs to pass the Theme filter - the Theme validation. World is the setting, the landscape, the room, the street or in the case of digital experiences it’s also screens (of different sizes), or platforms like phones, tablets or even Facebook, where these digital experiences occur. Characters are the Subjects or (personas) or other beings that participate in the experience.

Props (Objects) are physical or digital assets that complement the user(s) in their experience. Stories define Actions are the relations between Subjects and Objects.

In addition to the elements of a story, the structure is also important. You will find different story formats have somewhat different structures. A basic story structure consists of: Setup, Confrontation and Resolution. So, when defining and telling a user experience story, begin by laying out the users and their context. You can then establish their problem or goal and finally explain how this scenario is solved with the use of your app. The biggest risk of stories is for them to be flat - instead, tell stories that have spikes of revelations and aha moments, perhaps everything seems lost and then your feature solves it all.

Do not write flat stories

You can express user experience stories by writing them down and by using some sort of visual media like sketches in storyboards and/or moodboards. Also note that storytelling in User Experience design is multidimensional meaning there are different levels of the experience for which you can write a story. First you might want to write the top level app end-to-end story. Then you might want to write a story to describe the top feature buckets. Finally you could write stories for specific features.

A really valuable technique I learned while doing marketing is to write mini-stories called elevator pitches which is basically being able to convey a story in 30 seconds or less. If you cannot describe your app, your core feature area or a specific feature in less than 30 seconds then chances are you have not yet got a hold of the scenario or feature and you need more time to explore it.

“If you can’t tell your app or specific feature story in 140 characters, chances are you need to do more exploration before continuing with the process.”

An even more effective technique I’ve been using lately is to describe your app, your core feature area or specific feature in today’s world elevator pitch standards: Facebook status and Tweet. So try writing a mini story (really nano-story J) for the 420 character limit for Facebook status and then a 140 character mini story for Twitter. If you cannot express your app or feature with these limited set of characters then just as previously mentioned, chances are you might not have yet nailed down the user experience thus more exploration is required. When teams have a conflict agreeing on a Tweet long story that describes their app or features of their app then it’s good to go back and talk more about the app or feature looking for the key elements it is contributing to the user experience.

Here are some good descriptions I’ve found in the Windows Phone Marketplace:

CocktailFlow

Tweet Browse, find and discover cocktails with a continuously growing collection of drinks.

Facebook Browse, find and discover cocktails with a continuously growing collection of drinks. The application features beautifully presented recipes and identifies cocktails that can be made from ingredients in your bar. It also gives suggestions on what ingredients to buy next to make additional delicious cocktails.

Seesmic

Tweet Seesmic lets you update and view multiple social networks in an efficient and powerful application.

Facebook Seesmic lets you update and view multiple social networks in an efficient and powerful application. Manage multiple Twitter accounts, your Facebook account, your Salesforce Chatter account and organize all your accounts, searches, trending topics and lists in your customizable “spaces” dashboard.

Experience Themes: An Element of Story Applied to Design was a terrific session presented by Cyndi Chastain at the IA Summit 2009 in Memphis. She talks about storytelling for user experience designers and developers. Better Writing Through Design by Brownwyn Jones is a good post that provide practical tips to better write user experience stories. Using Stories for a Better User Experience by Whitney Quesenbery explains the use of personas for writing stories as well as ideas to capture stories directly from users during testing sessions. Here is the Whitney’s presentation with notes and slides. Not directly related to user experience design but I thought this article on Conflict and Character within Story Structure was very helpful for me to understand the basic structure of stories - structure which can easily be translated to user experience storytelling.

A Note of Caution with… Babies

During the Exploration stage you will unavoidably face conflicts of interest and people will fall in love with ideas. Ideas are like babies, and babies can be so cute that you don’t want to let them go even when they turn out to be evil. So learn how to cut the cord and let ideas go if they prove (and that’s a key word here… prove) that they are not worth pursuing. At the same time, embracing some ideas and defending them whatever it takes is just as important. Without a strong sponsor in the team, a great idea might fall off the tracks and get lost forever. What we want to find throughout our Exploration is “evidence that proves” that this idea is worth pursuing or that it is not. In the process, the idea will mature and by the end you will have learned a lot about it. Notice it’s not the time to make this idea mature 100% but to get a feel for how feasible it is. I just read a tweet from a quote from Ed Catmull, President of Pixar: “The culture of Pixar is to protect an unformed idea“.

 

Consolidation

Where Brainstorming is all about freedom, Consolidation is all about taking decisions, about getting clarity and about reaching consensus between different points of view in the team. At this point the team will have explored and learned a bunch of ideas in detail. It will be easier for the team to take decisions on which of the ideas to further develop and take into the next stages. A good technique at this point is to use red and green dots or any other forced ranking technique. What we want to achieve here is remove ambiguity and have a clearly prioritized list of scenarios so that we can cut out the ideas that just don’t have technical, business and experience potential.

A forced ranking technique would be to give people $100 (fictitious J) and ask them to put as many dollars as they want next to the idea/scenario they believe should be brought forward and developed as part of the Windows Phone app. This will give people a budget and by doing so will make people think well where to invest their “money”. Some people might choose to split their voting investment in 5 parts - $20 each. Others will feel really strong about a particular idea and will put $45 on it and the rest split on other ideas. Some might split their investment in a 100 parts! But of course their “decision and influence power” will be greatly diminished.

At the end, depending on the results, define a benchmark and cut out all ideas below that benchmark. All the others become a prioritized list of scenarios for your app which will be further explored to turn them into features. Done! :)

 

Forced Ranking

Next Post #4 Hub & Spoke Navigation Model

In the next post we will explore the hub and spoke navigation model which is the basis for structuring Windows Phone Apps.

2 Responses to “24 Weeks of Windows Phone Metro Design | #3 Ideation and Concept”

  1. WindowsDevNews.com Says:

    […] 31 Weeks of Windows Phone Metro Design | #3 Ideation and Concept […]

  2. ux.artu.tv » Blog Archive » 24 Weeks of Windows Phone Metro Design | #6 Information Architecture for a Windows Phone App Says:

    […] refer to the Paper Prototype section of the #3 Ideation and Concept post of this series for more information on how to create Paper […]

Leave a Reply