0
sophia voychehovski • @sophiavux • sophiavux.com
Your Brain on Responsive Design
thoughts on changing the way you work & t...
sophia voychehovski • @sophiavux • sophiavux.com
Design Process + Responsive
A painless process for you = a painless produ...
sophia voychehovski • @sophiavux • sophiavux.com
Adaptive
Layout
Adaptive
Design
Accessible
DesignRWD
@media
queries
@medi...
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...
sophia voychehovski • @sophiavux • sophiavux.com
sophia voychehovski • @sophiavux • sophiavux.com
Based on general sense of
project, conduct:
- user research
- opportunity...
sophia voychehovski • @sophiavux • sophiavux.com
Based on general sense of
project, conduct:
- user research
- opportunity...
sophia voychehovski • @sophiavux • sophiavux.com
Based on general sense of
project, conduct:
- user research
- opportunity...
sophia voychehovski • @sophiavux • sophiavux.com
Based on general sense of
project, conduct:
- user research
- opportunity...
sophia voychehovski • @sophiavux • sophiavux.com
COLLAB
Based on general sense of
project, conduct:
- user research
- oppo...
sophia voychehovski • @sophiavux • sophiavux.com
COLLAB
Based on general sense of
project, conduct:
- user research
- oppo...
sophia voychehovski • @sophiavux • sophiavux.com
COLLAB
Based on general sense of
project, conduct:
- user research
- oppo...
sophia voychehovski • @sophiavux • sophiavux.com
COLLAB
Based on general sense of
project, conduct:
- user research
- oppo...
sophia voychehovski • @sophiavux • sophiavux.com
Races Main
(x1)
Snapshot of Elections.
Landing page.
Race Hub
(x5)
Everyt...
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 > ...
sophia voychehovski • @sophiavux • sophiavux.com
YES!Definitely. YES!
Maybe? YES! YES!
Careful Careful Careful
Templates > ...
sophia voychehovski • @sophiavux • sophiavux.com
TOGGLE
REFLOW
RESIZE
Responsive Module Worksheet
no, shows everywhere
no,...
sophia voychehovski • @sophiavux • sophiavux.com
TOGGLE
REFLOW
RESIZE
Responsive Module Worksheet
no, shows everywhere
no,...
sophia voychehovski • @sophiavux • sophiavux.com
Responsive =
COMPANY CAREER BRAIN
Upcoming SlideShare
Loading in...5
×

Your Brain on Responsive Design

142

Published on

Slides from January CHI*Atlanta talk

Published in: Design, Technology, Business
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
142
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
3
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Transcript of "Your Brain on Responsive Design"

  1. 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. 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. 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. 4. sophia voychehovski • @sophiavux • sophiavux.com RWD Resizing Reflowing “Toggling” Templates Modules Elements
  5. 5. sophia voychehovski • @sophiavux • sophiavux.com
  6. 6. sophia voychehovski • @sophiavux • sophiavux.com
  7. 7. sophia voychehovski • @sophiavux • sophiavux.com omg Whatever HOLY MOLY! Stakes $ $ $ $ $ $ $ $ $ Risk ? ? ? ? ? ? ? ? ? ?
  8. 8. sophia voychehovski • @sophiavux • sophiavux.com Text
  9. 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. 10. sophia voychehovski • @sophiavux • sophiavux.com
  11. 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. 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. 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. 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. 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. 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. 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. 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. 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. 20. sophia voychehovski • @sophiavux • sophiavux.com Templates > Modules > Elements
  21. 21. sophia voychehovski • @sophiavux • sophiavux.com Templates > Modules > Elements
  22. 22. sophia voychehovski • @sophiavux • sophiavux.com YES!Definitely. YES! Maybe? YES! YES! Careful Careful Careful Templates > Modules > Elements TOGGLE REFLOW RESIZE NO
  23. 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. 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. 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. 26. sophia voychehovski • @sophiavux • sophiavux.com Responsive = COMPANY CAREER BRAIN
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×