SlideShare a Scribd company logo
Before Code
How to Plan and Visualize your Project
University of Illinois Web Conference • April 29, 2014
Cate Kompare
@CateKompare
!
Melinda Miller
@melindamiller
Cate Kompare
@CateKompare
Melinda Miller
@melindamiller
UX!
UX?
UX
“UX isn’t something you
implement, it’s an ethos.”
— Aarron Walter, Director of UX at Mailchimp
Our Perspective
Today’s Agenda
1. Introducing Techniques
2. When you should use them
3. How you can involve your team
Resource Link: http://goo.gl/y2t2Mb
Team
• Users
• Stakeholders
• Project Managers
• Content Strategists
• Writers
• Information Architects
• Interaction Designers
• Visual Designers
• Usability Testers
• Developers
• QA Testers
• System Administrators
• Wireframers
… or Team
• Users
• Stakeholders
• You!
What would
Bernini do?
What would
Bernini do?
1Research1Analyze1Design
1Research
Organizational Research
1 Research
1 Research 1 Organizational Research
1 Research 1 Organizational Research
User Research
1 Research
1 Research 1 User Research
1 Research 1 User Research
Competitive Review
1 Research
1 Research 1 Competitive Review
1 Research 1 Competitive Review
Content Inventory
1 Research
1 Research 1 Content Inventory
1 Research 1 Content Inventory
1 Research 1 Content Inventory
1Research 1 Content Inventory
1Research 1 Content Inventory
1Analyze
Flow Diagrams
1 Analyze
1 Analyze 1 Flow Diagrams
1 Analyze 1 Flow Diagrams
(Either/Or)
1 Analyze 1 Flow Diagrams
User Stories
1 Analyze
1 Analyze 1 User Stories
“As a [insert role], 

I want to [insert task], 

so that I [insert driving
force].”
1 Analyze 1 User Stories
“As a speaker at the U of I Web Con,
I want to give an informative talk,
so that the organizers don’t regret
letting me do this.”
1 Analyze 1 User Stories
Personas
1 Analyze
1 Analyze 1 Personas
1 Analyze 1 Personas
1 Analyze 1 Personas
1 Analyze 1 Personas
Name
Persona type
Age
Technical comfort
Job Title
Back story
Their ideal experience
Feel free to doodle!
Persona Template
Quote
“
_”
Tell us a bit about their lives
What concerns do they have? Why do they need this website/service? How have they found or heard about the website?
What’s stopping them from choosing the service/website or annoying them?
Their story including features and content which will help them have a great
experience
Sum up their experience with the
1Design
Sketchboard
1 Design
1 Design 1 Sketchboard
1 Design 1 Sketchboard
1 Design 1 Sketchboard
Sketching
1 Design
1 Design 1 Sketching
1 Design 1 Sketching
1 Design 1 Sketching
Card Sorting
1 Design
1 Design 1 Card Sorting
1 Design 1 Card Sorting
1 Design 1 Card Sorting
Wireframe
1 Design
1 Design 1 Wireframe
1 Design 1 Wireframe
1 Design1 Wireframe
1 Design 1 Wireframe
Page Tables
1 Design
1 Design 1 Page Tables
Page Title
1 Design 1 Page Tables
1 Design 1 Page Tables
1 Design 1 Page Tables
Usability Testing
1 Design
1 Design 1 Usability Testing
1 Design 1 Usability Testing
So now you’re ready
to code!
Right?
Maybe not quite yet…
1. Introducing Techniques
2. When you should use them
3. How you can involve your team
Keep on learning and connecting
• UX Champaign-Urbana
‣ UX Book Club
‣ Content CU
‣ IxDA
• CUDO
Resource Link: http://goo.gl/y2t2Mb
What would
Bernini do?
@MelindaMiller 1 @CateKompare
@UXBookClub 1 @ContentCU
@PixoTech
Thanks!
Resource Link: http://goo.gl/y2t2Mb
UX Cards: http://goo.gl/IoSnNi

