The Ultimate UX Playbook Guide: Core Elements and Examples

When creating a new product or service, a business should always ensure there is a connection between the user and the business. Every product that is created needs to be developed in line with the pain points of the users as well business goals. A product cannot work without this connection; developers will build a design that is not technically possible or one that does not meet the needs of its target audience.

For this, there needs to be a UX process that acts as your UX strategy playbook. This  playbook will help your design team create better customer experiences, provide clarity on hiring the best talent for the product or service design as well as develop a collaborative customer-focused culture. It is the blend of the best practices, tools and other resources for creating a comprehensive UX strategy for your product.

Not sure how to get started? That’s where PlaybookUX’s expertise comes into play. We’re happy to give you the UX principles and process that would work for all types of businesses. And that’s not it! We’ve also given you the essential takeaways from established UX research playbooks from Adobe, Google and GE so you can make this year, your ‘UX year’.

UX Playbook elements

UX principles

1. Smooth navigation

A good UX process will allow for a clear visual hierarchy of information on the website. At the top of this hierarchy, users should be able to see a primary navigation menu that includes the main sections. If you browse one or more of the sections, you will see secondary menus that eventually lead a user to the bottom of the hierarchy, which is where the content is. As well as making headings stand out from other pieces of text through fonts, designers can also use different colours and buttons to draw a user’s attention.

If you have a product, the primary information can be in bold while other secondary details could be in a lighter colour to still catch the attention of your user.

2. Stick to a standard pattern

Are you developing a new concept for your target audience? Keep your product in line with existing products that your users might have used in the past. For instance, if you are designing an app for Android, it might be best to follow Google’s material design guidelines as this will provide you with a roadmap for your design.

3. Allow your target audience to confirm their actions

If a user has opted to buy a product or change their details on your site, you should allow a pop-up or a separate web page to remind them of their action before they proceed with it. These types of confirmation should only be available for big decisions that users make when using your product or service. It also gives your business a safety net, in terms of complaints, if a user later tries to go back on their actions.

4. Make your target audience feel like they are in control

Any user hates making an irreversible error. Can your product allow them to fix this through a button or app? On the other hand, some users might also want more control over their search. Many users might be happy with a primary search function on your website, but have you ensured that there is an advanced search option available?

UX PROCESS: DISCOVER

Description

Before you start any user experience study, you need to discover insights about your user and your brand. You should be asking questions like:

• What is the target customer’s pain point that you are trying to resolve?
• Why is it your brand that can resolve this issue?

Next, you need to assess whether your brand’s main mission and goals are in line with this UX project:

• Does this project contribute to your organization’s mission and its goals?
• Is this the right time for your organization to be focusing on this project?

Methods

Stakeholder interviews: These are conversations with the key contacts in the client organization funding, selling, or driving the product.

Analytics review: Analyzing web or mobile usage data and making subsequent recommendations.

Competitor analysis: Are you sure that your product features outweigh the benefits of your competitors’ products?  Conducting a UX competitor analysis could help you discover this.

For instance, if you are creating a meditation app, you might discover that no of the other meditation apps focus on allowing the user to create a gratitude journal? If you understand your competitor’s shortcomings, you can find various ways to make your feature more popular with a target audience.

When conducting a UX competitor analysis, you could focus on looking at their customer reviews, their designs or even the loading times for their website. You need to think ‘Can my design do better?’

Tools

• Optimal Workshop: A platform of user research tools that allow card sorting, surveys and tree testing among some other useful quantitative and qualitative tools.
• Tableau: Software allows you to see your data in a visual form.
• Board of Innovation: This is a list of free tools to use when creating or validating a product or service idea.
• WhatRunsWhere: Software that allows you to monitor what your competitors are doing consistently.

UX PROCESS: DEFINE

Description

Having assessed that this user experience matches your business goals and vision as well as being aware of the issues that you need to resolve, you are ready to define your initial ideas/concepts with user research. This stage will lay the groundwork for your entire user experience project. If you ignore doing any user research at this point, your assumptions about your target audience can only remain assumptions. You need to challenge these assumptions by analyzing your business requirements to understand them as well as meet, talk and observe your target customer in their natural environment.

At this stage, you could ask questions like:

• Does my product or service idea solve a need?
• What other pain points does your target audience have? Can your product solve any other pain points?
• What does your product need to do to solve these pain points?

Methods

Moderated interviews: If you want a real person to facilitate any tests with your target audience, choose a moderated study. This feature will allow you to interview participants and ask them questions, either online or in-person, in a real-time environment. The facilitator of this test will guide your users throughout the study, especially if they have any questions during it. If you have an idea or concept, you want to define before moving forward, use a moderated study to get clarity.

