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