How We Do UX Design at iStrategyLabs

Download How We Do UX Design at iStrategyLabs

Post on 27-Jan-2015

105 views

Category:

Technology

2 download

DESCRIPTION

 

TRANSCRIPT

  • 1. HOW WE DO UX DESIGN USER EXPERIENCE DESIGN AT ISL

2. OVERVIEW We set out as a company to solidify iSLs current IA/UX process and dene 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. Were not just talking about IA/UX deliverables but about User Experience Design as a whole. 4. Problems to Address Incomplete Information Short Timelines Internal Miscommunication Scope Creep Unclear Creative Direction Working o of Incorrect Assumptions 5. Internal Goals (ISL) Dene all Product Functionality Dene Content Hierarchy and Relationships Identify and Close All Gaps for User Experience and Interface Design 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. 7. DEFINITIONS 8. User ExperienceAny aspect of a persons interaction with a given IT system, including the interface, graphics, industrial design, physical interaction, and the manual. 9. Information ArchitectureInformation architecture is the art and science of organizing and labeling data. 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. 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. PROCESSES 13. Project Overview Kicko & 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. 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. 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 KPIs (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. Client Review and Deliverables (continued) Let the Client Lead With Questions - Ask questions rst 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. Kicko & 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. IA/UX Deliverables Content Audit Site Map with Features Called Out (iterative) Start Content Collection via Page Tables User Flows (iterative) Wireframes (iterative) 19. Content Audit THIS IS A REQUIRED STEP BEFORE A SITEMAPProcess Identify the content well be working with and discern content types. Will vary based on ISLs role in content - could be nal content, existing content, or theoretical content. Leads into SitemapDelivery This is an internal deliverable Lead IA/UX person is responsible for this (Design, Dev, or Strategy) 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 Omnigrae Delivered as a PDF to client and explained in-person or over the phone This is done rst, but is open to iteration 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 Specication At This Point to Help DesignDelivery Page Tables This is a Collaborative Deliverable for Both ISL and the Client 22. Userows 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 TaskDelivery All of Our Userows Should Look the Same (ISL Themed) Made in Omnigrae 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. Wireframes Process Done LAST Based on Previous Deliverables Creates a Basic Blue-Print of Content and Functionality That is Visual Design AgnosticContent Lorem Ipsum or Real Copy Only for Body Copy (Text is Clear if its 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. 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 Omnigrae Should Come to Delivery With Question on Finalizing Functionality Details (Example: Filling in Any Missing Drop-down Options) 25. REVIEWS 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 TimelineVisual 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. Review UX Design Processes (continued) Development Build Out All Things Internal QA & Testing (iterative) Final Approval Push to Production 28. Review Processes One Thing at a Time - Present Functionality List, Site Map and User Flow (if needed) rst, 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-o - Clients sign-o (formal signature) on documents for approval on all IA/UX deliverables. 29. QA & Testing Test Usability at Every Project Phase - Wireframes, Designs and Dev Include Testing in SOWs - For Every Round of UX Design, or Give Understanding of Drawbacks for Opting Out QA Test Pre-dened Tasks - and Features Based on the Functionality Requirements Dened Early in Our UX Design Process 30. Project Completion Weve 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 Dened in Our Contract We Extent the Timeline Once Per Project When - Weve Re-evaluated Progress and Agreed on a new Path to Completion 31. PROCESS OUTCOMES 32. Internal Outcomes (ISL) Guide Page Layouts, but Not Dene 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. 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 Identied and Accounted For by the Client and ISL Client Understands Content Strategy and Has Identied If There is a Need for Full-scale Content Strategy Work as Additional Scope (if not already included in project) 34. Kicko Discovery DiscoveryIA/UXDesignDevQABriefsContent AuditAsset CollectionPOPSitemapWireframesUser FlowsMoodboardsVisual CompsFront-EndBack-EndCompletionPersonasQA