Have you ever noticed how great products have one memorable screen – the one screen that highlights your product's unique value and gives your prospects that "Ah ha" moment? In our work with clients, UEVision has come to call that the "Killer Screen." Let UEVision show you how to find that "killer screen", optimize it to really create a "wow factor", and make sure you have that one killer screen in every one of your products and demos. Highlights of this educational and complimentary webinar include: ~ Which screen is the "Killer Screen"? Let us help you identify the screen (or two) that sells your product. ~ What makes for a "Killer Screen"? Tips and tricks for enhancing the design of the "Killer Screen" so that it wows your prospects even more. ~ Does your "Killer Screen" work? Does it capture the imagination of your customers and make them want to see more? We'll show you how you can you test the "Killer Screen" design with prospects and customers to ensure that it's delivering the desired effect. With hundreds of demos and product design projects behind us, we know how to design the killer screen. You'll leave this one-hour session with valuable practical tips and guidelines you can use to evaluate and optimize your killer screen so that it can sell your product faster and more easily.

1. Usability Webinar SeriesThe “Killer” Screen: How One Well-Designed Screen Can Sell Your Product

2. About Sarah Kling Sarah is the CEO of UEVision, Inc. With over 12 years of experience designing software systems and web applications, Sarah is a leading authority on user-experience enhancement. Prior to founding UEVision, Sarah served as user experience consultant, usability evangelist, and team leader for a number of enterprise and business-to-business software companies, including Saba, E-Stamp, and Inxight Software. Sarah specializes in designing the enterprise user experience by adapting user-focused design practices to the specific requirements of enterprise software systems and the needs of their users. She has led a variety of successful initiatives to integrate usability "best practices" with the product development process to produce enterprise products that are practical, efficient, visually appealing, and highly usable. Sarah holds an AB from Stanford University and has studied usability and human factors at the University of California and UC-Santa Cruz. She is a member of the Association for Computing Machinery (ACM), the Usability Professionals Association (UPA), and the Bay Area special interest group in user interface (BayCHI).

3. About UEVision UEVision is the only user experience design company with the breadth of expertise to deliver cutting-edge business, enterprise, and consumer product user experiences. Based in San Francisco, UEVision designs and delivers the perfect product user experience. UEVision's customers have typically experienced higher profitability on their product launches and the ROI on UI investment typically is up 1000%. For more information, please visit www.UEVision.com.

5. IT Hardware and Software Configuration

6. CRM Systems

7. Business AnalyticsWeb-based application feature design: Role-based dashboards and scorecards Content management systems and repositories Data analytics and visualization Experience with multiple web technologies and platforms (portlets, AJAX, JSP, JSF, etc.)

8. Agenda Introduction The “Killer” Screen: How One Well-Designed Screen Can Sell Your Product Identifying the “Killer” Screen for your Product or Site Common Traits of “Killer” Screen”? Examples of “Killer” Screens Which screen is the “Killer Screen” for your product or site? Designing Your “Killer” Screen: Tips and Tricks Q & A

10. Have you ever noticed how great products have one memorable screen – the one screen that highlights your product’s or site’s unique value and gives your prospects that “Ah ha” moment?

11. In our work with clients, UEVision has come to call that screen the “Killer Screen.”

12. This webinar will show you how to:

13. Identify that “killer screen” in your product or on your site

15. What Makes a Screen a “Killer” Screen? What makes a screen a “Killer” Screen? Since all products and sites are different, there’s not just one simple recipe. In this section, we’ll examine multiple “Killer” screens in more detail, including: The common traits of “Killer” screens Examples of “Killer” screens How to identify your “Killer” screen 8