Unmoderated interviews: Alternatively, an unmoderated study does not have a guide. Users can complete tasks by recording their screen and their voice to answer any questions in their own time, regardless of their location. Looking for a cheaper and faster way to get UX results? The cost of an unmoderated study is lower than a moderated study, and you can choose to run more tests with a larger variety of participants. So if this is your business need, an unmoderated study is the way to go.

Diary study: If you want to monitor a user’s habits and behaviour over a long period, do a diary study. This type of study could also be combined with a moderated study with your target audience. During a diary study, it is also useful to send reminder emails to participants, just in case they have any issues. Once all logs of a study are complete, have a final session to clear up any confusion about the responses received from your users.

Customer Journey Map: Looking to identify all of the pain points of a customer when purchasing a product or service like yours? Start with a customer journey map.  This exercise can also discover various ways to grow your business and improve a customer’s journey. Start by creating two sets of customer journey maps; one which looks at the target audience’s current experience while the second analyses their future involvement with your product. Use a customer journey map after discovering your target audience with a user persona test with an unmoderated or moderated study. Because we love saving businesses time when using UX, use our customer journey map template.

Empathy Map: Want to know more about what your target audience thinks and feels? Use an empathy map which will require you to divulge more in-depth into what your target user ‘says’ ‘thinks’ ‘does’ and ‘feels’. If you’ve already conducted moderated or unmoderated interviews, think back to the insights gained from those studies. What do they think they need in their day-to-day job role? What did love or hate about your product?

Assumptions Map: Hate releasing a product or service on a hunch? Try to get rid of any guesswork with our assumptions map template in conjunction with a moderated or unmoderated study. PlaybookUX can help you even further with our thorough guide on how to develop an assumptions map, including what your team members and you might see as examples of ‘risky ‘and ‘difficult to validate’ assumptions.

Tools

• The Idea Generator:  If you are struggling to come up with a concept or idea that can be validated, try this useful tool.
• Surveybot: Do you want to get customer feedback on any of your current or new services or products on the go? Try this survey app that can send chatbot style surveys through Facebook messenger. 
• UXPressia: Looking for another customer journey map, persona or impact tool? Try this one.
• MilkyMap: Try customer journey mapping for free on your first go.
• Xtensio: User persona for free? Why not?
• Hubspot: As well as being the source of knowledge for everything related to marketing, it also offers a free user persona tool. So now you have no excuse to define your target audience.

UX PROCESS: DESIGN

Description

After conducting research into your initial ideas and validating it, it is time to start designing your product or service. You should begin by producing a wireframe or prototype of your product that will represent the essentials of your design. If it is a wireframe for your new website, for example, it will present the information that will be present on the home page and other pages in the form of block layouts and ‘X’ placeholders for future images.

Gain a description of the user interface, an outline of the structure and layout of the page. It is OK for you to start with a wireframe that is basic as the initial design process will need to be re-worked in line with feedback which means that you cannot complete the design in one go. You should re-test your design at each stage of the design process so that you can either make sure that you are proceeding in the right direction or can re-draft at an early stage. Be prepared to design, redesign, scrap your original design as well as having to create it all over again!

Once that you feel your design now meets the requirements of your target audience, you can pass the final design to your development team who can produce your final product. Once this is ready, you could test it internally. An alternative is to organize a beta launch where a small number of people are the first ones to try using your product or test the final version of your design to check whether your target audience finds the product or service easy to use. If there is any feedback from this final design stage, communicate this to the development team.

Methods

Card sorting: How do customers sort through information on your website? How should you organize your primary or secondary menu? The research technique of card sorting can help you answer these questions as It involves creating a set of cards, each of which represents a concept or item that you then ask participants to group in a way that makes sense to them. An open sorting technique is perfect for your business if you are still at the stage of generating ways to structure your website. On the other hand, pick a closed card technique if you just need some feedback on your existing categories. After an initial card sorting exercise, you could always use a moderated or unmoderated study to determine what your target audience thinks of this new structure.

Eyetracking: Do you want to explore unconscious usability behaviour during a test? Try the technique of eye tracking, which can provide you with useful data on individuals view and interpret visual objects on the screen. When used in combination with an unmoderated or moderated study, the results from eye tracking could deliver further insights for your product or service.

Eyetracking can also allow a business to use heat maps to track a user’s gaze order to gauge which parts of the screen received the most attention and which were not. Use this technique also to understand the amount of time spent on a particular section or whether your call to action garnered any interest.

Clickstream: As an alternative to eye tracking, try a clickstream test. This UX research technique can indicate how a user arrived on your website, what they looked at and then when they left. Typically, a clickstream study is used by e-commerce businesses to understand the pages that are most popular to shoppers and also to appreciate when they leave a page. Use in combination with a moderated or unmoderated study to know why your target audience goes or stays a page.

