How We Do UX Design at iStrategyLabs


Published on

Published in: Technology

How We Do UX Design at iStrategyLabs

  2. 2. OVERVIEW We set out as a company to solidify iSL’s current “IA/UX” process and define the steps and tools required for a consistent planning phase for each project requiring this phase going forward. Working Group: Eric Shutt, Caresse Duford, Megan Zlock, Joseph Abrahams, Klare Frank and Ali Felski
  3. 3. We’re not just talking about “IA/UX” deliverables but about User Experience Design as a whole.
  4. 4. Problems to Address • Incomplete Information • Short Timelines • Internal Miscommunication • Scope Creep • Unclear Creative Direction • Working off of Incorrect Assumptions
  5. 5. Internal Goals (ISL) • Define all Product Functionality • Define Content Hierarchy and Relationships • Identify and Close All Gaps for User Experience and Interface Design
  6. 6. Client Goals • Collaborative process and agreement of what the structure and functionality of a website will be. • Shared agreement and understanding between client and ISL of website functionality. • Understanding the purpose and value of wireframes. (ISL statement on purpose of wireframes) • Guidance on what to look for: “Content, functionality, and hierarchy” Nothing on design.
  8. 8. User Experience “ Any aspect of a person’s interaction with a given IT system, including the interface, graphics, industrial design, physical interaction, and the manual.
  9. 9. Information Architecture “ Information architecture is the art and science of organizing and labeling data.
  10. 10. IA vs. UX Information Architecture is a part of User Experience Design, not a separate process. IA is set early on, while UX design continues throughout the Project Lifespan, until completion.
  11. 11. Visual Design vs. UX Like Information Architecture, Visual Design is a larger part of User Experience Design process. Visual Design step ends, User Experience Design continues.
  12. 12. PROCESSES
  13. 13. Project Overview • Kickoff & Discovery • Client Survey • Discovery Session • Project on a Page Summary/Discovery Brier • Tech Brief • Setup Content Collector • IA/UX Deliverables • Content Audit • Site Map with Features Call Out (iterative) • Start Content Collections (via page tables) • User Flows (iterative) • Wireframes (iterative)
  14. 14. Project Overview (continued) • Pre-Visual/Pre-Dev Checkin With Full Team • Revisit Timeline • Design & Dev Commences • Design: Internal Review I, Internal Review II, Final Internal Review and Presentations • Dev: Iteration, SDR • Review & Client Approval • Build Out All Things • Internal QA & Testing (iterative) • Final Approval • Push to Production
  15. 15. Client Review and Deliverables • IA/UX Lead - Person Who Was Involved in Content Audit and is in Charge of Ensuring All Deliverables Follow Client Goals and Work Toward KPI’s (Could be from any team) • First Round, by Phone or In Person Always • All Teams Rep - Each Team (DH, DM, AM) Represented on All Wireframe Reviews • Go For it All - All Pages Presented at One Time (not a small selection) • Presentation Lead - The Person Who Created the Wireframes Should Present to Client • Set the Stage
  16. 16. Client Review and Deliverables (continued) • Let the Client Lead With Questions - Ask questions first instead of jumping in. After questions are addressed guide them through the doc. • Back it Up - Be able to explain all decisions (placement, hierarchy) — make sure clients know we make the right choices, not the easy one.
  17. 17. Kickoff & Discovery • Client Survey • Discovery Session • Early Artifacts & Asset Collection • Project on a Page/Discovery Brief • Yields Personas, Goals and Actions • Touches on Overarching Creative Direction and Possible Concepts • Tech Brief • Feature List • Project Tech Requirements (like browser compatability) • Technical Suggestions (NOT exact tech)
  18. 18. IA/UX Deliverables • Content Audit • Site Map with Features Called Out (iterative) • Start Content Collection via Page Tables • User Flows (iterative) • Wireframes (iterative)
  19. 19. Content Audit THIS IS A REQUIRED STEP BEFORE A SITEMAP Process • Identify the content we’ll be working with and discern content types. • Will vary based on ISL’s role in content - could be final content, existing content, or theoretical content. • Leads into Sitemap Delivery • This is an internal deliverable • Lead IA/UX person is responsible for this (Design, Dev, or Strategy)
  20. 20. Sitemap Process • Organize content and content types onto pages. • Take features from the feature list and identify their placement (some will be universal. Delivery • All of our sitemaps should look the same (ISL themed) • Made in Omnigraffle • Delivered as a PDF to client and explained in-person or over the phone • This is done first, but is open to iteration
  21. 21. Content Collection Process • Page Tables • Possibly Write Content • Could Come From Content Audit • Finalizes What Content Will Go Where in the New IA • If Theoretical Content, We Can Make Specification At This Point to Help Design Delivery • Page Tables • This is a Collaborative Deliverable for Both ISL and the Client
  22. 22. Userflows Process • There Are Two Types of User Flows - Persona Based and Functional • Persona Based - Based in Psychology and Persona Motivations (what we do now). Factor into Marketing Goals • Functional - Creates a Step-by-step Experience of Executing a Task Delivery • All of Our Userflows Should Look the Same (ISL Themed) • Made in Omnigraffle • Functional User Flows Should be Built as a Decision Tree • Delivered as a PDF to Client and Explained in-person or Over the Phone • Should be Done Before Wireframes
  23. 23. Wireframes Process • Done LAST Based on Previous Deliverables • Creates a Basic Blue-Print of Content and Functionality That is Visual Design Agnostic Content • Lorem Ipsum or Real Copy Only for Body Copy (Text is Clear if it’s Fake or Real) • Image Space Allocation is Clearly Place-Holder (No Photos) • All Element-States (Drop-downs, Tool-tips, Pop-ups, Invalid/Valid States on Forms)
  24. 24. Wireframes continued Delivery • Prototype URL OR InVision Link With Option to Save as .PDF With Cover Page • In Brower - Made With an ISL Bootstrap, PDF - Made in Omnigraffle • Should Come to Delivery With Question on Finalizing Functionality Details (Example: Filling in Any Missing Drop-down Options)
  25. 25. REVIEWS
  26. 26. Review UX Design Processes Post IA/UX Regroup Pre-dev and pre-design meetings are suggested to have everyone involved early on. • Pre-Visual/Pre-Dev Checkin with Full Team - Revisit Timeline Visual Design 2-3 internal reviews are suggested in the design phase and should include all teams. • Design & Dev Commences • Design - Internal Review I, Internal Review II, Final Internal Review and Presentations • Dev - Iteration, Final Internal Review • Review & Client Approval
  27. 27. Review UX Design Processes (continued) Development • Build Out All Things • Internal QA & Testing (iterative) • Final Approval • Push to Production
  28. 28. Review Processes • One Thing at a Time - Present Functionality List, Site Map and User Flow (if needed) first, on their own. Site Map approval with option to shift internally if needed. • 3 Rounds of Revision Max - Round 1, Feedback, Round 2, Final Feedback, Round 3 for Completion, Completion • Extensions - If additional revisions are needed, create the expectation up front that production timeline will shift. • Wireframe Completion & Sign-off - Clients sign-off (formal signature) on documents for approval on all IA/UX deliverables.
  29. 29. QA & Testing • Test Usability at Every Project Phase - Wireframes, Designs and Dev • Include Testing in SOW’s - For Every Round of UX Design, or Give Understanding of Drawbacks for Opting Out • QA Test Pre-defined Tasks - and Features Based on the Functionality Requirements Defined Early in Our UX Design Process
  30. 30. Project Completion • We’ve Completed a Project When - Features Are Complete Based on Feature List in the Tech Brief • We Re-evaluate Project Progress and Path to Completion at - The End of the Timeline Defined in Our Contract • We Extent the Timeline Once Per Project When - We’ve Re-evaluated Progress and Agreed on a new Path to Completion
  32. 32. Internal Outcomes (ISL) • Guide Page Layouts, but Not Define • Developers Can Immediately Start Developing Based on Wireframes • Internal Review and Agreement for All Design and Dev • Allocate More Time Earlier to Save Time Later • Create Consistent Looking Deliverables • Prevent Scope Creep
  33. 33. Client Outcomes • Client Forced to Think More Deeply About Website Content and Functionality • Save Visual Design for Design Phase • Client Understanding of Change Requests and Revisions Requested After Wireframe Approval • Content Gaps Are Identified and Accounted For by the Client and ISL • Client Understands Content Strategy and Has Identified If There is a Need for Full-scale Content Strategy Work as Additional Scope (if not already included in project)
  34. 34. Kickoff Discovery Discovery IA/UX Design Dev QA Briefs Content Audit Asset Collection POP Sitemap Wireframes User Flows Moodboards Visual Comps Front-End Back-End Completion Personas QA