SlideShare a Scribd company logo
1 of 34
Download to read offline
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

More Related Content

Viewers also liked

Reestruturação do Programa de Curadores Caos Focado
Reestruturação do Programa de Curadores Caos FocadoReestruturação do Programa de Curadores Caos Focado
Reestruturação do Programa de Curadores Caos FocadoJacqueline Yumi Asano
 
27 Numbers That Show Why Technology Is Poised To Disrupt The Healthcare Indus...
27 Numbers That Show Why Technology Is Poised To Disrupt The Healthcare Indus...27 Numbers That Show Why Technology Is Poised To Disrupt The Healthcare Indus...
27 Numbers That Show Why Technology Is Poised To Disrupt The Healthcare Indus...Chaotic Moon Studios
 
Lidnug Presentation - Kinect - The How, Were and When of developing with it
Lidnug Presentation - Kinect - The How, Were and When of developing with itLidnug Presentation - Kinect - The How, Were and When of developing with it
Lidnug Presentation - Kinect - The How, Were and When of developing with itPhilip Wheat
 
Empathy as a way to build a success product
Empathy as a way to build a success product Empathy as a way to build a success product
Empathy as a way to build a success product Jacqueline Yumi Asano
 
DaVinci-Case_Isvor_Fiat
DaVinci-Case_Isvor_FiatDaVinci-Case_Isvor_Fiat
DaVinci-Case_Isvor_FiatDenise Eler
 
The razorfish5 report 2011
The razorfish5 report 2011The razorfish5 report 2011
The razorfish5 report 2011Luis Miranda
 
UXSG#2 Keynote Presentation
UXSG#2 Keynote PresentationUXSG#2 Keynote Presentation
UXSG#2 Keynote Presentationux singapore
 
Fact V4.0 Brochure
Fact V4.0 BrochureFact V4.0 Brochure
Fact V4.0 Brochureguillaume123
 
Mobile Websites: Must-Haves or Has Beens?
Mobile Websites: Must-Haves or Has Beens?Mobile Websites: Must-Haves or Has Beens?
Mobile Websites: Must-Haves or Has Beens?Chaotic Moon Studios
 
Chaotic Moon Studios Intro
Chaotic Moon Studios IntroChaotic Moon Studios Intro
Chaotic Moon Studios Introgbanton
 
Design Thinking
Design ThinkingDesign Thinking
Design Thinkingtalkitbr
 
Momento Design Thinking
Momento Design ThinkingMomento Design Thinking
Momento Design ThinkingCetem
 
Virtual Ethnography: Bridging the Gap between Market Research and Social Media
Virtual Ethnography: Bridging the Gap between Market Research and Social MediaVirtual Ethnography: Bridging the Gap between Market Research and Social Media
Virtual Ethnography: Bridging the Gap between Market Research and Social MediaAlterian
 

Viewers also liked (17)

Reestruturação do Programa de Curadores Caos Focado
Reestruturação do Programa de Curadores Caos FocadoReestruturação do Programa de Curadores Caos Focado
Reestruturação do Programa de Curadores Caos Focado
 
27 Numbers That Show Why Technology Is Poised To Disrupt The Healthcare Indus...
27 Numbers That Show Why Technology Is Poised To Disrupt The Healthcare Indus...27 Numbers That Show Why Technology Is Poised To Disrupt The Healthcare Indus...
27 Numbers That Show Why Technology Is Poised To Disrupt The Healthcare Indus...
 
E-Book. 21 Days Humanity Challenge
E-Book. 21 Days Humanity ChallengeE-Book. 21 Days Humanity Challenge
E-Book. 21 Days Humanity Challenge
 
Lidnug Presentation - Kinect - The How, Were and When of developing with it
Lidnug Presentation - Kinect - The How, Were and When of developing with itLidnug Presentation - Kinect - The How, Were and When of developing with it
Lidnug Presentation - Kinect - The How, Were and When of developing with it
 