More Related Content

Similar to Before Code: How to Plan & Visualize Your Project

Think you know your user? Think Again (Agile 2013)
Think you know your user? Think Again (Agile 2013)Think you know your user? Think Again (Agile 2013)
Think you know your user? Think Again (Agile 2013)
Ariadna Font Llitjos
 
User Experience Design: an Overview
User Experience Design: an OverviewUser Experience Design: an Overview
User Experience Design: an Overview
Julie Grundy
 
UX Superpowers
UX SuperpowersUX Superpowers
UX Superpowers
Cara Nelson
 
Introduction to User Experience Design 2/15/20
Introduction to User Experience Design 2/15/20Introduction to User Experience Design 2/15/20
Introduction to User Experience Design 2/15/20
Robert Stribley
 
Prototyping for web and mobile workshop
Prototyping for web and mobile workshopPrototyping for web and mobile workshop
Prototyping for web and mobile workshopSimon Phillips
 
Writing for the Web
Writing for the WebWriting for the Web
Writing for the Web
Northwoods Software, Inc.
 
Usability Workshop, 11-8-2012
Usability Workshop, 11-8-2012Usability Workshop, 11-8-2012
Usability Workshop, 11-8-2012
Samantha Bailey
 
User Experience from a Business Perspective
User Experience from a Business PerspectiveUser Experience from a Business Perspective
User Experience from a Business Perspective
Danny Mittleman
 
Introduction to Information Architecture & Design - SVA Workshop 06/21/14
Introduction to Information Architecture & Design - SVA Workshop 06/21/14Introduction to Information Architecture & Design - SVA Workshop 06/21/14
Introduction to Information Architecture & Design - SVA Workshop 06/21/14
Robert Stribley
 
UXPA 2023: UX Fracking: Using Mixed Methods to Extract Hidden Insights
UXPA 2023: UX Fracking: Using Mixed Methods to Extract Hidden InsightsUXPA 2023: UX Fracking: Using Mixed Methods to Extract Hidden Insights
UXPA 2023: UX Fracking: Using Mixed Methods to Extract Hidden Insights
UXPA International
 
The UX Toolbelt for Developers
The UX Toolbelt for DevelopersThe UX Toolbelt for Developers
The UX Toolbelt for Developers
Sarah Dutkiewicz
 
Conversion Day 2015 - Usability Best Practices - Johan Verhaegen
Conversion Day 2015 - Usability Best Practices - Johan VerhaegenConversion Day 2015 - Usability Best Practices - Johan Verhaegen
Conversion Day 2015 - Usability Best Practices - Johan Verhaegen
Human Interface Group
 
UX in the Age of AI: Leading with Design UXPA2018
UX in the Age of AI: Leading with Design UXPA2018UX in the Age of AI: Leading with Design UXPA2018
UX in the Age of AI: Leading with Design UXPA2018
Carol Smith
 
UX in the Age of AI: Leading with Design
UX in the Age of AI: Leading with DesignUX in the Age of AI: Leading with Design
UX in the Age of AI: Leading with Design
UXPA International
 
User Experience (UX) Love & Delight
User Experience (UX) Love & DelightUser Experience (UX) Love & Delight
User Experience (UX) Love & Delight
Benny Jones
 
UI UX DESIGN.pptx
UI UX DESIGN.pptxUI UX DESIGN.pptx
UI UX DESIGN.pptx
RiniyaMary
 
UX & Design Thinking for BI Applications
UX & Design Thinking for BI ApplicationsUX & Design Thinking for BI Applications
UX & Design Thinking for BI Applications
ibi
 
COMP 4026 - Lecture 1
COMP 4026 - Lecture 1COMP 4026 - Lecture 1
COMP 4026 - Lecture 1
Mark Billinghurst
 
The elements of product success for designers and developers
The elements of product success for designers and developersThe elements of product success for designers and developers
The elements of product success for designers and developers
Nick Myers
 
