TC UX Tools and Technologies

TC UX MEETUP – Tools & Technologies | #TCUXMeetup | www.meetup.com/TC-UX-Meetup/
TC UX MEETUP
UX TOOLS & TECHNOLOGIES

ABOUT US
Margaret Bossen
User Experience Strategist,
Architect, and Designer
RBA Consulting
Miriam Block
Director of
User Experience Planning
McCann WorldGroup

What do UX and
UI people do?

We Make Technology
EASIER AND
MORE ENJOYABLE
for People to Use

HOW?

USER
CENTERED
DESIGN

What is User-Centered Design (UCD)?
A philosophy that places the
people who will be using what
we are creating at the center of
attention throughout the project
A process that actively seeks
out and accounts for users’
cognitive, emotional &
behavioral factors

What do we DO?

UX: User Experience
Architects
• Evaluate the current state
• Conduct user research
• Develop a UX strategy/vision
• Design the interactions between
a person and a machine

UI: Visual
Designers
• Establish the creative vision
• Breathe life into the user
interface through the use of
color, type, space, image &
interactions.
• Define the style guide

UX Research Techniques
Competitive
Audit
UX
Analysis
Competitive
Analysis
Brand
Review
Stakeholder
Interviews
UX Audit
Feature
Benchmarking
EVALUATION
Assess current state and the
competitive landscape

Web Metrics
Review
UX Research Techniques
Contextual
Interviews
Focus
Groups
Surveys
Task Analysis
Tree Testing
User
Interviews
Persona
Workshop
Card
Sorting
Usability
Testing
USER RESEARCH
Observe our audiences and
validate our decisions

INSPIRATION
Challenge ourselves.
Expand “possible”
UX/UI Research Techniques
Creative
Workshop
Digital
Landscape &
Pattern
Review
Competitive
Audit
Outside
Inspiration

UX Activities
Tools & Techniques
• Personas, customer journey workshops, persona workshops, future
scenario brainstorms, competitive UX benchmarks, visualization
techniques such as storyboards and wireframes, UX testing
Deliverables
• Site maps, user flows, journey maps, personas, project roadmaps, user
research results, mockups, wireframes, low-fi/hi-fi prototypes, design
patterns and components, content models, UX specifications

What tools do you use?

Survey says…
How do you rate yourself on these tools?

UX/DESIGN
RESEARCH
Gain Insight
Validate decisions
EXPERIENCE
STRATEGY
Define audiences
Articulate approach
INTERACTION
DESIGN
Create structures
Shape behaviors
VISUAL
DESIGN
Engage audiences
Elevate brands

ToolsUX/DESIGN
RESEARCH
Gain Insight
Validate decisions
• Optimal Workshop
• Survey Monkey
• UserTesting.com
• Silverback

UX/DESIGN
RESEARCH
Gain Insight
Validate decisions
User Research Suite
OptimalSort
• Use this to perform
card sort exercises
TreeJack
• Test information architecture,
labeling and design of a
website or intranet
Chalkmark
• Run “first-click” tests on
wireframes and prototypes to
identify usability issues
Questions
• Survey Tool
Pros
One of the most popular sets of tools for
UX research
Online and tech support is wonderful!
(Even though they are based in New
Zealand)
Cons
To do any real in-depth work, you will
need to upgrade to the paid version
Some of the analysis tools have a fairly
steep learning curve

Card Sorting

Simple User Surveys
• The best-known online survey tool for doing user or
market research.
UX/DESIGN
RESEARCH
Gain Insight
Validate decisions
Pros
Much love for this tool in the UX
community
Survey Monkey has a lot of power, even in
the free version
Clear and understandable user interface
makes it easy to build surveys and easy
for users to engage
Pre-scripted surveys and question sets
can get a project jump-started
Cons
Customers sometimes have a hard
time taking the name “Survey Monkey”
seriously
Paid version required to do in-depth
analysis
Some limitations to customization and
logic for more advanced surveys
Starts to get costly when adding “white-
label” options

Online User Testing Service
• Excellent tool for doing fast, focused user
testing on digital projects
• Many methods to choose from
UX/DESIGN
RESEARCH
Gain Insight
Validate decisions
Pros
Logistics of testing set-up are handled by
the service
Cost is known up front
Testing process can be quickly initiated
and executed
Lower time commitment than in-person
user testing
Captures user’s device actions and their
voice and face.
Can do studies on competitors.
Cons
You may miss out on valuable details
that are caught during in-person testing
Requires planning to configure the tests
Paradox of choice can be
overwhelming
Quality control of responses can vary

