Apidays Singapore 2024 - Modernizing Securities Finance by Madhu Subbu
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)