SlideShare a Scribd company logo
sophia voychehovski • @sophiavux • sophiavux.com
Your Brain on Responsive Design
thoughts on changing the way you work & think, derived from Elections Night 2012
SophiaVoycehovski • Senior UX Designer • CNN Digital
sophia voychehovski • @sophiavux • sophiavux.com
Design Process + Responsive
A painless process for you = a painless product for your users
SophiaVoycehovski • Senior UX Designer • CNN Digital
sophia voychehovski • @sophiavux • sophiavux.com
Adaptive
Layout
Adaptive
Design
Accessible
DesignRWD
@media
queries
@media
queries
Fluid Grid, percentages!
Fluid Images
Progressive Enhancement:
best experience, most design to most
audience on most devices.
Design for screen
readers, assistive
technology
Coined by Ethan Marcotte
Set Breakpoints
Multiple image cuts
Check out the book by Aaron Gustafson.
(google for a free download)
sophia voychehovski • @sophiavux • sophiavux.com
RWD
Resizing
Reflowing
“Toggling”
Templates Modules Elements
sophia voychehovski • @sophiavux • sophiavux.com
sophia voychehovski • @sophiavux • sophiavux.com
sophia voychehovski • @sophiavux • sophiavux.com
omg
Whatever
HOLY MOLY!
Stakes
$
$
$
$
$
$
$
$
$
Risk
?
?
?
?
?
?
?
?
?
?
sophia voychehovski • @sophiavux • sophiavux.com
Text
sophia voychehovski • @sophiavux • sophiavux.com
Text
2nd highest page views in history, behind Election Night 2008.
101.5 million page views in Politics Section, 1/2 traffic of entire site.
Highest mobile web page views in history,
3x higher than previous record. (46 million)
CNN’s iOS apps achieved 235k downloads,
making Election Night the largest day on record since initial launch in 2009.
sophia voychehovski • @sophiavux • sophiavux.com
sophia voychehovski • @sophiavux • sophiavux.com
Based on general sense of
project, conduct:
- user research
- opportunity research
- competitive analysis
Explore experience metaphors
Responsive Road Shows.
Explore general look and feel and
experience metaphors
1.Articulate Business Goals
2.Draft SINGLE Business
Requirements Document, stating
the problems and the needs, not
the UX solutions.
• Trace to Biz Goals
• No platform-specific
requirements! (Mobile First -
hierarchy and priority)
• Do draft from non-responsive
soon-to-be legacy site.
• Do not try and partition sprints
based on business requirements.
Business reviews and iterates on
goals and requirements with UX
team and Technical team.
(research and validate
assumptions)
Review and discuss experience
metaphors (brand identity)
1.Translate Business Goals into XOs
2.Translate BRs into Attributes.
“PLAY WITH LEGOS PART 1”
1. Untangle basic user flows
2. Identify LCD templates that can be
applied to steps in user flows
3. Identify LCD modules needed to carry
out BRs
4.Create priority prototype for each
template. (List of modules for each
template)
5. Consider Navigation and full site map
across platforms.
Define basic styles based on module
library (style tiles).
Explore global interaction design
Conduct motion studies.
Research responsive, latest development
methodologies anticipated to use.
Maintain and update Business goals and
requirements.
Business and Dev review UX and visual
design efforts.
“...LEGOS PART 2”
1. Identify LCD elements
needed for each module.
2. Refine user flows
3. Determine “rules of
response” for modules
4. Paper test, mobile first
Create example comps as
needed and begin exploring
detailed module design.
Translate into higher fidelity
CSS.
Mock up LCD templates,
placeholder LDD modules,
and multiple concepts for
navigation.
Continue to refine
functionality, interplay and
rules of system. Write UX/UI
requirements as needed.
Work with Dev to hand off
detailed functionality.
Collaborate with UX to refine
detailed interaction,
iconography, infographics,
etc
Build 80% of style guide,
based on 80% complete
wireframes.
Layer on basic functionality
of modules, logic, rules. Give
ownership of modules to
individual developers, but
encourage collaboration and
knowledge transfer.
Technical lead break up
modules/templates into
sizable chucks for remaining
sprints.
1.User Test with working
prototype.
2.Refine design
3.Prioritize changes with Dev
and Biz
Tie up any complex graphic,
icons, textures.
Maintain style guide.
Layer on Detailed
functionality on assigned
modules.
Make any template level
changes as needed.
Review, support, collaborate.
Maintain documentation.
Review, support, collaborate.
Maintain documentation.
Review, support, collaborate.
Maintain documentation.
Business and Dev review UX
and visual design efforts.
Business reviews UX and
development efforts. UX
reviews dev & visual efforts
Business reviews UX and
development efforts. UX
reviews dev efforts
Funtional QA
Visual QA
Bug fixes, load testing,
simulations
Business QA
Everyone reviews and
supports development
efforts.
Advise Business and UX
Prework Sprint 0 (x2?) Sprint 1 Sprint 2 Sprint 3+ Optimization
COLLAB BIZ UX VISUAL DEV
sophia voychehovski • @sophiavux • sophiavux.com
Based on general sense of
project, conduct:
- user research
- opportunity research
- competitive analysis
Explore experience metaphors
Responsive Road Shows.
Explore general look and feel and
experience metaphors
1.Articulate Business Goals
2.Draft SINGLE Business
Requirements Document, stating
the problems and the needs, not
the UX solutions.
• Trace to Biz Goals
• No platform-specific
requirements! (Mobile First -
hierarchy and priority)
• Do draft from non-responsive
soon-to-be legacy site.
• Do not try and partition sprints
based on business requirements.
Business reviews and iterates on
goals and requirements with UX
team and Technical team.
(research and validate
assumptions)
Review and discuss experience
metaphors (brand identity)
1.Translate Business Goals into XOs
2.Translate BRs into Attributes.
“PLAY WITH LEGOS PART 1”
1. Untangle basic user flows
2. Identify LCD templates that can be
applied to steps in user flows
3. Identify LCD modules needed to carry
out BRs
4.Create priority prototype for each
template. (List of modules for each
template)
5. Consider Navigation and full site map
across platforms.
Define basic styles based on module
library (style tiles).
Explore global interaction design
Conduct motion studies.
Research responsive, latest development
methodologies anticipated to use.
Maintain and update Business goals and
requirements.
Business and Dev review UX and visual
design efforts.
“...LEGOS PART 2”
1. Identify LCD elements
needed for each module.
2. Refine user flows
3. Determine “rules of
response” for modules
4. Paper test, mobile first
Create example comps as
needed and begin exploring
detailed module design.
Translate into higher fidelity
CSS.
Mock up LCD templates,
placeholder LDD modules,
and multiple concepts for
navigation.
Continue to refine
functionality, interplay and
rules of system. Write UX/UI
requirements as needed.
Work with Dev to hand off
detailed functionality.
Collaborate with UX to refine
detailed interaction,
iconography, infographics,
etc
Build 80% of style guide,
based on 80% complete
wireframes.
Layer on basic functionality
of modules, logic, rules. Give
ownership of modules to
individual developers, but
encourage collaboration and
knowledge transfer.
Technical lead break up
modules/templates into
sizable chucks for remaining
sprints.
1.User Test with working
prototype.
2.Refine design
3.Prioritize changes with Dev
and Biz
Tie up any complex graphic,
icons, textures.
Maintain style guide.
Layer on Detailed
functionality on assigned
modules.
Make any template level
changes as needed.
Review, support, collaborate.
Maintain documentation.
Review, support, collaborate.
Maintain documentation.
Review, support, collaborate.
Maintain documentation.
Business and Dev review UX
and visual design efforts.
Business reviews UX and
development efforts. UX
reviews dev & visual efforts
Business reviews UX and
development efforts. UX
reviews dev efforts
Funtional QA
Visual QA
Bug fixes, load testing,
simulations
Business QA
Everyone reviews and
supports development
efforts.
Advise Business and UX
Prework Sprint 0 (x2?) Sprint 1 Sprint 2 Sprint 3+ Optimization
COLLAB BIZ UX VISUAL DEV
Strategy Scope Structure Skeleton
Surface
sophia voychehovski • @sophiavux • sophiavux.com
Based on general sense of
project, conduct:
- user research
- opportunity research
- competitive analysis
Explore experience metaphors
Responsive Road Shows.
Explore general look and feel and
experience metaphors
1.Articulate Business Goals
2.Draft SINGLE Business
Requirements Document, stating
the problems and the needs, not
the UX solutions.
• Trace to Biz Goals
• No platform-specific
requirements! (Mobile First -
hierarchy and priority)
• Do draft from non-responsive
soon-to-be legacy site.
• Do not try and partition sprints
based on business requirements.
Business reviews and iterates on
goals and requirements with UX
team and Technical team.
(research and validate
assumptions)
Review and discuss experience
metaphors (brand identity)
1.Translate Business Goals into XOs
2.Translate BRs into Attributes.
“PLAY WITH LEGOS PART 1”
1. Untangle basic user flows
2. Identify LCD templates that can be
applied to steps in user flows
3. Identify LCD modules needed to carry
out BRs
4.Create priority prototype for each
template. (List of modules for each
template)
5. Consider Navigation and full site map
across platforms.
Define basic styles based on module
library (style tiles).
Explore global interaction design
Conduct motion studies.
Research responsive, latest development
methodologies anticipated to use.
Maintain and update Business goals and
requirements.
Business and Dev review UX and visual
design efforts.
“...LEGOS PART 2”
1. Identify LCD elements
needed for each module.
2. Refine user flows
3. Determine “rules of
response” for modules
4. Paper test, mobile first
Create example comps as
needed and begin exploring
detailed module design.
Translate into higher fidelity
CSS.
Mock up LCD templates,
placeholder LDD modules,
and multiple concepts for
navigation.
Continue to refine
functionality, interplay and
rules of system. Write UX/UI
requirements as needed.
Work with Dev to hand off
detailed functionality.
Collaborate with UX to refine
detailed interaction,
iconography, infographics,
etc
Build 80% of style guide,
based on 80% complete
wireframes.
Layer on basic functionality
of modules, logic, rules. Give
ownership of modules to
individual developers, but
encourage collaboration and
knowledge transfer.
Technical lead break up
modules/templates into
sizable chucks for remaining
sprints.
1.User Test with working
prototype.
2.Refine design
3.Prioritize changes with Dev
and Biz
Tie up any complex graphic,
icons, textures.
Maintain style guide.
Layer on Detailed
functionality on assigned
modules.
Make any template level
changes as needed.
Review, support, collaborate.
Maintain documentation.
Review, support, collaborate.
Maintain documentation.
Review, support, collaborate.
Maintain documentation.
Business and Dev review UX
and visual design efforts.
Business reviews UX and
development efforts. UX
reviews dev & visual efforts
Business reviews UX and
development efforts. UX
reviews dev efforts
Funtional QA
Visual QA
Bug fixes, load testing,
simulations
Business QA
Everyone reviews and
supports development
efforts.
Advise Business and UX
Prework Sprint 0 (x2?) Sprint 1 Sprint 2 Sprint 3+ Optimization
COLLAB BIZ UX VISUAL DEV
Strategy Scope Structure Skeleton
Surface
Business
Viability
Technical
Feasibility
Human
Desirability
Hear Create Deliver
sophia voychehovski • @sophiavux • sophiavux.com
Based on general sense of
project, conduct:
- user research
- opportunity research
- competitive analysis
Explore experience metaphors
Responsive Road Shows.
Explore general look and feel and
experience metaphors
1.Articulate Business Goals
2.Draft SINGLE Business
Requirements Document, stating
the problems and the needs, not
the UX solutions.
• Trace to Biz Goals
• No platform-specific
requirements! (Mobile First -
hierarchy and priority)
• Do draft from non-responsive
soon-to-be legacy site.
• Do not try and partition sprints
based on business requirements.
Business reviews and iterates on
goals and requirements with UX
team and Technical team.
(research and validate
assumptions)
Review and discuss experience
metaphors (brand identity)
1.Translate Business Goals into XOs
2.Translate BRs into Attributes.
“PLAY WITH LEGOS PART 1”
1. Untangle basic user flows
2. Identify LCD templates that can be
applied to steps in user flows
3. Identify LCD modules needed to carry
out BRs
4.Create priority prototype for each
template. (List of modules for each
template)
5. Consider Navigation and full site map
across platforms.
Define basic styles based on module
library (style tiles).
Explore global interaction design
Conduct motion studies.
Research responsive, latest development
methodologies anticipated to use.
Maintain and update Business goals and
requirements.
Business and Dev review UX and visual
design efforts.
“...LEGOS PART 2”
1. Identify LCD elements
needed for each module.
2. Refine user flows
3. Determine “rules of
response” for modules
4. Paper test, mobile first
Create example comps as
needed and begin exploring
detailed module design.
Translate into higher fidelity
CSS.
Mock up LCD templates,
placeholder LDD modules,
and multiple concepts for
navigation.
Continue to refine
functionality, interplay and
rules of system. Write UX/UI
requirements as needed.
Work with Dev to hand off
detailed functionality.
Collaborate with UX to refine
detailed interaction,
iconography, infographics,
etc
Build 80% of style guide,
based on 80% complete
wireframes.
Layer on basic functionality
of modules, logic, rules. Give
ownership of modules to
individual developers, but
encourage collaboration and
knowledge transfer.
Technical lead break up
modules/templates into
sizable chucks for remaining
sprints.
1.User Test with working
prototype.
2.Refine design
3.Prioritize changes with Dev
and Biz
Tie up any complex graphic,
icons, textures.
Maintain style guide.
Layer on Detailed
functionality on assigned
modules.
Make any template level
changes as needed.
Review, support, collaborate.
Maintain documentation.
Review, support, collaborate.
Maintain documentation.
Review, support, collaborate.
Maintain documentation.
Business and Dev review UX
and visual design efforts.
Business reviews UX and
development efforts. UX
reviews dev & visual efforts
Business reviews UX and
development efforts. UX
reviews dev efforts
Funtional QA
Visual QA
Bug fixes, load testing,
simulations
Business QA
Everyone reviews and
supports development
efforts.
Advise Business and UX
Prework Sprint 0 (x2?) Sprint 1 Sprint 2 Sprint 3+ Optimization
COLLAB BIZ UX VISUAL DEV
Strategy Scope Structure Skeleton
Surface
Business
Viability
Technical
Feasibility
Human
Desirability
Hear Create Deliver
DivergeConvergeConverge Diverge Converge
sophia voychehovski • @sophiavux • sophiavux.com
COLLAB
Based on general sense of
project, conduct:
- user research
- opportunity research
- competitive analysis
Explore experience metaphors
Responsive Road Shows.
Explore general look and feel and
experience metaphors
Advise Business and UX
1.Articulate Business Goals
2.Draft SINGLE Business
Requirements Document, stating
the problems and the needs, not
the UX solutions.
• Trace to Biz Goals
• No platform-specific
requirements! (Mobile First -
hierarchy and priority)
• Do draft from non-responsive
soon-to-be legacy site.
• Do not try and partition sprints
based on business requirements.
Business reviews and iterates on
goals and requirements with UX
team and Technical team.
(research and validate
assumptions)
Review and discuss experience
metaphors (brand identity)
1.Translate Business Goals into XOs
2.Translate BRs into Attributes.
“PLAY WITH LEGOS PART 1”
1. Untangle basic user flows
2. Identify LCD templates that can be
applied to steps in user flows
3. Identify LCD modules needed to carry
out BRs
4.Create priority prototype for each
template. (List of modules for each
template)
5. Consider Navigation and full site map
across platforms.
Define basic styles based on module
library (style tiles).
Explore global interaction design
Conduct motion studies.
Research responsive, latest development
methodologies anticipated to use.
Maintain and update Business goals and
requirements.
Business and Dev review UX and visual
design efforts.
“...LEGOS PART 2”
1. Identify LCD elements
needed for each module.
2. Refine user flows
3. Determine “rules of
response” for modules
4. Paper test, mobile first
Create example comps as
needed and begin exploring
detailed module design.
Translate into higher fidelity
CSS.
Mock up LCD templates,
placeholder LDD modules,
and multiple concepts for
navigation.
Continue to refine
functionality, interplay and
rules of system. Write UX/UI
requirements as needed.
Work with Dev to hand off
detailed functionality.
Collaborate with UX to refine
detailed interaction,
iconography, infographics,
etc
Build 80% of style guide,
based on 80% complete
wireframes.
Layer on basic functionality
of modules, logic, rules. Give
ownership of modules to
individual developers, but
encourage collaboration and
knowledge transfer.
Technical lead break up
modules/templates into
sizable chucks for remaining
sprints.
1.User Test with working
prototype.
2.Refine design
3.Prioritize changes with Dev
and Biz
Tie up any complex graphic,
icons, textures.
Maintain style guide.
Layer on Detailed
functionality on assigned
modules.
Make any template level
changes as needed.
Review, support, collaborate.
Maintain documentation.
Review, support, collaborate.
Maintain documentation.
Review, support, collaborate.
Maintain documentation.
Business and Dev review UX
and visual design efforts.
Business reviews UX and
development efforts. UX
reviews dev & visual efforts
Business reviews UX and
development efforts. UX
reviews dev efforts
Funtional QA
Visual QA
Bug fixes, load testing,
simulations
Business QA
Everyone reviews and
supports development
efforts.
Prework Sprint 0 (x2?) Sprint 1 Sprint 2 Sprint 3+ Optimization
BIZ UX VISUAL DEV
Draft SINGLE Business
Requirements Document,
stating the problems and the
needs, not the UX solutions.
• Trace to Biz Goals
• No platform-specific
requirements! (Mobile First
- hierarchy and priority)
• Do draft from non-
responsive soon-to-be
legacy site.
• Do not try and partition
sprints based on business
requirements.
sophia voychehovski • @sophiavux • sophiavux.com
COLLAB
Based on general sense of
project, conduct:
- user research
- opportunity research
- competitive analysis
Explore experience metaphors
Responsive Road Shows.
Explore general look and feel and
experience metaphors
Advise Business and UX
1.Articulate Business Goals
2.Draft SINGLE Business
Requirements Document, stating
the problems and the needs, not
the UX solutions.
• Trace to Biz Goals
• No platform-specific
requirements! (Mobile First -
hierarchy and priority)
• Do draft from non-responsive
soon-to-be legacy site.
• Do not try and partition sprints
based on business requirements.
Business reviews and iterates on
goals and requirements with UX
team and Technical team.
(research and validate
assumptions)
Review and discuss experience
metaphors (brand identity)
1.Translate Business Goals into XOs
2.Translate BRs into Attributes.
“PLAY WITH LEGOS PART 1”
1. Untangle basic user flows
2. Identify LCD templates that can be
applied to steps in user flows
3. Identify LCD modules needed to carry
out BRs
4.Create priority prototype for each
template. (List of modules for each
template)
5. Consider Navigation and full site map
across platforms.
Define basic styles based on module
library (style tiles).
Explore global interaction design
Conduct motion studies.
Research responsive, latest development
methodologies anticipated to use.
Maintain and update Business goals and
requirements.
Business and Dev review UX and visual
design efforts.
“...LEGOS PART 2”
1. Identify LCD elements
needed for each module.
2. Refine user flows
3. Determine “rules of
response” for modules
4. Paper test, mobile first
Create example comps as
needed and begin exploring
detailed module design.
Translate into higher fidelity
CSS.
Mock up LCD templates,
placeholder LDD modules,
and multiple concepts for
navigation.
Continue to refine
functionality, interplay and
rules of system. Write UX/UI
requirements as needed.
Work with Dev to hand off
detailed functionality.
Collaborate with UX to refine
detailed interaction,
iconography, infographics,
etc
Build 80% of style guide,
based on 80% complete
wireframes.
Layer on basic functionality
of modules, logic, rules. Give
ownership of modules to
individual developers, but
encourage collaboration and
knowledge transfer.
Technical lead break up
modules/templates into
sizable chucks for remaining
sprints.
1.User Test with working
prototype.
2.Refine design
3.Prioritize changes with Dev
and Biz
Tie up any complex graphic,
icons, textures.
Maintain style guide.
Layer on Detailed
functionality on assigned
modules.
Make any template level
changes as needed.
Review, support, collaborate.
Maintain documentation.
Review, support, collaborate.
Maintain documentation.
Review, support, collaborate.
Maintain documentation.
Business and Dev review UX
and visual design efforts.
Business reviews UX and
development efforts. UX
reviews dev & visual efforts
Business reviews UX and
development efforts. UX
reviews dev efforts
Funtional QA
Visual QA
Bug fixes, load testing,
simulations
Business QA
Everyone reviews and
supports development
efforts.
Prework Sprint 0 (x2?) Sprint 1 Sprint 2 Sprint 3+ Optimization
BIZ UX VISUAL DEV
PLAY WITH LEGOS - PT 1
1. Untangle basic user
flows
2. Identify LCD templates
that can be applied to
steps in user flows
3. Identify LCD modules
needed to carry out BRs
4.Create priority prototype
for each template. (List of
modules for each
template)
5. Consider Navigation and
full site map across
platforms.
sophia voychehovski • @sophiavux • sophiavux.com
COLLAB
Based on general sense of
project, conduct:
- user research
- opportunity research
- competitive analysis
Explore experience metaphors
Responsive Road Shows.
Explore general look and feel and
experience metaphors
Advise Business and UX
1.Articulate Business Goals
2.Draft SINGLE Business
Requirements Document, stating
the problems and the needs, not
the UX solutions.
• Trace to Biz Goals
• No platform-specific
requirements! (Mobile First -
hierarchy and priority)
• Do draft from non-responsive
soon-to-be legacy site.
• Do not try and partition sprints
based on business requirements.
Business reviews and iterates on
goals and requirements with UX
team and Technical team.
(research and validate
assumptions)
Review and discuss experience
metaphors (brand identity)
1.Translate Business Goals into XOs
2.Translate BRs into Attributes.
“PLAY WITH LEGOS PART 1”
1. Untangle basic user flows
2. Identify LCD templates that can be
applied to steps in user flows
3. Identify LCD modules needed to carry
out BRs
4.Create priority prototype for each
template. (List of modules for each
template)
5. Consider Navigation and full site map
across platforms.
Define basic styles based on module
library (style tiles).
Explore global interaction design
Conduct motion studies.
Research responsive, latest development
methodologies anticipated to use.
Maintain and update Business goals and
requirements.
Business and Dev review UX and visual
design efforts.
“...LEGOS PART 2”
1. Identify LCD elements
needed for each module.
2. Refine user flows
3. Determine “rules of
response” for modules
4. Paper test, mobile first
Create example comps as
needed and begin exploring
detailed module design.
Translate into higher fidelity
CSS.
Mock up LCD templates,
placeholder LDD modules,
and multiple concepts for
navigation.
Continue to refine
functionality, interplay and
rules of system. Write UX/UI
requirements as needed.
Work with Dev to hand off
detailed functionality.
Collaborate with UX to refine
detailed interaction,
iconography, infographics,
etc
Build 80% of style guide,
based on 80% complete
wireframes.
Layer on basic functionality
of modules, logic, rules. Give
ownership of modules to
individual developers, but
encourage collaboration and
knowledge transfer.
Technical lead break up
modules/templates into
sizable chucks for remaining
sprints.
1.User Test with working
prototype.
2.Refine design
3.Prioritize changes with Dev
and Biz
Tie up any complex graphic,
icons, textures.
Maintain style guide.
Layer on Detailed
functionality on assigned
modules.
Make any template level
changes as needed.
Review, support, collaborate.
Maintain documentation.
Review, support, collaborate.
Maintain documentation.
Review, support, collaborate.
Maintain documentation.
Business and Dev review UX
and visual design efforts.
Business reviews UX and
development efforts. UX
reviews dev & visual efforts
Business reviews UX and
development efforts. UX
reviews dev efforts
Funtional QA
Visual QA
Bug fixes, load testing,
simulations
Business QA
Everyone reviews and
supports development
efforts.
Prework Sprint 0 (x2?) Sprint 1 Sprint 2 Sprint 3+ Optimization
BIZ UX VISUAL DEV
a...LEGOS PART 2
1. Identify LCD elements
needed for each module.
2. Refine user flows
3. Determine “rules of
response” for modules
4. Paper test, mobile first
sophia voychehovski • @sophiavux • sophiavux.com
COLLAB
Based on general sense of
project, conduct:
- user research
- opportunity research
- competitive analysis
Explore experience metaphors
Responsive Road Shows.
Explore general look and feel and
experience metaphors
Advise Business and UX
1.Articulate Business Goals
2.Draft SINGLE Business
Requirements Document, stating
the problems and the needs, not
the UX solutions.
• Trace to Biz Goals
• No platform-specific
requirements! (Mobile First -
hierarchy and priority)
• Do draft from non-responsive
soon-to-be legacy site.
• Do not try and partition sprints
based on business requirements.
Business reviews and iterates on
goals and requirements with UX
team and Technical team.
(research and validate
assumptions)
Review and discuss experience
metaphors (brand identity)
1.Translate Business Goals into XOs
2.Translate BRs into Attributes.
“PLAY WITH LEGOS PART 1”
1. Untangle basic user flows
2. Identify LCD templates that can be
applied to steps in user flows
3. Identify LCD modules needed to carry
out BRs
4.Create priority prototype for each
template. (List of modules for each
template)
5. Consider Navigation and full site map
across platforms.
Define basic styles based on module
library (style tiles).
Explore global interaction design
Conduct motion studies.
Research responsive, latest development
methodologies anticipated to use.
Maintain and update Business goals and
requirements.
Business and Dev review UX and visual
design efforts.
“...LEGOS PART 2”
1. Identify LCD elements
needed for each module.
2. Refine user flows
3. Determine “rules of
response” for modules
4. Paper test, mobile first
Create example comps as
needed and begin exploring
detailed module design.
Translate into higher fidelity
CSS.
Mock up LCD templates,
placeholder LDD modules,
and multiple concepts for
navigation.
Continue to refine
functionality, interplay and
rules of system. Write UX/UI
requirements as needed.
Work with Dev to hand off
detailed functionality.
Collaborate with UX to refine
detailed interaction,
iconography, infographics,
etc
Build 80% of style guide,
based on 80% complete
wireframes.
Layer on basic functionality
of modules, logic, rules. Give
ownership of modules to
individual developers, but
encourage collaboration and
knowledge transfer.
Technical lead break up
modules/templates into
sizable chucks for remaining
sprints.
1.User Test with working
prototype.
2.Refine design
3.Prioritize changes with Dev
and Biz
Tie up any complex graphic,
icons, textures.
Maintain style guide.
Layer on Detailed
functionality on assigned
modules.
Make any template level
changes as needed.
Review, support, collaborate.
Maintain documentation.
Review, support, collaborate.
Maintain documentation.
Review, support, collaborate.
Maintain documentation.
Business and Dev review UX
and visual design efforts.
Business reviews UX and
development efforts. UX
reviews dev & visual efforts
Business reviews UX and
development efforts. UX
reviews dev efforts
Funtional QA
Visual QA
Bug fixes, load testing,
simulations
Business QA
Everyone reviews and
supports development
efforts.
Prework Sprint 0 (x2?) Sprint 1 Sprint 2 Sprint 3+ Optimization
BIZ UX VISUAL DEV
Mock up LCD templates,
placeholder LCD modules,
and multiple concepts for
navigation.
sophia voychehovski • @sophiavux • sophiavux.com
Races Main
(x1)
Snapshot of Elections.
Landing page.
Race Hub
(x5)
Everything about a single
race.
All state-level details for
just that race type.
State Hub
(x50+)
Everything about a single
state.
Just state-level details for
that state, for all races.
State-Race
Detail
(hundreds)
County level results for a
single race in a single state.
Templates > Modules > Elements
sophia voychehovski • @sophiavux • sophiavux.com
Templates > Modules > Elements
sophia voychehovski • @sophiavux • sophiavux.com
Templates > Modules > Elements
sophia voychehovski • @sophiavux • sophiavux.com
YES!Definitely. YES!
Maybe? YES! YES!
Careful Careful Careful
Templates > Modules > Elements
TOGGLE
REFLOW
RESIZE
NO
sophia voychehovski • @sophiavux • sophiavux.com
YES!Definitely. YES!
Maybe? YES! YES!
Careful Careful Careful
Templates > Modules > Elements
TOGGLE
REFLOW
RESIZE
NO
Visual Design
Library/
Detailed
interactions
User Flows
sophia voychehovski • @sophiavux • sophiavux.com
TOGGLE
REFLOW
RESIZE
Responsive Module Worksheet
no, shows everywhere
no, always linear stack
yes, columns squish
yes, state icon, first name,
# votes
yes, status icon moves
yes, small icons
sophia voychehovski • @sophiavux • sophiavux.com
TOGGLE
REFLOW
RESIZE
Responsive Module Worksheet
no, shows everywhere
no, always linear stack
yes, columns squish
yes, state icon, first name,
# votes
yes, status icon moves
yes, small icons
UX Decisions
Visual design and “the system”
sophia voychehovski • @sophiavux • sophiavux.com
Responsive =
COMPANY CAREER BRAIN

