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

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

3. Experience design predates UX
• Experience design has been an
offline practice for decades
• Typically refers to physical
environments such as retail,
tradeshows and events

4. Service design, too
• Many business processes are
complex and must be carefully
choreographed
• Pharmacies
• Call centers
• Starbucks

5. “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

6. Interfaces are everywhere
Content
Text
Video
Images
Sound
Interface
Navigation elements
Inputs & controls
Page structure/layout
Flow between pages/states

7. • This diagram
represents the
interface itself.
• The content – text,
graphics, video, etc. –
goes in the boxes
Interface only

8. • 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

9. FYI, your
tv has
one, too
!
!
INTERFACE
CONTENT

10. A quick case
Let’s dive right in

11. • Why am I here?
Case 1

12. 1. Where are the hotels
and rooms?
2. Why am I looking at
Kevin Spacey?
3. Oh, up there.
Case 1

13. • Original design
showing hotel list in
place by default
Case 1

14. • 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

15. • The user cannot do
two things at once
• We have to guide
them down the path
we want them to
take
Rule #2
Home
Find a hotel Look at ads
Which path do we emphasize?

16. • There is often a conflict
of interest between
marketers and users
• Eventually, the users
always win: they just go
somewhere else
Rule #3

17. Why is UX important?
The amount of UX in your life is proportional to the time your
company spends building sites and apps.

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

19. • Banner ads are
digital, but require
little UX.
!
• The publisher
controls the
experience. The
advertiser simply
inserts content.
Paid

20. • Websites require UX.
• The brand is
responsible for the
content, the interface,
the technology, the
analytics, and any data
or services offered.
Owned

21. • 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

22. • Social media is digital,
but requires little UX.
!
• The platform controls
the experience. The
brand simply inserts
content.
Earned

23. The virtuous cycle of earned media
Drive users to
my site or social
property
Give them what
they want
Enable them to
share their
positive
experience
PAID OWNED EARNED

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

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

26. UX connects to the business
Many sites, apps and digital products are more closely
connected to the business itself than ever before,
expanding the definition of “advertising.”

27. • 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

28. Booking
systems
• Can you work on a
travel brand without
considering
Tripadvisor, Expedia,
etc.?

29. Commerce
• Can you work on a
retail brand without
looking at Amazon?

30. Digital
product
• If an agency wants to
play in this space, it
has to get technical

31. What is good UX?
Empathy is a key component of UX.
It’s about what the user wants, not what the marketer wants.

32. • What’s on the menu?
• What’s the price
range?
• Where is it?
Case 2

33. • OK, OK. I get that I
have to choose a
location first.
Case 2

34. • Wait, so where is the
menu?
Case 2

35. • So there’s no way to
just scan the menu? I
have to navigate this
crazy thing?
Case 2

36. • Proposed design
showing location auto-
detect
Case 2

37. • Proposed design
showing scannable
menu with visual
slideshow
Case 2

38. • Was this designed by
an adult?
Case 3

39. • Original wireframe
Case 3
Googlehttp://
Title Goes Here
Ideas
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
app
Hess
Android
app
Hess iOS
app
Get the HESS Express
Mobile App
Featured Brands
IMAGE
1.99
Title of promo
goes here and
here and
Lorem ipsum dolor sit
amet, consectetur
adipiscing elit.
$
IMAGE
1.99
Title of promo
goes here and
here and
Lorem ipsum dolor sit
amet, consectetur
adipiscing elit.
$
IMAGE
1.99
Title of promo
goes here and
$
IMAGE
1.99
Title of promo
goes here and
$
Current Promos
Store Locator Deals & Coupons HESS Cards HESS Apps
Careers Contact Us
Products Idea Box About Us

40. • Early design sketch
Case 3

41. • Wow. Everything that
sucks about the
goverment -- now in
website format!
Case 4

42. • Look, humans!
• And the names of
forms that I actually
use.
• And specific things I
need to do
Case 4

43. The goal of UX is speed
Get 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.

44. UX is functional design
Software 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.

45. Wireframes are like blueprints

50. UX process & skills
Form follows function

51. UX skillsets
“Advanced
common sense”
Visual Design
Software
Development
Project Management

52. A typical software design process

53. • 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

54. Levels of increasing fidelity
Schematic
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.