Empathy as a way to build a success product
Empathy as a way to build a success product Empathy as a way to build a success product
Empathy as a way to build a success product
 
DaVinci-Case_Isvor_Fiat
DaVinci-Case_Isvor_FiatDaVinci-Case_Isvor_Fiat
DaVinci-Case_Isvor_Fiat
 
The razorfish5 report 2011
The razorfish5 report 2011The razorfish5 report 2011
The razorfish5 report 2011
 
UXSG#2 Keynote Presentation
UXSG#2 Keynote PresentationUXSG#2 Keynote Presentation
UXSG#2 Keynote Presentation
 
Fact V4.0 Brochure
Fact V4.0 BrochureFact V4.0 Brochure
Fact V4.0 Brochure
 
WTF Is The Future Of Innovation
WTF Is The Future Of InnovationWTF Is The Future Of Innovation
WTF Is The Future Of Innovation
 
Mobile Websites: Must-Haves or Has Beens?
Mobile Websites: Must-Haves or Has Beens?Mobile Websites: Must-Haves or Has Beens?
Mobile Websites: Must-Haves or Has Beens?
 
Chaotic Moon Studios Intro
Chaotic Moon Studios IntroChaotic Moon Studios Intro
Chaotic Moon Studios Intro
 
MANG6264 Design Thinking PPT.pptx
MANG6264 Design Thinking PPT.pptxMANG6264 Design Thinking PPT.pptx
MANG6264 Design Thinking PPT.pptx
 
Design Thinking
Design ThinkingDesign Thinking
Design Thinking
 
Momento Design Thinking
Momento Design ThinkingMomento Design Thinking
Momento Design Thinking
 
Workshop Design Thinking in Action
Workshop Design Thinking in ActionWorkshop Design Thinking in Action
Workshop Design Thinking in Action
 
Virtual Ethnography: Bridging the Gap between Market Research and Social Media
Virtual Ethnography: Bridging the Gap between Market Research and Social MediaVirtual Ethnography: Bridging the Gap between Market Research and Social Media
Virtual Ethnography: Bridging the Gap between Market Research and Social Media
 

Similar to How We Do UX Design at iStrategyLabs

UX and Agile can be better together
UX and Agile can be better togetherUX and Agile can be better together
UX and Agile can be better togetherDassi Shusterman
 
Why We Need Architects (and Architecture) on Agile Projects
Why We Need Architects (and Architecture) on Agile ProjectsWhy We Need Architects (and Architecture) on Agile Projects
Why We Need Architects (and Architecture) on Agile ProjectsRebecca Wirfs-Brock
 
Scrum Process For Offshore Team
Scrum Process For Offshore TeamScrum Process For Offshore Team
Scrum Process For Offshore TeamPaul Nguyen
 
Lean-Agile SharePoint Development
Lean-Agile SharePoint DevelopmentLean-Agile SharePoint Development
Lean-Agile SharePoint DevelopmentBill Ayers
 
How to Integrate UX and Agile
How to Integrate UX and AgileHow to Integrate UX and Agile
How to Integrate UX and AgileUserZoom
 
Prototyping for responsive web design
Prototyping for responsive web design Prototyping for responsive web design
Prototyping for responsive web design mrscammels
 
Software development planning and essentials
Software development planning and essentialsSoftware development planning and essentials
Software development planning and essentialsRajesh P
 
Software development planning and essentials
Software development planning and essentialsSoftware development planning and essentials
Software development planning and essentialsRajesh P
 
Enabling Design Reviews with JIRA and Confluence - Atlassian Summit 2012
Enabling Design Reviews with JIRA and Confluence - Atlassian Summit 2012Enabling Design Reviews with JIRA and Confluence - Atlassian Summit 2012
Enabling Design Reviews with JIRA and Confluence - Atlassian Summit 2012Atlassian
 
SNOW Knowledge Management_SSP.ppt
SNOW Knowledge Management_SSP.pptSNOW Knowledge Management_SSP.ppt
SNOW Knowledge Management_SSP.pptChakrapaniGunti
 