Introduction to Information Architecture & Design - 2/14/15
Introduction to Information Architecture & Design - 2/14/15Introduction to Information Architecture & Design - 2/14/15
Introduction to Information Architecture & Design - 2/14/15
Robert Stribley
 

Similar to Before Code: How to Plan & Visualize Your Project (20)

Think you know your user? Think Again (Agile 2013)
Think you know your user? Think Again (Agile 2013)Think you know your user? Think Again (Agile 2013)
Think you know your user? Think Again (Agile 2013)
 
User Experience Design: an Overview
User Experience Design: an OverviewUser Experience Design: an Overview
User Experience Design: an Overview
 
UX Superpowers
UX SuperpowersUX Superpowers
UX Superpowers
 
Introduction to User Experience Design 2/15/20
Introduction to User Experience Design 2/15/20Introduction to User Experience Design 2/15/20
Introduction to User Experience Design 2/15/20
 
Prototyping for web and mobile workshop
Prototyping for web and mobile workshopPrototyping for web and mobile workshop
Prototyping for web and mobile workshop
 
Writing for the Web
Writing for the WebWriting for the Web
Writing for the Web
 
Usability Workshop, 11-8-2012
Usability Workshop, 11-8-2012Usability Workshop, 11-8-2012
Usability Workshop, 11-8-2012
 
User Experience from a Business Perspective
User Experience from a Business PerspectiveUser Experience from a Business Perspective
User Experience from a Business Perspective
 
Introduction to Information Architecture & Design - SVA Workshop 06/21/14
Introduction to Information Architecture & Design - SVA Workshop 06/21/14Introduction to Information Architecture & Design - SVA Workshop 06/21/14
Introduction to Information Architecture & Design - SVA Workshop 06/21/14
 
UXPA 2023: UX Fracking: Using Mixed Methods to Extract Hidden Insights
UXPA 2023: UX Fracking: Using Mixed Methods to Extract Hidden InsightsUXPA 2023: UX Fracking: Using Mixed Methods to Extract Hidden Insights
UXPA 2023: UX Fracking: Using Mixed Methods to Extract Hidden Insights
 
The UX Toolbelt for Developers
The UX Toolbelt for DevelopersThe UX Toolbelt for Developers
The UX Toolbelt for Developers
 
Conversion Day 2015 - Usability Best Practices - Johan Verhaegen
Conversion Day 2015 - Usability Best Practices - Johan VerhaegenConversion Day 2015 - Usability Best Practices - Johan Verhaegen
Conversion Day 2015 - Usability Best Practices - Johan Verhaegen
 
UX in the Age of AI: Leading with Design UXPA2018
UX in the Age of AI: Leading with Design UXPA2018UX in the Age of AI: Leading with Design UXPA2018
UX in the Age of AI: Leading with Design UXPA2018
 
UX in the Age of AI: Leading with Design
UX in the Age of AI: Leading with DesignUX in the Age of AI: Leading with Design
UX in the Age of AI: Leading with Design
 
User Experience (UX) Love & Delight
User Experience (UX) Love & DelightUser Experience (UX) Love & Delight
User Experience (UX) Love & Delight
 
UI UX DESIGN.pptx
UI UX DESIGN.pptxUI UX DESIGN.pptx
UI UX DESIGN.pptx
 
UX & Design Thinking for BI Applications
UX & Design Thinking for BI ApplicationsUX & Design Thinking for BI Applications
UX & Design Thinking for BI Applications
 
COMP 4026 - Lecture 1
COMP 4026 - Lecture 1COMP 4026 - Lecture 1
COMP 4026 - Lecture 1
 
The elements of product success for designers and developers
The elements of product success for designers and developersThe elements of product success for designers and developers
The elements of product success for designers and developers
 
Introduction to Information Architecture & Design - 2/14/15
Introduction to Information Architecture & Design - 2/14/15Introduction to Information Architecture & Design - 2/14/15
Introduction to Information Architecture & Design - 2/14/15
 

