** UX Visualization **
Every UX work needs to be clearly understood by all the stakeholders in a UX project. Thats’ why, instead of writing boring reports, UX visualization helps us make our work stronger & reliable.
** UX Visualization Examples **
Journey Maps, Personas, Infograhics are great examples of UX Visualization. Here are more than 50 UX Visualization Examples:
Journey Map
Macromap
OneStop is a program or service designed to assist international students adapt to their new cultural setting and make their transition to the new country so much easier.
#Ad
Discover amazing UX Alive 2016 Workshops
Rail Europe Experience Map
The experience map was part of an overall initiative for Rail Europe, Inc., a US distributor that offers North American travelers a single place to book rail tickets and passes throughout Europe, instead of going to numerous websites.
Blueprint+ (Service Design Visual)
The academic group over at Hochschule Luzern (Competence Center) in Switzerland have recently explored a visual representation that captures the interaction of various people across multiple services or touch points.
Customer Journey Map Animation
Mapping the customer journey in a highly visual and engaging format brings the experience to life from the perspective of the customer and ensures the customer journey is a talking point for the whole business.
Digital Marketing Journey Map
The chart illustrates how complex a customer journey can be. Managing all these different touch points, over time and across channels, can be a daunting task.
LEGO — Designing the Experience
This is an example of the output after a couple of steps; showing an approach to design a WOW experience for a flight to NYC.
Userspots Journey Map
AAFMAA User Experience
Customer Journey Canvas
Analysis of a service, through the Customer Journey
New Ways of Visualizing the Customer Journey Map
San Fransisco Muni journey map created by capturing key people, actions, emotions, things, and contexts that the storyteller mentioned on post-its, a different color for each category.
Mobile Commerce Design
The first step of the Mobile Commerce Design process should be to analyze how shoppers of a particular brand (and competitor brands) currently use their mobile devices to support each phase of theshopping cycle.
User Journey
Player Journey
User Journeys
User journey including 3D characters for some time now to bring to life some (often boring) User Journeys for clients.
Phone and Internet Service User Journey
Experience Map
An experience map showing the myriad options people have when looking for books and movies. This map is descriptive rather than prescriptive, and is intended to serve as a boundary object to catalyze conversations among designers, users, and stakeholders.
Persona
Mailchimp
Mailchimp UX team talked to dozens of users, acquiring tons of data and identifying motivations, traits, and needs & used this information to create a series of archetypes that serve as a guide when designing.
Shopify
Persona cards for Shopify Plus customers.
Weebly
Weebly persona cards show motivations for building a website.
Userspots Persona
Graphical usage of a persona.
User Personas
Personas to focus design efforts on primary use cases, challenges and opportunities.
User Persona
Another visual persona.
AppliedByDesign
AppliedByDesign team were looking for was something with less ‘fluff’ and more of an analytical basis as their customers are often engineering or technical teams.
Digital Worksplace Persona’s
Vector based personas for branding digital workplace concept.
Persona Template
Another visually appealing persona template from Fakecrow.
Moving Company Owner Persona
Persona for an owner of a moving company.
Freebie — Persona template
.ai persona template not including any fancy crap or stupid infographics, only simple and clear fields.
DIY User Personas
Extensio Persona Creator Tool
Persona
Site Map
YTravel Site Map
Sitemap For Student Guide
For redesigning Student’s Guide designer had to finally visualize everything with a site map. She’s using Product Mockups from Creative Market.
Sitemap
Codeacademy Redesign Sitemap
They created a comprehensive sitemap of Codecademy.com and then divided the sitemap into four groups, each representing a 2-week delivery cycle.
Sitemap Omnigraffle Stencil
User Flows
Apple Watch Flows
Making User Flows Unambiguous
Collecting an internal library of these icons is allowing us to reuse them on every user flow moving forward, saving us time while maintaining a consistent style.
Website Flowchart & Sitemap
Large Canvas Flows
Merging of wireframes with flows. As the above artifact mixes readable screens with flows or user actions, the element of time and narrative begins to emerge. Since the flow diagram is inseparable from the wireframe, it also saves the designer from the extra effort of synchronizing multiple documents.
T-Mobile Mobile Onboarding
T-Mobile needed an onboarding experience to help guide new users through the first few weeks of owning a new device. The experience involves a series of tips and tasks that appear at appropriate intervals to help users set up and evaluate their overall satisfaction with the device.
Mobile UX Flowchart Screens
Product User Flow Testing
Interaction Flow
Work Flow
User Flow
User Flow template providing 130 vector elements for creating visual sitemaps.
EasyOne Website Flowchart Template
Report a Missing a Person Feature Userflow
This “Report a Missing Person” feature was designed as part of designer’s IXD interview process with Google.
User Flows
An example of a diagram showing all the possible user paths to a planned landing page for a particular campaign.
UI Flow Diagram
Sketches & Paper Prototype
Sketch Map
Mix of mind maps and sketches together. ,Catriona of InspireUX just shared an interesting approach to organizing your sketches around a central idea.
“O Folhetim” sketches
Rosenfeld Media The Mobile Frontier
Sketching screen layouts, determining the screen flow, and taking your prototype on a test run with users are a few of the steps involved in creating a paper prototype.
Stop-Frame Paper Prototype Animations
Hanmail Paper Prototype
Usability testing of a webmail system.
Wireframe
Wireframe
Weather Analytics Application
Geolocation Mapping App
Wireframe, interaction & gestures.
Blueprint Wireframe
Thanx Locations wireframes
Usability Test
Userspots Usability Test Infograpic
Test Comments
Usability Test Snapshots
User Test, Explained
Visual is taken from Userfocus Benchmark report.
Sample Usability Test Report
Usability Test Statistics Video
Video is in Turkish.
Product Benchmark
SWOT
SWOT Analysis of an NGO
SWOT Analysis Template Design for a Non Government Organization
Card Sort
Dendograms
Similarity Matrix
Tree Testing
The Pietree: Visualising Tree Test Results
** UX Visualization Tips **
Here are some tips for better visualization:
1.Go Beyond Excel
Excel & Word graphics are easy, but most people does not want to see standart line, bar & pie charts. we have to design new ones and go beyond that charts.
2.Form Follows Data
“Form follows function” is a good design motto for product design. Design just must help to data easily understood by people.
3.Know Your Audience
If C level joins the meeting, you should focus on main topics not details. However if you are presenting to product team, give every detail to the team.
4. Set Expectations
5. Always Have a CTA
Data should say something “DO It”. Everyone loves Call to Actions. Somebody tell us what to do. So you should use CTA’s in your outcomes.
6. Be Inspired
Be Inspired, There are lots of resources you can find inspiration.
** Visualization Resources **
Resources that you can get inspiration for your next work:
Oberhauser
Bureau Oberhaeuser is a design studio focused on Information- and Interface Design.
Information is Beatiful
Dedicated to distilling the world’s data, information and knowledge into beautiful, interesting and, above all, useful visualizations, infographics and diagrams.
Linowski.ca
Wireframes Magazine is an on-line resource about design documentation samples for information architects, interaction designers and user experience professionals.
Behance
Showcase and discover the latest work from top online portfolios by creative professionals across industries
Dribbble
Dribbble is show and tell for designers.
Cool Infographics
An infographic blog authored by Randy Krum that highlights some of the best examples of data visualizations and infographics.