Chris OBrien - Azure DevOps for managing work
Chris OBrien - Azure DevOps for managing workChris OBrien - Azure DevOps for managing work
Chris OBrien - Azure DevOps for managing workChris O'Brien
 
Lean-Agile Development with SharePoint - Bill Ayers
Lean-Agile Development with SharePoint - Bill AyersLean-Agile Development with SharePoint - Bill Ayers
Lean-Agile Development with SharePoint - Bill AyersSPC Adriatics
 
Introduction to the web engineering Process.pdf
Introduction to the web engineering Process.pdfIntroduction to the web engineering Process.pdf
Introduction to the web engineering Process.pdfMahmoud268161
 
The Digital Creative Process
The Digital Creative ProcessThe Digital Creative Process
The Digital Creative Processstorybridge
 
Rational Unified Process
Rational Unified ProcessRational Unified Process
Rational Unified ProcessKumar
 
Vs11 overview
Vs11 overviewVs11 overview
Vs11 overviewravclarke
 
Zero to 365 in One Hour: Processes and Tools for Effective SharePoint Solutions
Zero to 365 in One Hour: Processes and Tools for Effective SharePoint SolutionsZero to 365 in One Hour: Processes and Tools for Effective SharePoint Solutions
Zero to 365 in One Hour: Processes and Tools for Effective SharePoint SolutionsRegroove
 

Similar to How We Do UX Design at iStrategyLabs (20)

UX and Agile can be better together
UX and Agile can be better togetherUX and Agile can be better together
UX and Agile can be better together
 
Requirement designer
Requirement designerRequirement designer
Requirement designer
 
Why We Need Architects (and Architecture) on Agile Projects
Why We Need Architects (and Architecture) on Agile ProjectsWhy We Need Architects (and Architecture) on Agile Projects
Why We Need Architects (and Architecture) on Agile Projects
 
The Agile Mindset
The Agile MindsetThe Agile Mindset
The Agile Mindset
 
Scrum Process For Offshore Team
Scrum Process For Offshore TeamScrum Process For Offshore Team
Scrum Process For Offshore Team
 
Lean-Agile SharePoint Development
Lean-Agile SharePoint DevelopmentLean-Agile SharePoint Development
Lean-Agile SharePoint Development
 
How to Integrate UX and Agile
How to Integrate UX and AgileHow to Integrate UX and Agile
How to Integrate UX and Agile
 
Prototyping for responsive web design
Prototyping for responsive web design Prototyping for responsive web design
Prototyping for responsive web design
 
Software development planning and essentials
Software development planning and essentialsSoftware development planning and essentials
Software development planning and essentials
 
Software development planning and essentials
Software development planning and essentialsSoftware development planning and essentials
Software development planning and essentials
 
306 belmont ssp08agileit
306 belmont ssp08agileit306 belmont ssp08agileit
306 belmont ssp08agileit
 
Enabling Design Reviews with JIRA and Confluence - Atlassian Summit 2012
Enabling Design Reviews with JIRA and Confluence - Atlassian Summit 2012Enabling Design Reviews with JIRA and Confluence - Atlassian Summit 2012
Enabling Design Reviews with JIRA and Confluence - Atlassian Summit 2012
 
SNOW Knowledge Management_SSP.ppt
SNOW Knowledge Management_SSP.pptSNOW Knowledge Management_SSP.ppt
SNOW Knowledge Management_SSP.ppt
 
Chris OBrien - Azure DevOps for managing work
Chris OBrien - Azure DevOps for managing workChris OBrien - Azure DevOps for managing work
Chris OBrien - Azure DevOps for managing work
 
Lean-Agile Development with SharePoint - Bill Ayers
Lean-Agile Development with SharePoint - Bill AyersLean-Agile Development with SharePoint - Bill Ayers
Lean-Agile Development with SharePoint - Bill Ayers
 
Introduction to the web engineering Process.pdf
Introduction to the web engineering Process.pdfIntroduction to the web engineering Process.pdf
Introduction to the web engineering Process.pdf
 
