UX Kick Start: Start Your Project Off On the Right Foot

UX Kick Start Start your UX project off on the right foot. Presented For ABSG-UXD, Frisco, Texas By Mark Kraemer, Credera.com On October 20, 2011

HELLO M Y N A M E I S

Mark Kraemer @kraemer

OUR CLIENTS HIRE US TO OWN THEIR TOUGHEST PROBLEMS

THEY RETAIN US BECAUSE WE KEEP OUR PROMISES

Agenda: •  What is UX? •  The UX Brief •  UX Deliverables •  Kick Start

User experience is a term used to describe the overall experience and satisfaction a user has when using a product or system. From Wikipedia

User experience is a term used to describe the overall experience and satisfaction a user has when using a product or system. From Wikipedia

Our Goal is to create sites and applications that people like to use.

Great. That’s a lot to cover.

Where do I start?

The UX Stack is a useful framework to organize the success criteria for your next project.

Technology

Form

Content

Audience

Purpose Who do we need to achieve the goal?

What message conveys the reason for the audience to respond?

What non-‐verbal cues will make the message more credible?

How is the message physically presented?

What are we trying to achieve?

Purpose: Why are stakeholders investing in this project?

The more you understand about the nature of your client’s business, the be<er suited you’ll be for success. Keeping the client purpose in mind will help avoid resembling the quote we’re all warned by in Jurassic Park: “Yeah, but your scienGsts were so preoccupied with whether or not they could, they didn’t stop to think if they should.”

Audience: Who are the primary (and other) users?

photo by 7-‐how

-‐7 / steve on

flicrkr.c

om

YOU <> YOUR USER

What are your users really doing? Ask them! Watch them? They’ll love you for it.

Content: What do people want to know and do while using the site or application?

Form

Tone

Globally Relevant Content

Locally Relevant Content

EnterpriseGateway

Most localization and translation occurs

here on a local basis.

Some localization and translation occurs

here as appropriate.

Knowledge Center

Creation & Innovation

Center

Portal Standards

& Guidelines

Business Intelligence

Globally Relevant Lines of Business

Cash in TransitBrinks Global ServicesATM/ABM ServicesCoin ServicesCash LogisticsVirtual Vault ServicesBrinks CompuSafe ServiceIntelligent SafesWeb-based Information ToolsGuarding ServicesSecurity ServicesDocument DestructionSecure Data SolutionsKey HoldingWarehousingCROSSAviation SecurityInternet Coin ServiceCCTV Surveillance CentersSecurity ConditioningFlipper

Individual Line of

Business

Training

Document Templates

Best Practices

Contacts

Globally Relevant

Operations

AdministrationBusiness DevelopmentBusiness SolutionsClient ServicesCommercial SalesCommoditiesCustomer SupportEmployee RelationsEngineeringFinanceFirearms & TrainingFleet & ProcurementHuman ResourcesInformation TechnologyLegalMarketing & CommunicationOperationsPerformance Improvement

Individual Department

Training

Document Templates

Best Practices

Contacts

Corporate Content

WhitepapersAnnual ReportsPrinciples & EthicsBranding GuidelinesCorporate NewsOrg Charts

GlobalEmployee Directory

Client & Customer

Information

Listing by Geography

In the News

Listing

Countries

ArgentinaBoliviaColumbiaPuerto RicoBrazilVenezuelaChileMexicoPeruPanamaCanadaUnited StatesHollandFranceHungaryGreeceIsraelGermanyBelgiumSwitzerlandIrelandNetherlandsUnited KingdomJordanLuxembourgRussiaPolandItalyDubaiCzech RepublicMoroccoBahrainEl SalvadorSouth AfricaTurkeyMalaysiaSouth KoreaPhilippinesVietnamChinaJapanIndiaTaiwan!ailandAustraliaSingaporeHong Kong

Individual Country

Branches

Country Operations

CountryLines of Business

Country-Relevant News & Events

Country Tasks & Activities

Custom Business

Applications

Document Repository &

Fileshare

APACEMEAUSBGSLA

Regions

Individual Region

Country Listing

Regional Operations

Regional-Relevant News & Events

Regional Lines of Business

Individual Branch

Branch-Relevant News & Events

BranchLines of Business

Branch Operations

Document Repository &

FIleshare

Maps & Directions

Form is both the logical and the emotional.

