Kickstart Your UX Design - From Concept To Prototype

KICKSTART YOUR DESIGN FROM CONCEPT TO PROTOTYPE Preston mccauley | @uidesignguide | uidesignguide.comSaturday, November 19, 11

ITINERARY • My background • Visions, values & goals • A practical UX process • Story planning • Creative thinking exercises • Planning preparation • Priority planning • Product sketching • Paper prototyping • Prototyping tools • Frameworks • Tips & tricks • QuestionsSaturday, November 19, 11

ABOUT ME • User experience designer • Built hundreds of apps • Business owner & consultant • Article writer and creator of uidesignguide.com • Project manager • Search engine optimization expert • Google analytics expert FLICKR:-DAV-F • Wordpress expertSaturday, November 19, 11

Why are you here?Saturday, November 19, 11

HOW DO YOU GET FROM HERE? FLICKR: ADAM L212Saturday, November 19, 11

TO HERESaturday, November 19, 11

WITHOUT ENDING UP HERE? FLICKR: Lee HaywoodSaturday, November 19, 11

THE SECRET’S IN THE PROCESS A Practical, Rapid UX ProcessSaturday, November 19, 11

What does it take to have a practical design process?Saturday, November 19, 11

A PRACTICAL DESIGN PROCESS INVOLVES: • Creative thinking • Critical thinking • Understanding business & customer goals • Clearly defining requirements & stories • Constraint recognition • Adequate planning • Practice • Speed • QualitySaturday, November 19, 11

Z WHAT DOES PRACTICAL UX ENCOMPASS? Values, Vision & Goals Questions & Definitions Ideas & Concepts Story Construction Workflows Sketching Mocks & Prototypes BE ZORRO Right the UX wrongsSaturday, November 19, 11

Values, Visions & GoalsSaturday, November 19, 11

WHY DOES THIS MATTER? VISION + VALUE = GOALSSaturday, November 19, 11

UNDERSTAND OUR PRODUCT VISION • How might this product be used? • Will audience usage change in the future? • What separates our product from others?Saturday, November 19, 11

UNDERSTAND OUR PRODUCT VALUE • Why will people want to use this product? • Does our product perform better than our competitors? • Can we market & sell this product? • Other...Saturday, November 19, 11

UNDERSTAND OUR PRODUCT GOALS • We want X amount of subscribers in Y time. • We want to make money. • Other...Saturday, November 19, 11

WHY DOES THIS MATTER? VISION + VALUE = GOALSSaturday, November 19, 11

GOALS DRIVE OUR PRODUCT PRODUCT GOALS STORIES =Saturday, November 19, 11

Ideas & PerceptionsSaturday, November 19, 11

WE ALL FORM PERCEPTIONS Keep this in mind: • Not everyone sees an object the same • We all form ideas about what something might be based on our own experience • Our brain looks for common patterns to build an answer that makes senseSaturday, November 19, 11

ACTIVITY: WHAT DO YOU SEE?Saturday, November 19, 11

ACTIVITY: WHAT DO YOU SEE? No sorry, it was actually a man in a pizza costumeSaturday, November 19, 11

ACTIVITY: WHAT DO YOU SEE?Saturday, November 19, 11

PRACTICAL UX DEPENDS ON ALIGNING IDEAS & PERCEPTIONS Keep this in mind: • Not everyone sees an object the same • We all form ideas about what something might be • Our brain looks for common patterns to build an answer that makes senseSaturday, November 19, 11

Questions, Definitions & StoriesSaturday, November 19, 11

ACTIVITY TIME: What’s the story?Saturday, November 19, 11

ACTIVITY: WHAT’S THE STORY? Write a one sentence caption for the image below Be creative! Be funny!Saturday, November 19, 11

YOUR PRODUCT SUCCESS DEPENDS ON STORIES Keep this in mind: • The length of the story • The time you spend writing a story • Overlap in stories • Keeping the story short, sweet, and simpleSaturday, November 19, 11

ACTIVITY TIME: Thinking inside the boxSaturday, November 19, 11

ACTIVITY: THINKING INSIDE THE BOX PART 1: Each group has A box Can you figure out what’s inside? TIME: 1 MINUTE • You aren’t allowed to open the box! • You aren’t allowed to throw the box! • You aren’t allowed to look in the box!Saturday, November 19, 11