More Related Content

What's hot

What is this UX thing 11-24-15
What is this UX thing 11-24-15What is this UX thing 11-24-15
What is this UX thing 11-24-15
Youmna Aoukar
 
User Story Mapping
User Story MappingUser Story Mapping
User Story Mapping
Steve Rogalsky
 
UI UX Designer job roles defined by job posting
UI UX Designer job roles defined by job postingUI UX Designer job roles defined by job posting
UI UX Designer job roles defined by job posting
Yorke Rhodes III
 
Ux portfolio slideshare
Ux portfolio slideshareUx portfolio slideshare
Ux portfolio slideshare
Sean Culley
 
Tools For jQuery Application Architecture (Extended Slides)
Tools For jQuery Application Architecture (Extended Slides)Tools For jQuery Application Architecture (Extended Slides)
Tools For jQuery Application Architecture (Extended Slides)
Addy Osmani
 
Kazumi Terada UX Portfolio 2016
Kazumi Terada UX Portfolio 2016Kazumi Terada UX Portfolio 2016
Kazumi Terada UX Portfolio 2016
Kazumi Terada
 
Class 4: Introduction to web technology entrepreneurship
Class 4: Introduction to web technology entrepreneurshipClass 4: Introduction to web technology entrepreneurship
Class 4: Introduction to web technology entrepreneurship
allanchao
 