16. Common Characteristics of “Killer” Screens A “Killer” screen… Shows What it Does - Immediately It does NOT require a whitepaper, 15-minute tutorial, or 30 slide deck to make it clear to customers and prospects what the product or site actually does. Elicits the response, “Wow, I get it!!” Conveys Clear Value Enables customers and prospects to see that your product or site will quickly be useful or interesting to them. They can “put themselves” into the product or site to see where they can immediately reap benefits by buying or signing up. Answers the question, “Why is this useful to me? Calls Customers to Action Customers and prospects see it and want to start typing or clicking immediately to interact with it. Elicits the response, “How soon can I have that?” 9

17. Examples of “Killer” Screens Let’s walk through some excellent examples of “Killer” screens in products and sites you may already know… Google Maps and Search Trulia H&R Block Tax Cut Xobni The iPhone Mint.com Basecamp Yahoo! Finance Geni.com Shipwire: The Product Configurator Fujitsu Interstage BPM: Workflow Creator 10

18. Google: Maps and Search 11 Shows me what I want now … and in the next 30 seconds

19. Google: Maps and Search Why they are “Killer” screens: Gives me what I want now: Googling an address instantly produces a map as a search result Searching instantly produces results that clearly match my criteria in a way I can understand Anticipates what I want next: Street view shows me what location looks like Directions are ready for me to make the address start- or end-point Listing of nearby businesses 12

20. Trulia: Home page 13 “My” real estate answer machine

21. Trulia: Home Page “My” Real Estate Answer Machine Why this is a “Killer” screen: My House Provide my preferred location and price range – to get aggregated results, across realtors Filters I care about, but can change: “Price Reductions” “Open Houses” My Information Housing statistics dialed to my target location Personalized searches and alerts 14

22. H&R Block TaxCut: Step 1 15 Simple questions, instant pay-off

23. H&R Block TaxCut: Step 1 Why this is a “Killer” screen: Asks Me Simple Questions What I need to know when: Simple step-by-step questions with clear answer options Transparency: FAQs along the side for the “back story” to the questions Demonstrates Instant Pay-Off Tax refund or tax due – screen counter updates in direct response to my input 16

24. Xobni Making sense out of my inbox ... Builds on what I know 17

25. Xobni Makes sense of my email inbox Search across contacts, emails and attachments Automatically configure ‘networks” based on emails sent and received Builds on what I already know Companion panel to familiar Outlook screen Integrates my Outlook communication with social networks I already use: Facebook, LinkedIn etc. 18

27. Tactile: Playful, intuitive interaction

28. Encourages “gut-level” interaction – learn as you go!

34. Shipwire Shipping Configurator Why this is a “Killer” screen: Shows the “Step-by-step” of how to configure the product shipment Five Configuration steps are differentiated visually Visual configuration with drag-and-drop User drag and drop shipping properties in the appropriate step – in any sequence they wish Visual shipping configuration is the value proposition in action 29

36. What is your “Killer” screen? Every product or site has (or should have) a “Killer” screen Do you know what your “Killer” screen is (or should be)? What is the one screen (or two!) that you already know sells your product or site to prospective customers and visitors? If you already know what your “Killer” screen is…ask yourself: Could it be time for a refresh or a tune-up? If your screen design is older than 2 years, it probably is time for a refresh. Is your competition imitating it such that customers and prospects may be confused by your product and theirs? 32

37. What is your “Killer” screen? (cont’d) If you are not sure what your “Killer” screen is: What is the one screen in the product / site that best conveys the value proposition? For example: Is your sign-up / start up process very simple and clear? Does your dashboard or portal page show clear and easy information? Is there one key feature that users will use over and over again in the product that makes their lives easier / better / faster / smarter? What one screen would you add to the product / site based on: What your competitors are doing or showing that gives them an edge over you Customer feedback and requests Feedback from the sales, marketing, or support teams And if you don’t think you have a “killer” screen yet, we’ll tell you how to design one in the next section. 33

38. A Real-Life UEVision Vignette: The “Killer” Screen in the Sales Process UEVision’s Client X is a stealth mode startup with a hardware and software solution designed to revolutionize one aspect of IT networking. Client X’s CEO has identified a single “killer” screen in the product: This single screen will show the before and dramatic after effects of Client X’s solution on the network. The goal of the screen is to show it in pre-sales and demo situations to convince prospects of the singular value of Client X’s product. The design UEVision is producing for this screen focuses specifically on showing “before and after” information and visualizations – and nothing more. 34

