UX Visualization Examples & Tips
** 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:
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.
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.
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.
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.
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.
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.
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.
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 including 3D characters for some time now to bring to life some (often boring) User Journeys for clients.
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.
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.
Persona cards for Shopify Plus customers.
Weebly persona cards show motivations for building a website.
Graphical usage of a persona.
Personas to focus design efforts on primary use cases, challenges and opportunities.
Another visual persona.
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.
Vector based personas for branding digital workplace concept.
Another visually appealing persona template from Fakecrow.
Persona for an owner of a moving company.
.ai persona template not including any fancy crap or stupid infographics, only simple and clear fields.
They created a comprehensive sitemap of Codecademy.com and then divided the sitemap into four groups, each representing a 2-week delivery cycle.
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.
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 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.
User Flow template providing 130 vector elements for creating visual sitemaps.
This “Report a Missing Person” feature was designed as part of designer’s IXD interview process with Google.
An example of a diagram showing all the possible user paths to a planned landing page for a particular campaign.
Sketches & Paper Prototype
Mix of mind maps and sketches together. ,Catriona of InspireUX just shared an interesting approach to organizing your sketches around a central idea.
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.
Usability testing of a webmail system.
Wireframe, interaction & gestures.
Userspots Usability Test Infograpic
Visual is taken from Userfocus Benchmark report.
Video is in Turkish.
SWOT Analysis Template Design for a Non Government Organization
** 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:
Bureau Oberhaeuser is a design studio focused on Information- and Interface Design.
Dedicated to distilling the world’s data, information and knowledge into beautiful, interesting and, above all, useful visualizations, infographics and diagrams.
Wireframes Magazine is an on-line resource about design documentation samples for information architects, interaction designers and user experience professionals.
Showcase and discover the latest work from top online portfolios by creative professionals across industries
Dribbble is show and tell for designers.
An infographic blog authored by Randy Krum that highlights some of the best examples of data visualizations and infographics.