Visualize Fast Philosophy: How to Create Virtual UX Concepts
Building a software product is a back-and-forth process of ideating, validating ideas, getting feedback, adjusting the product, and then trying something else. Visualization of ideas is the key step in this cycle. Eighty five percent of people perceive information better when it is visualized. Seeing is believing. Prototypes of the user interface (UI) and user experience (UX) are the easiest way to get an idea across to the stakeholders. Prototypes help to quickly align the vision of the product within the team, present it to investors and validate the idea with users.
In fact, UI/UX prototypes often carry a more important meaning: they talk back, maybe even surprise the team, and show opportunities that remained hidden before the idea was visualized.
Whenever the visualization stage is omitted, and the application is designed as stakeholders think fit, real users often lack the functionality they expected and/or find the design counter-intuitive. Do not fall into this trap. Turn your ideas into visual forms. This does not require coding, but saves time and money!
How to Visualize Ideas Step by Step
Well-versed user experience and product designers know numerous techniques to turn a set of vague ideas into a semi-tangible visual medium: sketches, wireframes, mood boards, visual mockups, storyboards, and even appliques. By and large, these techniques follow the almighty design thinking approach, which can broadly be captured by the following phases:
- Research and investigation (ideally, with both stakeholders and users involved)
- Ideation thinking, aligning ideas with a little bit of prototyping
- Designing a visual artifact
- Evaluation, user research, collecting feedback
Online Workshops for Ideation and Prototyping
Traditionally, most of the UX prototyping techniques work well when the whole team gathers in a single room — offline. This, however, is hardly possible in the «new normal» realities of the pandemic. At DataArt, we shifted these techniques online even before it was mainstream! In each of our 20 global offices, DataArt experts have been working in distributed teams and adjusting the on-site offline techniques to online reality for years.
DataArt UI/UX experts offer UX and product design consulting. We will help you conduct an effective UX prototyping workshop based on the type and complexity of your potential application, time-frame, and on the number of stakeholders.
Contact DataArt Design Studio Now!Let’s talk!
Here are a few techniques for online workshops on ideation, idea visualization and UI/UX prototyping. These workshops will help stakeholders and designers synchronize their visions on the future product. Generally, workshops help to
- quickly onboard the team and share specific knowledge
- create a shared vision of the product or process
- identify the product’s consumers and their needs
- generate a lot of ideas
- review constraints and opportunities, including technical and marketing, as well as time limitations.
Design Thinking Workshop
What: The workshop is conducted to generate ideas about the future application within a one-day working session.
How: During the workshop, the team gathers in a virtual conference room to brainstorm on the mission and functionality of a potential product, following these steps:
- Emphasize — the team researches the needs that the future product should meet
- Define — the team decides what they want users to do with the future product
- Ideate — the team brainstorms how the product will be used
- Prototype — the designers quickly turn ideas into some tangible form using whatever they have at hand, most commonly paper and pencil
- Test — if real users join the session, the prototype is quickly tested on them.
A Design Thinking workshop can be broken down into several sessions, with short breaks in between. By day’s end, the team usually has a jumping-off UX prototype.
When: This technique proves efficient for prototyping a simple software product, like a food delivery service or a social networking platform, which does not necessarily require a deep dive into the domain specifics and terminology. Design Thinking workshops are great during hackathons, where teams typically create a simple application within a limited time-frame.
Deliverables: A user persona, with documented user flows, customer journey, and empathy maps on a «sticky notes» wall. Paper sketches (use the dotted templates to save time!), or prototypes in a fast prototyping tool, like Balsamiq.
Jobs to Be Done Workshop
What: During the workshop, the team focuses on user needs and expectations on different levels of interaction with the software product — what job is the user trying to get done? — then prototypes the functionality needed to satisfy these uses.
How: During a JTBD workshop, the team telecommutes and brainstorms every possible interaction use case, following this pattern:
When (situation) → The user wants (motivation) → So that he/she can (outcome).
Ideally, these use cases should be based on user research, not just the team’s gut feeling. All ideas are arranged into these three columns using an online collaborative tool, like Google Docs or Microsoft Teams. The app UX is then designed to cover all use cases in the most convenient way.
For instance, when brainstorming a food delivery application, the team may imagine the users’ needs this way:
When the user is hungry, he/she wants to quickly order some food, so that he/she can proceed with the work without interruption.
When the user orders food, he/she wants to know the nutrition facts about it, so that he/she can balance the diet.
When: JTBD is an efficient technique when designing a prototype for an enterprise system, where users with different roles collaborate on a single platform, like a corporate budgeting system, or a hedge funds’ monitoring solution. During this workshop, the team can easily uncover the most crucial use cases, group them into clusters, and prioritize features.
Deliverables: A spreadsheet with documented and prioritized user goals and flows. We determine which features in what order are included in the wireframes.
Customer Journey Mapping Workshop
What: During the workshop, the team creates a visual representation of users’ interaction with the system — a journey map. The framework combines storytelling and visualization on different stages of users’ interaction with the product.
How: This technique is most commonly used for improving live software applications, based on the previously collected analytics. If the team already has some background knowledge on how a user interacts with the system, they can analyze it, create a virtual path followed by the user, and prototype the desired UX. The team gathers in an online conference room and presents the user’s actions on a timeline and hypothesizes which emotions (positive and negative) he/she felt when interacting with it. The goal is to figure out when and why negative emotions appeared, why a user might have bounced, and how the application can be improved for real users. Finally, the insights are visualized to improve UI and UX.
Here is a hypothetical palette of emotions a user of the food delivery service experienced: he/she felt nothing as he/she saw a Facebook ad of the service; then got hungry and felt annoyed when trying to find the service in Google; then got excited as he/she found it and looked through «today’s hot deals» banner; and finally felt relieved as he/she ordered the food in just a couple of mouse-clicks.
When: This technique works well for both customer-facing applications, such as booking websites, medical scheduling apps, and systems used in-house, such as CRM or ERP tools, which should offer unrivaled UI and UX to bring maximal efficiency and convenience.
Deliverables: CJM is done in a document, which further serves as a roadmap for improvements in both UI/UX design and app functionality.
Service Blueprint Workshop
What: During the workshop, the team visualizes a customer’s journey, creating a prototype that counts all internal and external interactions to improve the UX both directly and indirectly.
How: Ideally, before the team applies the Service Blueprint technique, they already have the customer journey maps. Now the team’s task is to add all possible, omnichannel user-application touchpoints, divide them into swimlanes, and prototype the «full picture» of the system. This includes not just in-app interactions, but also the ones that occur before, after, in-between, and around them.
Continuing with the food delivery service example, the Service Blueprint technique allows to improve both the direct in-app UX (how easy it is to order the delivery of the desired dishes) and indirect functionality behind the scenes for the customer: delivery service, supply chain management, money transfer and so on.
When: We recommend this workshop for consumer-facing products or services, and for apps with many subparts of the service and different stakeholders. A sole visual representation of a service blueprint gives the «whole picture» of the product to several sub-product owners. Besides, a Service Blueprint workshop uncovers new user groups that could have remained neglected or blocked by the functionality.
Deliverables: Service Blueprint is presented in a chart, with multiple swimlanes and highlighted points that need attention, which serves as a roadmap for improvements in both UI/UX design and in app functionality.
Master Visualize Fast Philosophy
Numerous online tools proved helpful for online workshops. Some of them include:
To learn more about UI/UX prototyping workshops, the tools for creating clickable prototypes and wireframes of different fidelity, and validating your ideas with real users for faster time to market, watch the webinar, «Best Tools, Tips, & Tricks for Fast (Virtual) Creation of UX Concepts» by DataArt experts in UI/UX design, Anastasia Rezhepp and Dmitry Kozitsky.