EXPERIENCE
STRATEGY
Define audiences
Articulate approach
Tools
• Optimal Workshop
• Optimal Sort, TreeJack, Chalkmark, Questions,
• Xmind
• Site mapping tool
• Guerrilla Research (email, social media, excel)
• Oracle Maxymiser

User Research Suite
OptimalSort
• Use this to perform
card sort exercises
TreeJack
• Test information architecture,
labeling and design of a
website or intranet
Chalkmark
• Run “first-click” tests on
wireframes and prototypes to
identify usability issues
Questions
• Survey Tool
Pros
One of the most popular sets of tools for
UX research
Online and tech support is wonderful!
(Even thought they are based in New
Zealand)
Cons
To do any real in-depth work, you will
need to upgrade to the paid version
Some of the analysis tools have a fairly
EXPERIENCE
STRATEGY
Define audiences
Articulate approach

Mind Mapping Tool
• Create immediate, on-the-spot site maps
• Brainstorm new ways to connect pieces of
content, site elements, or user journeys
• Illustrate relationships between complex
ideas/events
Pros
Good features for both UX/UI and
developers
Easy installation
Inexpensive
Cons
Menus are not super intuitive
Can be slow to load/refresh
Interface can be jarring if you are doing
live, in-workshop mind mapping
EXPERIENCE
STRATEGY
Define audiences
Articulate approach

Guerrilla Research (In-person, Email, etc.)
Try more casual methods to run simple UX and
UI tests
• Email: Use email to send out questions to family,
friends or colleagues
• Social media: can be used to great effect to explore
prototypes, get opinions, or ask questions
• In-Person: “Man-on-the-street” interviews, Friends
and family user testing, in-office prototype reviews,
etc.
EXPERIENCE
STRATEGY
Define audiences
Articulate approach

INTERACTION
DESIGN
Create structures
Shape behaviors
Tools
• Omnigraffle
• Axure
• UXPin
• Visio
• Protoshare
• Balsamiq
• UXPin
• Mockingbird

Wireframes, systems, content/site trees & sitemaps
• Create immediate, on-the-spot site maps
• Brainstorm new ways to connect pieces of content, site
elements, or user journeys
• Illustrate relationships between complex ideas/events
Omnigraffle
(www.omnigroup.com/omnigraffle)INTERACTION
DESIGN
Create structures
Shape behaviors Pros
Built for creating UX documents--site
maps, flows, wireframes.
Easy to build a template that teams can
share for consistency.
Many free downloadable stencils
specifically creating UX documents.
Available on iOS to sketch from your
iPhone or iPad
Can import Visio documents
Cons
Mac platform only, (although this feels
like a pro).
Challenging to create interactive, hi-fi
prototypes.
A few options take a while to decipher.

All-in-one prototyping program
• Post prototypes in a secure website
• Illustrate relationships between complex ideas/events
• Highly interactive – ability to create complex interfaces
and logic-driven experiences
Pros
Drag & drop interface provides for quick
and easy designing
Online libraries of icons, widgets,
templates
Include interactions for hi-fidelity,
functioning prototypes
Export prototypes as images, word docs,
or PDFs making it easy to present and
share with stakeholders or others
Cons
Best for prototyping. Using tools like
OmniGraffle first to define flow, sitemap and
base wireframes is often necessary.
Dynamic panels can be complex, and may be a
Editing shapes can be difficult, often requiring
external libraries of shapes or images
Collaboration with others on the same project is
only available from a professional account
Needs more CSS options
INTERACTION
DESIGN
Create structures
Shape behaviors
Axure RP (www.axure.com)

UXPin (www.uxpin.com)
Intuitive prototyping tool
• Related sketchbooks/notepads for manual prototyping
• Embedded image editing
Pros
Enables a smooth transition between
paper and web prototyping.
Big library of ready-made components
including bootstrap elements.
Team collaboration is fairly straightforward
Images can be edited within UXPin:
correct brightness, contrast, sharpness
and transparency, etc.
Export prototypes can be exported to PDF,
html or PNG
Cons
Similar to Axure but not as many
features
Users remark on some instability with
this tool
Some confusion about length of free
trial
INTERACTION
DESIGN
Create structures
Shape behaviors

