Captivating Charm: Exploring Marseille's Hillside Villas with Our 3D Architec...
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)
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.
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