UEVision Presents The "Killer" Screen: How One Well-Designed Screen Can Sell Your Product


Published on

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.

Published in: Technology, Design
  • Be the first to comment

  • Be the first to like this

No Downloads
Total views
On SlideShare
From Embeds
Number of Embeds
Embeds 0
No embeds

No notes for slide
  • Logistical Notes for this WebinarTo ask a question, please submit the question using the Question feature.For everyone attending this webinar, we are recording it and a link will be made available to all attendees after the webinar.
  • UEVision Presents The "Killer" Screen: How One Well-Designed Screen Can Sell Your Product

    1. 1. Usability Webinar SeriesThe “Killer” Screen: How One Well-Designed Screen Can Sell Your Product <br />
    2. 2. About Sarah Kling<br />Sarah is the CEO of UEVision, Inc.<br />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.<br />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 &quot;best practices&quot; with the product development process to produce enterprise products that are practical, efficient, visually appealing, and highly usable.<br />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).<br />
    3. 3. About UEVision<br />UEVision is the only user experience design company with the breadth of expertise to deliver cutting-edge business, enterprise, and consumer product user experiences. <br />Based in San Francisco, UEVision designs and delivers the perfect product user experience. UEVision&apos;s customers have typically experienced higher profitability on their product launches and the ROI on UI investment typically is up 1000%. <br />For more information, please visit www.UEVision.com.<br />
    4. 4. Our Experience<br />55 product launches<br />34 UI redesign projects<br />Specializing in UI design of web-based applications and portals:<br /><ul><li>IT Monitoring Systems
    5. 5. IT Hardware and Software Configuration
    6. 6. CRM Systems
    7. 7. Business Analytics</li></ul>Web-based application feature design:<br />Role-based dashboards and scorecards<br />Content management systems and repositories<br />Data analytics and visualization<br />Experience with multiple web technologies and platforms (portlets, AJAX, JSP, JSF, etc.)<br />
    8. 8. Agenda<br />Introduction<br />The “Killer” Screen: How One Well-Designed Screen Can Sell Your Product <br />Identifying the “Killer” Screen for your Product or Site<br />Common Traits of “Killer” Screen”? <br />Examples of “Killer” Screens<br />Which screen is the “Killer Screen” for your product or site? <br />Designing Your “Killer” Screen: Tips and Tricks<br />Q & A<br />
    9. 9. Introduction<br /><ul><li>Welcome to the third webinar in the usability webinar series from UEVision.
    10. 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. 11. In our work with clients, UEVision has come to call that screen the “Killer Screen.”
    12. 12. This webinar will show you how to:
    13. 13. Identify that “killer screen” in your product or on your site
    14. 14. Optimize it to really create a “wow factor”</li></li></ul><li>The “Killer” Screen: How One Well-Designed Screen Can Sell Your Product <br />Identifying the “Killer” screen<br />
    15. 15. What Makes a Screen a “Killer” Screen?<br />What makes a screen a “Killer” Screen? Since all products and sites are different, there’s not just one simple recipe.<br />In this section, we’ll examine multiple “Killer” screens in more detail, including:<br />The common traits of “Killer” screens<br />Examples of “Killer” screens<br />How to identify your “Killer” screen<br />8<br />
    16. 16. Common Characteristics of “Killer” Screens<br />A “Killer” screen…<br />Shows What it Does - Immediately<br />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.<br />Elicits the response, “Wow, I get it!!”<br />Conveys Clear Value<br />Enables customers and prospects to see that your product or site will quickly be useful or interesting to them.<br />They can “put themselves” into the product or site to see where they can immediately reap benefits by buying or signing up.<br />Answers the question, “Why is this useful to me?<br />Calls Customers to Action<br />Customers and prospects see it and want to start typing or clicking immediately to interact with it.<br />Elicits the response, “How soon can I have that?”<br />9<br />
    17. 17. Examples of “Killer” Screens<br />Let’s walk through some excellent examples of “Killer” screens in products and sites you may already know…<br />Google Maps and Search<br />Trulia<br />H&R Block Tax Cut<br />Xobni<br />The iPhone<br />Mint.com <br />Basecamp <br />Yahoo! Finance <br />Geni.com<br />Shipwire: The Product Configurator<br />Fujitsu Interstage BPM: Workflow Creator<br />10<br />
    18. 18. Google: Maps and Search<br />11<br />Shows me what I want now … and in the next 30 seconds<br />
    19. 19. Google: Maps and Search<br />Why they are “Killer” screens:<br />Gives me what I want now:<br />Googling an address instantly produces a map as a search result <br />Searching instantly produces results that clearly match my criteria in a way I can understand<br /> Anticipates what I want next:<br /> Street view shows me what location looks like<br />Directions are ready for me to make the address start- or end-point<br /> Listing of nearby businesses<br />12<br />
    20. 20. Trulia: Home page<br />13<br />“My” real estate answer machine<br />
    21. 21. Trulia: Home Page<br />“My” Real Estate Answer Machine<br />Why this is a “Killer” screen:<br />My House<br /> Provide my preferred location and price range – to get aggregated results, across realtors<br /> Filters I care about, but can change:<br />“Price Reductions”<br />“Open Houses”<br /> My Information<br /> Housing statistics dialed to my target location<br /> Personalized searches and alerts<br />14<br />
    22. 22. H&R Block TaxCut: Step 1<br />15<br />Simple questions, instant pay-off<br />
    23. 23. H&R Block TaxCut: Step 1<br />Why this is a “Killer” screen:<br />Asks Me Simple Questions<br />What I need to know when: Simple step-by-step questions with clear answer options <br /> Transparency: FAQs along the side for the “back story” to the questions<br />Demonstrates Instant Pay-Off<br />Tax refund or tax due – screen counter updates in direct response to my input<br />16<br />
    24. 24. Xobni<br />Making sense out of my inbox ... Builds on what I know<br />17<br />
    25. 25. Xobni<br />Makes sense of my email inbox <br />Search across contacts, emails and attachments<br />Automatically configure ‘networks” based on emails sent and received<br />Builds on what I already know<br />Companion panel to familiar Outlook screen<br />Integrates my Outlook communication with social networks I already use: Facebook, LinkedIn etc.<br />18<br />
    26. 26. The iPhone: Main Screen<br />19<br /><ul><li>I know exactly where to click on my PDA</li></ul>Why this is a “Killer” screen:<br /><ul><li>Visual: I can see what I can do
    27. 27. Tactile: Playful, intuitive interaction
    28. 28. Encourages “gut-level” interaction – learn as you go!
    29. 29. User experience design drives the iPhone revolution.</li></li></ul><li>Mint.com : Home, Sign Up, Setup<br />20<br /><ul><li>Manage my finances – No configuration required</li></li></ul><li>Mint.com: Home, Sign Up, Setup<br />Why this is a “Killer” screen:<br />Centralizes and helps me manage my finances<br /> Sign-up screen previews my benefit, alleviates security concerns – and shows me what Mint will do for me<br />No configuration needed<br />With only one account number, Mint pulls together all my accounts and bills – and recommends a better rate<br />21<br />
    30. 30. Basecamp<br />22<br /><ul><li>Closing the gap between projects and communication</li></li></ul><li>Basecamp: Project Pages<br />Why these are “Killer” screens:<br />Closing the gap between project assets and communication<br /> Upload files and post a message about the file and open it up for comments<br />Co-author a single file<br />Collaboratively index (tag) content<br />Basecamp UI quickly communicates this people-meet-projects paradigm in its blog-like interface<br />23<br />
    31. 31. Yahoo! Finance: Stock Charts<br />24<br /><ul><li>Aggregated knowledge and visual analysis for my portfolio</li></li></ul><li>Yahoo! Finance: Stock Charts<br />Aggregate financial analysis<br />Clear, interactive financial charts (leveraging 2.0 client-side web technology)<br />Aggregated analyst data<br />Most common financials summarized from many places around the web<br />My portfolio<br />Easily assemble the stocks I am watching<br /> All information pivots around my stocks<br />25<br />
    32. 32. Geni.com: Home page<br />26<br /><ul><li>Making a family tree has never been so simple</li></li></ul><li>Geni.com: Home page<br />Why this is a “Killer” screen:<br />Create a family tree – for free<br />Simplicity - three form fields, two boxes<br /> Instant feedback – family tree builds after entering my name and email <br />The querying across databases is completely concealed from the user<br />Customer is instantly invested in the service – “They have my family tree”<br />27<br />
    33. 33. Shipwire: Product Configurator<br />28<br /><ul><li>Step-by-step shipping configuration with drag-and-drop</li></ul>NOTE: Patent pending<br />
    34. 34. Shipwire Shipping Configurator<br />Why this is a “Killer” screen:<br />Shows the “Step-by-step” of how to configure the product shipment<br />Five Configuration steps are differentiated visually<br />Visual configuration with drag-and-drop<br />User drag and drop shipping properties in the appropriate step – in any sequence they wish<br />Visual shipping configuration is the value proposition in action<br />29<br />
    35. 35. Fujitsu Interstage BPM: Workflow Creator<br />30<br /><ul><li>Map your business processes -- visually</li></li></ul><li>Fujitsu Interstage BPM: Workflow Creator<br />Why this is a “Killer” screen:<br />Map your business process<br />Business process attributes are visible on the right-hand panel of the screen<br />Mapping screen is based on the visual metaphor of the flowchart <br />Flowchart metaphor is second nature to target audience – the UI feels “native” to the task of mapping business processes<br />31<br />
    36. 36. What is your “Killer” screen?<br />Every product or site has (or should have) a “Killer” screen<br />Do you know what your “Killer” screen is (or should be)?<br />What is the one screen (or two!) that you already know sells your product or site to prospective customers and visitors?<br />If you already know what your “Killer” screen is…ask yourself:<br />Could it be time for a refresh or a tune-up?<br />If your screen design is older than 2 years, it probably is time for a refresh.<br />Is your competition imitating it such that customers and prospects may be confused by your product and theirs?<br />32<br />
    37. 37. What is your “Killer” screen? (cont’d)<br />If you are not sure what your “Killer” screen is:<br />What is the one screen in the product / site that best conveys the value proposition? For example:<br />Is your sign-up / start up process very simple and clear?<br />Does your dashboard or portal page show clear and easy information?<br />Is there one key feature that users will use over and over again in the product that makes their lives easier / better / faster / smarter?<br />What one screen would you add to the product / site based on:<br />What your competitors are doing or showing that gives them an edge over you<br />Customer feedback and requests<br />Feedback from the sales, marketing, or support teams<br />And if you don’t think you have a “killer” screen yet, we’ll tell you how to design one in the next section.<br />33<br />
    38. 38. A Real-Life UEVision Vignette: The “Killer” Screen in the Sales Process<br />UEVision’s Client X is a stealth mode startup with a hardware and software solution designed to revolutionize one aspect of IT networking.<br />Client X’s CEO has identified a single “killer” screen in the product:<br />This single screen will show the before and dramatic after effects of Client X’s solution on the network.<br />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.<br />The design UEVision is producing for this screen focuses specifically on showing “before and after” information and visualizations – and nothing more. <br />34<br />
    39. 39. The “Killer” Screen: How One Well-Designed Screen Can Sell Your Product <br />Designing the “Killer” Screen: Tips and Tricks<br />
    40. 40. Designing the “Killer” Screen: Top 5 Tips<br />Ready to design? Here are tips and tricks to get you started:<br />Tip #1: Distill the “core” features, functions, or benefits that need to be conveyed on this screen. <br />Focus on the features that convey the value proposition of the product or site.<br />Cut mercilessly if the functionality is not needed on this screen.<br />36<br />
    41. 41. Tip #1: Distill Core Features<br />37<br />“Distilled”: <br />Google Maps<br />“Undistilled”: Google Wave<br />
    42. 42. Tip #2: Validate Selected Features<br />Validate the selected features and functionality by interviewing your customers and target prospects and users about what would be most useful for them.<br />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.<br />38<br />
    43. 43. Tip #3: Pick a Visual Priority <br />Pick a single “visual priority” or focal point for the screen design.<br />When customers and prospects see the screen, their eyes should be drawn first to a single visual priority point on the screen.<br />This point is called the “visual priority” and should be where the eyes should be drawn.<br />HINT: It should never be your company logo.<br />39<br />
    44. 44. Tip #3: Pick a Visual Priority <br />40<br />Correct Visual Priority:<br />Geni’s ‘You – Start Here box’<br />Wrong visual priority:<br />Ancestry.com’s Lifestyle image of “Alton Woodman” and his story.<br />
    45. 45. Tip #4: Use Experts to Design It<br />Use experts such as UI designers, interaction specialists, and visual designers to create the screen design.<br />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.<br />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.<br />41<br />
    46. 46. Tip #4: Use Experts to Design It<br />42<br />Designed by User Experience Experts<br />Designed by…engineers<br />
    47. 47. Tip #5: Don’t Try to Re-Invent the Wheel<br />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).<br />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 <br />Remember -- Less really is more when designing the “Killer” screen.<br />43<br />
    48. 48. Tip #5: Don’t Try to Re-Invent the Wheel<br />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.<br />44<br />
    49. 49. Other Useful Design Thoughts to Consider<br />Where is the “Native” UI opportunity in your product:<br />Are you putting large analog forms online? – Consider step-by-step question/answer wizard. <br />EXAMPLE: H&R Block’s question/answer to file tax return<br />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 <br />EXAMPLE: Geni’s three form fields to build a family tree<br />Does your product/service have a well-known visual metaphor that explains it? – Build a metaphor-based UI.<br />EXAMPLE: Yahoo! Finance charts, Shipwire’s Product Configurator<br />45<br />
    50. 50. Validating Your “Killer” Screen<br />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?<br />Test, test, test the design before you build and release<br />Mock up the design and test it with target users / customers in focus groups, one-on-one sessions, or even usability tests.<br />Use the mockups to both sell the screen internally AND externally.<br />For websites:<br />Use A/B testing: Drive portions of your visitors towards the “killer screen” and then track behaviors through web analytics and surveys.<br />The key validation question to be answered through testing:<br />Does your “Killer” screen capture the imagination of your customers and make them want to see more? Do they “get it”?<br />46<br />
    51. 51. Show it to the World<br />Your “Killer” Screen is now ready…don’t be afraid to share it with the world.<br />Include it in all customer-facing materials such as:<br />The corporate website<br />Demos<br />Collateral (print and electronic)<br />The goal is to make the “Killer” screen the ubiquitous face of your product that gives your customers and prospects the “Ah Ha!” moment.<br />47<br />
    52. 52. In Conclusion<br />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.<br />The “Killer” screen is not limited to just the known “great” products and sites.<br />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.<br />Identifying and optimizing the “Killer” screen in your product or website can be a straightforward process.<br />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.<br />48<br />
    53. 53. 49<br />Q & A<br />Questions?<br />Thoughts?<br />Ideas?<br />
    54. 54. Thank you for attending! <br />If you would like more information or if you want to discuss usability ideas, please contact me: <br />Phone: 415.325.4905<br />Email: sarah@uevision.com<br />www.uevision.com<br />
    55. 55. Usability Webinar SeriesUI Design Best Practices<br />
    56. 56. Overview: The Cost and ROI of Usability<br />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<br />Bad design on the Internet is estimated to cost a few billion dollars more.1<br />But, a number of studies have shown that ROI on a UI investment is typically up 1000%.3<br />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.<br />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.<br />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<br />52<br />
    57. 57. 53<br />Which UI Best Practices to Review?<br />When reviewing UI design best practices, we review several sources (in priority order):<br />Similar applications<br /><ul><li>Web-based enterprise or analytics systems are used by all CMS users
    58. 58. The systems set the standards by which users may be used to working
    59. 59. Enterprise software best practices are set by such systems as Salesforce.com, CRM</li></ul>Common websites and applications <br /><ul><li>Users may also use these frequently and therefore develop expectations
    60. 60. E-commerce
    61. 61. Portals
    62. 62. Search
    63. 63. Examples: Quicken, TurboTax, Amazon.com, Yahoo!, Google, Hotmail, Windows Live</li></li></ul><li>Best Practices: Web<br />Amazon.com (e-commerce)<br /><ul><li>Shopping Cart Metaphor
    64. 64. Checkout flow
    65. 65. Managing payment settings and options
    66. 66. Notifications/Alerts</li></ul>Yahoo (Portal)<br /><ul><li>Organized portal categories
    67. 67. Integrated features and functionality
    68. 68. Mail, Messaging, Photos, etc.
    69. 69. Community-focused portal functionality
    70. 70. Groups, Answers, Ads</li></ul>Google (Search)<br /><ul><li>Clean search page (no ads, no clutter)
    71. 71. Focused search box
    72. 72. Organized search results</li></ul>54<br />
    73. 73. Best Practices: Web <br />Mail.yahoo.com <br /><ul><li>Double pane browsing experience
    74. 74. Integrated chat</li></ul>Gmail<br /><ul><li>Conversations grouped together
    75. 75. Integrated chat
    76. 76. Rich Ajax-based interactions</li></ul>Maps.google.com<br />Layered user experience with many options for how the data is displayed<br />Simple, easy to understand interface<br />Rethinking how people use maps <br />Not just for directions, but also for traffic<br />Directions are no longer just text, can see the neighborhood before you get there <br />55<br />
    77. 77. 56<br />Best Practices: “Web 2.0” Type Applications<br />Multiple Tabs for Multiple Windows<br />Task-oriented UI and Flows <br />Orient the user to his common tasks and goals <br />DO NOT expose the database schema in the UI and letting the user wade through it<br />Role-Based UIs<br />Show the UI as applicable only to the user’s role<br />Start the user with a role-based or personalized dashboard when they start the system<br />Horizontal Contextual Navigation<br />Use a horizontal menu or tab structure to present navigation and menu choices<br />Show the user only those menu options that<br />Allow for infrequently used menu options to be hidden<br />Fix the navigation bar so when user scrolls it does not disappear<br />Filtering and Searching of Onscreen Information<br />Allow quick-search short cuts onscreen<br />Provides filters on long tables (e.g. column header)<br />Allow users to search of table data onscreen<br />Provides sorting functionality for primary, secondary sorts<br />
    78. 78. 57<br />Best Practices: “Web 2.0” Applications (cont’d)<br />“Smart” Forms – Forms that help the user by:<br />Auto-filling for fields with lists (e.g. user types 2 letters and field prompts with options)<br />Data pickers (date, time) – provide a Calendar and Clock widget as well as allowing the user to type in the field<br />Error Prevention – field validation at time data is entered<br />Field and label color changes and highlights for errors, required fields treatment<br />Provide guided wizards <br />For infrequent or complex-stepped tasks<br />What’s This? Contextual help on screens, elements<br />Customizable End User UI<br />Let the user controls as much of the experience as possible by determining:<br />Default landing pages<br />Login settings<br />Dashboard data displays<br />Skins and colors<br />Shortcuts and “Favorites” to display onscreen<br />
    79. 79. Best Practices: “Web 2.0” Examples<br />Salesforce.com – ‘Dashboards and Datasets’<br /><ul><li>Easy to get where you want to go.</li></ul>Simple tab navigationwith main areas of interest<br /><ul><li>Starts with dashboard screen that is highly customizable
    80. 80. Users can easily get marketing campaign and sales/lead information easily (also very exportable)
    81. 81. Navigation is easy to use, with color-coded sections</li></ul>Flickr – ‘Web 2.0 Interactions with Photos’<br /><ul><li>Web 2.0 interactions integrated to enable user to easily manipulate photos and graphics
    82. 82. Tag-based search is very powerful and easy to use</li></ul>H&R Block Tango – ‘Guided Process’<br /><ul><li>Redefined tax software by simplifying the experience
    83. 83. Reduced the number of pages required</li></ul>Uses horizontal collapsing page sections to eliminate the need for traditional pages<br /><ul><li>Tab navigation allows user to return to sections and edit easily</li></ul>Yahoo! Mail and Gmail – ‘Desktop Applications on the Web’ <br /><ul><li>Web 2.0 UI with integrated desktop-like rich interactions
    84. 84. Users can drag and drop, edit inline, open and close panels, and see data and information update asynchronously</li></ul>58<br />