The Digital Creative Process
The Digital Creative ProcessThe Digital Creative Process
The Digital Creative Process
 
Rational Unified Process
Rational Unified ProcessRational Unified Process
Rational Unified Process
 
Vs11 overview
Vs11 overviewVs11 overview
Vs11 overview
 
Zero to 365 in One Hour: Processes and Tools for Effective SharePoint Solutions
Zero to 365 in One Hour: Processes and Tools for Effective SharePoint SolutionsZero to 365 in One Hour: Processes and Tools for Effective SharePoint Solutions
Zero to 365 in One Hour: Processes and Tools for Effective SharePoint Solutions
 

Recently uploaded

Comparing Sidecar-less Service Mesh from Cilium and Istio
Comparing Sidecar-less Service Mesh from Cilium and IstioComparing Sidecar-less Service Mesh from Cilium and Istio
Comparing Sidecar-less Service Mesh from Cilium and IstioChristian Posta
 
UiPath Clipboard AI: "A TIME Magazine Best Invention of 2023 Unveiled"
UiPath Clipboard AI: "A TIME Magazine Best Invention of 2023 Unveiled"UiPath Clipboard AI: "A TIME Magazine Best Invention of 2023 Unveiled"
UiPath Clipboard AI: "A TIME Magazine Best Invention of 2023 Unveiled"DianaGray10
 
UiPath Platform: The Backend Engine Powering Your Automation - Session 1
UiPath Platform: The Backend Engine Powering Your Automation - Session 1UiPath Platform: The Backend Engine Powering Your Automation - Session 1
UiPath Platform: The Backend Engine Powering Your Automation - Session 1DianaGray10
 
Introduction to Matsuo Laboratory (ENG).pptx
Introduction to Matsuo Laboratory (ENG).pptxIntroduction to Matsuo Laboratory (ENG).pptx
Introduction to Matsuo Laboratory (ENG).pptxMatsuo Lab
 
Cybersecurity Workshop #1.pptx
Cybersecurity Workshop #1.pptxCybersecurity Workshop #1.pptx
Cybersecurity Workshop #1.pptxGDSC PJATK
 
Using IESVE for Loads, Sizing and Heat Pump Modeling to Achieve Decarbonization
Using IESVE for Loads, Sizing and Heat Pump Modeling to Achieve DecarbonizationUsing IESVE for Loads, Sizing and Heat Pump Modeling to Achieve Decarbonization
Using IESVE for Loads, Sizing and Heat Pump Modeling to Achieve DecarbonizationIES VE
 
20230202 - Introduction to tis-py
20230202 - Introduction to tis-py20230202 - Introduction to tis-py
20230202 - Introduction to tis-pyJamie (Taka) Wang
 
Igniting Next Level Productivity with AI-Infused Data Integration Workflows
Igniting Next Level Productivity with AI-Infused Data Integration WorkflowsIgniting Next Level Productivity with AI-Infused Data Integration Workflows
Igniting Next Level Productivity with AI-Infused Data Integration WorkflowsSafe Software
 
IESVE Software for Florida Code Compliance Using ASHRAE 90.1-2019
IESVE Software for Florida Code Compliance Using ASHRAE 90.1-2019IESVE Software for Florida Code Compliance Using ASHRAE 90.1-2019
IESVE Software for Florida Code Compliance Using ASHRAE 90.1-2019IES VE
 
Secure your environment with UiPath and CyberArk technologies - Session 1
Secure your environment with UiPath and CyberArk technologies - Session 1Secure your environment with UiPath and CyberArk technologies - Session 1
Secure your environment with UiPath and CyberArk technologies - Session 1DianaGray10
 
UiPath Community: AI for UiPath Automation Developers
UiPath Community: AI for UiPath Automation DevelopersUiPath Community: AI for UiPath Automation Developers
UiPath Community: AI for UiPath Automation DevelopersUiPathCommunity
 
