How We Do UX Design at iStrategyLabs

  • 431 views
Uploaded on

 

More in: Technology
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
No Downloads

Views

Total Views
431
On Slideshare
0
From Embeds
0
Number of Embeds
0

Actions

Shares
Downloads
38
Comments
0
Likes
5

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

  • 1. HOW WE DO UX DESIGN USER EXPERIENCE DESIGN AT ISL
  • 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. We’re 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 off of Incorrect Assumptions
  • 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. 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 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. Information Architecture “ Information 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 • 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. 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 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. 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. 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. 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 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. 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. 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. 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. 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. 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. 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 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. 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) 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. 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. 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
  • 31. PROCESS OUTCOMES
  • 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. 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. 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