Build your web apps with yql and yui
Build your web apps with yql and yuiBuild your web apps with yql and yui
Build your web apps with yql and yui
ISOCHK
 
Melanie O'Donnell | UX Design Portfolio March 2015
Melanie O'Donnell | UX Design Portfolio March 2015Melanie O'Donnell | UX Design Portfolio March 2015
Melanie O'Donnell | UX Design Portfolio March 2015
Melanie O'Donnell
 
Boaz Rossano - New UX Portfolio samples-24-07-16
Boaz Rossano - New UX Portfolio samples-24-07-16Boaz Rossano - New UX Portfolio samples-24-07-16
Boaz Rossano - New UX Portfolio samples-24-07-16
Boaz Rossano
 
How UI Framework improves design process - 2015 (Dribbble meetup)
How UI Framework improves design process - 2015  (Dribbble meetup)How UI Framework improves design process - 2015  (Dribbble meetup)
How UI Framework improves design process - 2015 (Dribbble meetup)
Marian Mota
 
Open-source Mic Talks at AOL
Open-source Mic Talks at AOLOpen-source Mic Talks at AOL
Open-source Mic Talks at AOL
Addy Osmani
 
Module 07: Wireframes
Module 07: WireframesModule 07: Wireframes
Module 07: Wireframes
Daniel Drew Turner
 
