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