1. The Upper Right-‐Hand Corner That’s the prime spot where diners’ eyes automaGcally go first. Balthazar uses it to highlight a tasteful, expensive pile of seafood. Generally, pictures of food are powerful mo<vators but also menu taboos—mostly because they’re used extensively in lowbrow chains like Chili’s and Applebee’s. This illustraGon “is as far as a restaurant of this caliber can go, and it’s used to draw a?en<on to two of the most expensive orders,” Poundstone says. 2. The Anchor The main role of that $115 pla<er—the only three-‐digit thing on the menu—is to make everything else near it look like a rela<ve bargain, Poundstone says. 3. Right Next Door At a mere $70, the smaller seafood pla<er next to Le Balthazar seems like a deal, though there’s no sense of how much food you’re geXng. It’s an indefinite comparison that also feels like an indulgence—a win-‐win for the restaurant. 4. In The Vicinity The restaurant’s high-‐profit dishes tend to cluster near the anchor. Here, it’s more seafood at prices that seem comparaGvely modest. 5. Columns Are Killers According to Brandon O’Dell, one of the consultants Poundstone quotes in Priceless, it’s a big mistake to list prices in a straight column. “Customers will go down and choose from the cheapest items,” he says. At least the Balthazar menu doesn’t use leader dots to connect the dish to the price; that draws the diner’s gaze right to the numbers. Consultant Gregg Rapp tells clients to “omit dollar signs, decimal points, and cents … It’s not that customers can’t check prices, but most will follow whatever subtle cues are provided.” 6. The Benefit Of Boxes “A box draws a?en<on and, usually, orders,” Poundstone says. “A really fancy box is be<er yet. The fromages at the bo<om of the menu are probably high-‐profit puzzles.” 7. Menu Siberia That’s where low-‐margin dishes that the regulars like end up. The examples here are the easy-‐to-‐miss (and rela<vely inexpensive) burgers. 8. Bracke<ng A regular trick, it’s when the same dish comes in different sizes. Here, that’s done with steak tartare and ravioli—but because “you never know the por<on size, you’re encouraged to trade up,” Poundstone says. “Usually the smaller size is perfectly adequate.”

h<p://nymag.com/restaurants/features/62498/

Technology

Technology is not just back end. What will your audience use?

Browser • Internet Explorer 6? 7? 8? • Firefox? Safari? Opera? • Windows? Mac? Other?

Device? • Desktop? Laptop? • Mobile? Tablet? • Kiosk? Touchscreen?

What screen are they using? • ResoluGon? Colors? • ConnecGon speed? • Browser, or naGve client?

The framework is universal across all communication. Think of it in terms of today’s event.

Technology

Form

Content

Audience

Purpose < who was the audience? >

< what were the primary and secondary messages? >

< what kind of tone did we use? >

< what kind of media / technology did we use? >

< what was the goal today? >

How is your current site?

Applying the communicaGon framework to your own site is a good way to consider how it can be improved to be<er serve your business

Self-Assessment Sample Questions

•  Is your current site helping you achieve your business’s goals?

•  Does it reach out to each specific audience you need to address?

•  Does it provide all the content / funcGonality they need?

•  Is your brand represented with the quality and value you’re seeking? is the site a pleasure for its visitors?

•  Does your site work well on portable devices?

Time for group exercise!


The brief is great.

But we need more detail!

Who is the target customer?

What is the customer need?

What is the product name?

What is its market category?

What is its key benefit?

Who or what is the competition?

What is the product’s unique differentiator?

Shamelessly stolen from Gamestorming - http://www.gogamestorm.com/?p=125

Successful elevator pitches often start with a mad-lib-like template:

For (customer) who has

(customer need),

(product name) is a (market

category) that (one key

benefit).

Unlike (competition), the

product (unique

differentiator).

Our brand statement:

Credera is a management and technology consulting firm committed to your success.

Our clients hire us to own their toughest problems and retain us because we fulfill our promises.

Purpose:Increase the efficiency of managing assets for our remarkablein-store experience"

Audience: Personas

Audience: Field Study

Content: Use Cases & Process Flow

Content: Site Maps

Content: Wireframes

Flexible, easy-‐to-‐update paper prototypes Depict layout, but stay (mostly) silent about visual design Shared reference point for future development acGviGes

Content: Wireframes

Form: Branding Workshop

Get Matt’s materials at http://bit.ly/bigdefend

Form: Comps

final-round comp

live site

Technology: Click-Through Prototype

“Movie-‐set” Func<onality • Provide breadth and/or depth of funcGonality

• Use actual browser code (XHTML, CSS, JS, images) to render screens

• No back-‐end connecGvity • Gives stakeholders confidence and clarity of expectaGons

• IKIWIUI = “I know it when I use it”


Every journey starts with a single step.

What single, simple action will start your project moving forward?


Questions?

Thanks! Think of more quesGons later?

Call +1 (214) 232-‐3890, or write [email protected]

h<p://blog.credera.com/topic/management-‐consulGng/the-‐uxd-‐stack/