As we mentioned in our previous chapter, the British Design Council created a simple way to describe the design process.
Called the Double Diamond, it consists of four distinct phases:
Each phase calls for different methods and tools.
In the following chapters, we’ll highlight some of the main UX tools you may find most useful in each of the design phases.
At the beginning of any new product design project, UX researchers talk to stakeholders, including board directors, sales and marketing teams, product managers, designers and developers.
They also talk to customers, by asking open-ended questions to gather data about their customers and their market, questions such as:
What problems are customers trying to solve? How do they go about solving them currently? Are there any products that address the problems? How could those products be improved?
At this stage, UX researchers need tools that help them to ask questions. They need help recruiting participants for interviews. They need to schedule and manage interviews. And they need to record video and audio, take notes and upload videos and the other fragments that make up this phase of their research to a repository or storage system.
Before the advent of cheap video conferencing tools, test subjects would be invited to join a focus group or lab study, perhaps at the company’s office or at a custom facility. Researchers would also go out into the field to conduct one-on-one interviews. These interviews are known as moderated interviews, or tests because they are conducted in person.
As the cost of video conferencing technology has fallen, tools have been created that allow interviews to be scheduled and conducted entirely online.
Recruitment tools usually come with their own panel of testers. These panels are designed to allow researchers to search for participants based on standard demographics such as age, education level, marital status, and location. They can also filter users by job title. One of the most important features of these tools is their ability to distill a large audience down to a cohort of targeted test subjects.
Because of their online nature, these remote moderated tests are often more convenient for participants, and for researchers, because they allow more people to be tested, and faster.
A typical recruitment and interview process would look something like this:
UX research gives rise to many different kinds of data, including audio and video recordings from interviews, transcripts of interviews, notes, results from questionnaires and surveys, and feedback from customers from everything from email to social media. In addition, there are the details of the test participants themselves.
Using a dedicated research repository, every type of data, from all kinds of applications, can be imported and collated automatically.
UX research repositories typically feature voice recognition systems that transcribe video and audio files automatically. This makes all of the media files in the repository available as text, which means that they are immediately searchable. Once they are transcribed they can also be translated. So each file in the research repository can be shared with stakeholders in their preferred language.
Some repositories have artificial intelligence systems that can look for key phrases in the transcripts and apply rules to categorize them using pre-defined tags. This, in turn, allows content to be aggregated, and grouped into themes, automatically, to help researchers see new connections and discover new trends.
Repositories allow tags to be added to content fragments and attributes to be applied to participants’ profiles. A combination of these two characteristics means that practically all customer feedback, whether from moderated interviews or bug reports or support tickets, can be absorbed into a repository and tagged automatically.
Multiple tags can be applied to every piece of content. And once a new rule is in place it can be applied to any content that is imported in the future. In other words, automation is applied both backward and forward to keep tagging consistent across all data.
In a similar way, customers can be assigned ‘user properties’. This effectively allows researchers to tag participants, subject to permissions, based on human attributes such as age, value, active or churned, etc.).
Theoretically, a research repository can create a user segment based on multiple layers of user properties. So a search of the repository can be based on multiple tags, across a variety of media types, and applied to a segment that is extremely granular.
During the discovery and define phases, the essential features of the product will start to emerge. With the right design tools those features can be brought to life in a wireframe, a concept design or even a fully-fledged prototype.
Prototype design tools like Figma and Adobe XD were created to allow researchers and designers to model the functionality of almost any product complete with an interactive interface and realistic-looking pages.
Designs often start as simple wireframes. Prospective pages and UI elements are added incrementally. Each element can then be tested using qualitative and quantitative usability tests. As the design prototype evolves, its functionality and look can become very sophisticated and can end up looking and working like the final product.
The Figma proposition is, “turn your static design files into an interactive experience – no coding required.”
Figma is a web-based application that is designed for collaborative working. Being web based, it allows researchers, designers and developers, to work on prototypes simultaneously.
Each design file is stored in the cloud, and a representation of it, essentially a prototype, is shared between co-workers via a web link. Collaborators' comments are added to the prototype, for example, to ask a question about an element or to request a change. When changes are approved, they are carried back to a new version of the design file, along with the comments, so nothing is lost.
Intrinsic version control protects the integrity of any finalized work and allows the team to revert to previously saved versions. Everything is vector-based, so designs are automatically scalable, not only when porting from one platform to another but also during the design process itself, when elements or groups of elements need to be moved or resized.
Figma has its own library of components and associated animations. Designers can also create their own components and code snippets, and add them to the library. They can share this with others in the Figma community, or borrow from other members' shared work.
Figma can also be used with its own integrated whiteboard/design brainstorming tool, Figjam.
Adobe XD is aimed more at designers than researchers, especially those familiar with Adobe products and Creative Cloud. Like Figma, Adobe XD is designed for creating prototypes. According to Adobe, it creates “experiences that look and feel like the real thing.” And it certainly delivers on that promise.
Because of its Adobe heritage, Adobe XD has an enormous number of layout and animation tools that will be instantly familiar to designers the world over. It integrates with other Adobe products as part of Creative Cloud. It is vector based so design elements are resizable and can be scaled to just about any platform. (There is a preview function to show how designs will look on other platforms.)
Its animation feature, called Auto-Animate, incorporates AI to help create animations with the smoothest possible transitions by analyzing the differences between start- and end- states. A feature called Component States allows designers to create interactions on a single component and save them so that they can be applied to other instances.
Adobe says Adobe XD is used for “collaborating through the design process, from ideation and wireframing to developer handoff.”
Being a downloadable app rather than a cloud-based solution, Adobe XD perhaps lends itself to more of a waterfall approach than Figma, where designers do their work before publishing to the wider group for feedback and, eventually, that developer handoff.
Figma puts more emphasis on collaboration throughout the process. As it says on its website: “When a user views a file or prototype, an avatar is added to the toolbar. This allows everyone to see who is currently accessing the file, and where. Click on a person's avatar to see what's happening on their screen in a Figma design or FigJam file. Anyone can take the lead and request that other team members follow them using a screenshare-type facility called spotlight.”
Testing and design feed off each other. Each design change leads to a new round of testing which in turn leads to a new set of designs. In this way, UX researchers, product managers and designers move forward together.
Throughout the process, researchers want to know how potential customers feel about emerging products and their features. This is where usability testing comes in.
Usability tests can be qualitative or quantitative. They can be moderated or unmoderated. In their various ways, they tell the researcher whether the product does something useful, how easy it is to use and how the tester feels about the overall experience.
After the design stage, and final rounds of testing, the product or feature is eventually released. However, there is still a great deal of UX research work to be done. Post-launch is a good time to continue listening to feedback because the product now has real customers interacting with real features.
Many of the UX research tools used in the design evaluation stage remain useful after launch. For example, tree testing and A/B testing allow research teams to continually test new features and refine the product’s UI and design.
Survey tools allow researchers to involve real customers in true intent studies to take ongoing feedback. Using an intercept, true intent studies can be scheduled to run automatically, without a moderator, practically forever.
They represent a cost-efficient way of using tools to set up remote, unmoderated qualitative (and quantitative) research that is ‘always on’.
A true intent study typically has three parts:
As this is an ongoing process, it can produce a great deal of data over time.
In quantitative testing, participants are typically asked to score something rather than describe their feelings about it. Scores are numerical so they can be aggregated and analyzed statistically, whereas qualitative test data has to be analyzed manually.
Frequently, the best approach is a mixture of the two.
For example, in the situation where a customer is abandoning a shopping cart, the question, “Why did you abandon your shopping cart on the delivery page?” is obviously more valuable than “How do you rate our check-out process?”
Click tracking tools also continue to be extremely useful after launch, because they show where users are clicking. Click data for each page is aggregated into a heat map so that a huge quantity of data can be analyzed at a glance.
Click tracking data can be augmented by eye-tracking data that shows where a user was looking before they clicked. However eye-tracking tools require hardware and software components that need to be calibrated for each individual tester.
When putting together a suite of tools rather than adopting an entire solution, you may find you need other platforms or functionality you hadn’t considered before.
Trello is a tool for managing complex projects. Its central premise is that every project can be broken down into manageable chunks, each represented by a card. So, for example, there might be a card for a single interview. Cards subsequently get bundled into groups of related items, called lists. An interview process might be represented by a list containing several interview cards).
Multiple lists make up a board. A board can be used to represent all of the processes that make up a project. So, for example, a UX researcher board might contain lists such as: goals, key documents, interviewees, key quotes, themes, insights, action points and feedback. An assortment of actions can be applied to each card so collaborators can assign tasks, request feedback, display metrics, add notes and schedule activities to a calendar etc.
A dashboard view allows actions to be aggregated from multiple boards in a high-level view so that, for example, overdue tasks from all boards can be viewed in a single screen.
Miro is an infinite interactive whiteboard that has all kinds of uses, including brainstorming, product ideation and hosting any type of meeting where video conferencing, file sharing, connecting shapes and making diagrams are useful. Users can drag and drop images, PDFs, spreadsheets and other documents onto a Miro mood board. Or they can start with a template to perform a multitude of collaborative tasks including running a standup, planning a sprint or carrying out a retrospective. Boards can be shared through integrations with Google Suite, JIRA, Slack and Sketch.
Evernote is a notetaking app. Its USP is that it encompasses every possible medium including video, audio, snippets of websites, mobile photos, recorded mobile conversations and, of course, written notes. All media can be tagged, aggregated and shared via integrations with a handful of generic tools like Slack, Google Drive and MS Teams.
UX researchers tell us some of their favorite UX research tools
Sketch, recommended by Lukas Ondrej:
“My favorite tool at the moment is Sketch. I love how flexible it is from the point when I start transferring my rough sketch to more tangible designs all the way to final high-fidelity screen mockups.”
Axure, recommended by Sanil Patel:
“Axure hands down. I’m able to create fully functioning prototypes with error messages, validation and animation. This creates a more rounded experience when users come across edge cases and I am able to understand unexpected behaviors.”
PowerPoint with PowerMockup, as recommended by Pat D-O
“My favorite UX tool for a very long time is Microsoft PowerPoint with an extension called PowerMockup. It is very fast, it supports many helpful on-hover/on mouse click actions, animations, etc., and PowerMockup gives lots of predefined UI elements for various operating systems as well as a shared library. You can create with it both wireframes and high-fidelity mockups. Also, what’s quite important, you can easily share it with anybody, because PowerPoint is quite a commonly used tool.”
Post-it Plus App, as recommended by Sandra Ng
“My favorite UX tool is the Post-it app! It’s amazing! You can create boards from scratch digitally. Even more amazing is you can take a photo of a physical Post-it board and change it to a digital format, allowing you to move the Post-its around. I recommend everyone check it out – so cool!”