Visio (from Microsoft)
Diagramming and wireframing software
• Sitemaps, User Flows
• Software diagrams
• Wireframes
Pros
Is often readily available in large corporate
or enterprise environments
Many developers, BAs, and other team
members may be Visio users
Cons
No Mac version
Visio is very expensive compared to
other wireframing and prototyping tools
INTERACTION
DESIGN
Create structures
Shape behaviors

Protoshare (www.protoshare.com)
Online prototyping tool for wireframes, sitemaps,
and interactive prototypes
• Collaborative wireframing and prototyping
• Technical foundation – allows deep customization
Pros
Sitemap panel allows easy method to
move pages around in the hierarchy
Templates allow streamlined start to
wireframe creation
Offers tools for increased wireframe fidelity
for the more technically capable – A strong
CSS/HTML platform, cutom CSS
capabilities, etc.
Cons
Javascript engine makes page resizes
and refreshes slow
Export and sharing are not as
straightforward as other online tools
No option to output to PDF or other
more shareable formats
Requires log-in to share prototypes (no
public URL)
INTERACTION
DESIGN
Create structures
Shape behaviors

Balsamiq (www.balsamiq.com)
Rapid prototyping tool
• Online tool for low-fidelity prototypes
Pros
Mockups created in Balsamiq are “low
fidelity”, similar to freehand sketches
Over 500 icons built in to the app
Many basic ready-made items stored in
the UI libraries
Cons
Basic interactions only
Intentionally low-fi look and feel
More challenging to get to truly
interactive hi-fi prototypes
INTERACTION
DESIGN
Create structures
Shape behaviors

VISUAL
DESIGN
Engage audiences
Elevate brands
Tools
• Adobe Creative Suite
• Photoshop, Illustrator
• InVision
• Sketch
• Adobe Experience Design
• XD – Experience Design
• Axure & OmniGraffle
• Mockingbird

Adobe Creative Suite (www.adobe.com)
VISUAL
DESIGN
Engage audiences
Elevate brands
Pros
I do not know of a single serious UI effort
that does not use one or more of these
tools
Cons
Can be expensive
Steep learning curve for many of these
tools
All the things!
• Adobe’s fundamental apps for photography, design
& illustration, video, and web & mobile workflows

InVision (www.invisionapp.com)
Simple, design-driven prototyping tool
• Very user-friendly, fast prototyping tool with best in
class on-device app preview. Great for client review.
• Deep links with Sketch and Slack
• Enterprise edition allows code inspect and direct asset
download
VISUAL
DESIGN
Engage audiences
Elevate brands Pros
Very intuitive and simple prototyping tool.
Upload projects in psd or png format and
add hotspots
Clickable, interactive prototypes with
gestures, transitions and animations.
Allows team collaboration and comments
on work progress.
Boards feature for shareable mood boards
Cons
Limited interactions, although more are
added on a regular basis
Motion design tool has been promised
for over a year

Sketch (www.sketchapp.com)
New industry standard digital design software
• User friendly, powerful, lightweight and affordable
• Multiple pages, artboards, CSS shared styles
• Highly customizable export for all assets, including
quality CSS styles
• Cloud based asset and style libraries for team syncing.
VISUAL
DESIGN
Engage audiences
Elevate brands Pros
Use of Symbols, Shared Styles and live
data feeds make app/site design updates
a snap
Files are a fraction the size of PSD and
pixel perfect
Open framework for community developed
external plugins
$99 for outright purchase, deep integration
with Invision.
Cons
Limited image editing
Mac only (or pro?)

Adobe Experience Design
All-in-one tool for UX designers from Adobe
• Design and prototype websites and mobile apps
• Elegant interface
VISUAL
DESIGN
Engage audiences
Elevate brands
Pros
Elegant, minimal interface
Design, and create interactive prototypes
of websites and mobile apps.
Switching between design and prototype is
super smooth.
Copy/paste elements from other Adobe
programs, such as Illustrator and edit them
directly in XD.
Cons
Mac platform only
Sketch is rapidly overtaking this tool as
go-to choice for UX

Other Tools
• Collaboration Tools
• Google Docs for collaborating on spreadsheets (content outlines,
consolidating user research) and slide shows (user research, pattern
libraries)
• Basecamp
• GoToMeeting
• JoinMe
• Concept InBox
• Storyboard That

THANK YOU!

TC UX Tools and Technologies

Related slideshows

More Related Content

TC UX Tools and Technologies

Editor's Notes