User Experience & Web Product Design
User Experience & Web Product DesignUser Experience & Web Product Design
User Experience & Web Product Design
Steve Hickey
 
Axure for dummies, that don't even know they are
Axure for dummies, that don't even know they areAxure for dummies, that don't even know they are
Axure for dummies, that don't even know they are
Oscar Gonzalez Garza
 
How a developer became a ux designer
How a developer became a ux designerHow a developer became a ux designer
How a developer became a ux designer
Boon Yew Chew
 
Ltms600 7.18.12
Ltms600 7.18.12Ltms600 7.18.12
Ltms600 7.18.12
SrtaButler
 
Finholt ux portfolio
Finholt ux portfolioFinholt ux portfolio
Finholt ux portfolio
Dan Finholt
 
Interaction Design & Rapid Prototyping
Interaction Design & Rapid PrototypingInteraction Design & Rapid Prototyping
Interaction Design & Rapid Prototyping
Carolyn Jao
 
TC UX Tools and Technologies
TC UX Tools and TechnologiesTC UX Tools and Technologies
TC UX Tools and Technologies
Margaret Bossen
 

What's hot (20)

What is this UX thing 11-24-15
What is this UX thing 11-24-15What is this UX thing 11-24-15
What is this UX thing 11-24-15
 
User Story Mapping
User Story MappingUser Story Mapping
User Story Mapping
 
UI UX Designer job roles defined by job posting
UI UX Designer job roles defined by job postingUI UX Designer job roles defined by job posting
UI UX Designer job roles defined by job posting
 
Ux portfolio slideshare
Ux portfolio slideshareUx portfolio slideshare
Ux portfolio slideshare
 
Tools For jQuery Application Architecture (Extended Slides)
Tools For jQuery Application Architecture (Extended Slides)Tools For jQuery Application Architecture (Extended Slides)
Tools For jQuery Application Architecture (Extended Slides)
 
Kazumi Terada UX Portfolio 2016
Kazumi Terada UX Portfolio 2016Kazumi Terada UX Portfolio 2016
Kazumi Terada UX Portfolio 2016
 
Class 4: Introduction to web technology entrepreneurship
Class 4: Introduction to web technology entrepreneurshipClass 4: Introduction to web technology entrepreneurship
Class 4: Introduction to web technology entrepreneurship
 
Build your web apps with yql and yui
Build your web apps with yql and yuiBuild your web apps with yql and yui
Build your web apps with yql and yui
 
Melanie O'Donnell | UX Design Portfolio March 2015
Melanie O'Donnell | UX Design Portfolio March 2015Melanie O'Donnell | UX Design Portfolio March 2015
Melanie O'Donnell | UX Design Portfolio March 2015
 
Boaz Rossano - New UX Portfolio samples-24-07-16
Boaz Rossano - New UX Portfolio samples-24-07-16Boaz Rossano - New UX Portfolio samples-24-07-16
Boaz Rossano - New UX Portfolio samples-24-07-16
 
How UI Framework improves design process - 2015 (Dribbble meetup)
How UI Framework improves design process - 2015  (Dribbble meetup)How UI Framework improves design process - 2015  (Dribbble meetup)
How UI Framework improves design process - 2015 (Dribbble meetup)
 
Open-source Mic Talks at AOL
Open-source Mic Talks at AOLOpen-source Mic Talks at AOL
Open-source Mic Talks at AOL
 
Module 07: Wireframes
Module 07: WireframesModule 07: Wireframes
Module 07: Wireframes
 
User Experience & Web Product Design
User Experience & Web Product DesignUser Experience & Web Product Design
User Experience & Web Product Design
 
Axure for dummies, that don't even know they are
Axure for dummies, that don't even know they areAxure for dummies, that don't even know they are
Axure for dummies, that don't even know they are
 
How a developer became a ux designer
How a developer became a ux designerHow a developer became a ux designer
How a developer became a ux designer
 
Ltms600 7.18.12
Ltms600 7.18.12Ltms600 7.18.12
Ltms600 7.18.12
 
Finholt ux portfolio
Finholt ux portfolioFinholt ux portfolio
Finholt ux portfolio
 
Interaction Design & Rapid Prototyping
Interaction Design & Rapid PrototypingInteraction Design & Rapid Prototyping
Interaction Design & Rapid Prototyping
 
TC UX Tools and Technologies
TC UX Tools and TechnologiesTC UX Tools and Technologies
TC UX Tools and Technologies
 

Similar to Your Brain on Responsive Design

Integrating User Experience Design into the Product Lifecycle
Integrating User Experience Design into the Product LifecycleIntegrating User Experience Design into the Product Lifecycle
Integrating User Experience Design into the Product Lifecycle
ICS
 
Open Minded? Software Engineer to a UX Engineer. Ask me how. by Micael Diaz d...
Open Minded? Software Engineer to a UX Engineer. Ask me how. by Micael Diaz d...Open Minded? Software Engineer to a UX Engineer. Ask me how. by Micael Diaz d...
Open Minded? Software Engineer to a UX Engineer. Ask me how. by Micael Diaz d...
DEVCON
 
Design Learnings
Design LearningsDesign Learnings
Design Learnings
Quikr
 
Ni week no designer, no problem
Ni week no designer, no problem Ni week no designer, no problem
Ni week no designer, no problem
Jenica Welch
 
Kv work samples
Kv work samplesKv work samples
Kv work samples
kay_sjc
 
NUX October 6th 2014 - UX in a traditional enterprise
NUX October 6th 2014 - UX in a traditional enterpriseNUX October 6th 2014 - UX in a traditional enterprise
NUX October 6th 2014 - UX in a traditional enterprise
pjhauser
 
Responsive Design for SavvyMoney Credit Score
Responsive Design for SavvyMoney Credit ScoreResponsive Design for SavvyMoney Credit Score
Responsive Design for SavvyMoney Credit Score
Wendy Fischer
 
Mobile Design at Gilt
Mobile Design at GiltMobile Design at Gilt
Mobile Design at Gilt
David Park
 
Resume_Samar
Resume_SamarResume_Samar
Resume_Samar
Samar Pal
 
Bank Chris - Web UI Design Patterns - 2014
Bank Chris - Web UI Design Patterns - 2014Bank Chris - Web UI Design Patterns - 2014
Bank Chris - Web UI Design Patterns - 2014
Shah Muhammad Baig
 
How to Use Engineers in a UX Department
How to Use Engineers in a UX DepartmentHow to Use Engineers in a UX Department
How to Use Engineers in a UX Department
Stephen James
 
Incorporating UX into Your Projects
Incorporating UX into Your ProjectsIncorporating UX into Your Projects
Incorporating UX into Your Projects
Karl Kaufmann
 
Digital Product Lifecycle
Digital Product LifecycleDigital Product Lifecycle
Digital Product Lifecycle
Bryan Bielefeldt
 
Web UI Design Patterns 2014
Web UI Design Patterns 2014Web UI Design Patterns 2014
Web UI Design Patterns 2014
Lewis Lin 🦊
 
Introduction to UX for Mesiniaga Academy
Introduction to UX for Mesiniaga AcademyIntroduction to UX for Mesiniaga Academy
Introduction to UX for Mesiniaga Academy
Zainul Zain
 
Multi Platform User Exerience
Multi Platform User ExerienceMulti Platform User Exerience
Multi Platform User Exerience
Tanya Zavialova
 
UX & UI Design behind SDL’s Customer Experience Cloud
UX & UI Design behind SDL’s Customer Experience CloudUX & UI Design behind SDL’s Customer Experience Cloud
UX & UI Design behind SDL’s Customer Experience Cloud
Philipp Engel
 
User Interface Design Style Guides are Not Dead, they Just Smell Funny
User Interface Design Style Guides are Not Dead, they Just Smell FunnyUser Interface Design Style Guides are Not Dead, they Just Smell Funny
User Interface Design Style Guides are Not Dead, they Just Smell Funny
UXPA International
 
User Interface Design Style Guides are not dead, the just smell funny
User Interface Design Style Guides are not dead, the just smell funnyUser Interface Design Style Guides are not dead, the just smell funny
User Interface Design Style Guides are not dead, the just smell funny
USECON
 
A project guide to ux design vm
A project guide to ux design vmA project guide to ux design vm
A project guide to ux design vm
Valentina Marzola
 

Similar to Your Brain on Responsive Design (20)

Integrating User Experience Design into the Product Lifecycle
Integrating User Experience Design into the Product LifecycleIntegrating User Experience Design into the Product Lifecycle
Integrating User Experience Design into the Product Lifecycle
 
Open Minded? Software Engineer to a UX Engineer. Ask me how. by Micael Diaz d...
Open Minded? Software Engineer to a UX Engineer. Ask me how. by Micael Diaz d...Open Minded? Software Engineer to a UX Engineer. Ask me how. by Micael Diaz d...
Open Minded? Software Engineer to a UX Engineer. Ask me how. by Micael Diaz d...
 
Design Learnings
Design LearningsDesign Learnings
Design Learnings
 
Ni week no designer, no problem
Ni week no designer, no problem Ni week no designer, no problem
Ni week no designer, no problem
 
Kv work samples
Kv work samplesKv work samples
Kv work samples
 
NUX October 6th 2014 - UX in a traditional enterprise
NUX October 6th 2014 - UX in a traditional enterpriseNUX October 6th 2014 - UX in a traditional enterprise
NUX October 6th 2014 - UX in a traditional enterprise
 
Responsive Design for SavvyMoney Credit Score
Responsive Design for SavvyMoney Credit ScoreResponsive Design for SavvyMoney Credit Score
Responsive Design for SavvyMoney Credit Score
 
Mobile Design at Gilt
Mobile Design at GiltMobile Design at Gilt
Mobile Design at Gilt
 
Resume_Samar
Resume_SamarResume_Samar
Resume_Samar
 
Bank Chris - Web UI Design Patterns - 2014
Bank Chris - Web UI Design Patterns - 2014Bank Chris - Web UI Design Patterns - 2014
Bank Chris - Web UI Design Patterns - 2014
 
How to Use Engineers in a UX Department
How to Use Engineers in a UX DepartmentHow to Use Engineers in a UX Department
How to Use Engineers in a UX Department
 
Incorporating UX into Your Projects
Incorporating UX into Your ProjectsIncorporating UX into Your Projects
Incorporating UX into Your Projects
 
Digital Product Lifecycle
Digital Product LifecycleDigital Product Lifecycle
Digital Product Lifecycle
 
Web UI Design Patterns 2014
Web UI Design Patterns 2014Web UI Design Patterns 2014
Web UI Design Patterns 2014
 