ACTIVITY: THINKING INSIDE THE BOX Within the given constraints, what did you learn? • How difficult was it to figure out the contents? • What other methods did you try that were within the given constraints? • DO NOT OPEN YOUR BOX!Saturday, November 19, 11

ACTIVITY: THINKING INSIDE THE BOX PART 2: 1. Have one member of your group take the box turn their back and secretly look at the contents. 2. The rest of the group members will each take turns asking a yes or no question. Continue asking until the time is up or until someone correctly identifies the item. 3. 1 member should record the # of guesses made TIME: 5 MINUTESSaturday, November 19, 11

AND NOW A WORD ON CONSTRAINTS CONSTRAINTS • Better defined stories & requirements • Clarifies what not to investigate • Controls budget, time & resources • Working within constraints helps make your UX practicalSaturday, November 19, 11

LET’S REVIEW • It’s extremely hard to identify something completely unknown without relying on senses • Questions help to bring about story definition • By challenging ourselves within constraints we are able to keep our story focused. Kokor welshbySaturday, November 19, 11

An in depth look at storiesSaturday, November 19, 11

THERE ARE GOOD AND BAD PRODUCT STORIES FLICKR: NUkiwi Kokor HekkusSaturday, November 19, 11

A GOOD PRODUCT STORY HAS THESE CHARACTERISTICS • A good story has clear definition • A good story gets to the point • A good story has minimal dependencies • A good story ties to a goal • A good story has “just enough detail” • A good story considers constraints “I need a mobile app that “The customer needs the system to allows lawyers to add, edit be smart enough to send an update and save case loads to an notification when client records are online repository while at duplicated. trial”Saturday, November 19, 11

A BAD PRODUCT STORY HAS THESE SYMPTOMS • A bad story is way too large (many sentences) • A bad story is unclear and cryptic • A bad story has hidden meaning • A bad story is open ended • A bad story can’t be completed • A bad story has no time constraint • A bad story has too much detail I need to have a mobile I need a web page that shopping app works with twitter.Saturday, November 19, 11

AND NOW REAL HORRIFIC PRODUCT STORIES Client: “I need a mockup for my new website.” Me: “OK, I need to ask you some questions to ﬁgure out your audience, style etc.” Client: “Can’t you just build me a web site and then we can look and decide if I like it?” Me: “We could do that but what works is to get a good understanding of your business, products, etc...” Client: “Oh, I thought this would be easier. I’ll just try another web designer, thanks.” Me: “Ok, nice talking to you.” Client: “On my web application I was wondering if you can use a happy pink” Me: “Can you be a little more speciﬁc: ” Client: “Oh you know, the pink on there now is like a slutty pink. I want a happy pink? You know?Saturday, November 19, 11

TIPS ★ If you suspect multiple functions in a story, try splitting them into separate stories. ★ A good story can quickly turn bad if a client redefines the story while it’s being worked on. Watch for this behavior! ★ I find that stories written specifically for UX focus on the following: interface design patterns, screen creations, usability testing, ux researching, pre and future planning. ★ Love your constraintsSaturday, November 19, 11

WorkflowsSaturday, November 19, 11

WHAT HAPPENS WHEN YOUR STORY GOES FROM: THIS TO THISSaturday, November 19, 11

UNDERSTANDING COMPLEX WORKFLOWS Workflows arise from themes in product stories • Mastering workflows is essential to decoding an elaborate customer experience • Understanding workflows helps bring about more story definition • Don’t skip mapping your workflows. It’s valuable to understanding interaction • Losing sight of workflows can de-rail your product and hamper usabilitySaturday, November 19, 11

EVERY PRODUCT HAS A STORY A single product could consist of hundreds of stories. I need to BUILD A MOBILE APP that allows customers to Monitor blood pressure daily A customer can use a custom blood pressure cuff connected to their mobile device to record BP each day. A customer should be able to see a chart of their results for a week, month, year.Saturday, November 19, 11

Possible Stories From Real ProductsSaturday, November 19, 11

A COUPLE OF SHORT STORY EXAMPLES FACEBOOK TIMELINE • Customer data should be recorded and displayed in a chronological format • A new book cover image will act as a treatment for an individual customers graph of time. • 3rd party API will be able to load data into the timeline feedSaturday, November 19, 11

A A COUPLE SHORT STORY EXAMPLES COUPLE MORE SHORT STORY EXAMPLES A FEW OF SHORT STORY EXAMPLES GOOGLE + • Customers on the Google+ network should be able to share stories, links, articles and updates to other +users. • Customers on the Google+ network should be able to create unique groups • We need a new and unique way to organize collections of peopleSaturday, November 19, 11