55. Structure suggests design
PRODUCTS LOOKS & TRENDS NEWS & OFFERSSCIENCEEXPERT ACCESS
Personal Consultation My Account SEARCH
ABOUT US
Buy Now Country/Language
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, MichaelCreator
11 / 22Pantene 2.5 Change Doc
Old site New Design
New Wireframe

57. UX deliverables
Start with broad strategy and gradually increase the level of fidelity.

58. Competitive analysis
• What’s going on around the user?
• What are the conventions in our space?
• What are my users likely to have experienced?

59. Deliverable System Assets
Version 5 published July 24, 2009 by Nathan Curtis (nathan@eightshapes.com) 82 of 136
Criteria.Two-by-Two
Description
Ommy 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
Site
Site
Site
Site
Site
Site
Site
Site
Site
Site
Site
Site
Competitive analysis

60. Competitive analysis

61. Page
Inventory
Page
Inventory
Page
Inventory
C D
Page
Inventory
A B
Section Front
Detail Page
Search
Home
Standalone Video
Section Front
Detail Page
Search
Home
Standalone Video
Section Front
Search
Home
Section Front
Search
Home
Standalone Video
Section Front
Detail Page
Search
Home
Standalone Video
Section Front
Detail Page
Search
Home
Standalone Video
Section Front
Detail Page
Search
Home
Standalone Video
Section Front
Detail Page
Search
Home
Standalone Video
Section Front
Detail Page
Search
Home
Standalone Video
Section Front
Detail Page
Search
Home
Section Front
Detail Page
Search
Home
Standalone Video
Section Front
Detail Page
Search
Home
Standalone Video
Section Front
Detail Page
Search
Home
Section Front
Detail Page
Search
Home
Standalone Video
Section Front
Detail Page
Search
Home
Standalone Video
Section Front
Detail Page
Search
Home
Purchase
Complete
Product
Page
section
page
landing
page
B DA C
Competitive analysis

62. Personas
• Mental models of different user types
• Helpful in dealing with complex systems

63. Personas

64. Personas

65. Personas

66. 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?

67. User flows

68. User flows

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

70. Taxonomy
• How do we organize all the information on a site?
• This could be product info, recipe info, help or reference info, etc.

71. Taxonomy

72. Taxonomy

73. Taxonomy
Navigating to
headphones on
amazon.com
The taxonomy here is
so deep that most
people never use it.

74. Site maps
• What are the actual pages/screens we are building?
• How does the user get from one to another?

75. 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/
Custom
Article 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 Kit
News by E-mail
Downloads
RSS News Feeds
Annual Reports & Proxy
CIO Reports
Upcoming
Archived
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 /

76. Global
Global 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 My Stay
[DETAIL
VIEWS]
Favorites
[DETAIL
VIEWS]
Temptations
[DETAIL
VIEWS] Details
Corporate
Corporate
Contacts
Our 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
DiningRooms
Meetings &
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 Footer
MO App Gift Cards Follow Us Sitemap Policies Feedback
Universal Header
Global Home Explore Map
Find A Hotel
(dropdown)
Language
Selector
(drop down)
Book Now Booking Flow
MandarinOriental.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

77. PACE UNIVERSITY | USER EXPERIENCE Schools Sitemap
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
Announce
ments
FAQ
For Faculty
For Alumni
For Parents
Research
Contact Us
Social Media
Center
Connect with
Us
Advisors
Site maps

78. Wireframes
• What are the components on each page/screen?
• Which are the most and least important?
• Which ones get the most real estate?

79. Wireframes

80. Wireframes
From: Olive Garden
To: John Doe
Subject:
3:00PM March 1, 2013
OLIVE GARDEN
LOGO
FIND A LOCATION VIEW MENU GIVE GIFT CARD
Legal Copy Goes Here
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.
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 Limonata
or other non-alcoholic beverage
with an adult lunch entree
Print Free Drink Coupon
Offer valid during Lunch Monday-Friday
Expires 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

81. Wireframes
RCI iPad App Destination > Resorts > Map
Welcome, Jennifer Search
6
27 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
Welcome, Jennifer Search
6
27 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 View
Branson [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

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

83. 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
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
Label +
Check
• Not a filter.
• Can be
Hard coded
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
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
Text - CMS/System
Generated

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

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

86. Prototypes

87. Prototypes

88. Prototypes

89. Usability tests
• Can ordinary people figure this out without help?
• Are we delighting the user or frustrating them?

90. Usability tests

91. Usability tests

92. Usability tests

93. 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?

94. Design systems
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
2.4 Promo 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

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

96. Design systems