The document discusses responsive web design (RWD) and outlines a process for collaboratively designing responsive websites. It begins with conducting research to understand user needs and business goals. A single requirements document is created without specifying solutions. User flows, templates, modules, and styles are developed through an iterative process of prototyping, testing, and refinement. Development is broken into sprints with collaboration between business, UX, visual, and development teams throughout.

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