Introduction to UX for Mesiniaga Academy
Introduction to UX for Mesiniaga AcademyIntroduction to UX for Mesiniaga Academy
Introduction to UX for Mesiniaga Academy
 
Multi Platform User Exerience
Multi Platform User ExerienceMulti Platform User Exerience
Multi Platform User Exerience
 
UX & UI Design behind SDL’s Customer Experience Cloud
UX & UI Design behind SDL’s Customer Experience CloudUX & UI Design behind SDL’s Customer Experience Cloud
UX & UI Design behind SDL’s Customer Experience Cloud
 
User Interface Design Style Guides are Not Dead, they Just Smell Funny
User Interface Design Style Guides are Not Dead, they Just Smell FunnyUser Interface Design Style Guides are Not Dead, they Just Smell Funny
User Interface Design Style Guides are Not Dead, they Just Smell Funny
 
User Interface Design Style Guides are not dead, the just smell funny
User Interface Design Style Guides are not dead, the just smell funnyUser Interface Design Style Guides are not dead, the just smell funny
User Interface Design Style Guides are not dead, the just smell funny
 
A project guide to ux design vm
A project guide to ux design vmA project guide to ux design vm
A project guide to ux design vm
 

Recently uploaded

一比一原版(Teesside毕业证)英国提赛德大学毕业证如何办理
一比一原版(Teesside毕业证)英国提赛德大学毕业证如何办理一比一原版(Teesside毕业证)英国提赛德大学毕业证如何办理
一比一原版(Teesside毕业证)英国提赛德大学毕业证如何办理
mfria419
 
一比一原版(UWE毕业证书)西英格兰大学毕业证如何办理
一比一原版(UWE毕业证书)西英格兰大学毕业证如何办理一比一原版(UWE毕业证书)西英格兰大学毕业证如何办理
一比一原版(UWE毕业证书)西英格兰大学毕业证如何办理
etls06p8
 
International Upcycling Research Network advisory board meeting 4
International Upcycling Research Network advisory board meeting 4International Upcycling Research Network advisory board meeting 4
International Upcycling Research Network advisory board meeting 4
Kyungeun Sung
 
一比一原版(CSUEB毕业证)美国加州州立大学东湾分校毕业证如何办理
一比一原版(CSUEB毕业证)美国加州州立大学东湾分校毕业证如何办理一比一原版(CSUEB毕业证)美国加州州立大学东湾分校毕业证如何办理
一比一原版(CSUEB毕业证)美国加州州立大学东湾分校毕业证如何办理
stgq9v39
 
TOWER DESIGN PROCEDURE TOWER DESIGN BASIS .pptx
TOWER DESIGN PROCEDURE TOWER DESIGN BASIS .pptxTOWER DESIGN PROCEDURE TOWER DESIGN BASIS .pptx
TOWER DESIGN PROCEDURE TOWER DESIGN BASIS .pptx
BAWAALEX1
 
一比一原版(UCB毕业证)英国伯明翰大学学院毕业证如何办理
一比一原版(UCB毕业证)英国伯明翰大学学院毕业证如何办理一比一原版(UCB毕业证)英国伯明翰大学学院毕业证如何办理
一比一原版(UCB毕业证)英国伯明翰大学学院毕业证如何办理
zv943dhb
 
一比一原版亚利桑那大学毕业证(UA毕业证书)如何办理
一比一原版亚利桑那大学毕业证(UA毕业证书)如何办理一比一原版亚利桑那大学毕业证(UA毕业证书)如何办理
一比一原版亚利桑那大学毕业证(UA毕业证书)如何办理
21uul8se
 
ADESGN3S_Case-Study-Municipal-Health-Center.pdf
ADESGN3S_Case-Study-Municipal-Health-Center.pdfADESGN3S_Case-Study-Municipal-Health-Center.pdf
ADESGN3S_Case-Study-Municipal-Health-Center.pdf
GregMichaelTapawan
 
一比一原版(Hull毕业证)英国哈珀亚当斯大学毕业证如何办理
一比一原版(Hull毕业证)英国哈珀亚当斯大学毕业证如何办理一比一原版(Hull毕业证)英国哈珀亚当斯大学毕业证如何办理
一比一原版(Hull毕业证)英国哈珀亚当斯大学毕业证如何办理
aonx8o5f
 
欧洲杯买球-欧洲杯买球买球网好的网站-欧洲杯买球哪里有正规的买球网站|【​网址​🎉ac123.net🎉​】
欧洲杯买球-欧洲杯买球买球网好的网站-欧洲杯买球哪里有正规的买球网站|【​网址​🎉ac123.net🎉​】欧洲杯买球-欧洲杯买球买球网好的网站-欧洲杯买球哪里有正规的买球网站|【​网址​🎉ac123.net🎉​】
欧洲杯买球-欧洲杯买球买球网好的网站-欧洲杯买球哪里有正规的买球网站|【​网址​🎉ac123.net🎉​】
jafiradnan336
 
一比一原版(Deakin毕业证书)澳洲迪肯大学毕业证文凭如何办理
一比一原版(Deakin毕业证书)澳洲迪肯大学毕业证文凭如何办理一比一原版(Deakin毕业证书)澳洲迪肯大学毕业证文凭如何办理
一比一原版(Deakin毕业证书)澳洲迪肯大学毕业证文凭如何办理
k4krdgxx
 
NHL Stenden University of Applied Sciences Diploma Degree Transcript
NHL Stenden University of Applied Sciences Diploma Degree TranscriptNHL Stenden University of Applied Sciences Diploma Degree Transcript
NHL Stenden University of Applied Sciences Diploma Degree Transcript
lhtvqoag
 
一比一原版(ututaustin毕业证书)美国德克萨斯大学奥斯汀分校毕业证如何办理
一比一原版(ututaustin毕业证书)美国德克萨斯大学奥斯汀分校毕业证如何办理一比一原版(ututaustin毕业证书)美国德克萨斯大学奥斯汀分校毕业证如何办理
一比一原版(ututaustin毕业证书)美国德克萨斯大学奥斯汀分校毕业证如何办理
yqyquge
 
UXpert_Report (UALR Mapping Renewal 2022).pdf
UXpert_Report (UALR Mapping Renewal 2022).pdfUXpert_Report (UALR Mapping Renewal 2022).pdf
UXpert_Report (UALR Mapping Renewal 2022).pdf
anthonylin333
 
一比一原版(Brunel毕业证)英国布鲁内尔大学毕业证如何办理
一比一原版(Brunel毕业证)英国布鲁内尔大学毕业证如何办理一比一原版(Brunel毕业证)英国布鲁内尔大学毕业证如何办理
一比一原版(Brunel毕业证)英国布鲁内尔大学毕业证如何办理
ka3y2ukz
 
一比一原版(ECU毕业证)澳洲埃迪斯科文大学毕业证如何办理
一比一原版(ECU毕业证)澳洲埃迪斯科文大学毕业证如何办理一比一原版(ECU毕业证)澳洲埃迪斯科文大学毕业证如何办理
一比一原版(ECU毕业证)澳洲埃迪斯科文大学毕业证如何办理
kohd1ci2
 
一比一原版(KPU毕业证)加拿大昆特兰理工大学毕业证如何办理
一比一原版(KPU毕业证)加拿大昆特兰理工大学毕业证如何办理一比一原版(KPU毕业证)加拿大昆特兰理工大学毕业证如何办理
一比一原版(KPU毕业证)加拿大昆特兰理工大学毕业证如何办理
kmzsy4kn
 
一比一原版(UWS毕业证)澳洲西悉尼大学毕业证如何办理
一比一原版(UWS毕业证)澳洲西悉尼大学毕业证如何办理一比一原版(UWS毕业证)澳洲西悉尼大学毕业证如何办理
一比一原版(UWS毕业证)澳洲西悉尼大学毕业证如何办理
t34zod9l
 
一比一原版澳洲科廷科技大学毕业证(Curtin毕业证)如何办理
一比一原版澳洲科廷科技大学毕业证(Curtin毕业证)如何办理一比一原版澳洲科廷科技大学毕业证(Curtin毕业证)如何办理
一比一原版澳洲科廷科技大学毕业证(Curtin毕业证)如何办理
bz42w9z0
 
一比一原版(爱大毕业证)美国爱荷华大学毕业证如何办理
一比一原版(爱大毕业证)美国爱荷华大学毕业证如何办理一比一原版(爱大毕业证)美国爱荷华大学毕业证如何办理
一比一原版(爱大毕业证)美国爱荷华大学毕业证如何办理
ynrtjotp
 

Recently uploaded (20)

一比一原版(Teesside毕业证)英国提赛德大学毕业证如何办理
一比一原版(Teesside毕业证)英国提赛德大学毕业证如何办理一比一原版(Teesside毕业证)英国提赛德大学毕业证如何办理
一比一原版(Teesside毕业证)英国提赛德大学毕业证如何办理
 
一比一原版(UWE毕业证书)西英格兰大学毕业证如何办理
一比一原版(UWE毕业证书)西英格兰大学毕业证如何办理一比一原版(UWE毕业证书)西英格兰大学毕业证如何办理
一比一原版(UWE毕业证书)西英格兰大学毕业证如何办理
 
International Upcycling Research Network advisory board meeting 4
International Upcycling Research Network advisory board meeting 4International Upcycling Research Network advisory board meeting 4
International Upcycling Research Network advisory board meeting 4
 
一比一原版(CSUEB毕业证)美国加州州立大学东湾分校毕业证如何办理
一比一原版(CSUEB毕业证)美国加州州立大学东湾分校毕业证如何办理一比一原版(CSUEB毕业证)美国加州州立大学东湾分校毕业证如何办理
一比一原版(CSUEB毕业证)美国加州州立大学东湾分校毕业证如何办理
 
TOWER DESIGN PROCEDURE TOWER DESIGN BASIS .pptx
TOWER DESIGN PROCEDURE TOWER DESIGN BASIS .pptxTOWER DESIGN PROCEDURE TOWER DESIGN BASIS .pptx
TOWER DESIGN PROCEDURE TOWER DESIGN BASIS .pptx
 
一比一原版(UCB毕业证)英国伯明翰大学学院毕业证如何办理
一比一原版(UCB毕业证)英国伯明翰大学学院毕业证如何办理一比一原版(UCB毕业证)英国伯明翰大学学院毕业证如何办理
一比一原版(UCB毕业证)英国伯明翰大学学院毕业证如何办理
 
一比一原版亚利桑那大学毕业证(UA毕业证书)如何办理
一比一原版亚利桑那大学毕业证(UA毕业证书)如何办理一比一原版亚利桑那大学毕业证(UA毕业证书)如何办理
一比一原版亚利桑那大学毕业证(UA毕业证书)如何办理
 