A/B testing: Trying to compare two versions of a design to see which one works better? Opt for A/B testing.  It is a perfect research method for your business to adopt if you want to make some changes to your current solution. However, you need to test only one of your goals or variables first. For example, if you need to convert more visitors on your website into paying customers, you would focus on only testing one part of your websites such as your call to action, your primary menu or your colour scheme. You could always conduct further A/B tests to test other variables at a later time. Utilize a moderated or unmoderated test to complete an A/B test so that you can understand why your user made a particular decision.

Tools

• Product Board: This is a product management system for your whole team so that everyone can understand what they need to build to connect with users.
• Carbon Design System: This is IBM’s guidelines for creating an ideal design.
• BrandColors: This is the most extensive collection of official brand colours.
• Adobe Color CC: This is Adobe’s colour guidelines for the UX process.
• Colour Lovers: A place for designers to share colour inspiration
• Khroma: An AI colour tool for designers

Typography

• Google Fonts: A selection of fonts to use for your product or service from Google.
• Typekit: A selection of fonts from Adobe
• Font Awesome: A font and icon toolkit for your brand
• Avataaars generator: Generate a free avatar for your brand
• The Noun Project: Want a better selection of icons for your brand? Take a look at the Noun Project

UX PROCESS: MEASURE

Description

Following your product or service launch, your UX process does not stop there. It’s time to analyze the outcome of your launch so you can continue to give the best user experience to your target audience. You can ask the following questions need to do this:

• Did the process go well? If not, why?
• What were the struggles of the process? Were there any elements that were a struggle, and what could we do to improve it?
• How is our target audience responding to the product or service?
• Did our product or service solve their pain points?
• What could we do to improve this UX process?
• What lessons can we learn from this project for future studies?

Methods

Surveys: While there are a variety of online survey tools, it can sometimes get a bit overwhelming. PlaybookUX is here to rescue you by highlighting a variety of customer feedback tools, depending on your needs. Need a variety of UX tools such as heatmaps that work in conjunction with surveys? Try Hotjar. But if you want your customer feedback to be analyzed opt for Kampyle. With this tool, you can create a feedback form and also trace your user’s experience at any location on your website. And it gets better. Kampyle also allows a pop-up feedback form if a visitor is due to leave your website. Are you looking to keep things simple without the fancy UX tools? Go for Feedbackify, which offers a quicker way to install a feedback form on your website.  

Chatbots: Surveys can get tedious at times, and you can never guarantee that a customer will fill it in. You need a feature on your website that pops up as soon as a potential customer visits your website. And that’s what chatbots were created. A bot can give you real-time feedback as it possesses the ability to react to various types of conversations or issues. If a customer is having a problem accessing the information on your website, they use your chatbot to find the resolution straight away. You could also use this issue to re-work your design so that customers do not have this same problem again.  You could always use your chatbot as a complaints tool as it could offer a discount or a voucher to satisfy an unhappy customer.  

Social media: After your product launch, use social media to reach out to customers that are using this product. You could organize a Twitter or Instagram chat so that customers can be encouraged to ask questions around your product or service to win a prize. You could also resolve any issues quicker through social media to demonstrate to future customers and your competitors that you do value customer feedback. Want to go further than this? Monitor any mentions of your competitors online so that you can re-work your product to win over their customers.  

Tools

• FullStory: This is an analytics platform that captures your user’s feedback on your website or app.
• Hotjar: Analyze how visitors are using your website to convert them to customers
• Google Analytics: Track your website traffic
• Optimizely: A/B test your product after launch
• UXCam: An analytics platform that captures your user’s feedback on your app.
• Talkwalker:  A social media listening tool
• PlaybookUX: Moderated and unmoderated user testing software

GE UX PLAYBOOK

UX Principles: It starts with the UX principles that guide their products and services. It recognizes UX as a strategic driver of business growth. Their principles state that UX experiences should be meaningful, delightful, welcoming and confident.

Four UX process stages of discover, design, produce and evaluate: They also use four steps to create their UX process, which is discover, design, produce and evaluate. These four stages require the identification of user needs, creating experiences to meet these needs, collaborating to achieve desired results and finally measuring the ongoing value of the UX experience created.

The discover stage involves using data analysis methods such as concept maps, business process analysis, as well as synthesis analysis methods like customer journey maps and scenario mapping to determine a product or service’s target audience.

At the design stage, there is a focus on concept generation methods such as storyboarding. There is also a focus on collaborating with system engineers and programme managers to create a business architecture. This process is done through using techniques such as information modelling as well as card sorting to develop the initial wireframes and prototypes of products or services, user validation of any initial concepts and wireframes and prototypes created through methods such as A/B testing.

Produce involves collaborating on the formal designs for the product, conducting iterative user testing to make sure that the product’s vision and user needs are at the forefront of the UX process at all times, allocating UX experts to the project who can also push forward this goal as well as QA testing and validation of user experience requirements and workflows.