TIPS ★ Don’t focus on the interface mechanism (drop down, text box, etc...) ★ Make your stories understandable to an outsider ★ It’s OK to start with larger stories, but be sure to break them apart for easier planning ★ Stories tend to repeat with similar functionality, that’s OKSaturday, November 19, 11

ACTIVITY TIME: EXPLORING A PRODUCTSaturday, November 19, 11

PLANNING FOR SUCCESS The planning meeting can be the most challenging part of any product development.Saturday, November 19, 11

WHAT ARE WE BUILDING? Our company has decided to branch out into the social realm. Our CEO hears that this social management field is picking up and could become quite profitable.Saturday, November 19, 11

WHAT ARE WE BUILDING? You’re development team has been tasked with figuring out what this product could be. We want A product that allows single & groups of people to manage and act as social account managers for various social entitiesSaturday, November 19, 11

WHAT ARE WE BUILDING? Our Vision: The future will rely upon a brokering system of social networks and high profile celebrities, politicians, etc... will use these services to communicate with large fan bases. We Value: An easy to use product that has both a web & mobile capability. Account managers want to use the system on the go Our Goal: Is to become an industry leader in this field. We plan on having monthly & large corporate subscription plans.Saturday, November 19, 11

THE CEO SAYS “Can I have a list of customer features, priorities and some screen sketches by tomorrow?” We want a product that allows single and groups of people to manage and act as social account managers for various social entities such as google +, facebook, twitter.Saturday, November 19, 11

OUR PLANNING MEETING The goal of our meeting: We want to end our meeting with a clear set of feature stories, questions answered and priorities set.Saturday, November 19, 11

PLANNING MEETING BREAKDOWN In your groups • Part 1. 10 minutes to ask questions of the client – “ME” • Part 2. 25 minutes to brainstorm “the what” • Part 3. 30 Minutes to write your storiesSaturday, November 19, 11

PLANNING MEETING BREAKDOWN In your groups • Part 1. Ask your product owner questions TIME: 10 MINUTES • Take your own individual notesSaturday, November 19, 11

PLANNING MEETING BREAKDOWN In Your Groups • Part 2. Brainstorm – “what is this product?” TIME: 20 MINUTES • No sketching (yet) • Mind maps are fine.Saturday, November 19, 11

WHO DERAILED YOU? Each of your groups had a mole! • The Hater – “This person doesn’t like anything presented.” • The Time Waster – “They will do anything to prolong the time wasted in the meeting.” • The Control Freak – “They attempt to take control of the group, but nothing gets done.”Saturday, November 19, 11

PLANNING MEETING BREAKDOWN In groups of 2 • Part 3. Write your product stories. • Each group should have 10 stories TIME: 10 MINUTES • No sketching (yet) • Mind maps are fine.Saturday, November 19, 11

Let’s Take A Short Break: Get your priorities straight!Saturday, November 19, 11

CUSTOMER & BUSINESS BALANCE • Often times you don’t have say in the priority • It still helps though to remind the CEO, boss, client, etc... of values, visions and goals.Saturday, November 19, 11

ACTIVITY: BALANCE PRIORITIES Use the provided activity sheet and balance your features according to business & customer priority. TIME: 10 MINUTES • Each feature column can only use the numbers 1 – 5 once. • 1 is high priority, 5 is lowest.Saturday, November 19, 11

LET’S REVIEW ★ Did you notice any overlap points between customer and business priorities? ★ Did you run into difficulty ranking one story against another? ★ Questions ?Saturday, November 19, 11

ACTIVITY: Role-play your designSaturday, November 19, 11

THE CEO AGREES ON YOU PRIORITIES “I agree with what you have outlined. What does it look like? We want a product that allows single customers and customer groups to act as social account managers for various social entities such as Google +, Facebook, Twitter.Saturday, November 19, 11

ACTIVITY: ROLE-PLAY YOUR DESIGN Deadlines can hinder creativity. You have to train yourself to just start creating. In this activity we will randomly roll design patterns and build to our #1 priority.Saturday, November 19, 11

