Upload
michael-meikson
View
490
Download
1
Tags:
Embed Size (px)
DESCRIPTION
Citation preview
UX fundamentals• What is UX? • Why is UX important? • What is good UX? • What does the UX process look like? • What are some common UX deliverables?
MICHAEL MEIKSON USER EXPERIENCE DESIGNER www.meikson.com
UX is software interface design
UX almost always refers to software interface design. It includes every aspect of the software or digital product that impacts
a person’s behaviors, attitudes and emotions when using it. All websites and apps are software.
Experience design predates UX
• Experience design has been an offline practice for decades
• Typically refers to physical environments such as retail, tradeshows and events
Service design, too
• Many business processes are complex and must be carefully choreographed • Pharmacies
• Call centers
• Starbucks
“User” means software
• The term “user” came into use in the 1970s to refer to the humans who were using new computer systems
• The term “user experience” was coined by Donald Norman in the mid 1990s
• In practice today, the term UX almost always refers specifically to the design of software interfaces
Interfaces are everywhereContent
Text Video
Images Sound
Interface Navigation elements
Inputs & controls Page structure/layout
Flow between pages/states
• This diagram represents the interface itself. • The content – text,
graphics, video, etc. – goes in the boxes
Interface only
• Content is produced the same way it’s always been • But the interface is
totally different • Distribution
mechanism • Context
Content on the web
!
!
INTERFACE
CONTENT
FYI, your tv has one, too
!
!
INTERFACE
CONTENT
A quick caseLet’s dive right in
• Why am I here?
Case 1
1. Where are the hotels and rooms?
2. Why am I looking at Kevin Spacey?
3. Oh, up there.
Case 1
• Original design showing hotel list in place by default
Case 1
• User needs are not that hard to figure out • “Advanced common sense” • aka Cognitive Science • aka Behavioral Psychology • aka Human-Computer
Interaction (HCI)
Rule #1
• The user cannot do two things at once
• We have to guide them down the path we want them to take
Rule #2Home
Find a hotel Look at ads
Which path do we emphasize?
• There is often a conflict of interest between marketers and users
• Eventually, the users always win: they just go somewhere else
Rule #3
Why is UX important?The amount of UX in your life is proportional to the time your
company spends building sites and apps.
The media equation is shifting• Advertising (paid
media) is becoming less efficient
• Brands are investing more heavily in owned platforms (sites & apps) and earned media (social shares)
• Banner ads are digital, but require little UX. !
• The publisher controls the experience. The advertiser simply inserts content.
Paid
• Websites require UX. • The brand is
responsible for the content, the interface, the technology, the analytics, and any data or services offered.
Owned
• Mobile apps require UX • They are also built
differently from sites in that they are not HTML – they are coded in native environments (i.e., iOS or Android)
Owned
• Social media is digital, but requires little UX. !
• The platform controls the experience. The brand simply inserts content.
Earned
The virtuous cycle of earned media
Drive users to my site or social
propertyGive them what
they want
Enable them to share their
positive experience
PAID OWNED EARNED
Users go online for everything
• If a purchase is more than a few bucks, most people will research it online before buying
• Sometimes, even smaller purchases get the same level of consideration
For agencies, all roads lead to digital
• Even if owned media is just a small fraction of an agency’s business, most ad campaigns drive users to the web
• It’s a key consideration during creative and media planning
Sites & Apps
Social
Digital Ads
Traditional
Typical Agency Revenue Pie
UX connects to the businessMany sites, apps and digital products are more closely
connected to the business itself than ever before, expanding the definition of “advertising.”
• Your clients are currently installing next-gen analytics systems which show media and purchase activity in real time • These are the new
success metrics
Business metrics
Booking systems• Can you work on a
travel brand without considering Tripadvisor, Expedia, etc.?
Commerce
• Can you work on a retail brand without looking at Amazon?
Digital product• If an agency wants to
play in this space, it has to get technical
What is good UX?Empathy is a key component of UX.
It’s about what the user wants, not what the marketer wants.
• What’s on the menu? • What’s the price
range? • Where is it?
Case 2
• OK, OK. I get that I have to choose a location first.
Case 2
• Wait, so where is the menu?
Case 2
• So there’s no way to just scan the menu? I have to navigate this crazy thing?
Case 2
• Proposed design showing location auto-detect
Case 2
• Proposed design showing scannable menu with visual slideshow
Case 2
• Was this designed by an adult?
Case 3
• Original wireframe
Case 3 Googlehttp://
Title Goes Here HessExpress.com
Home
Page 3 of 19
Store Locator
Deals & Coupons
HESS Cards Mobile About Us
HESS History
HESS Trucks
HESS News
GasBuddy App
HESS Jet Game
Gift Cards
HESS Visa
HESS Fleet Card
Careers
Contact Us
Idea Box
SIGN UP >
E-Mail Address
Sign Up for HESS Express Deal Alerts
Some explanation of what you get for signing up goes here and here and here.
Idea
s
STORE LOCATOR
Get gas prices now!City
ST Zip GO >>
Brand Features Go Here(could be promos, product announcements, news,
causes, app launches etc.)
Advanced Search >>
All-American Grill
Download Blackberry >
Download iOS >
Download Android >
Hess Blackberry
appHess
Android app
Hess iOS app
Get the HESS Express Mobile App
Featured Brands
IMAGE
1.99Title of promo goes here and here andLorem ipsum dolor sit amet, consectetur adipiscing elit.
$
IMAGE
1.99Title of promo goes here and here andLorem ipsum dolor sit amet, consectetur adipiscing elit.
$
IMAGE
1.99Title of promo goes here and here andLorem ipsum dolor sit amet, consectetur adipiscing elit.
$
IMAGE
1.99Title of promo goes here and here andLorem ipsum dolor sit amet, consectetur adipiscing elit.
$
Current Promos
Store Locator
Deals & Coupons
HESS Cards Mobile About Us
HESS History
HESS Trucks
HESS News
GasBuddy App
HESS Jet Game
Gift Cards
HESS Visa
HESS Fleet Card
Careers
Contact Us
Idea Box
SIGN UP >
E-Mail Address
Sign Up for HESS Express Deal Alerts
Some explanation of what you get for signing up goes here and here and here.
Store Locator Deals & Coupons HESS Cards HESS Apps
Careers Contact Us
Products Idea Box About Us
• Early design sketch
Case 3
• Wow. Everything that sucks about the goverment -- now in website format!
Case 4
• Look, humans! • And the names of
forms that I actually use. • And specific things I
need to do
Case 4
The goal of UX is speedGet to me what I want as fast as possible.
Don’t make me think. Don’t waste my time.
Don’t put junk in my way.
UX is functional designSoftware has lots of parts that have to fit together correctly in order to work.
Like a building. Or a vacuum cleaner. Or a car. Consumers interact with all of these parts.
Wireframes are like blueprints
UX process & skillsForm follows function
UX skillsets
“Advanced common sense”
Visual Design Software Development
Project Management
A typical software design process
• UX follows a specific, structured process
• It is very similar to architecture or industrial design
• The final look (or “skin”) is dependent on the underlying structure
Follow the process
1 2 3
Levels of increasing fidelitySchematic
A conceptual layout indicating required areas of content and navigation. Also
known as a low-fidelity wireframe.
Design A graphical rendering of the final interface
suitable for production. Includes precise layout, color, typography, graphics & content.
Wireframe A detailed layout specifying all components of
the required interface and indicating relative sizes and positions of key elements.
Structure suggests design
PRODUCTS LOOKS & TRENDS NEWS & OFFERSSCIENCEEXPERT ACCESS
Personal Consultation My Account SEARCH
ABOUT US
Buy Now Country/Language
PAGE FOOTER APPEARS BELOW
STYLES BY STRUCTURE
All Structures
Fine
Medium-Thick
Curly
STYLES BY LENGTH
All Lengths
Short
Medium
Long
SHOW
LOOK NAME
LOOKS
LOOKS HEADER GOES HERE
211 222 3 5 6 ...4
SHARE
CALL TO ACTION HERE >>
CALL TO ACTION HERE >>
CALL TO ACTION HERE >>
CALL TO ACTION HERE >>
RELATED STORIES
04 Looks Landing Wed May 11 2011Modified
Meikson, MichaelCreator11 / 22Pantene 2.5 Change Doc
Old site New DesignNew Wireframe
UX deliverablesStart with broad strategy and gradually increase the level of fidelity.
Competitive analysis
• What’s going on around the user?
• What are the conventions in our space?
• What are my users likely to have experienced?
Deliverable System AssetsVersion 5 published July 24, 2009 by Nathan Curtis ([email protected]) 82 of 136
Criteria.Two-by-TwoDescriptionOmmy nosto eriurer ciduisim dolorem ercip ex eraesse elenibh elisit velit nos nullan utat. Ut utet aut ipsummy nonsequat, venibh ea corercilisit ad erit volore delis augiat velit voloreet, sit amet lum ad min utetuercilit autating ea consed dio odigna conullu tpatum incincil utatis adiat, volore dignibh ex eu feumsandre corem incing erostrud tin vulla ad et loborem zzrit vel er at dolore vulput luptatio delestie min henim nisit lut volorper sectet, si.
AttributeAttribute
Attribute
Attribute
Site
SiteSite
Site
Site
Site
Site
SiteSite
Site
SiteSite
Site
Competitive analysis
Competitive analysis
Page Inventory
Page Inventory
Page Inventory
C D
Page Inventory
A B
Section FrontDetail PageSearch
Home
Standalone Video
Section FrontDetail PageSearch
Home
Standalone Video
Section FrontSearch
HomeSection FrontSearch
Home
Standalone Video
Section FrontDetail PageSearch
Home
Standalone Video
Section FrontDetail PageSearch
Home
Standalone Video
Section FrontDetail PageSearch
Home
Standalone Video
Section FrontDetail PageSearch
Home
Standalone Video
Section FrontDetail PageSearch
Home
Standalone Video
Section FrontDetail PageSearch
Home
Section FrontDetail PageSearch
Home
Standalone Video
Section FrontDetail PageSearch
Home
Standalone Video
Section FrontDetail PageSearch
Home
Section FrontDetail PageSearch
Home
Standalone Video
Section FrontDetail PageSearch
Home
Standalone Video
Section FrontDetail PageSearch
Home
Purchase Complete
Product Page
section page
landing page
B DA C
Competitive analysis
Personas
• Mental models of different user types
• Helpful in dealing with complex systems
Personas
Personas
Personas
User flows
• How does an actual human being think through some process?
• What are all the decision points along the way?
• How can we anticipate problems and distractions to keep them moving?
User flows
User flows
User flows
Have you tried Biotrue MPS
before?
• Banners (remarketing)• Social• SEM• POS• E-mail• Biotrue.com• Bausch.com• Data captured from Poll
MPS Coupon Thank You Page
Samples available?No
Yes
MPS Coupon Data Capture
[FIRSTNAME][LASTNAME]
[EMAIL][CURRENTSOLUTION]
Inbound Traffic Sources
Are you a daily or monthly/weekly
wearer?[MPS/OD]
Cap Reached
Yes
ONEday Free Trial Data Capture
[FIRSTNAME][LASTNAME]
[EMAIL][CURRENTCONTACTS]
[ECP VISIT/MONTH]
MPS
ONEday MPS Sampling Data Capture
[FIRSTNAME][LASTNAME]
[EMAIL][CURRENTSOLUTION]
[ADDRESS][CITY]
[STATE][ZIP]
ONEday Free Trial Thank You Page
MPS Sampling Thank You Page
Home
TRY IT LOVE IT SHARE IT
MPS Sampling E-mail series
Trigger E-mail series Trigger E-mail series
Biotrue Challenge 2.0: Try ItBiotrue 2013 Marketing Promotion | USER FLOWS
3 11.14.12
Taxonomy
• How do we organize all the information on a site?
• This could be product info, recipe info, help or reference info, etc.
Taxonomy
Taxonomy
TaxonomyNavigating to headphones on amazon.com
The taxonomy here is so deep that most people never use it.
Site maps
• What are the actual pages/screens we are building?
• How does the user get from one to another?
Site maps Home
Footer Navigation
Privacy & Security
JPM Privacy
Chase Privacy
Chase Privacy Page 2
Terms & Conditions
USA Patriot Act / Recertification
Site Map
Cookies Policy
Contact Us
Legend
Home Section Landing List/Grid Detail LegalCR Category CR Subcategory External/
CustomArticle Group FAQ/Accordion
Company
Our Businesses
Board
Members of the Board
Leadership
Operating Committee
Press
Media Contacts
Historical Prime Rate
History
Bios
Investors
Tools
News & Events
Financials
Reports
Presentations
Shareholder Info
Frequently Asked Questions
Press Releases
Careers
JPMC
Benefits
Externally hosted (Taleo)
Job Listings
Externally hosted (careers.jpmorgan.com)
JP Morgan Careers
Externally hosted (TBD)
Chase Careers
Students
Experienced Professionals
Investor KitNews by E-mailDownloadsRSS News Feeds
Annual Reports & ProxyCIO Reports
UpcomingArchived
Stock Price Information
Stock Price History
Dividend History
Stock Split History
Investment Calculator
Investor Services Program
Transfer Agent
Earnings Releases
SEC Filings
Statements of Financial Condition
Credit Ratings
Asset Backed Securities
Basel Pillar 3 Disclosures
Fixed Income Information
Affordable Housing
Supporting Servicemembers
Growing Economies
Helping Small Business
Strengthening Communities
Corporate Responsibility
Philanthropy & Volunteerism
Global Philanthropy
Social Finance
Volunteerism
Operating Responsibly
Our Approach
Environmental Sustainability
Code of Conduct
Code of Ethics
Global Business Resiliency
Governance
Political Activities
Board Committees
Supplier Relations
"Containers" "Content"
Global Cities Initiative
Political Activities
Diversity & Human Rights
Community Services
Relief Efforts
Workforce Readiness
Proposed Site Mapwww.jpmorganchase.com Redesign /
GlobalGlobal Home
Global Offers Meetings & Events
Experience Mandarin Oriental
Sense of Place
Innovative Dining
Holistic Spa
Our Celebrity Fans
Global/Corporate Footer Nav
Company Careers Media Investors Residences (external link)
Global Offers
Gallery
�5��.,6)$ #����$��
My Stay
[DETAIL VIEWS]
Favorites
[DETAIL VIEWS]
Temptations
[DETAIL VIEWS]
�.,6)$��$0 ')/
#'0��.,6)$�Details
Corporate
Corporate ContactsOur Company
Our History
Mission & Values
Awards
Board of Directors
Careers Media Centre
Press Releases
Press Kits
Image Gallery
Corporate Publications
Media Contacts
RSS Feeds
Investors
Financial Reports
Analyst Presentations
Regulatory
Corporate Responsibility
Global/Corporate Footer Nav
Company Careers Media Investors Residences (external link)
Local (x26)Local Home
DiningRoomsMeetings & Weddings Items
Offers
Local Footer Nav
Overview Rooms & Suites Offers Dining Spa Meetings &
Weddings Gallery
Spa Overview
Treatments Menu
Spa Programs
Spa Suites
Fitness & Wellness
[Custom pages as needed per location]
Hotel At a Glance
Map & Directions
News & Events
Concierge Tips
Speciality Travel
[Custom pages as needed per location]
Overview Rooms & Suites Offers Dining Spa Meetings &
Weddings Gallery
Restaurant Microsite
Home
About Menu Reservations Private Dining Awards Gallery Contact Us
Universal FooterMO App Gift Cards Follow Us Sitemap Policies Feedback
Universal Header
Global Home Explore MapFind A Hotel(dropdown) �5��.,6)$
Language Selector (drop down)
Book Now Booking FlowMandarinOriental.com Site Map
1 Home
2 Grid View
6 Restaurant Microsite
3 Detail View
5 Gallery
4 List View
Forms or Unique layouts
Link
Legend
SIGNATURE RESTAURANTS LINK TO MICROSITE
Site maps
PACE UNIVERSITY | USER EXPERIENCE Schools Sitemap
Mon Nov 04 20132
School Home
"Why Us?"
Message from Dean
Marketing Pages
Career Paths
About Us
Explore Programs
Program Page
Course Detail
Meet our Faculty
Faculty Detail
Departments & Centers
Department Home
Custom Section Listing
Custom Detail Page
Degrees
Faculty
Research
News
Events
Social
News & Events
News Listing
Events Listing
Research
Blog/Social
Action Links
Apply Now Request More Info Support Pace
My Pace
Current Students
Forms Policies Processes Announcements FAQ
For Faculty
For Alumni
For Parents
Research
Contact Us
Social Media Center
Connect with Us
Advisors
Site maps
Wireframes
• What are the components on each page/screen?
• Which are the most and least important?
• Which ones get the most real estate?
Wireframes
WireframesFrom: Olive GardenTo: John DoeSubject:
3:00PM March 1, 2013
OLIVE GARDEN LOGO
FIND A LOCATION VIEW MENU GIVE GIFT CARD
Legal Copy Goes HereLorem ipsum dolor sit amet, consectetuer adipiscing elit. Nulla facilisis enim eget urna. Proin nec dolor. Etiam convallis. Ut ut nunc. Sed non felis nec justo ornare pulvinar. Donec quam. Phasellus justo pede,
pulvinar eu, interdum sed, ornare non, tortor.
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nulla facilisis enim eget urna. Proin nec dolor. Etiam convallis. Ut ut nunc. Sed non felis nec justo ornare pulvinar. Donec quam. Phasellus justo pede,
pulvinar eu, interdum sed, ornare non, tortor.
Enjoy a FREE Strawberry Mango Limonata
Free Strawberry Mango Limonataor other non-alcoholic beverage with an adult lunch entree
Print Free Drink Coupon
Offer valid during Lunch Monday-FridayExpires April 1, 2013
Headline should restate the value proposition. Repetition helps reinforce the communication objective.
Secondary copy should provide additional detail about the offer.
Offer terms should be placed close to the CTA so they are not missed.
Additional romance copy goes here and here and here if necessary
Consider developing some consistent design patterns for different offer types. For example, use coupon cutting lines to help suggest that the e-mail is a coupon, or color-code offers by value or type. The idea is to graphically reinforce the value prop in addition to the copy.
Offer: Single Item (Free) Page 5 of 12
WireframesRCI iPad App Destination > Resorts > Map
Page 17 of 21
Welcome, Jennifer Search 627 Exchange Trading Power
Branson, Missouri Resorts Local InfoWelcome About
RESORT IMAGE
Name of Resort Goes Here and Here and Here
RESORT IMAGE
Name of Resort Goes Here and Here and Here
RESORT IMAGE
Name of Resort Goes Here and Here and Here
RESORT IMAGE
Name of Resort Goes Here and Here and Here
RESORT IMAGE
Name of Resort Goes Here and Here and Here
RESORT IMAGE
Name of Resort Goes Here and Here and Here
FiltersListMap
Resorts
RCI iPad App Destination > Resorts > Filters
Page 19 of 21
Welcome, Jennifer Search 627 Exchange Trading Power
Branson, Missouri Resorts Local InfoWelcome About
RESORT IMAGE
Name of Resort Goes Here and Here and Here
RESORT IMAGE
Name of Resort Goes Here and Here and Here
RESORT IMAGE
Name of Resort Goes Here and Here and Here
RESORT IMAGE
Name of Resort Goes Here and Here and Here
RESORT IMAGE
Name of Resort Goes Here and Here and Here
RESORT IMAGE
Name of Resort Goes Here and Here and Here
Show Filters
List ViewBranson [25]
Galena [1]
Hollister [1]
Kimberling City [2]
Reeds Spring [2]
Ridgedale [3]
Beaches [4]
Family Vacations [27]
Golf [18]
Health Spas [2]
Lakes [32]
Scuba & Water Sports [29]
Health Club [18]
Laundry [17]
Medical Facility [34]
Pool [33]
Spa [15]
Whirlpool/Hot Tub [24]
Beach [8]
Boating [33]
Fishing [33]
Golf [34]
Horseback Riding [29]
Lake [34]
Live Entertainment [30]
Scuba Diving [18]
Tennis [28]
Waterskiing [30]
Windsurfing [12]
Any Award [24]
RCI Gold Crown [15]
RCI Gold & Silver Crown [21]
RCI Hospitality [3]
10 miles or less [1]
20 miles or less [5]
45 miles or less [14]
75 miles or less [31]
City Amenities Activities Vacation Types Awards Dist
ApplyCancel
ListMap FiltersSelect Filters to Refine your Results
Resorts
Specifications
• What is the behavior of each component in the interface in every possible situation?
• These are detailed documents that typically go to development teams
Project Pricing & Promotion
Document User Experience Specifications
File Cel_PnPSearchBook_UX Spec_v3_4.docx Version 3.4
Confidential Page 10 of 23
5 Offer Bundle Display & Selection 5.1 Detail View (default for 1-2 passengers)
SpecificationsProject Pricing & Promotion
Document User Experience Specifications
File Cel_PnPSearchBook_UX Spec_v3_4.docx Version 3.4
Confidential Page 11 of 23
NOTE: Offer Bundles are generated by the system. This document does not specify the logic or rules for combining and selecting offers for display. It only illustrates how the offers will appear to the user.
We recommend showing no more than 3 Bundles, and always including the LAF as a Bundle, but these priorities may change based on marketing and/or revenue management’s needs.
Tag #
Item Function Type Validation Source
1 Show Cruise Details
• Scrolls down the page to Cruise Details Tabs
Anchor Link
- Hard coded
2 Live Prices • The system will updated previously cached prices with live prices
• The disclaimer has been removed
Text - System Generated
3 Select radio button
• Changes class and refreshes page • The whole page will refresh
depending on what is available for the altered selection
• Preqquals remain selected, system essentially runs another query for any change made
• See 5.6.5
Radio Button
- Hard coded
4 Eligibility box • Container for eligibility components (4.1 – 4.19)
• This box can stretch vertically as needed to accommodate up to XX offers.
- - -
4.1 Eligibility Box Header
• Non-functional text prompting user to enter data
Text - CMS
4.2 Eligibility instructions
• Non-functional text describing how eligibility works
Text - CMS
4.3 Passengers Label
• Non-functional text for Passenger number
Text - CMS
4.4 Adult Passenger Number Selector
• Sets number of adult passengers • Default is 2
Drop-down menu
Use same validation in booking create funnel
4.5 Child Passenger Number Selector
• Sets number of child passengers • Default is 0
Drop-down menu
Use same validation in booking create funnel
4.6 Adult Passenger descriptive text
• Non-functional text defining adult passenger
Text - CMS
4.7 Child Passenger descriptive text
• Non-functional text defining child passenger
Text - CMS
4.8 Eligibility Label • Non-functional text for eligibility criteria
Text - CMS
Project Pricing & Promotion
Document User Experience Specifications
File Cel_PnPSearchBook_UX Spec_v3_4.docx Version 3.4
Confidential Page 12 of 23
Tag #
Item Function Type Validation Source
4.9 Residency qualifier
• Conditional for Phase 1 - USA and Canada only for the Residency qualifier. Phase 2 = International countries
• Dropdown default and first list item = “State or Province of Residency:”
• Remaining list items in alphabetical order:
• – US States alphabetically then • – Canadian provinces alphabetically • On select and apply, calculate and
indicate discounted rate on the entire result set where applicable.
Drop-down menu
• Not a filter. • Can be
selected in combination with other Special Rates qualifiers.
Hard coded
4.10 Age qualifier selection
• On select and apply, calculate and indicate discounted rate on the entire result set where applicable.
Label + Check Box
• Not a filter. • Can be
selected in combination with other Special Rates qualifiers.
Hard coded
4.11 Military qualifier • Conditional: USA & Canada only • Label: non-functional • On select and apply, calculate and
indicate discounted rate on the entire result set where applicable.
Label + Check Box
• Not a filter. • Can be
selected in combination with other Special Rates qualifiers.
Hard coded
4.12 Police, Fire Dept or EMT qualifier
• Conditional: USA & Canada only • Label: non-functional • On select and apply, calculate and
indicate discounted rate on the entire result set where applicable.
Label + Check Box
• Not a filter. • Can be
selected in combination with other Special Rates qualifiers.
Hard coded
4.13 Loyalty Label • Non-functional text for Loyalty program
Text - CMS
Project Pricing & Promotion
Document User Experience Specifications
File Cel_PnPSearchBook_UX Spec_v3_4.docx Version 3.4
Confidential Page 13 of 23
Tag #
Item Function Type Validation Source
4.14 Loyalty membership number entry field
• Loyalty number entered as search term (filter)
• Validate after guest completion of field entry
• Validation occurs upon click of Apply Criteria button
Text box • Validated for correct number & type of chars, NOT for validity of the number itself as an existing Promotion code
• Numeric only, no special characters allowed.
• Max number of chars: 9
• On click of Apply Criteria button validate existence of the Loyalty number. If valid, and no other criteria except Promotion Code entered, execute search against the Loyalty number entered.
• If invalid, return an error.
Hard coded
4.15 Loyalty Lookup • Loyalty look up link keeps existing functionality.
Button - Hard Coded
4.16 Promotion Code Label
• Non-functional text for Promo codes Text - Hard coded
Project Pricing & Promotion
Document User Experience Specifications
File Cel_PnPSearchBook_UX Spec_v3_4.docx Version 3.4
Confidential Page 14 of 23
Tag #
Item Function Type Validation Source
4.17 Promotion Code entry field
• Promotion Code entered as search term (filter)
• Validate after guest completion of field entry
• Validated upon click of “Apply Criteria” button.
Text Box • Validated for correct number & type of chars, NOT for validity of the number itself as an existing Promotion code
• Max number of chars: 15
• Type of characters allowed TBD by Revenue
Hard coded
4.18 Apply Criteria button
• Inactive until user enters data • Activated once user enters data in
any or all fields • On click, refreshes offer bundles,
now including restricted offers (see 5.6)
Button Max character varies See Section 6.2 for specific field validation checks.
Hard coded.
4.19 Accessibility Filter
• Limits offer bundles shown to those containing accessible staterooms
Checkbox
5 Offer Bundle • Container for Offer Bundle components (5.1 – 5.11)
-
5.1 Bundle category name
• Name of offer bundle • Currently, the three bundles will be
determined as follows: • Lowest Available Fare, Second
Lowest Available Fare, Highest Total Value
Text - CMS/System Generated
5.2 Unrestricted Value-Add Dollar Amount + Label
• Total dollar value of value-adds including OBC, promotional items, etc.
• These are typically determined on a per-stateroom basis
Text -
5.3 Offer Name • Static name of offer Text - System Generated
5.4 Offer Description • Static description of offer • May be left blank
Text - System Generated
5.5 Offer More Details Link Icon
• On click, open Offer Details Modal (5.2) for selected offer
Button
5.6 Unrestricted Discount Dollar Amount + Label
• Total dollar value of unrestricted discounts applied to this sailing, per passenger
Text - System Generated
PANTENE!Functional!Requirements!
! ! 17 of 70
!
!
5.2 Primary!Navigation!!!The!primary!navigation!area!contains!the!brand!logo!and!the!links!to!some!level!1!pages.!
!
!!
! ! ! !
5.2.1.1 Header!image!
Every!page!will!have!a!header!logo!on!the!left!side.!This!image!will!always!link!to!the!home!page,!and!
will!always!have!as!ALT!text!the!title!of!the!home!page!
!
!
! ! ! !
5.2.1.2 Horizontal!menu!!
The!horizontal!menu!will!include!a!direct!link!to!the!first!level!pages!in!the!site!structure.!Due!to!space!
restrictions,!number!of!1st!level!links!needs!to!be!carefully!defined.!There!will!not!be!any!wrapping!of!
this!line.!Link!behaviour!on!mouse!over!will!not!deploy!any!dropdown!menu!as!in!the!current!site,!but!
will!change!to!a!focus!state!to!be!defined!in!the!CSS.!Second!level!accessibility!will!be!shown!in!the!
footer!(ref.!Footer!Navigation).!!
Every!Region!can!add!any!number!of!items!as!there!is!space!to!do!so.!
By!default,!the!first!level!links!to!be!shown!in!the!Horizontal!menu!are:!
!
Display!Name/Image! Initiating!Action! Resulting!Action/Display!
<Expert!Access>! On!click! Will!open!the!Expert!Access!page!in!the!same!
window.!
<Expert!Access>! On!focus! System!will!display!interaction!in!focus!state!
<Expert!Access>! Off!focus! System!will!display!interaction!in!default!state!
<Products>! On!click! Will!open!the!Products!page!in!the!same!
window.!
<Products>! On!focus! System!will!display!interaction!in!focus!state!
<Products>! Off!focus! System!will!display!interaction!in!default!state!
<Looks&Trends>! On!click! Will!open!the!Looks&Trends!page!in!the!same!
window.!
<Looks&Trends>! On!focus! System!will!display!interaction!in!focus!state!
<Looks&Trends>! Off!focus! System!will!display!interaction!in!default!state!
<Science>! On!click! Will!open!the!Science!page!in!the!same!
window.!
<Science>! On!focus! System!will!display!interaction!in!focus!state!
PANTENE!Functional!Requirements!
! ! 18 of 70
<Science>! Off!focus! System!will!display!interaction!in!default!state!<News&Offers>! On!click! Will!open!the!News&Offers!page!in!the!same!
window.!<News&Offers>! On!focus! System!will!display!interaction!in!focus!state!<News&Offers>! Off!focus! System!will!display!interaction!in!default!state!<About!Us>! On!click! Will!open!the!About!Us!page!in!the!same!
window.!<About!Us>! On!focus! System!will!display!interaction!in!focus!state!<About!Us>! Off!focus! System!will!display!interaction!in!default!state!!!
!
5.3 Utility)Navigation)The!Utility!Navigation!appears!in!the!upper!right!corner!of!each!page!and!serves!to!provide!links!to!several!pages!with!an!additional!search!component!on!the!right!side.!!
!!
! ! ! !
5.3.1.1 Utility!Navigation!menu!!The!Utility!Navigation!menu!will!include!a!direct!link!to!any!level!pages!in!the!site!structure.!The!list!and!order!of!links!to!be!shown!will!be!fully!configurable!in!the!CMS.!!In!a!first!moment,!first!level!links!to!be!shown!in!the!Horizontal!menu!are:!!Display!Name/Image! Initiating!Action! Resulting!Action/Display!<Personal!Consultation>! On!click! Will!open!the!Personal!Consultation!page!in!
the!same!window.!<My!Account>! On!focus! If!user!is!not!logged!in,!system!will!show!
submenu!with!link!to!<Login/Register>!If!user!is!logged!in,!system!will!show!submenu!with!link!to!<Log!Out>!
<My!Account>! On!click! May!be!disabled!by!region!!In!same!window,!system!will!open!My!Account!page!
<Login/Register>! On!focus! System!will!display!interaction!in!focus!state!! ! !<Login/Register>! Off!focus! System!will!display!interaction!in!default!state!<Login/Register>! On!click! In!same!window,!system!will!open!My!Account!
page!<Log!Out>! On!focus! System!will!display!interaction!in!focus!state!
PANTENE!Functional!Requirements!
! ! 19 of 70
! ! ! !<Log!Out>! Off!focus! System!will!display!interaction!in!default!state!<Log!Out>! On!click! System!will!log!user!out!of!the!site.!In!same!
window,!system!will!open!Home!page!<Buy!Now>! On!click! Will!function!as!specified!in!4.1!<Country/Language>! On focus! System will expose language selection
submenu.!<Country/Language>! Off focus! System will hide language selection submenu.!<Specific!Country>! On focus! System will display interaction in focus state!<!Specific!Country>! Off focus! System will display interaction in default state!<!Specific!Country>! On Click! System will set locale cookie on user’s local
machine. If link is internal, in same window, system will refresh page to homepage for selected region. If link is external, in new window, system will open and focus on resultant URL!
!
!! ! ! !
5.3.1.2 Search!Box!!Search!box!will!be!located!on!the!right!side!of!the!utility!navigation!menu.!It!will!be!a!single!line!text!box!with!a!button!on!the!side.!Maximum!length!of!the!text!box!and!the!query!will!be!100!characters.!!By!default,!the!search!box!will!show!a!text!(i.e.“SEARCH”)!This!text!has!to!be!configurable!from!the!CMS,!and!could!be!substituted!(manually)!by!the!most!frequent!search!or!a!text!linking!to!a!new!product!that!wants!to!be!showcased!When!there!is!a!focus!on!the!text!box,!the!text!box!empties!(only!the!first!time)!and!lets!the!user!enter!the!search!terms.!!!Search!can!be!launched!both!pressing!the!ENTER!button!on!the!keyboard!(only!when!focus!is!on!the!search!box)!or!clicking!on!the!button!on!the!right!of!the!search!box.!If!no!text!is!entered!and!a!user!clicks!on!the!search!button,!the!default!defined!search!query!will!be!launched.!This!will!help!SEO!for!new!products!or!pages.!!If!user!hits!ENTER!or!clicks!on!the!search!button!with!an!empty!search!box,!a!javascript!alert!will!pop!up!with!the!following!text:!“Please!enter!one!or!more!search!words”!!!
!
5.4 Footer)Navigation)Footer!Navigation!appears!at!the!bottom!of!each!page,!and!includes!two!blocks,!the!global!footer!navigation,!with!links!to!the!site!structure,!and!the!page!footer,!underneath.!!!
Specifications
Prototypes
• Prototypes are interactive mockups, typically built in HTML
• What does this thing feel like on an actual device or display?
• Where are users likely to get stuck or confused?
• How does this adapt between device sizes? (Responsive design)
Prototypes
Prototypes
Prototypes
Usability tests
• Can ordinary people figure this out without help?
• Are we delighting the user or frustrating them?
Usability tests
Usability tests
Usability tests
Design systems
• What does the skin look like?
• The content will be changing often, as will the user’s context
• How does the skin adapt in various scenarios?
• How do we build new pages/screens as needed without going back to the drawing board?
• How resilient to change is this thing?
Design systems2.1 Landing Image
Strip
2.4 Promo Box
2.2 Landing Header Box
2.3 Filter
2.5 Media Center Main Component
2.6 Grid Box with Image
2.9 Left Column Text Block
2.7 Grid Box with Image and List
2.10 Press Releases Block
2.8 Grid Box Text Only
2.11 List Block
2.1 Landing Image Strip
2.4 Promo Box
2.2 Landing Header Box
2.3 Filter
2.5 Media Center Main Component
2.6 Grid Box with Image
2.9 Left Column Text Block
2.7 Grid Box with Image and List
2.10 Press Releases Block
2.8 Grid Box Text Only
2.11 List Block
Design systems[ALL] Level 2 Landing Pages
[LOCAL] Rooms & Suites Landing
[LOCAL] Offers Landing
[LOCAL] Dining Landing
[LOCAL] Spa Landing
[LOCAL] Meetings & Weddings Landing
[LOCAL] Overview Landing [CORPORATE] Our Company Landing
[CORPORATE] Our Company Landing
[CORPORATE] Media Centre Landing
[CORPORATE] Investors Landing
2.1 Landing Image Strip
2.2 Landing Header Box
0.1 Top Navigation 0.2 Find A Hotel Dropdown
2.4 Promo Box
2.4 Promo Box
2.4 Promo Box
2.4 Promo Box
2.3 Filter
2.7 Grid Box with Image and List
2.7 Grid Box with Image and List
2.6 Grid Box with Image
2.6 Grid Box with Image
2.6 Grid Box with Image
2.6 Grid Box with Image
2.6 Grid Box with Image
2.6 Grid Box with Image
2.6 Grid Box with Image
2.6 Grid Box with Image
2.8 Grid Box Text Only
2.8 Grid Box Text Only
2.8 Grid Box Text Only
2.9 Left Column Text Block
2.9 Left Column Text Block
2.9 Left Column Text Block
2.5 Media Center Main Component
2.10 Press Releases Block
2.11 List Block
1.4 Footer
1.1 Main Nav (dark)1.5 Main Nav (light) [CORPORATE][GLOBAL]
[LOCAL]
[ALL] Level 3 Detail Pages
[LOCAL] Rooms & Suites Detail
[LOCAL] Offers Detail
[LOCAL] Dining Detail
[LOCAL] Spa Detail
[LOCAL] Meetings & Weddings Detail
[LOCAL] Overview Detail
0.1 Top Navigation 0.2 Find A Hotel Dropdown
1.4 Footer
1.1 Main Nav (dark)1.5 Main Nav (light) [CORPORATE][GLOBAL]
[LOCAL]
3.1 Side Navigation
3.2 Detail Page Main Image
3.3 Main Content Column
3.4 Detail Widget
3.4 Detail Widget
3.5 Sharing Widget
3.5 Sharing Widget
3.6 Logo Widget 3.8 Related Images Widget
Design systems