The evaluate stage involves developing a UX scorecard as well as using tools such as surveys and questionnaires to assess the UX experience on an ongoing basis. It also uses ways to continually communicate with users through mediums, such as social media and online forums.

UX Team and Skills: In their next section of their UX strategy playbook, they talk about the skills needed to produce or develop this UX process. This process includes hiring a team that has the perfect combination of UX experts, creative engineers, technology experts, as well as business strategists. It is recommended that business also develops a collaborative culture where multiple sectors and disciplines work together to find solutions that improve the user experience. This team must act as an advocate of the user by having a desire to discover and serve the unmet needs of the user. They must also align these needs with the business and its engineering requirements. Hire individuals that can create a strategic vision of how a product or service will evolve with the user and business needs to develop an engaging UX experience.

This UX playbook also encourages businesses to create a prototype before moving onto a final design and then test this prototype with users at different stages of the UX process. Identifying measures to track user experience as well as sharing solutions that can be reused to create a better UX experience are also one of the other collaborative traits that GE states should be within your UX team of members.  This UX research playbook also lists the ideal staff roles that are needed to create a UX playbook as well as a certification process that ensures that their UX process is always compliant with the required outcomes for their business.

GOOGLE UX PLAYBOOK

If you are running an e-commerce business, Google’s UX Retail Playbook will contain valuable UX insights for your brand.  Have a website or online store? Google’s UX Playbook recommends that you should assess these six elements of your website such as your homage, menu and navigation, search bar, category/product, your conversion insights as well as your form optimization.

The most important message from this guide is that your target audience does not want to spend a long time on your website, and if they cannot find what they are looking for, they will leave.

UX for your homepage: For your homepage on your website, it has recommended that a business should think more about their call to action by discussing how they can add more value to them and the best place to place it on their website. Google also states that a home page should contain top categories and should make it easier for your target audience to be in control of their search.

UX for your menu, navigation and search bar: When assessing the menu and navigation on your website, this UX playbook has stated that businesses should have a dynamic menu or expanders. It also encourages the use of a search bar, which needs to be visible. Enabling auto-suggest on a website will also help your target audience find what they are looking for quickly.

UX for your category/product section: In terms of a website’s category/product section, Google has suggested making it possible for users to filter many products to improve the purchase experience. Businesses can also encourage their target audience to buy if they regularly create a sense of urgency with some products by saying that there are only a few items left.

UX for conversion:  Businesses should allow a user to use a guest checkout process rather than requiring them always to log in to get more conversions. It has also recommended that organizations can encourage users to buy through social media platforms.

UX for form optimization: When considering automating the payment process, Google has suggested that businesses should enable autofill on their checkout forms to minimize the number of actions needed by filling in the billing and shipping address by default. The form could also be allowed to recognize a credit card type.    

ADOBE UX PLAYBOOK

This guide is a handy starting point for those who are new to UX design and process.

UX definition: It defines what UX design is and what it isn’t, right from the beginning. It addresses UX design myths such as it being the responsibility of one person and it only focusing on the user. It also divulges into statistics as to why UX design is essential, which includes the number of users that leave if a site isn’t optimized for a mobile data device.

UX principles: It has a similar set of principles to the GE Playbook. It states the importance of the end-user, a collaborative approach to UX across all teams and continually making sure that this new product, whatever stage it is at, is in line with business data and user needs. So, there is a lot of value put on continually testing your concept, wireframes and finalized product designs.

UX process of discover, define, design and measure: It also uses the stages of discover, define, design and measure to create its UX process. Discover focuses on using data analysis and competitor research to gather insights as well as ideas that will inform your UX process. Next, define involves analyzing these insights collected from users and your existing business using tools such as diary studies, empathy maps, user personas and customer scenario mapping.

Following this, the stage of design focuses on creating the final layout for your target audience. This step will involve user testing the first look, which includes any wireframes and prototypes, its features and its functionality, i.e. will the users find it easy to use? It will also envisage re-testing different versions of the product before it reaches the final stage. Finally, measure looks at using social media tools and surveys to collect customer feedback after the launch of the product. This Adobe UX playbook feels that this allows a company to improve the user experience continuously.

Wrap-up

When creating the ideal product or service for your target audience, you need a holistic UX strategy that includes the best methods, tools and skills to do this. First, you need to discover a concept that combines the needs of your business and your target user. Then, you need to dig deeper into this initial idea to get clarity on how and why your product will make a difference to specific individuals. Then, you need to design this solution which will undergo several re-working phases before finalizing it. Once your product goes on the market, your business needs to continue improving it, so it continues to serve your target audience.

But none of this is possible without a viable means to test a concept before it becomes your product. PlaybookUX’s AI software can offer you a range of moderated and unmoderated testing services that you can try out on your own or hire us to do it for you. Want to give us a try? Book a demo here.