IEEE Computer Society’s Strategic Activities and Products including SWEBOK Guide
IEEE Computer Society’s Strategic Activities and Products including SWEBOK GuideIEEE Computer Society’s Strategic Activities and Products including SWEBOK Guide
IEEE Computer Society’s Strategic Activities and Products including SWEBOK GuideHironori Washizaki
 
UWB Technology for Enhanced Indoor and Outdoor Positioning in Physiological M...
UWB Technology for Enhanced Indoor and Outdoor Positioning in Physiological M...UWB Technology for Enhanced Indoor and Outdoor Positioning in Physiological M...
UWB Technology for Enhanced Indoor and Outdoor Positioning in Physiological M...UbiTrack UK
 
Bird eye's view on Camunda open source ecosystem
Bird eye's view on Camunda open source ecosystemBird eye's view on Camunda open source ecosystem
Bird eye's view on Camunda open source ecosystemAsko Soukka
 
Crea il tuo assistente AI con lo Stregatto (open source python framework)
Crea il tuo assistente AI con lo Stregatto (open source python framework)Crea il tuo assistente AI con lo Stregatto (open source python framework)
Crea il tuo assistente AI con lo Stregatto (open source python framework)Commit University
 
Anypoint Code Builder , Google Pub sub connector and MuleSoft RPA
Anypoint Code Builder , Google Pub sub connector and MuleSoft RPAAnypoint Code Builder , Google Pub sub connector and MuleSoft RPA
Anypoint Code Builder , Google Pub sub connector and MuleSoft RPAshyamraj55
 
How Accurate are Carbon Emissions Projections?
How Accurate are Carbon Emissions Projections?How Accurate are Carbon Emissions Projections?
How Accurate are Carbon Emissions Projections?IES VE
 
COMPUTER 10 Lesson 8 - Building a Website
COMPUTER 10 Lesson 8 - Building a WebsiteCOMPUTER 10 Lesson 8 - Building a Website
COMPUTER 10 Lesson 8 - Building a Websitedgelyza
 
99.99% of Your Traces Are (Probably) Trash (SRECon NA 2024).pdf
99.99% of Your Traces  Are (Probably) Trash (SRECon NA 2024).pdf99.99% of Your Traces  Are (Probably) Trash (SRECon NA 2024).pdf
99.99% of Your Traces Are (Probably) Trash (SRECon NA 2024).pdfPaige Cruz
 

Recently uploaded (20)

Comparing Sidecar-less Service Mesh from Cilium and Istio
Comparing Sidecar-less Service Mesh from Cilium and IstioComparing Sidecar-less Service Mesh from Cilium and Istio
Comparing Sidecar-less Service Mesh from Cilium and Istio
 
UiPath Clipboard AI: "A TIME Magazine Best Invention of 2023 Unveiled"
UiPath Clipboard AI: "A TIME Magazine Best Invention of 2023 Unveiled"UiPath Clipboard AI: "A TIME Magazine Best Invention of 2023 Unveiled"
UiPath Clipboard AI: "A TIME Magazine Best Invention of 2023 Unveiled"
 
UiPath Platform: The Backend Engine Powering Your Automation - Session 1
UiPath Platform: The Backend Engine Powering Your Automation - Session 1UiPath Platform: The Backend Engine Powering Your Automation - Session 1
UiPath Platform: The Backend Engine Powering Your Automation - Session 1
 
Introduction to Matsuo Laboratory (ENG).pptx
Introduction to Matsuo Laboratory (ENG).pptxIntroduction to Matsuo Laboratory (ENG).pptx
Introduction to Matsuo Laboratory (ENG).pptx
 
Cybersecurity Workshop #1.pptx
Cybersecurity Workshop #1.pptxCybersecurity Workshop #1.pptx
Cybersecurity Workshop #1.pptx
 