39. The “Killer” Screen: How One Well-Designed Screen Can Sell Your Product Designing the “Killer” Screen: Tips and Tricks

40. Designing the “Killer” Screen: Top 5 Tips Ready to design? Here are tips and tricks to get you started: Tip #1: Distill the “core” features, functions, or benefits that need to be conveyed on this screen. Focus on the features that convey the value proposition of the product or site. Cut mercilessly if the functionality is not needed on this screen. 36

41. Tip #1: Distill Core Features 37 “Distilled”: Google Maps “Undistilled”: Google Wave

42. Tip #2: Validate Selected Features Validate the selected features and functionality by interviewing your customers and target prospects and users about what would be most useful for them. Avoid the urge to only talk with internal team members and stakeholders – as knowledgeable as you all are, you are also too close to the product to be objective without the balance of external customer input. 38

43. Tip #3: Pick a Visual Priority Pick a single “visual priority” or focal point for the screen design. When customers and prospects see the screen, their eyes should be drawn first to a single visual priority point on the screen. This point is called the “visual priority” and should be where the eyes should be drawn. HINT: It should never be your company logo. 39

44. Tip #3: Pick a Visual Priority 40 Correct Visual Priority: Geni’s ‘You – Start Here box’ Wrong visual priority: Ancestry.com’s Lifestyle image of “Alton Woodman” and his story.

45. Tip #4: Use Experts to Design It Use experts such as UI designers, interaction specialists, and visual designers to create the screen design. Designing the optimal “killer” screen is a task for those who are trained to interpret customer and user needs and requirements as viable, usable designs. If you have such designers in house, be sure to involve them. If not, we strongly recommend finding an outside expert to help consult on the design – it’s worth the time and money. 41

46. Tip #4: Use Experts to Design It 42 Designed by User Experience Experts Designed by…engineers

47. Tip #5: Don’t Try to Re-Invent the Wheel Don’t attempt to re-invent the wheel for the “Killer” screen unless your entire product truly is a new form of the wheel (for example, the iPhone). If possible, use granular design patterns and concepts that users can easily grasp, so they spend their time being wowed by your solution rather than attempting to figure out why you’ve approached Remember -- Less really is more when designing the “Killer” screen. 43

48. Tip #5: Don’t Try to Re-Invent the Wheel Example: Google revolutionized search, not by creating the “search field” concept, but by removing all the other noise and distraction from the page and ensuring the search produced helpful, readable results. 44

49. Other Useful Design Thoughts to Consider Where is the “Native” UI opportunity in your product: Are you putting large analog forms online? – Consider step-by-step question/answer wizard. EXAMPLE: H&R Block’s question/answer to file tax return Are you trying to get users to sign up? – Create an “instant pay-off” experience that will invest users first, hold sign-up till the transaction EXAMPLE: Geni’s three form fields to build a family tree Does your product/service have a well-known visual metaphor that explains it? – Build a metaphor-based UI. EXAMPLE: Yahoo! Finance charts, Shipwire’s Product Configurator 45

50. Validating Your “Killer” Screen So you’ve designed your “Killer” screen and you’re ready to build it in the product or push it on to the site…orare you? Test, test, test the design before you build and release Mock up the design and test it with target users / customers in focus groups, one-on-one sessions, or even usability tests. Use the mockups to both sell the screen internally AND externally. For websites: Use A/B testing: Drive portions of your visitors towards the “killer screen” and then track behaviors through web analytics and surveys. The key validation question to be answered through testing: Does your “Killer” screen capture the imagination of your customers and make them want to see more? Do they “get it”? 46

