How We Do UX Design at iStrategyLabs
Upcoming SlideShare
Loading in...5
×
 

How We Do UX Design at iStrategyLabs

on

  • 447 views

 

Statistics

Views

Total Views
447
Views on SlideShare
447
Embed Views
0

Actions

Likes
4
Downloads
35
Comments
0

0 Embeds 0

No embeds

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

    How We Do UX Design at iStrategyLabs How We Do UX Design at iStrategyLabs Presentation Transcript

    • HOW WE DO UX DESIGN USER EXPERIENCE DESIGN AT ISL
    • 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
    • We’re not just talking about “IA/UX” deliverables but about User Experience Design as a whole.
    • Problems to Address • Incomplete Information • Short Timelines • Internal Miscommunication • Scope Creep • Unclear Creative Direction • Working off of Incorrect Assumptions
    • Internal Goals (ISL) • Define all Product Functionality • Define Content Hierarchy and Relationships • Identify and Close All Gaps for User Experience and Interface Design
    • 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.
    • 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 • 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)
    • 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 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)
    • 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
    • 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
    • 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
    • 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)
    • 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)
    • REVIEWS
    • 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
    • Review UX Design Processes (continued) Development • Build Out All Things • Internal QA & Testing (iterative) • Final Approval • Push to Production
    • 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
    • PROCESS OUTCOMES
    • 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)
    • 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