Recently uploaded

Visitor Management System in India- Vizman.app
Visitor Management System in India- Vizman.appVisitor Management System in India- Vizman.app
Visitor Management System in India- Vizman.app
NaapbooksPrivateLimi
 
Dominate Social Media with TubeTrivia AI’s Addictive Quiz Videos.pdf
Dominate Social Media with TubeTrivia AI’s Addictive Quiz Videos.pdfDominate Social Media with TubeTrivia AI’s Addictive Quiz Videos.pdf
Dominate Social Media with TubeTrivia AI’s Addictive Quiz Videos.pdf
AMB-Review
 
Quarkus Hidden and Forbidden Extensions
Quarkus Hidden and Forbidden ExtensionsQuarkus Hidden and Forbidden Extensions
Quarkus Hidden and Forbidden Extensions
Max Andersen
 
Enhancing Research Orchestration Capabilities at ORNL.pdf
Enhancing Research Orchestration Capabilities at ORNL.pdfEnhancing Research Orchestration Capabilities at ORNL.pdf
Enhancing Research Orchestration Capabilities at ORNL.pdf
Globus
 
OpenFOAM solver for Helmholtz equation, helmholtzFoam / helmholtzBubbleFoam
OpenFOAM solver for Helmholtz equation, helmholtzFoam / helmholtzBubbleFoamOpenFOAM solver for Helmholtz equation, helmholtzFoam / helmholtzBubbleFoam
OpenFOAM solver for Helmholtz equation, helmholtzFoam / helmholtzBubbleFoam
takuyayamamoto1800
 
How Does XfilesPro Ensure Security While Sharing Documents in Salesforce?
How Does XfilesPro Ensure Security While Sharing Documents in Salesforce?How Does XfilesPro Ensure Security While Sharing Documents in Salesforce?
How Does XfilesPro Ensure Security While Sharing Documents in Salesforce?
XfilesPro
 
How Recreation Management Software Can Streamline Your Operations.pptx
How Recreation Management Software Can Streamline Your Operations.pptxHow Recreation Management Software Can Streamline Your Operations.pptx
How Recreation Management Software Can Streamline Your Operations.pptx
wottaspaceseo
 
Multiple Your Crypto Portfolio with the Innovative Features of Advanced Crypt...
Multiple Your Crypto Portfolio with the Innovative Features of Advanced Crypt...Multiple Your Crypto Portfolio with the Innovative Features of Advanced Crypt...
Multiple Your Crypto Portfolio with the Innovative Features of Advanced Crypt...
Hivelance Technology
 
WSO2Con2024 - WSO2's IAM Vision: Identity-Led Digital Transformation
WSO2Con2024 - WSO2's IAM Vision: Identity-Led Digital TransformationWSO2Con2024 - WSO2's IAM Vision: Identity-Led Digital Transformation
WSO2Con2024 - WSO2's IAM Vision: Identity-Led Digital Transformation
WSO2
 
Designing for Privacy in Amazon Web Services
Designing for Privacy in Amazon Web ServicesDesigning for Privacy in Amazon Web Services
Designing for Privacy in Amazon Web Services
KrzysztofKkol1
 
Climate Science Flows: Enabling Petabyte-Scale Climate Analysis with the Eart...
Climate Science Flows: Enabling Petabyte-Scale Climate Analysis with the Eart...Climate Science Flows: Enabling Petabyte-Scale Climate Analysis with the Eart...
Climate Science Flows: Enabling Petabyte-Scale Climate Analysis with the Eart...
Globus
 
Beyond Event Sourcing - Embracing CRUD for Wix Platform - Java.IL
Beyond Event Sourcing - Embracing CRUD for Wix Platform - Java.ILBeyond Event Sourcing - Embracing CRUD for Wix Platform - Java.IL
Beyond Event Sourcing - Embracing CRUD for Wix Platform - Java.IL
Natan Silnitsky
 