Using IESVE for Loads, Sizing and Heat Pump Modeling to Achieve Decarbonization
Using IESVE for Loads, Sizing and Heat Pump Modeling to Achieve DecarbonizationUsing IESVE for Loads, Sizing and Heat Pump Modeling to Achieve Decarbonization
Using IESVE for Loads, Sizing and Heat Pump Modeling to Achieve Decarbonization
 
20230202 - Introduction to tis-py
20230202 - Introduction to tis-py20230202 - Introduction to tis-py
20230202 - Introduction to tis-py
 
Igniting Next Level Productivity with AI-Infused Data Integration Workflows
Igniting Next Level Productivity with AI-Infused Data Integration WorkflowsIgniting Next Level Productivity with AI-Infused Data Integration Workflows
Igniting Next Level Productivity with AI-Infused Data Integration Workflows
 
IESVE Software for Florida Code Compliance Using ASHRAE 90.1-2019
IESVE Software for Florida Code Compliance Using ASHRAE 90.1-2019IESVE Software for Florida Code Compliance Using ASHRAE 90.1-2019
IESVE Software for Florida Code Compliance Using ASHRAE 90.1-2019
 
Secure your environment with UiPath and CyberArk technologies - Session 1
Secure your environment with UiPath and CyberArk technologies - Session 1Secure your environment with UiPath and CyberArk technologies - Session 1
Secure your environment with UiPath and CyberArk technologies - Session 1
 
UiPath Community: AI for UiPath Automation Developers
UiPath Community: AI for UiPath Automation DevelopersUiPath Community: AI for UiPath Automation Developers
UiPath Community: AI for UiPath Automation Developers
 
IEEE Computer Society’s Strategic Activities and Products including SWEBOK Guide
IEEE Computer Society’s Strategic Activities and Products including SWEBOK GuideIEEE Computer Society’s Strategic Activities and Products including SWEBOK Guide
IEEE Computer Society’s Strategic Activities and Products including SWEBOK Guide
 
20230104 - machine vision
20230104 - machine vision20230104 - machine vision
20230104 - machine vision
 
UWB Technology for Enhanced Indoor and Outdoor Positioning in Physiological M...
UWB Technology for Enhanced Indoor and Outdoor Positioning in Physiological M...UWB Technology for Enhanced Indoor and Outdoor Positioning in Physiological M...
UWB Technology for Enhanced Indoor and Outdoor Positioning in Physiological M...
 
Bird eye's view on Camunda open source ecosystem
Bird eye's view on Camunda open source ecosystemBird eye's view on Camunda open source ecosystem
Bird eye's view on Camunda open source ecosystem
 
Crea il tuo assistente AI con lo Stregatto (open source python framework)
Crea il tuo assistente AI con lo Stregatto (open source python framework)Crea il tuo assistente AI con lo Stregatto (open source python framework)
Crea il tuo assistente AI con lo Stregatto (open source python framework)
 
Anypoint Code Builder , Google Pub sub connector and MuleSoft RPA
Anypoint Code Builder , Google Pub sub connector and MuleSoft RPAAnypoint Code Builder , Google Pub sub connector and MuleSoft RPA
Anypoint Code Builder , Google Pub sub connector and MuleSoft RPA
 
How Accurate are Carbon Emissions Projections?
How Accurate are Carbon Emissions Projections?How Accurate are Carbon Emissions Projections?
How Accurate are Carbon Emissions Projections?
 
COMPUTER 10 Lesson 8 - Building a Website
COMPUTER 10 Lesson 8 - Building a WebsiteCOMPUTER 10 Lesson 8 - Building a Website
COMPUTER 10 Lesson 8 - Building a Website
 
99.99% of Your Traces Are (Probably) Trash (SRECon NA 2024).pdf
99.99% of Your Traces  Are (Probably) Trash (SRECon NA 2024).pdf99.99% of Your Traces  Are (Probably) Trash (SRECon NA 2024).pdf
99.99% of Your Traces Are (Probably) Trash (SRECon NA 2024).pdf
 

How We Do UX Design at iStrategyLabs

  • 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.
  • 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.
  • 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)
  • 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
  • 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)