uevision presents the "killer" screen: how one well-designed screen can sell your product

© Copyright 2008 UEVision. All rights reserved. - CONFIDENTIAL © Copyright 2008 UEVision. All rights reserved. - CONFIDENTIAL

Usability Webinar Series

The “Killer” Screen: How One Well-Designed Screen

Can Sell Your Product

© Copyright 2008 UEVision. All rights reserved. - CONFIDENTIAL

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).


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.

http://www.uevision.com/


Our Experience 55 product launches 34 UI redesign projects

Specializing in UI design of web-based applications and portals:

- IT Monitoring Systems- IT Hardware and Software Configuration- CRM Systems- Business Analytics

Web-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.)


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


Introduction Welcome to the third webinar in the usability

webinar series from UEVision.

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?

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

This webinar will show you how to:

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

Optimize it to really create a “wow factor”


Identifying the “Killer” screen

The “Killer” Screen: How One Well-Designed Screen Can Sell Your Product


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


Common Characteristics of “Killer” ScreensA “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


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


Google: Maps and Search

11

Shows me what I want now … and in the next 30 seconds


Google: Maps and SearchWhy 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


Trulia: Home page

13

“My” real estate answer machine


Trulia: Home Page“My” Real Estate Answer MachineWhy 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


H&R Block TaxCut: Step 1

15

Simple questions, instant pay-off


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-OffTax refund or tax due – screen counter updates in direct response to my input

16


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

know

17


XobniMakes 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 knowCompanion panel to familiar Outlook screen

Integrates my Outlook communication with social networks I already use: Facebook, LinkedIn etc.

18


The iPhone: Main Screen

19

Why this is a “Killer” screen: Visual: I can see what I can do

Tactile: Playful, intuitive interaction

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

User experience design drives the iPhone revolution.

I know exactly where to click on my PDA


Mint.com : Home, Sign Up, Setup

20

Manage my finances – No configuration required


Mint.com: Home, Sign Up, Setup

Why this is a “Killer” screen: Centralizes and helps me manage my finances Sign-up screen previews my benefit, alleviates security concerns – and shows me what Mint will do for me

No configuration neededWith only one account number, Mint pulls together all my accounts and bills – and recommends a better rate

21


Basecamp

22

Closing the gap between projects and communication


Basecamp: Project PagesWhy these are “Killer” screens:Closing the gap between project assets and communication Upload files and post a message about the file and open it up for comments

Co-author a single fileCollaboratively index (tag) contentBasecamp UI quickly communicates this people-meet-projects paradigm in its blog-like interface

23


Yahoo! Finance: Stock Charts

24

Aggregated knowledge and visual analysis for my portfolio


Yahoo! Finance: Stock ChartsAggregate financial analysis

Clear, interactive financial charts (leveraging 2.0 client-side web technology)

Aggregated analyst dataMost common financials summarized from many places around the web

My portfolioEasily assemble the stocks I am watching

All information pivots around my stocks25


Geni.com: Home page

26

Making a family tree has never been so simple


Geni.com: Home page

Why this is a “Killer” screen:Create a family tree – for free

Simplicity - three form fields, two boxes Instant feedback – family tree builds after entering my name and email

The querying across databases is completely concealed from the user

Customer is instantly invested in the service – “They have my family tree”

27


Shipwire: Product Configurator

28

NOTE: Patent pending

Step-by-step shipping configuration with drag-and-drop


Shipwire Shipping Configurator

Why this is a “Killer” screen:Shows the “Step-by-step” of how to configure the product shipmentFive Configuration steps are differentiated visually

Visual configuration with drag-and-dropUser drag and drop shipping properties in the appropriate step – in any sequence they wish

Visual shipping configuration is the value proposition in action

29


Fujitsu Interstage BPM: Workflow Creator

30

Map your business processes -- visually


Fujitsu Interstage BPM: Workflow Creator

Why this is a “Killer” screen:Map your business process

Business process attributes are visible on the right-hand panel of the screen

Mapping screen is based on the visual metaphor of the flowchart

Flowchart metaphor is second nature to target audience – the UI feels “native” to the task of mapping business processes

31


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


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


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


Designing the “Killer” Screen: Tips and Tricks

The “Killer” Screen: How One Well-Designed Screen Can Sell Your Product


Designing the “Killer” Screen: Top 5 TipsReady 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


Tip #1: Distill Core Features

37

“Distilled”: Google Maps

“Undistilled”: Google Wave


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


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


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.


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


Tip #4: Use Experts to Design It

42

Designed by User Experience Experts

Designed by…engineers


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


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


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


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…or are 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


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 websiteDemosCollateral (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


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


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: [email protected] www.uevision.com

mailto:[email protected]

http://www.uevision.com/


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


Which UI Best Practices to Review?When reviewing UI design best

practices, we review several sources (in priority order):

1. Similar applications— Web-based enterprise or

analytics systems are used by all CMS users

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

— Enterprise software best practices are set by such systems as Salesforce.com, CRM

2. Common websites and applications

— Users may also use these frequently and therefore develop expectations

— E-commerce— Portals— Search

— Examples: Quicken, TurboTax, Amazon.com, Yahoo!, Google, Hotmail, Windows Live


Best Practices: Web1. Amazon.com (e-commerce)

• Shopping Cart Metaphor• Checkout flow• Managing payment settings and

options• Notifications/Alerts

2. Yahoo (Portal)• Organized portal categories• Integrated features and

functionality• Mail, Messaging, Photos, etc.

• Community-focused portal functionality

• Groups, Answers, Ads

3. Google (Search)• Clean search page (no ads, no

clutter)• Focused search box• Organized search results

54


Best Practices: Web 1. Mail.yahoo.com

• Double pane browsing experience• Integrated chat

2. Gmail• Conversations grouped together• Integrated chat• Rich Ajax-based interactions

3. Maps.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


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


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


Best Practices: “Web 2.0” Examples1. Salesforce.com – ‘Dashboards and

Datasets’• Easy to get where you want to go.

Simple tab navigation with main areas of interest

• Starts with dashboard screen that is highly customizable

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

• Navigation is easy to use, with color-coded sections

2. Flickr – ‘Web 2.0 Interactions with Photos’

• Web 2.0 interactions integrated to enable user to easily manipulate photos and graphics

• Tag-based search is very powerful and easy to use

3. H&R Block Tango – ‘Guided Process’• Redefined tax software by simplifying the

experience• Reduced the number of pages required

Uses horizontal collapsing page sections to eliminate the need for traditional pages

• Tab navigation allows user to return to sections and edit easily

4. Yahoo! Mail and Gmail – ‘Desktop Applications on the Web’

• Web 2.0 UI with integrated desktop-like rich interactions

• Users can drag and drop, edit inline, open and close panels, and see data and information update asynchronously

58

uevision presents the "killer" screen: how one well-designed screen can sell your product

Technology