Prosigns: Transforming Business with Tailored Technology Solutions
Prosigns: Transforming Business with Tailored Technology SolutionsProsigns: Transforming Business with Tailored Technology Solutions
Prosigns: Transforming Business with Tailored Technology Solutions
Prosigns
 
Globus Compute Introduction - GlobusWorld 2024
Globus Compute Introduction - GlobusWorld 2024Globus Compute Introduction - GlobusWorld 2024
Globus Compute Introduction - GlobusWorld 2024
Globus
 
Globus Connect Server Deep Dive - GlobusWorld 2024
Globus Connect Server Deep Dive - GlobusWorld 2024Globus Connect Server Deep Dive - GlobusWorld 2024
Globus Connect Server Deep Dive - GlobusWorld 2024
Globus
 
First Steps with Globus Compute Multi-User Endpoints
First Steps with Globus Compute Multi-User EndpointsFirst Steps with Globus Compute Multi-User Endpoints
First Steps with Globus Compute Multi-User Endpoints
Globus
 
Field Employee Tracking System| MiTrack App| Best Employee Tracking Solution|...
Field Employee Tracking System| MiTrack App| Best Employee Tracking Solution|...Field Employee Tracking System| MiTrack App| Best Employee Tracking Solution|...
Field Employee Tracking System| MiTrack App| Best Employee Tracking Solution|...
informapgpstrackings
 
Cyaniclab : Software Development Agency Portfolio.pdf
Cyaniclab : Software Development Agency Portfolio.pdfCyaniclab : Software Development Agency Portfolio.pdf
Cyaniclab : Software Development Agency Portfolio.pdf
Cyanic lab
 
Vitthal Shirke Microservices Resume Montevideo
Vitthal Shirke Microservices Resume MontevideoVitthal Shirke Microservices Resume Montevideo
Vitthal Shirke Microservices Resume Montevideo
Vitthal Shirke
 
Corporate Management | Session 3 of 3 | Tendenci AMS
Corporate Management | Session 3 of 3 | Tendenci AMSCorporate Management | Session 3 of 3 | Tendenci AMS
Corporate Management | Session 3 of 3 | Tendenci AMS
Tendenci - The Open Source AMS (Association Management Software)
 

Recently uploaded (20)

Visitor Management System in India- Vizman.app
Visitor Management System in India- Vizman.appVisitor Management System in India- Vizman.app
Visitor Management System in India- Vizman.app
 
Dominate Social Media with TubeTrivia AI’s Addictive Quiz Videos.pdf
Dominate Social Media with TubeTrivia AI’s Addictive Quiz Videos.pdfDominate Social Media with TubeTrivia AI’s Addictive Quiz Videos.pdf
Dominate Social Media with TubeTrivia AI’s Addictive Quiz Videos.pdf
 
Quarkus Hidden and Forbidden Extensions
Quarkus Hidden and Forbidden ExtensionsQuarkus Hidden and Forbidden Extensions
Quarkus Hidden and Forbidden Extensions
 
Enhancing Research Orchestration Capabilities at ORNL.pdf
Enhancing Research Orchestration Capabilities at ORNL.pdfEnhancing Research Orchestration Capabilities at ORNL.pdf
Enhancing Research Orchestration Capabilities at ORNL.pdf
 
OpenFOAM solver for Helmholtz equation, helmholtzFoam / helmholtzBubbleFoam
OpenFOAM solver for Helmholtz equation, helmholtzFoam / helmholtzBubbleFoamOpenFOAM solver for Helmholtz equation, helmholtzFoam / helmholtzBubbleFoam
OpenFOAM solver for Helmholtz equation, helmholtzFoam / helmholtzBubbleFoam
 
How Does XfilesPro Ensure Security While Sharing Documents in Salesforce?
How Does XfilesPro Ensure Security While Sharing Documents in Salesforce?How Does XfilesPro Ensure Security While Sharing Documents in Salesforce?
How Does XfilesPro Ensure Security While Sharing Documents in Salesforce?
 