ACTIVITY: ROLE-PLAY YOUR DESIGN 1. Roll your 20 sided dice for the group. 2. Use the table to reference your rolled design pattern. Make a note of the pattern rolled. 3. Roll the 20 sided dice again and write down this design pattern. (re-roll if it’s a duplicate). 4. Develop a screen sketch individually using your two chosen patterns applied to our #1 priority 5. Create one for a web app & one for a mobile app. TIME: 15 MINUTESSaturday, November 19, 11

ACTIVITY: ROLE-PLAY YOUR DESIGN • Was it hard to just start sketching? • Did you find it hard to stick with your core design patterns? • Did you feel the time crunch? • Did you arrive at a viable design that you could improve?Saturday, November 19, 11

LET’S REPEAT THE PROCESS • Repeat this process for one more of our priority items. • Changing Constraint: you now have 10 minutes to complete this activity! TIME: 10 MINUTESSaturday, November 19, 11

TIPS ★ For complex stories it helps to create workflows to reveal secret traps in your product ★ The more you think the less you actually do. Put the pencil to work and you will find the hazy details become much clearer ★ I use this method if I am completely stuck on a subset of storiesSaturday, November 19, 11

LET’S REVIEW • We looked at the different types of interruptions that can happen during planning. • We looked at the complexity of workflows and the importance they hold to interaction. • We used creative roleplaying Kokor welshby to formulate a random design within given constraints. • We forced ourselves to work in tighter and tighter time constraints.Saturday, November 19, 11

Wireframes & PrototypesSaturday, November 19, 11

WHY WIREFRAME & PROTOTYPE • Justification to stakeholders • Visual representation for the non-technical • Helps to spur more creative thought • Digital wireframes may look more “professional” • Greater understanding of deep interaction • Hands on feel • Very quick to put together concepts and interaction • Sanity check to your workflowsSaturday, November 19, 11

TOOLS COMPARISON NAME COST LEARNING CURVE Flairbuilder 100+ Moderate Balsamiq 100+ Easy Axure 500+ Moderate-Difﬁcult Adobe Acrobat Pro 150+ Easy Justinmind Prototyper 500+ Moderate IPLOTZ 100-500+ Moderate Keynote 30 Easy - ModerateSaturday, November 19, 11

TIPS ★ Use what is comfortable ★ New tools come out every day, be sure to keep your eyes open ★ Never let your tool become a hinderance ★ Keep color out of the mock as long as possible ★ If it makes more sense to go to a prototype, don’t wireframe for the sake of wire framing ★ Develop an interaction language on your sketches or wires. This will help indicate interactions points.Saturday, November 19, 11

A quick word about frameworksSaturday, November 19, 11

FRAMEWORKS Frameworks can replace prototyping tools completely • HTML frameworks remove the coding repetition • Allow you to get to market quicker with near final HTML & CSS • Large open community support to help solve problems • Tremendous amount & varietySaturday, November 19, 11

FRAMEWORK COMPARISON NAME PRIMARY USE LEARNING CURVE Skeleton Web & Mobile 1- 2 weeks 960 Grid Web & Mobile 1-2 weeks Cabin Web & Mobile 1-2 weeks JQUERY Mobile Mobile 2-3 weeks JQTOUCH Mobile 2-3 weeks Sencha Mobile 2-4 weeks Phone Gap Mobile 2-4 weeksSaturday, November 19, 11

CONCLUSION sSaturday, November 19, 11

WE COVERED A LOT OF MATERIAL • Practice is going to help make any of these processes faster • It’s imperative to understand your values, vision and goals • Building goals to your product stories helps us gain product perspective and clarity • Craft good stories • Split stories when appropriate • Understand workflows is crucial to getting the application flow right. • Constantly be aware of your constraints. You won’t always like them but they will existSaturday, November 19, 11

WE COVERED A LOT OF MATERIAL • If you get stuck working on a product design. try an activity to gain fresh insight • Keep an eye out for the moles in your planning meeting. Remind them how important it is to stay on task. Every team member is responsible for doing this • It’s important to set aside time to learn to learn a framework for mobile. Industry usage is going to sky rocket. • Always try to have fun and enjoy the process! or else....Saturday, November 19, 11

OR ELSE... Evil Cat Will Get You Thank You All! Follow: @uidesignguide www.uidesignguide.comSaturday, November 19, 11

Kickstart Your UX Design - From Concept To Prototype

by Preston McCauley

Accessibility

Categories

Upload Details

Usage Rights

Statistics

Kickstart Your UX Design - From Concept To Prototype Presentation Transcript