SlideShare a Scribd company logo
1 of 96
Download to read offline
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 everywhere
Content
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 case
Let’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 #2
Home
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
property
Give 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 business
Many 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
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
• 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 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.
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.
Wireframes are like blueprints
UX Fundamentals
UX Fundamentals
UX Fundamentals
UX Fundamentals
UX process & skills
Form 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 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.
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
UX Fundamentals
UX deliverables
Start 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 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
Competitive analysis
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
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
Taxonomy
Navigating 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/
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 /
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
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
Wireframes
• What are the components on each page/screen?
• Which are the most and least important?
• Which ones get the most real estate?
Wireframes
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
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
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
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
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 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
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

More Related Content

What's hot

What is a User Experience?
What is a User Experience? What is a User Experience?
What is a User Experience? Dotinum
 
How to Find a Good UI/UX Designer (or be one!)
How to Find a Good UI/UX Designer (or be one!)How to Find a Good UI/UX Designer (or be one!)
How to Find a Good UI/UX Designer (or be one!)Emerentiana Meicy
 
UX in a Nutshell
UX in a NutshellUX in a Nutshell
UX in a NutshellYing Jiang
 
Why UX is Important
Why UX is Important Why UX is Important
Why UX is Important Chris Becker
 
NoVA UX Responsive Design
NoVA UX Responsive DesignNoVA UX Responsive Design
NoVA UX Responsive DesignUXMattFiore
 
Boris Chan - FITC SCREENS - Becoming Social By Default on Mobile
Boris Chan - FITC SCREENS - Becoming Social By Default on MobileBoris Chan - FITC SCREENS - Becoming Social By Default on Mobile
Boris Chan - FITC SCREENS - Becoming Social By Default on MobileBoris Chan
 
10 Design Trends 2015 - UX & UI Trends for Mobile Solutions
10 Design Trends 2015 - UX & UI Trends for Mobile Solutions10 Design Trends 2015 - UX & UI Trends for Mobile Solutions
10 Design Trends 2015 - UX & UI Trends for Mobile SolutionsDMI
 
UXPA2019 Not Your Average Chatbot: Using Cognitive Intercept to Improve Infor...
UXPA2019 Not Your Average Chatbot: Using Cognitive Intercept to Improve Infor...UXPA2019 Not Your Average Chatbot: Using Cognitive Intercept to Improve Infor...
UXPA2019 Not Your Average Chatbot: Using Cognitive Intercept to Improve Infor...UXPA International
 
The history of ux by bara' harb
The history of ux by bara' harb The history of ux by bara' harb
The history of ux by bara' harb BaraaHarb
 
CUA Cardinal Startups 9-17-2018 Talk
CUA Cardinal Startups 9-17-2018 TalkCUA Cardinal Startups 9-17-2018 Talk
CUA Cardinal Startups 9-17-2018 Talkpmcnallyux
 
Mobile UX Design Best Practices for Advertising
Mobile UX Design Best Practices for AdvertisingMobile UX Design Best Practices for Advertising
Mobile UX Design Best Practices for AdvertisingBrant Nesbitt
 
Why User Experience Matters | By UX Professionals from Centerline Digital
Why User Experience Matters | By UX Professionals from Centerline DigitalWhy User Experience Matters | By UX Professionals from Centerline Digital
Why User Experience Matters | By UX Professionals from Centerline DigitalCenterline Digital
 
Basics in User Experience Design, Information Architecture & Usability
Basics in User Experience Design, Information Architecture & UsabilityBasics in User Experience Design, Information Architecture & Usability
Basics in User Experience Design, Information Architecture & UsabilitySebastian Waters
 
Principles of User Interface Design
Principles of User Interface DesignPrinciples of User Interface Design
Principles of User Interface DesignKANKIPATI KISHORE
 