ADESGN3S_Case-Study-Municipal-Health-Center.pdf
ADESGN3S_Case-Study-Municipal-Health-Center.pdfADESGN3S_Case-Study-Municipal-Health-Center.pdf
ADESGN3S_Case-Study-Municipal-Health-Center.pdf
 
一比一原版(Hull毕业证)英国哈珀亚当斯大学毕业证如何办理
一比一原版(Hull毕业证)英国哈珀亚当斯大学毕业证如何办理一比一原版(Hull毕业证)英国哈珀亚当斯大学毕业证如何办理
一比一原版(Hull毕业证)英国哈珀亚当斯大学毕业证如何办理
 
欧洲杯买球-欧洲杯买球买球网好的网站-欧洲杯买球哪里有正规的买球网站|【​网址​🎉ac123.net🎉​】
欧洲杯买球-欧洲杯买球买球网好的网站-欧洲杯买球哪里有正规的买球网站|【​网址​🎉ac123.net🎉​】欧洲杯买球-欧洲杯买球买球网好的网站-欧洲杯买球哪里有正规的买球网站|【​网址​🎉ac123.net🎉​】
欧洲杯买球-欧洲杯买球买球网好的网站-欧洲杯买球哪里有正规的买球网站|【​网址​🎉ac123.net🎉​】
 
一比一原版(Deakin毕业证书)澳洲迪肯大学毕业证文凭如何办理
一比一原版(Deakin毕业证书)澳洲迪肯大学毕业证文凭如何办理一比一原版(Deakin毕业证书)澳洲迪肯大学毕业证文凭如何办理
一比一原版(Deakin毕业证书)澳洲迪肯大学毕业证文凭如何办理
 
NHL Stenden University of Applied Sciences Diploma Degree Transcript
NHL Stenden University of Applied Sciences Diploma Degree TranscriptNHL Stenden University of Applied Sciences Diploma Degree Transcript
NHL Stenden University of Applied Sciences Diploma Degree Transcript
 
一比一原版(ututaustin毕业证书)美国德克萨斯大学奥斯汀分校毕业证如何办理
一比一原版(ututaustin毕业证书)美国德克萨斯大学奥斯汀分校毕业证如何办理一比一原版(ututaustin毕业证书)美国德克萨斯大学奥斯汀分校毕业证如何办理
一比一原版(ututaustin毕业证书)美国德克萨斯大学奥斯汀分校毕业证如何办理
 
UXpert_Report (UALR Mapping Renewal 2022).pdf
UXpert_Report (UALR Mapping Renewal 2022).pdfUXpert_Report (UALR Mapping Renewal 2022).pdf
UXpert_Report (UALR Mapping Renewal 2022).pdf
 
一比一原版(Brunel毕业证)英国布鲁内尔大学毕业证如何办理
一比一原版(Brunel毕业证)英国布鲁内尔大学毕业证如何办理一比一原版(Brunel毕业证)英国布鲁内尔大学毕业证如何办理
一比一原版(Brunel毕业证)英国布鲁内尔大学毕业证如何办理
 
一比一原版(ECU毕业证)澳洲埃迪斯科文大学毕业证如何办理
一比一原版(ECU毕业证)澳洲埃迪斯科文大学毕业证如何办理一比一原版(ECU毕业证)澳洲埃迪斯科文大学毕业证如何办理
一比一原版(ECU毕业证)澳洲埃迪斯科文大学毕业证如何办理
 
一比一原版(KPU毕业证)加拿大昆特兰理工大学毕业证如何办理
一比一原版(KPU毕业证)加拿大昆特兰理工大学毕业证如何办理一比一原版(KPU毕业证)加拿大昆特兰理工大学毕业证如何办理
一比一原版(KPU毕业证)加拿大昆特兰理工大学毕业证如何办理
 
一比一原版(UWS毕业证)澳洲西悉尼大学毕业证如何办理
一比一原版(UWS毕业证)澳洲西悉尼大学毕业证如何办理一比一原版(UWS毕业证)澳洲西悉尼大学毕业证如何办理
一比一原版(UWS毕业证)澳洲西悉尼大学毕业证如何办理
 
一比一原版澳洲科廷科技大学毕业证(Curtin毕业证)如何办理
一比一原版澳洲科廷科技大学毕业证(Curtin毕业证)如何办理一比一原版澳洲科廷科技大学毕业证(Curtin毕业证)如何办理
一比一原版澳洲科廷科技大学毕业证(Curtin毕业证)如何办理
 
一比一原版(爱大毕业证)美国爱荷华大学毕业证如何办理
一比一原版(爱大毕业证)美国爱荷华大学毕业证如何办理一比一原版(爱大毕业证)美国爱荷华大学毕业证如何办理
一比一原版(爱大毕业证)美国爱荷华大学毕业证如何办理
 