51. Show it to the World Your “Killer” Screen is now ready…don’t be afraid to share it with the world. Include it in all customer-facing materials such as: The corporate website Demos Collateral (print and electronic) The goal is to make the “Killer” screen the ubiquitous face of your product that gives your customers and prospects the “Ah Ha!” moment. 47

52. In Conclusion Great products have one memorable screen – the one screen that highlights the product or site unique value and gives your prospects that “Ah ha” moment. The “Killer” screen is not limited to just the known “great” products and sites. Every product and website can have a “Killer” screen that shows the value proposition and gives customers and prospects a clear understanding of how they can realize value with your product or site. Identifying and optimizing the “Killer” screen in your product or website can be a straightforward process. You and your team can design, test, and validate the “Killer” screen to ensure that it wows your customers and gives prospects the “Ah Ha!” moment. 48

53. 49 Q & A Questions? Thoughts? Ideas?

54. Thank you for attending! If you would like more information or if you want to discuss usability ideas, please contact me: Phone: 415.325.4905 Email: sarah@uevision.com www.uevision.com

55. Usability Webinar SeriesUI Design Best Practices

56. Overview: The Cost and ROI of Usability Inadequate use of usability engineering methods in software development projects have been estimated to cost the US economy about $30 billion per year in lost productivity.2 Bad design on the Internet is estimated to cost a few billion dollars more.1 But, a number of studies have shown that ROI on a UI investment is typically up 1000%.3 This method was first published by an IBM usability researcher, who showed that spending $60,000 on usability engineering throughout development resulted in savings of $6,000,000 in the first year alone. A reduced number of product design iterations provides significant cost savings to the organization. Once an application feature is coded, it can cost up to 10 times as much as it does to correct a UI problem during the design process. The standard cost-benefit ratio for usability is $1:$10-$100, so for every $1 spent on usability, you can expect to save $10 to $100 later in the product lifecycle.1 52

58. The systems set the standards by which users may be used to working

60. E-commerce

61. Portals

62. Search

64. Checkout flow

65. Managing payment settings and options

67. Integrated features and functionality

68. Mail, Messaging, Photos, etc.

69. Community-focused portal functionality

71. Focused search box

72. Organized search results54

75. Integrated chat

76. Rich Ajax-based interactionsMaps.google.com Layered user experience with many options for how the data is displayed Simple, easy to understand interface Rethinking how people use maps Not just for directions, but also for traffic Directions are no longer just text, can see the neighborhood before you get there 55

77. 56 Best Practices: “Web 2.0” Type Applications Multiple Tabs for Multiple Windows Task-oriented UI and Flows Orient the user to his common tasks and goals DO NOT expose the database schema in the UI and letting the user wade through it Role-Based UIs Show the UI as applicable only to the user’s role Start the user with a role-based or personalized dashboard when they start the system Horizontal Contextual Navigation Use a horizontal menu or tab structure to present navigation and menu choices Show the user only those menu options that Allow for infrequently used menu options to be hidden Fix the navigation bar so when user scrolls it does not disappear Filtering and Searching of Onscreen Information Allow quick-search short cuts onscreen Provides filters on long tables (e.g. column header) Allow users to search of table data onscreen Provides sorting functionality for primary, secondary sorts

78. 57 Best Practices: “Web 2.0” Applications (cont’d) “Smart” Forms – Forms that help the user by: Auto-filling for fields with lists (e.g. user types 2 letters and field prompts with options) Data pickers (date, time) – provide a Calendar and Clock widget as well as allowing the user to type in the field Error Prevention – field validation at time data is entered Field and label color changes and highlights for errors, required fields treatment Provide guided wizards For infrequent or complex-stepped tasks What’s This? Contextual help on screens, elements Customizable End User UI Let the user controls as much of the experience as possible by determining: Default landing pages Login settings Dashboard data displays Skins and colors Shortcuts and “Favorites” to display onscreen

80. Users can easily get marketing campaign and sales/lead information easily (also very exportable)

84. Users can drag and drop, edit inline, open and close panels, and see data and information update asynchronously58