How Recreation Management Software Can Streamline Your Operations.pptx
How Recreation Management Software Can Streamline Your Operations.pptxHow Recreation Management Software Can Streamline Your Operations.pptx
How Recreation Management Software Can Streamline Your Operations.pptx
 
Multiple Your Crypto Portfolio with the Innovative Features of Advanced Crypt...
Multiple Your Crypto Portfolio with the Innovative Features of Advanced Crypt...Multiple Your Crypto Portfolio with the Innovative Features of Advanced Crypt...
Multiple Your Crypto Portfolio with the Innovative Features of Advanced Crypt...
 
WSO2Con2024 - WSO2's IAM Vision: Identity-Led Digital Transformation
WSO2Con2024 - WSO2's IAM Vision: Identity-Led Digital TransformationWSO2Con2024 - WSO2's IAM Vision: Identity-Led Digital Transformation
WSO2Con2024 - WSO2's IAM Vision: Identity-Led Digital Transformation
 
Designing for Privacy in Amazon Web Services
Designing for Privacy in Amazon Web ServicesDesigning for Privacy in Amazon Web Services
Designing for Privacy in Amazon Web Services
 
Climate Science Flows: Enabling Petabyte-Scale Climate Analysis with the Eart...
Climate Science Flows: Enabling Petabyte-Scale Climate Analysis with the Eart...Climate Science Flows: Enabling Petabyte-Scale Climate Analysis with the Eart...
Climate Science Flows: Enabling Petabyte-Scale Climate Analysis with the Eart...
 
Beyond Event Sourcing - Embracing CRUD for Wix Platform - Java.IL
Beyond Event Sourcing - Embracing CRUD for Wix Platform - Java.ILBeyond Event Sourcing - Embracing CRUD for Wix Platform - Java.IL
Beyond Event Sourcing - Embracing CRUD for Wix Platform - Java.IL
 
Prosigns: Transforming Business with Tailored Technology Solutions
Prosigns: Transforming Business with Tailored Technology SolutionsProsigns: Transforming Business with Tailored Technology Solutions
Prosigns: Transforming Business with Tailored Technology Solutions
 
Globus Compute Introduction - GlobusWorld 2024
Globus Compute Introduction - GlobusWorld 2024Globus Compute Introduction - GlobusWorld 2024
Globus Compute Introduction - GlobusWorld 2024
 
Globus Connect Server Deep Dive - GlobusWorld 2024
Globus Connect Server Deep Dive - GlobusWorld 2024Globus Connect Server Deep Dive - GlobusWorld 2024
Globus Connect Server Deep Dive - GlobusWorld 2024
 
First Steps with Globus Compute Multi-User Endpoints
First Steps with Globus Compute Multi-User EndpointsFirst Steps with Globus Compute Multi-User Endpoints
First Steps with Globus Compute Multi-User Endpoints
 
Field Employee Tracking System| MiTrack App| Best Employee Tracking Solution|...
Field Employee Tracking System| MiTrack App| Best Employee Tracking Solution|...Field Employee Tracking System| MiTrack App| Best Employee Tracking Solution|...
Field Employee Tracking System| MiTrack App| Best Employee Tracking Solution|...
 
Cyaniclab : Software Development Agency Portfolio.pdf
Cyaniclab : Software Development Agency Portfolio.pdfCyaniclab : Software Development Agency Portfolio.pdf
Cyaniclab : Software Development Agency Portfolio.pdf
 
Vitthal Shirke Microservices Resume Montevideo
Vitthal Shirke Microservices Resume MontevideoVitthal Shirke Microservices Resume Montevideo
Vitthal Shirke Microservices Resume Montevideo
 
Corporate Management | Session 3 of 3 | Tendenci AMS
Corporate Management | Session 3 of 3 | Tendenci AMSCorporate Management | Session 3 of 3 | Tendenci AMS
Corporate Management | Session 3 of 3 | Tendenci AMS
 

Before Code: How to Plan & Visualize Your Project