Your Brain on Responsive Design

  • 1. sophia voychehovski • @sophiavux • sophiavux.com Your Brain on Responsive Design thoughts on changing the way you work & think, derived from Elections Night 2012 SophiaVoycehovski • Senior UX Designer • CNN Digital
  • 2. sophia voychehovski • @sophiavux • sophiavux.com Design Process + Responsive A painless process for you = a painless product for your users SophiaVoycehovski • Senior UX Designer • CNN Digital
  • 3. sophia voychehovski • @sophiavux • sophiavux.com Adaptive Layout Adaptive Design Accessible DesignRWD @media queries @media queries Fluid Grid, percentages! Fluid Images Progressive Enhancement: best experience, most design to most audience on most devices. Design for screen readers, assistive technology Coined by Ethan Marcotte Set Breakpoints Multiple image cuts Check out the book by Aaron Gustafson. (google for a free download)
  • 4. sophia voychehovski • @sophiavux • sophiavux.com RWD Resizing Reflowing “Toggling” Templates Modules Elements
  • 5. sophia voychehovski • @sophiavux • sophiavux.com
  • 6. sophia voychehovski • @sophiavux • sophiavux.com
  • 7. sophia voychehovski • @sophiavux • sophiavux.com omg Whatever HOLY MOLY! Stakes $ $ $ $ $ $ $ $ $ Risk ? ? ? ? ? ? ? ? ? ?
  • 8. sophia voychehovski • @sophiavux • sophiavux.com Text
  • 9. sophia voychehovski • @sophiavux • sophiavux.com Text 2nd highest page views in history, behind Election Night 2008. 101.5 million page views in Politics Section, 1/2 traffic of entire site. Highest mobile web page views in history, 3x higher than previous record. (46 million) CNN’s iOS apps achieved 235k downloads, making Election Night the largest day on record since initial launch in 2009.
  • 10. sophia voychehovski • @sophiavux • sophiavux.com
  • 11. sophia voychehovski • @sophiavux • sophiavux.com Based on general sense of project, conduct: - user research - opportunity research - competitive analysis Explore experience metaphors Responsive Road Shows. Explore general look and feel and experience metaphors 1.Articulate Business Goals 2.Draft SINGLE Business Requirements Document, stating the problems and the needs, not the UX solutions. • Trace to Biz Goals • No platform-specific requirements! (Mobile First - hierarchy and priority) • Do draft from non-responsive soon-to-be legacy site. • Do not try and partition sprints based on business requirements. Business reviews and iterates on goals and requirements with UX team and Technical team. (research and validate assumptions) Review and discuss experience metaphors (brand identity) 1.Translate Business Goals into XOs 2.Translate BRs into Attributes. “PLAY WITH LEGOS PART 1” 1. Untangle basic user flows 2. Identify LCD templates that can be applied to steps in user flows 3. Identify LCD modules needed to carry out BRs 4.Create priority prototype for each template. (List of modules for each template) 5. Consider Navigation and full site map across platforms. Define basic styles based on module library (style tiles). Explore global interaction design Conduct motion studies. Research responsive, latest development methodologies anticipated to use. Maintain and update Business goals and requirements. Business and Dev review UX and visual design efforts. “...LEGOS PART 2” 1. Identify LCD elements needed for each module. 2. Refine user flows 3. Determine “rules of response” for modules 4. Paper test, mobile first Create example comps as needed and begin exploring detailed module design. Translate into higher fidelity CSS. Mock up LCD templates, placeholder LDD modules, and multiple concepts for navigation. Continue to refine functionality, interplay and rules of system. Write UX/UI requirements as needed. Work with Dev to hand off detailed functionality. Collaborate with UX to refine detailed interaction, iconography, infographics, etc Build 80% of style guide, based on 80% complete wireframes. Layer on basic functionality of modules, logic, rules. Give ownership of modules to individual developers, but encourage collaboration and knowledge transfer. Technical lead break up modules/templates into sizable chucks for remaining sprints. 1.User Test with working prototype. 2.Refine design 3.Prioritize changes with Dev and Biz Tie up any complex graphic, icons, textures. Maintain style guide. Layer on Detailed functionality on assigned modules. Make any template level changes as needed. Review, support, collaborate. Maintain documentation. Review, support, collaborate. Maintain documentation. Review, support, collaborate. Maintain documentation. Business and Dev review UX and visual design efforts. Business reviews UX and development efforts. UX reviews dev & visual efforts Business reviews UX and development efforts. UX reviews dev efforts Funtional QA Visual QA Bug fixes, load testing, simulations Business QA Everyone reviews and supports development efforts. Advise Business and UX Prework Sprint 0 (x2?) Sprint 1 Sprint 2 Sprint 3+ Optimization COLLAB BIZ UX VISUAL DEV
  • 12. sophia voychehovski • @sophiavux • sophiavux.com Based on general sense of project, conduct: - user research - opportunity research - competitive analysis Explore experience metaphors Responsive Road Shows. Explore general look and feel and experience metaphors 1.Articulate Business Goals 2.Draft SINGLE Business Requirements Document, stating the problems and the needs, not the UX solutions. • Trace to Biz Goals • No platform-specific requirements! (Mobile First - hierarchy and priority) • Do draft from non-responsive soon-to-be legacy site. • Do not try and partition sprints based on business requirements. Business reviews and iterates on goals and requirements with UX team and Technical team. (research and validate assumptions) Review and discuss experience metaphors (brand identity) 1.Translate Business Goals into XOs 2.Translate BRs into Attributes. “PLAY WITH LEGOS PART 1” 1. Untangle basic user flows 2. Identify LCD templates that can be applied to steps in user flows 3. Identify LCD modules needed to carry out BRs 4.Create priority prototype for each template. (List of modules for each template) 5. Consider Navigation and full site map across platforms. Define basic styles based on module library (style tiles). Explore global interaction design Conduct motion studies. Research responsive, latest development methodologies anticipated to use. Maintain and update Business goals and requirements. Business and Dev review UX and visual design efforts. “...LEGOS PART 2” 1. Identify LCD elements needed for each module. 2. Refine user flows 3. Determine “rules of response” for modules 4. Paper test, mobile first Create example comps as needed and begin exploring detailed module design. Translate into higher fidelity CSS. Mock up LCD templates, placeholder LDD modules, and multiple concepts for navigation. Continue to refine functionality, interplay and rules of system. Write UX/UI requirements as needed. Work with Dev to hand off detailed functionality. Collaborate with UX to refine detailed interaction, iconography, infographics, etc Build 80% of style guide, based on 80% complete wireframes. Layer on basic functionality of modules, logic, rules. Give ownership of modules to individual developers, but encourage collaboration and knowledge transfer. Technical lead break up modules/templates into sizable chucks for remaining sprints. 1.User Test with working prototype. 2.Refine design 3.Prioritize changes with Dev and Biz Tie up any complex graphic, icons, textures. Maintain style guide. Layer on Detailed functionality on assigned modules. Make any template level changes as needed. Review, support, collaborate. Maintain documentation. Review, support, collaborate. Maintain documentation. Review, support, collaborate. Maintain documentation. Business and Dev review UX and visual design efforts. Business reviews UX and development efforts. UX reviews dev & visual efforts Business reviews UX and development efforts. UX reviews dev efforts Funtional QA Visual QA Bug fixes, load testing, simulations Business QA Everyone reviews and supports development efforts. Advise Business and UX Prework Sprint 0 (x2?) Sprint 1 Sprint 2 Sprint 3+ Optimization COLLAB BIZ UX VISUAL DEV Strategy Scope Structure Skeleton Surface
  • 13. sophia voychehovski • @sophiavux • sophiavux.com Based on general sense of project, conduct: - user research - opportunity research - competitive analysis Explore experience metaphors Responsive Road Shows. Explore general look and feel and experience metaphors 1.Articulate Business Goals 2.Draft SINGLE Business Requirements Document, stating the problems and the needs, not the UX solutions. • Trace to Biz Goals • No platform-specific requirements! (Mobile First - hierarchy and priority) • Do draft from non-responsive soon-to-be legacy site. • Do not try and partition sprints based on business requirements. Business reviews and iterates on goals and requirements with UX team and Technical team. (research and validate assumptions) Review and discuss experience metaphors (brand identity) 1.Translate Business Goals into XOs 2.Translate BRs into Attributes. “PLAY WITH LEGOS PART 1” 1. Untangle basic user flows 2. Identify LCD templates that can be applied to steps in user flows 3. Identify LCD modules needed to carry out BRs 4.Create priority prototype for each template. (List of modules for each template) 5. Consider Navigation and full site map across platforms. Define basic styles based on module library (style tiles). Explore global interaction design Conduct motion studies. Research responsive, latest development methodologies anticipated to use. Maintain and update Business goals and requirements. Business and Dev review UX and visual design efforts. “...LEGOS PART 2” 1. Identify LCD elements needed for each module. 2. Refine user flows 3. Determine “rules of response” for modules 4. Paper test, mobile first Create example comps as needed and begin exploring detailed module design. Translate into higher fidelity CSS. Mock up LCD templates, placeholder LDD modules, and multiple concepts for navigation. Continue to refine functionality, interplay and rules of system. Write UX/UI requirements as needed. Work with Dev to hand off detailed functionality. Collaborate with UX to refine detailed interaction, iconography, infographics, etc Build 80% of style guide, based on 80% complete wireframes. Layer on basic functionality of modules, logic, rules. Give ownership of modules to individual developers, but encourage collaboration and knowledge transfer. Technical lead break up modules/templates into sizable chucks for remaining sprints. 1.User Test with working prototype. 2.Refine design 3.Prioritize changes with Dev and Biz Tie up any complex graphic, icons, textures. Maintain style guide. Layer on Detailed functionality on assigned modules. Make any template level changes as needed. Review, support, collaborate. Maintain documentation. Review, support, collaborate. Maintain documentation. Review, support, collaborate. Maintain documentation. Business and Dev review UX and visual design efforts. Business reviews UX and development efforts. UX reviews dev & visual efforts Business reviews UX and development efforts. UX reviews dev efforts Funtional QA Visual QA Bug fixes, load testing, simulations Business QA Everyone reviews and supports development efforts. Advise Business and UX Prework Sprint 0 (x2?) Sprint 1 Sprint 2 Sprint 3+ Optimization COLLAB BIZ UX VISUAL DEV Strategy Scope Structure Skeleton Surface Business Viability Technical Feasibility Human Desirability Hear Create Deliver
  • 14. sophia voychehovski • @sophiavux • sophiavux.com Based on general sense of project, conduct: - user research - opportunity research - competitive analysis Explore experience metaphors Responsive Road Shows. Explore general look and feel and experience metaphors 1.Articulate Business Goals 2.Draft SINGLE Business Requirements Document, stating the problems and the needs, not the UX solutions. • Trace to Biz Goals • No platform-specific requirements! (Mobile First - hierarchy and priority) • Do draft from non-responsive soon-to-be legacy site. • Do not try and partition sprints based on business requirements. Business reviews and iterates on goals and requirements with UX team and Technical team. (research and validate assumptions) Review and discuss experience metaphors (brand identity) 1.Translate Business Goals into XOs 2.Translate BRs into Attributes. “PLAY WITH LEGOS PART 1” 1. Untangle basic user flows 2. Identify LCD templates that can be applied to steps in user flows 3. Identify LCD modules needed to carry out BRs 4.Create priority prototype for each template. (List of modules for each template) 5. Consider Navigation and full site map across platforms. Define basic styles based on module library (style tiles). Explore global interaction design Conduct motion studies. Research responsive, latest development methodologies anticipated to use. Maintain and update Business goals and requirements. Business and Dev review UX and visual design efforts. “...LEGOS PART 2” 1. Identify LCD elements needed for each module. 2. Refine user flows 3. Determine “rules of response” for modules 4. Paper test, mobile first Create example comps as needed and begin exploring detailed module design. Translate into higher fidelity CSS. Mock up LCD templates, placeholder LDD modules, and multiple concepts for navigation. Continue to refine functionality, interplay and rules of system. Write UX/UI requirements as needed. Work with Dev to hand off detailed functionality. Collaborate with UX to refine detailed interaction, iconography, infographics, etc Build 80% of style guide, based on 80% complete wireframes. Layer on basic functionality of modules, logic, rules. Give ownership of modules to individual developers, but encourage collaboration and knowledge transfer. Technical lead break up modules/templates into sizable chucks for remaining sprints. 1.User Test with working prototype. 2.Refine design 3.Prioritize changes with Dev and Biz Tie up any complex graphic, icons, textures. Maintain style guide. Layer on Detailed functionality on assigned modules. Make any template level changes as needed. Review, support, collaborate. Maintain documentation. Review, support, collaborate. Maintain documentation. Review, support, collaborate. Maintain documentation. Business and Dev review UX and visual design efforts. Business reviews UX and development efforts. UX reviews dev & visual efforts Business reviews UX and development efforts. UX reviews dev efforts Funtional QA Visual QA Bug fixes, load testing, simulations Business QA Everyone reviews and supports development efforts. Advise Business and UX Prework Sprint 0 (x2?) Sprint 1 Sprint 2 Sprint 3+ Optimization COLLAB BIZ UX VISUAL DEV Strategy Scope Structure Skeleton Surface Business Viability Technical Feasibility Human Desirability Hear Create Deliver DivergeConvergeConverge Diverge Converge
  • 15. sophia voychehovski • @sophiavux • sophiavux.com COLLAB Based on general sense of project, conduct: - user research - opportunity research - competitive analysis Explore experience metaphors Responsive Road Shows. Explore general look and feel and experience metaphors Advise Business and UX 1.Articulate Business Goals 2.Draft SINGLE Business Requirements Document, stating the problems and the needs, not the UX solutions. • Trace to Biz Goals • No platform-specific requirements! (Mobile First - hierarchy and priority) • Do draft from non-responsive soon-to-be legacy site. • Do not try and partition sprints based on business requirements. Business reviews and iterates on goals and requirements with UX team and Technical team. (research and validate assumptions) Review and discuss experience metaphors (brand identity) 1.Translate Business Goals into XOs 2.Translate BRs into Attributes. “PLAY WITH LEGOS PART 1” 1. Untangle basic user flows 2. Identify LCD templates that can be applied to steps in user flows 3. Identify LCD modules needed to carry out BRs 4.Create priority prototype for each template. (List of modules for each template) 5. Consider Navigation and full site map across platforms. Define basic styles based on module library (style tiles). Explore global interaction design Conduct motion studies. Research responsive, latest development methodologies anticipated to use. Maintain and update Business goals and requirements. Business and Dev review UX and visual design efforts. “...LEGOS PART 2” 1. Identify LCD elements needed for each module. 2. Refine user flows 3. Determine “rules of response” for modules 4. Paper test, mobile first Create example comps as needed and begin exploring detailed module design. Translate into higher fidelity CSS. Mock up LCD templates, placeholder LDD modules, and multiple concepts for navigation. Continue to refine functionality, interplay and rules of system. Write UX/UI requirements as needed. Work with Dev to hand off detailed functionality. Collaborate with UX to refine detailed interaction, iconography, infographics, etc Build 80% of style guide, based on 80% complete wireframes. Layer on basic functionality of modules, logic, rules. Give ownership of modules to individual developers, but encourage collaboration and knowledge transfer. Technical lead break up modules/templates into sizable chucks for remaining sprints. 1.User Test with working prototype. 2.Refine design 3.Prioritize changes with Dev and Biz Tie up any complex graphic, icons, textures. Maintain style guide. Layer on Detailed functionality on assigned modules. Make any template level changes as needed. Review, support, collaborate. Maintain documentation. Review, support, collaborate. Maintain documentation. Review, support, collaborate. Maintain documentation. Business and Dev review UX and visual design efforts. Business reviews UX and development efforts. UX reviews dev & visual efforts Business reviews UX and development efforts. UX reviews dev efforts Funtional QA Visual QA Bug fixes, load testing, simulations Business QA Everyone reviews and supports development efforts. Prework Sprint 0 (x2?) Sprint 1 Sprint 2 Sprint 3+ Optimization BIZ UX VISUAL DEV Draft SINGLE Business Requirements Document, stating the problems and the needs, not the UX solutions. • Trace to Biz Goals • No platform-specific requirements! (Mobile First - hierarchy and priority) • Do draft from non- responsive soon-to-be legacy site. • Do not try and partition sprints based on business requirements.
  • 16. sophia voychehovski • @sophiavux • sophiavux.com COLLAB Based on general sense of project, conduct: - user research - opportunity research - competitive analysis Explore experience metaphors Responsive Road Shows. Explore general look and feel and experience metaphors Advise Business and UX 1.Articulate Business Goals 2.Draft SINGLE Business Requirements Document, stating the problems and the needs, not the UX solutions. • Trace to Biz Goals • No platform-specific requirements! (Mobile First - hierarchy and priority) • Do draft from non-responsive soon-to-be legacy site. • Do not try and partition sprints based on business requirements. Business reviews and iterates on goals and requirements with UX team and Technical team. (research and validate assumptions) Review and discuss experience metaphors (brand identity) 1.Translate Business Goals into XOs 2.Translate BRs into Attributes. “PLAY WITH LEGOS PART 1” 1. Untangle basic user flows 2. Identify LCD templates that can be applied to steps in user flows 3. Identify LCD modules needed to carry out BRs 4.Create priority prototype for each template. (List of modules for each template) 5. Consider Navigation and full site map across platforms. Define basic styles based on module library (style tiles). Explore global interaction design Conduct motion studies. Research responsive, latest development methodologies anticipated to use. Maintain and update Business goals and requirements. Business and Dev review UX and visual design efforts. “...LEGOS PART 2” 1. Identify LCD elements needed for each module. 2. Refine user flows 3. Determine “rules of response” for modules 4. Paper test, mobile first Create example comps as needed and begin exploring detailed module design. Translate into higher fidelity CSS. Mock up LCD templates, placeholder LDD modules, and multiple concepts for navigation. Continue to refine functionality, interplay and rules of system. Write UX/UI requirements as needed. Work with Dev to hand off detailed functionality. Collaborate with UX to refine detailed interaction, iconography, infographics, etc Build 80% of style guide, based on 80% complete wireframes. Layer on basic functionality of modules, logic, rules. Give ownership of modules to individual developers, but encourage collaboration and knowledge transfer. Technical lead break up modules/templates into sizable chucks for remaining sprints. 1.User Test with working prototype. 2.Refine design 3.Prioritize changes with Dev and Biz Tie up any complex graphic, icons, textures. Maintain style guide. Layer on Detailed functionality on assigned modules. Make any template level changes as needed. Review, support, collaborate. Maintain documentation. Review, support, collaborate. Maintain documentation. Review, support, collaborate. Maintain documentation. Business and Dev review UX and visual design efforts. Business reviews UX and development efforts. UX reviews dev & visual efforts Business reviews UX and development efforts. UX reviews dev efforts Funtional QA Visual QA Bug fixes, load testing, simulations Business QA Everyone reviews and supports development efforts. Prework Sprint 0 (x2?) Sprint 1 Sprint 2 Sprint 3+ Optimization BIZ UX VISUAL DEV PLAY WITH LEGOS - PT 1 1. Untangle basic user flows 2. Identify LCD templates that can be applied to steps in user flows 3. Identify LCD modules needed to carry out BRs 4.Create priority prototype for each template. (List of modules for each template) 5. Consider Navigation and full site map across platforms.
  • 17. sophia voychehovski • @sophiavux • sophiavux.com COLLAB Based on general sense of project, conduct: - user research - opportunity research - competitive analysis Explore experience metaphors Responsive Road Shows. Explore general look and feel and experience metaphors Advise Business and UX 1.Articulate Business Goals 2.Draft SINGLE Business Requirements Document, stating the problems and the needs, not the UX solutions. • Trace to Biz Goals • No platform-specific requirements! (Mobile First - hierarchy and priority) • Do draft from non-responsive soon-to-be legacy site. • Do not try and partition sprints based on business requirements. Business reviews and iterates on goals and requirements with UX team and Technical team. (research and validate assumptions) Review and discuss experience metaphors (brand identity) 1.Translate Business Goals into XOs 2.Translate BRs into Attributes. “PLAY WITH LEGOS PART 1” 1. Untangle basic user flows 2. Identify LCD templates that can be applied to steps in user flows 3. Identify LCD modules needed to carry out BRs 4.Create priority prototype for each template. (List of modules for each template) 5. Consider Navigation and full site map across platforms. Define basic styles based on module library (style tiles). Explore global interaction design Conduct motion studies. Research responsive, latest development methodologies anticipated to use. Maintain and update Business goals and requirements. Business and Dev review UX and visual design efforts. “...LEGOS PART 2” 1. Identify LCD elements needed for each module. 2. Refine user flows 3. Determine “rules of response” for modules 4. Paper test, mobile first Create example comps as needed and begin exploring detailed module design. Translate into higher fidelity CSS. Mock up LCD templates, placeholder LDD modules, and multiple concepts for navigation. Continue to refine functionality, interplay and rules of system. Write UX/UI requirements as needed. Work with Dev to hand off detailed functionality. Collaborate with UX to refine detailed interaction, iconography, infographics, etc Build 80% of style guide, based on 80% complete wireframes. Layer on basic functionality of modules, logic, rules. Give ownership of modules to individual developers, but encourage collaboration and knowledge transfer. Technical lead break up modules/templates into sizable chucks for remaining sprints. 1.User Test with working prototype. 2.Refine design 3.Prioritize changes with Dev and Biz Tie up any complex graphic, icons, textures. Maintain style guide. Layer on Detailed functionality on assigned modules. Make any template level changes as needed. Review, support, collaborate. Maintain documentation. Review, support, collaborate. Maintain documentation. Review, support, collaborate. Maintain documentation. Business and Dev review UX and visual design efforts. Business reviews UX and development efforts. UX reviews dev & visual efforts Business reviews UX and development efforts. UX reviews dev efforts Funtional QA Visual QA Bug fixes, load testing, simulations Business QA Everyone reviews and supports development efforts. Prework Sprint 0 (x2?) Sprint 1 Sprint 2 Sprint 3+ Optimization BIZ UX VISUAL DEV a...LEGOS PART 2 1. Identify LCD elements needed for each module. 2. Refine user flows 3. Determine “rules of response” for modules 4. Paper test, mobile first
  • 18. sophia voychehovski • @sophiavux • sophiavux.com COLLAB Based on general sense of project, conduct: - user research - opportunity research - competitive analysis Explore experience metaphors Responsive Road Shows. Explore general look and feel and experience metaphors Advise Business and UX 1.Articulate Business Goals 2.Draft SINGLE Business Requirements Document, stating the problems and the needs, not the UX solutions. • Trace to Biz Goals • No platform-specific requirements! (Mobile First - hierarchy and priority) • Do draft from non-responsive soon-to-be legacy site. • Do not try and partition sprints based on business requirements. Business reviews and iterates on goals and requirements with UX team and Technical team. (research and validate assumptions) Review and discuss experience metaphors (brand identity) 1.Translate Business Goals into XOs 2.Translate BRs into Attributes. “PLAY WITH LEGOS PART 1” 1. Untangle basic user flows 2. Identify LCD templates that can be applied to steps in user flows 3. Identify LCD modules needed to carry out BRs 4.Create priority prototype for each template. (List of modules for each template) 5. Consider Navigation and full site map across platforms. Define basic styles based on module library (style tiles). Explore global interaction design Conduct motion studies. Research responsive, latest development methodologies anticipated to use. Maintain and update Business goals and requirements. Business and Dev review UX and visual design efforts. “...LEGOS PART 2” 1. Identify LCD elements needed for each module. 2. Refine user flows 3. Determine “rules of response” for modules 4. Paper test, mobile first Create example comps as needed and begin exploring detailed module design. Translate into higher fidelity CSS. Mock up LCD templates, placeholder LDD modules, and multiple concepts for navigation. Continue to refine functionality, interplay and rules of system. Write UX/UI requirements as needed. Work with Dev to hand off detailed functionality. Collaborate with UX to refine detailed interaction, iconography, infographics, etc Build 80% of style guide, based on 80% complete wireframes. Layer on basic functionality of modules, logic, rules. Give ownership of modules to individual developers, but encourage collaboration and knowledge transfer. Technical lead break up modules/templates into sizable chucks for remaining sprints. 1.User Test with working prototype. 2.Refine design 3.Prioritize changes with Dev and Biz Tie up any complex graphic, icons, textures. Maintain style guide. Layer on Detailed functionality on assigned modules. Make any template level changes as needed. Review, support, collaborate. Maintain documentation. Review, support, collaborate. Maintain documentation. Review, support, collaborate. Maintain documentation. Business and Dev review UX and visual design efforts. Business reviews UX and development efforts. UX reviews dev & visual efforts Business reviews UX and development efforts. UX reviews dev efforts Funtional QA Visual QA Bug fixes, load testing, simulations Business QA Everyone reviews and supports development efforts. Prework Sprint 0 (x2?) Sprint 1 Sprint 2 Sprint 3+ Optimization BIZ UX VISUAL DEV Mock up LCD templates, placeholder LCD modules, and multiple concepts for navigation.
  • 19. sophia voychehovski • @sophiavux • sophiavux.com Races Main (x1) Snapshot of Elections. Landing page. Race Hub (x5) Everything about a single race. All state-level details for just that race type. State Hub (x50+) Everything about a single state. Just state-level details for that state, for all races. State-Race Detail (hundreds) County level results for a single race in a single state. Templates > Modules > Elements
  • 20. sophia voychehovski • @sophiavux • sophiavux.com Templates > Modules > Elements
  • 21. sophia voychehovski • @sophiavux • sophiavux.com Templates > Modules > Elements
  • 22. sophia voychehovski • @sophiavux • sophiavux.com YES!Definitely. YES! Maybe? YES! YES! Careful Careful Careful Templates > Modules > Elements TOGGLE REFLOW RESIZE NO
  • 23. sophia voychehovski • @sophiavux • sophiavux.com YES!Definitely. YES! Maybe? YES! YES! Careful Careful Careful Templates > Modules > Elements TOGGLE REFLOW RESIZE NO Visual Design Library/ Detailed interactions User Flows
  • 24. sophia voychehovski • @sophiavux • sophiavux.com TOGGLE REFLOW RESIZE Responsive Module Worksheet no, shows everywhere no, always linear stack yes, columns squish yes, state icon, first name, # votes yes, status icon moves yes, small icons
  • 25. sophia voychehovski • @sophiavux • sophiavux.com TOGGLE REFLOW RESIZE Responsive Module Worksheet no, shows everywhere no, always linear stack yes, columns squish yes, state icon, first name, # votes yes, status icon moves yes, small icons UX Decisions Visual design and “the system”
  • 26. sophia voychehovski • @sophiavux • sophiavux.com Responsive = COMPANY CAREER BRAIN