Apidays New York 2024 - Accelerating FinTech Innovation by Vasa Krishnan, Fin...
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.
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)