Responsive Web Design: Clever Tips and Techniques - Vitaly Friedman (UX Riga ...
Responsive Web Design: Clever Tips and Techniques - Vitaly Friedman (UX Riga ...Responsive Web Design: Clever Tips and Techniques - Vitaly Friedman (UX Riga ...
Responsive Web Design: Clever Tips and Techniques - Vitaly Friedman (UX Riga ...UX Riga
 
Basic Visual Design Principles and UI Design Best Practices
Basic Visual Design Principles and UI Design Best PracticesBasic Visual Design Principles and UI Design Best Practices
Basic Visual Design Principles and UI Design Best PracticesAvijit Chinara
 

What's hot (19)

What is a User Experience?
What is a User Experience? What is a User Experience?
What is a User Experience?
 
How to Find a Good UI/UX Designer (or be one!)
How to Find a Good UI/UX Designer (or be one!)How to Find a Good UI/UX Designer (or be one!)
How to Find a Good UI/UX Designer (or be one!)
 
UX in a Nutshell
UX in a NutshellUX in a Nutshell
UX in a Nutshell
 
Why UX is Important
Why UX is Important Why UX is Important
Why UX is Important
 
NoVA UX Responsive Design
NoVA UX Responsive DesignNoVA UX Responsive Design
NoVA UX Responsive Design
 
What is UX?
What is UX?What is UX?
What is UX?
 
Boris Chan - FITC SCREENS - Becoming Social By Default on Mobile
Boris Chan - FITC SCREENS - Becoming Social By Default on MobileBoris Chan - FITC SCREENS - Becoming Social By Default on Mobile
Boris Chan - FITC SCREENS - Becoming Social By Default on Mobile
 
10 Design Trends 2015 - UX & UI Trends for Mobile Solutions
10 Design Trends 2015 - UX & UI Trends for Mobile Solutions10 Design Trends 2015 - UX & UI Trends for Mobile Solutions
10 Design Trends 2015 - UX & UI Trends for Mobile Solutions
 
UXPA2019 Not Your Average Chatbot: Using Cognitive Intercept to Improve Infor...
UXPA2019 Not Your Average Chatbot: Using Cognitive Intercept to Improve Infor...UXPA2019 Not Your Average Chatbot: Using Cognitive Intercept to Improve Infor...
UXPA2019 Not Your Average Chatbot: Using Cognitive Intercept to Improve Infor...
 
The history of ux by bara' harb
The history of ux by bara' harb The history of ux by bara' harb
The history of ux by bara' harb
 
UX Trends 2016
UX Trends 2016UX Trends 2016
UX Trends 2016
 
CUA Cardinal Startups 9-17-2018 Talk
CUA Cardinal Startups 9-17-2018 TalkCUA Cardinal Startups 9-17-2018 Talk
CUA Cardinal Startups 9-17-2018 Talk
 
Joshua Porter
Joshua PorterJoshua Porter
Joshua Porter
 
Mobile UX Design Best Practices for Advertising
Mobile UX Design Best Practices for AdvertisingMobile UX Design Best Practices for Advertising
Mobile UX Design Best Practices for Advertising
 
Why User Experience Matters | By UX Professionals from Centerline Digital
Why User Experience Matters | By UX Professionals from Centerline DigitalWhy User Experience Matters | By UX Professionals from Centerline Digital
Why User Experience Matters | By UX Professionals from Centerline Digital
 
Basics in User Experience Design, Information Architecture & Usability
Basics in User Experience Design, Information Architecture & UsabilityBasics in User Experience Design, Information Architecture & Usability
Basics in User Experience Design, Information Architecture & Usability
 
Principles of User Interface Design
Principles of User Interface DesignPrinciples of User Interface Design
Principles of User Interface Design
 
Responsive Web Design: Clever Tips and Techniques - Vitaly Friedman (UX Riga ...
Responsive Web Design: Clever Tips and Techniques - Vitaly Friedman (UX Riga ...Responsive Web Design: Clever Tips and Techniques - Vitaly Friedman (UX Riga ...
Responsive Web Design: Clever Tips and Techniques - Vitaly Friedman (UX Riga ...
 
Basic Visual Design Principles and UI Design Best Practices
Basic Visual Design Principles and UI Design Best PracticesBasic Visual Design Principles and UI Design Best Practices
Basic Visual Design Principles and UI Design Best Practices
 

Similar to UX Fundamentals

Intro to ux and how to design a thoughtful ui
Intro to ux and how to design a thoughtful uiIntro to ux and how to design a thoughtful ui
Intro to ux and how to design a thoughtful uiThanos Makaronas
 
User Experience Explained
User Experience ExplainedUser Experience Explained
User Experience ExplainedSameer dwivedi
 
User Experience: An Industry (Always) in Transition
User Experience: An Industry (Always) in TransitionUser Experience: An Industry (Always) in Transition
User Experience: An Industry (Always) in TransitionGino Zahnd
 
Design Thinking Dallas by Chris Bernard
Design Thinking Dallas by Chris BernardDesign Thinking Dallas by Chris Bernard
Design Thinking Dallas by Chris BernardChris Bernard
 
24 Hours of UX, 2023: Preventing the Future
24 Hours of UX, 2023: Preventing the Future24 Hours of UX, 2023: Preventing the Future
24 Hours of UX, 2023: Preventing the FutureJoshua Randall
 
Multi Platform User Exerience
Multi Platform User ExerienceMulti Platform User Exerience
Multi Platform User ExerienceTanya Zavialova
 
UX design for every screen
UX design for every screenUX design for every screen
UX design for every screenFour Kitchens
 
Intro to UX Design
Intro to UX DesignIntro to UX Design
Intro to UX Designjayyearley
 
How to design enterprise apps that sell
How to design enterprise apps that sellHow to design enterprise apps that sell
How to design enterprise apps that sellInVision App
 
First users: Heuristics for designer/developer collaboration
First users: Heuristics for designer/developer collaborationFirst users: Heuristics for designer/developer collaboration
First users: Heuristics for designer/developer collaborationJonathan Abbett
 
Harnessing the content beast – Content marketing in the multiscreen world
Harnessing the content beast – Content marketing in the multiscreen worldHarnessing the content beast – Content marketing in the multiscreen world
Harnessing the content beast – Content marketing in the multiscreen worldThomas Robbins
 
05 DIGI CREATIVE people&process
05 DIGI CREATIVE people&process05 DIGI CREATIVE people&process
05 DIGI CREATIVE people&processSheSaysCREATIVE
 
Top 3 Ways to use your UX Team for Product Owners
Top 3 Ways to use your UX Team for Product OwnersTop 3 Ways to use your UX Team for Product Owners
Top 3 Ways to use your UX Team for Product OwnersJeremy Johnson
 
UX Design Process - MIT ID Innovation
UX Design Process - MIT ID InnovationUX Design Process - MIT ID Innovation
UX Design Process - MIT ID InnovationPankaj Deshpande
 
Design Learnings
Design LearningsDesign Learnings
Design LearningsQuikr
 
User Experience Design: an Overview
User Experience Design: an OverviewUser Experience Design: an Overview
User Experience Design: an OverviewJulie Grundy
 

Similar to UX Fundamentals (20)

Intro to ux and how to design a thoughtful ui
Intro to ux and how to design a thoughtful uiIntro to ux and how to design a thoughtful ui
Intro to ux and how to design a thoughtful ui
 
User Experience Explained
User Experience ExplainedUser Experience Explained
User Experience Explained
 
UX/UI Introduction
UX/UI IntroductionUX/UI Introduction
UX/UI Introduction
 
User Experience: An Industry (Always) in Transition
User Experience: An Industry (Always) in TransitionUser Experience: An Industry (Always) in Transition
User Experience: An Industry (Always) in Transition
 
Design Thinking Dallas by Chris Bernard
Design Thinking Dallas by Chris BernardDesign Thinking Dallas by Chris Bernard
Design Thinking Dallas by Chris Bernard
 
24 Hours of UX, 2023: Preventing the Future
24 Hours of UX, 2023: Preventing the Future24 Hours of UX, 2023: Preventing the Future
24 Hours of UX, 2023: Preventing the Future
 
Multi Platform User Exerience
Multi Platform User ExerienceMulti Platform User Exerience
Multi Platform User Exerience
 
UX design for every screen
UX design for every screenUX design for every screen
UX design for every screen
 
Interaction design
Interaction designInteraction design
Interaction design
 
Intro to UX Design
Intro to UX DesignIntro to UX Design
Intro to UX Design
 
How to design enterprise apps that sell
How to design enterprise apps that sellHow to design enterprise apps that sell
How to design enterprise apps that sell
 
First users: Heuristics for designer/developer collaboration
First users: Heuristics for designer/developer collaborationFirst users: Heuristics for designer/developer collaboration
First users: Heuristics for designer/developer collaboration
 
Harnessing the content beast – Content marketing in the multiscreen world
Harnessing the content beast – Content marketing in the multiscreen worldHarnessing the content beast – Content marketing in the multiscreen world
Harnessing the content beast – Content marketing in the multiscreen world
 
B.r.info solution
B.r.info solutionB.r.info solution
B.r.info solution
 
05 DIGI CREATIVE people&process
05 DIGI CREATIVE people&process05 DIGI CREATIVE people&process
05 DIGI CREATIVE people&process
 
Top 3 Ways to use your UX Team for Product Owners
Top 3 Ways to use your UX Team for Product OwnersTop 3 Ways to use your UX Team for Product Owners
Top 3 Ways to use your UX Team for Product Owners
 
UX Design Process - MIT ID Innovation
UX Design Process - MIT ID InnovationUX Design Process - MIT ID Innovation
UX Design Process - MIT ID Innovation
 
B.r.info solution
B.r.info solutionB.r.info solution
B.r.info solution
 
Design Learnings
Design LearningsDesign Learnings
Design Learnings
 
User Experience Design: an Overview
User Experience Design: an OverviewUser Experience Design: an Overview
User Experience Design: an Overview
 

Recently uploaded

Embroidery design from embroidery magazine
Embroidery design from embroidery magazineEmbroidery design from embroidery magazine
Embroidery design from embroidery magazineRivanEleraki
 
Best-NO1 Pakistani Amil Baba Real Amil baba In Pakistan Najoomi Baba in Pakis...
Best-NO1 Pakistani Amil Baba Real Amil baba In Pakistan Najoomi Baba in Pakis...Best-NO1 Pakistani Amil Baba Real Amil baba In Pakistan Najoomi Baba in Pakis...
Best-NO1 Pakistani Amil Baba Real Amil baba In Pakistan Najoomi Baba in Pakis...Amil baba
 
Production of Erythromycin microbiology.pptx
Production of Erythromycin microbiology.pptxProduction of Erythromycin microbiology.pptx
Production of Erythromycin microbiology.pptxb2kshani34
 
LRFD Bridge Design Specifications-AASHTO (2014).pdf
LRFD Bridge Design Specifications-AASHTO (2014).pdfLRFD Bridge Design Specifications-AASHTO (2014).pdf
LRFD Bridge Design Specifications-AASHTO (2014).pdfHctorFranciscoSnchez1
 
The future of UX design support tools - talk Paris March 2024
The future of UX design support tools - talk Paris March 2024The future of UX design support tools - talk Paris March 2024
The future of UX design support tools - talk Paris March 2024Alan Dix
 
Cold War Tensions Increase - 1945-1952.pptx
Cold War Tensions Increase - 1945-1952.pptxCold War Tensions Increase - 1945-1952.pptx
Cold War Tensions Increase - 1945-1952.pptxSamKuruvilla5
 
UX Conference on UX Research Trends in 2024
UX Conference on UX Research Trends in 2024UX Conference on UX Research Trends in 2024
UX Conference on UX Research Trends in 2024mikailaoh
 
Designing for privacy: 3 essential UX habits for product teams
Designing for privacy: 3 essential UX habits for product teamsDesigning for privacy: 3 essential UX habits for product teams
Designing for privacy: 3 essential UX habits for product teamsBlock Party
 
Create Funeral Invites Online @ feedvu.com
Create Funeral Invites Online @ feedvu.comCreate Funeral Invites Online @ feedvu.com
Create Funeral Invites Online @ feedvu.comjakyjhon00
 
Construction Documents Checklist before Construction
Construction Documents Checklist before ConstructionConstruction Documents Checklist before Construction
Construction Documents Checklist before ConstructionResDraft
 
WCM Branding Agency | 210519 - Portfolio Review (F&B) -s.pptx
WCM Branding Agency | 210519 - Portfolio Review (F&B) -s.pptxWCM Branding Agency | 210519 - Portfolio Review (F&B) -s.pptx
WCM Branding Agency | 210519 - Portfolio Review (F&B) -s.pptxHasan S
 
Introduce Trauma-Informed Design to Your Organization - CSUN ATC 2024
Introduce Trauma-Informed Design to Your Organization - CSUN ATC 2024Introduce Trauma-Informed Design to Your Organization - CSUN ATC 2024
Introduce Trauma-Informed Design to Your Organization - CSUN ATC 2024Ted Drake
 
Building+your+Data+Project+on+AWS+-+Luke+Anderson.pdf
Building+your+Data+Project+on+AWS+-+Luke+Anderson.pdfBuilding+your+Data+Project+on+AWS+-+Luke+Anderson.pdf
Building+your+Data+Project+on+AWS+-+Luke+Anderson.pdfsaidbilgen
 
Math Group 3 Presentation OLOLOLOLILOOLLOLOL
Math Group 3 Presentation OLOLOLOLILOOLLOLOLMath Group 3 Presentation OLOLOLOLILOOLLOLOL
Math Group 3 Presentation OLOLOLOLILOOLLOLOLkenzukiri
 
Khushi sharma undergraduate portfolio...
Khushi sharma undergraduate portfolio...Khushi sharma undergraduate portfolio...
Khushi sharma undergraduate portfolio...khushisharma298853
 
Mike Tyson Sign The Contract Big Boy Shirt
Mike Tyson Sign The Contract Big Boy ShirtMike Tyson Sign The Contract Big Boy Shirt
Mike Tyson Sign The Contract Big Boy ShirtTeeFusion
 
High-Quality Faux Embroidery Services | Cre8iveSkill
High-Quality Faux Embroidery Services | Cre8iveSkillHigh-Quality Faux Embroidery Services | Cre8iveSkill
High-Quality Faux Embroidery Services | Cre8iveSkillCre8iveskill
 
How to use Ai for UX UI Design | ChatGPT
How to use Ai for UX UI Design | ChatGPTHow to use Ai for UX UI Design | ChatGPT
How to use Ai for UX UI Design | ChatGPTThink 360 Studio
 
Design mental models for managing large-scale dbt projects. March 21, 2024 in...
Design mental models for managing large-scale dbt projects. March 21, 2024 in...Design mental models for managing large-scale dbt projects. March 21, 2024 in...
Design mental models for managing large-scale dbt projects. March 21, 2024 in...Ed Orozco
 

Recently uploaded (19)

Embroidery design from embroidery magazine
Embroidery design from embroidery magazineEmbroidery design from embroidery magazine
Embroidery design from embroidery magazine
 
Best-NO1 Pakistani Amil Baba Real Amil baba In Pakistan Najoomi Baba in Pakis...
Best-NO1 Pakistani Amil Baba Real Amil baba In Pakistan Najoomi Baba in Pakis...Best-NO1 Pakistani Amil Baba Real Amil baba In Pakistan Najoomi Baba in Pakis...
Best-NO1 Pakistani Amil Baba Real Amil baba In Pakistan Najoomi Baba in Pakis...
 
Production of Erythromycin microbiology.pptx
Production of Erythromycin microbiology.pptxProduction of Erythromycin microbiology.pptx
Production of Erythromycin microbiology.pptx
 
LRFD Bridge Design Specifications-AASHTO (2014).pdf
LRFD Bridge Design Specifications-AASHTO (2014).pdfLRFD Bridge Design Specifications-AASHTO (2014).pdf
LRFD Bridge Design Specifications-AASHTO (2014).pdf
 
The future of UX design support tools - talk Paris March 2024
The future of UX design support tools - talk Paris March 2024The future of UX design support tools - talk Paris March 2024
The future of UX design support tools - talk Paris March 2024
 
Cold War Tensions Increase - 1945-1952.pptx
Cold War Tensions Increase - 1945-1952.pptxCold War Tensions Increase - 1945-1952.pptx
Cold War Tensions Increase - 1945-1952.pptx
 
UX Conference on UX Research Trends in 2024
UX Conference on UX Research Trends in 2024UX Conference on UX Research Trends in 2024
UX Conference on UX Research Trends in 2024
 
Designing for privacy: 3 essential UX habits for product teams
Designing for privacy: 3 essential UX habits for product teamsDesigning for privacy: 3 essential UX habits for product teams
Designing for privacy: 3 essential UX habits for product teams
 
Create Funeral Invites Online @ feedvu.com
Create Funeral Invites Online @ feedvu.comCreate Funeral Invites Online @ feedvu.com
Create Funeral Invites Online @ feedvu.com
 
Construction Documents Checklist before Construction
Construction Documents Checklist before ConstructionConstruction Documents Checklist before Construction
Construction Documents Checklist before Construction
 
WCM Branding Agency | 210519 - Portfolio Review (F&B) -s.pptx
WCM Branding Agency | 210519 - Portfolio Review (F&B) -s.pptxWCM Branding Agency | 210519 - Portfolio Review (F&B) -s.pptx
WCM Branding Agency | 210519 - Portfolio Review (F&B) -s.pptx
 
Introduce Trauma-Informed Design to Your Organization - CSUN ATC 2024
Introduce Trauma-Informed Design to Your Organization - CSUN ATC 2024Introduce Trauma-Informed Design to Your Organization - CSUN ATC 2024
Introduce Trauma-Informed Design to Your Organization - CSUN ATC 2024
 
Building+your+Data+Project+on+AWS+-+Luke+Anderson.pdf
Building+your+Data+Project+on+AWS+-+Luke+Anderson.pdfBuilding+your+Data+Project+on+AWS+-+Luke+Anderson.pdf
Building+your+Data+Project+on+AWS+-+Luke+Anderson.pdf
 
Math Group 3 Presentation OLOLOLOLILOOLLOLOL
Math Group 3 Presentation OLOLOLOLILOOLLOLOLMath Group 3 Presentation OLOLOLOLILOOLLOLOL
Math Group 3 Presentation OLOLOLOLILOOLLOLOL
 
Khushi sharma undergraduate portfolio...
Khushi sharma undergraduate portfolio...Khushi sharma undergraduate portfolio...
Khushi sharma undergraduate portfolio...
 
Mike Tyson Sign The Contract Big Boy Shirt
Mike Tyson Sign The Contract Big Boy ShirtMike Tyson Sign The Contract Big Boy Shirt
Mike Tyson Sign The Contract Big Boy Shirt
 
High-Quality Faux Embroidery Services | Cre8iveSkill
High-Quality Faux Embroidery Services | Cre8iveSkillHigh-Quality Faux Embroidery Services | Cre8iveSkill
High-Quality Faux Embroidery Services | Cre8iveSkill
 
How to use Ai for UX UI Design | ChatGPT
How to use Ai for UX UI Design | ChatGPTHow to use Ai for UX UI Design | ChatGPT
How to use Ai for UX UI Design | ChatGPT
 
Design mental models for managing large-scale dbt projects. March 21, 2024 in...
Design mental models for managing large-scale dbt projects. March 21, 2024 in...Design mental models for managing large-scale dbt projects. March 21, 2024 in...
Design mental models for managing large-scale dbt projects. March 21, 2024 in...
 

UX Fundamentals

  • 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
  • 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
  • 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?
  • 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.
  • 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?
  • 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)
  • 89. Usability tests • Can ordinary people figure this out without help? • Are we delighting the user or frustrating them?
  • 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