HOW WE DOUX DESIGN
USER EXPERIENCE DESIGN AT ISL
OVERVIEWWe 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
We’re not just talking about “IA/UX” deliverables but about User Experience Design as a whole.
• Incomplete Information• Short Timelines• Internal Miscommunication• Scope Creep• Unclear Creative Direction• Working off of Incorrect Assumptions
Problems to Address
• Define all Product Functionality• Define Content Hierarchy and Relationships• Identify and Close All Gaps for User Experience and Interface Design
Internal Goals (ISL)
• 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.
Client Goals
DEFINITIONS
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.“
Information Architecture
Information architecture is the art and science of organizing and labeling data. “
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.
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.
PROCESSES
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)
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
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
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.
Kickoff & Discovery• Client Survey
• Discovery Session
• Early Artifacts & Asset Collection
• Project on a Page/Discovery Brief
• Tech Brief
• Yields Personas, Goals and Actions
• Touches on Overarching Creative Direction and Possible Concepts
• Feature List
• Project Tech Requirements (like browser compatability)
• Technical Suggestions (NOT exact tech)
IA/UX Deliverables• Content Audit
• Site Map with Features Called Out (iterative)
• Start Content Collection via Page Tables
• User Flows (iterative)
• Wireframes (iterative)
Content Audit
• 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
Process
• This is an internal deliverable
• Lead IA/UX person is responsible for this (Design, Dev, or Strategy)
Delivery
THIS IS A REQUIRED STEP BEFORE A SITEMAP
Sitemap
• Organize content and content types onto pages.
• Take features from the feature list and identify their placement (some
will be universal.
Process
• 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
Delivery
Content Collection
• 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
Process
• Page Tables
• This is a Collaborative Deliverable for Both ISL and the Client
Delivery
Userflows
• 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
Process
• 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
Delivery
Wireframes
• Done LAST Based on Previous Deliverables
• Creates a Basic Blue-Print of Content and Functionality That is
Visual Design Agnostic
Process
• 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)
Content
Wireframes continued
• 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)
Delivery
REVIEWS
Review UX Design Processes
• Pre-Visual/Pre-Dev Checkin with Full Team - Revisit Timeline
Post IA/UX RegroupPre-dev and pre-design meetings are suggested to have everyone involvedearly on.
• Design & Dev Commences
• Design - Internal Review I, Internal Review II, Final Internal Review and Presentations
• Dev - Iteration, Final Internal Review
• Review & Client Approval
Visual Design2-3 internal reviews are suggested in the design phase and should includeall teams.
Review UX Design Processes (continued)
• Build Out All Things
• Internal QA & Testing (iterative)
• Final Approval
• Push to Production
Development
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.
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
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
PROCESSOUTCOMES
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
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)
Discovery
IA/UX
Design
Dev
QA
ContentAudit Sitemap User Flows Wireframes
Moodboards VisualComps
Front-End Back-End QA
Completion
Discovery Briefs POP AssetCollection Personas
Kickoff