{"version":3,"sources":["webpack:///./src/components/usability-testing/banner/styled.js","webpack:///./src/components/usability-testing/banner/index.js","webpack:///./src/pages/user-experience.js","webpack:///./src/img/ui/arrow_white.svg","webpack:///./src/helpers/transformImages.js"],"names":["Banner","styled","div","media","mobile","title","desc","style","className","signUp","secondary","center","sourceID","defaultProps","undefined","withUserExperienceTemplate","link1","useSourceParams","useStaticQuery","edges","allFile","uxdesign","images","transformImages","href","target","rel","fluid","unsplash1","node","childImageSharp","alt","link","unsplash2","unsplash3","unsplash4","customerjourneymap","paper","src","arrow","module","exports","list","res","el","name"],"mappings":"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","file":"component---src-pages-user-experience-js-234e0ebefac61078048e.js","sourcesContent":["import styled from 'styled-components';\nimport { media } from 'theme/breakpoints';\n\nexport const Banner = styled.div`\n width: 100%;\n padding: 64px 73px;\n text-align: center;\n background: #f8f8f8;\n border-radius: 4px;\n margin: 80px 0;\n ${media.mobile} {\n padding: 24px 16px;\n margin: 40px 0;\n }\n & .banner-title {\n font-size: 36px;\n line-height: 45px;\n margin-bottom: 24px;\n margin-top: 0;\n font-weight: 800;\n }\n & p {\n margin-bottom: 40px;\n }\n`;\n","import React from 'react';\nimport PropTypes from 'prop-types';\nimport Button from 'components/ui/button';\nimport * as Styled from './styled';\n\nconst Banner = ({ title, desc, style }) => {\n return (\n {desc || 'Test all LiveSession features for 14 days, no credit card required.'}{title || `Improve usability testing with LiveSession`}
\n
\n Do you ever wonder how using certain products make you feel? Do you get frustrated or are\n you delighted? The feelings and emotions that interacting with products evoke in us can be\n referred to as user experience. This term was pioneered by{' '}\n \n Donald Norman\n {' '}\n who said – “I invented the term because I thought human interface and usability were too\n narrow. I wanted to cover all aspects of the person’s experience with the system including\n industrial design, graphics, the interface, the physical interaction, and the manual.”\n
\n\n Source:{' '}\n \n Unsplash\n {' '}\n
\n\n User experience means different things to different people and there are various UX\n definitions – some are very distinct from the standard one. If you’re curious what they are,\n take a look at our article,{' '}\n \n where 10 business experts explain what UX is\n \n .{' '}\n
\n\n Since you have an understanding of what UX means, it’s time to discuss UX experience design\n and the elements of an effective UX design process.{' '}\n
\n\n Let’s start off with a question – what is UX design? There isn’t a universally accepted\n definition. It’s a multidimensional concept which incorporates a variety of disciplines like\n interaction design, information architecture, visual design, usability, and human-computer\n interaction.{' '}\n
\n\n However, to get a better grasp of what UX design indicates, let’s take a look at how the{' '}\n \n Oxford Journal Interacting With Computers\n {' '}\n explains it:{' '}\n
\n\n The primary purpose of UX design is to “\n \n improve customer satisfaction and loyalty through the utility, ease of use, and pleasure\n provided in the interaction with a product.\n \n ” To put it simply, it’s about building products, which not only provide value to customers,\n but are also easy and pleasant to use.{' '}\n
\n\n Source:{' '}\n \n New Breed Marketing\n {' '}\n
\n\n Now, what does it take to create great user experiences? The key lies in the{' '}\n \n UX design process\n \n , i.e., a set of rules and processes designers follow at various stages of developing the\n product. It’s instrumental to creating solutions that truly resonate with its users.{' '}\n
\n\n First, UX specialists learn about who the target user is and what needs and expectations\n they have of the product. Next, they proceed to validating their hypotheses by creating\n visuals and conducting usability testing.{' '}\n
\n\n Let us take a closer look at the elements of the UX design process as well as the benefits\n following it entails.\n
\n\n User research is the starting point of any user-centered design. It’s also a continuous\n process that helps designers enhance the usability of an up-and-running product.{' '}\n
\n\n In order to create a user-centered experience, designers require a deep understanding of the\n target audience – its users’ goals, fears, and challenges. This can be achieved, for\n example, through conducting user interviews,{' '}\n \n session recordings\n \n , or running surveys.{' '}\n
\n\n With these insights at hand, UX specialists can proceed to building out user personas, user\n journey mapping (which we discuss below), as well as creating wireframes and prototypes.\n
\nWe discuss user research in more detail further down in this post.
\n\n Information architecture (IA) is another crucial element of the user experience. Its role is\n to organize information in a way that makes it helpful and intuitive for users to navigate.\n One of the ways IA can be verified is by testing the intended design with users, which\n brings us to...\n
\n\n Visual design is a term used to describe the look and feel of a product. It includes\n elements such as the app’s or site’s layout, colors, or the symbols that help users interact\n with the interface. Visual design concepts are tested out by UX designers through wireframes\n and prototypes, which we discuss in detail below.\n
\n\n Source:{' '}\n \n Unsplash\n \n
\n\n The term ‘usability’ describes the degree to which a product can be used by its target\n audience so that they can reach their goals. There are{' '}\n \n five constituents\n {' '}\n to usability – a product’s learnability, efficiency, memorability, its errors, and the\n levels of user satisfaction.\n
\n\n Lastly, accessibility is the rate at which a product can be easily used, understood, and\n reached by a disabled individual. This might mean, for instance, designing a voice interface\n for the visually impaired, or enabling a bigger font or element size for the elderly.\n
\n\n So, what benefits does following the user experience design process provide? Below, we\n mention some of the most prominent ones:\n
\n\n You can read more about the UX design process and what it includes in a dedicated chapter of\n this guide.\n
\n\n Research is essential to creating an effective UX design, which is why it’s important to\n shed more light on the subject.\n
\n\n \n User experience research\n {' '}\n provides information required at all steps of the design process. It allows designers to\n validate their product plans and hypotheses, as well as compare the intended service against\n others present on the market.\n
\nThere are two main types of user research – quantitative and qualitative.
\n\n Quantitative research, as the name indicates, is the collection of data that can be\n numerically measured and analyzed. This can be, for instance, the number of website visitors\n who bounced from your site or results from a user survey (measured on a 1-10 scale).\n
\n\n Source:{' '}\n \n Unsplash\n \n
\n\n {' '}\n While quantitative data will tell you ‘what’, qualitative data lets you in on the ‘why’ –\n i.e., the motivation for user actions. Examples of such insights include descriptive answers\n to open-ended questions in a survey or findings from 1:1 user interviews.\n
\nHow to know which method to employ, and at which stage in the research process?
\n\n As explained by the{' '}\n \n Nielsen Norman Group\n \n , there are four stages in the UX research process – Discover, Explore, Learn, and Listen.\n Below, we mention the methods that can be used at each step.\n
\nAt the initial stages, you will benefit from the following:
\n\n These methods will help you understand what other products on the market you’re competing\n with, and how you can meet your users’ expectations, resolve their problems, and help them\n in their goals.\n
\nIn the ‘Explore’ phase, we recommend turning to:
\n\n These methods will help you uncover potential user journey paths, new features and\n enhancements, and others.\n
\n\n In the ‘Learn’ stage, you gain a deeper understanding of your users’ interactions with your\n product. Therefore, you will benefit from:\n
\n\n Last, but not least, researchers listen to their audience to learn how they can improve the\n UX design. The recommended methods include:\n
\n\n {' '}\n We describe each of the above-mention methods in detail in a dedicated chapter of this\n guide.\n
\n\n Let’s now see how you can use the gathered customer insights to fuel your user journey and\n to create your user journey map.\n
\nBefore we proceed to the tactics, let’s first look at the definition.
\n\n In the most simple terms, a user journey is the entire experience a user has while\n interacting with an interface or product. It shows you all the steps they’ve taken in order\n to achieve a goal – for instance, finalizing their purchase.\n
\n\n That being said, user journey mapping is the process of documenting this entire interaction.\n It helps designers visualize the entire UX experience and lets them spot any improvement\n areas, unnecessary steps, or other important elements of a given user task.\n
\nThere are six steps to mapping out user experiences. These are, as follows:
\n\n User personas are a fictional, representative reflection of your actual customers. They are\n a way of giving your user research data a personality so that it’s more relatable when you\n work on your designs.\n
\n\n With personas, you can understand what your target audience’s goals, fears, and challenges\n are. Create a list of reasons why customers turn to your product or service and what they\n aim to achieve by using it.\n
\n\n Determine all the points of contact or scenarios your user engages in when they interact\n with your product. Create a list of all potential ways they can come across your brand –\n both online and offline. An example of this is, for instance, a virtual check-in for a\n flight (which takes place well ahead of the passenger entering the plane and using the\n actual service).\n
\n\n Source:{' '}\n \n Nielsen Norman Group\n \n
\nAsk yourself the following:
\nThese and other questions will provide you with a list of user journey improvements.
\n\n With the list of roadblocks, it’s time to categorize. Decide which problems call for a\n ‘nice-to-have’ improvement and which entirely block the user from continuing their journey,\n and prioritize the latter.\n
\nApply the improvements derived from your user journey map to enhance UX.
\n\n As user goals and priorities change over time, we advise you to update or verify your user\n journey maps’ validity every 6 months.\n
\n\n User journey maps give you a ton of insights, which can be used for creating the intended\n product’s first visuals – i.e. wireframes and higher-fidelity prototypes.\n
\n\n The best way to check if your design is market-ready is{' '}\n \n through UX prototyping\n \n . A prototype is a basic version of your design with the potential of turning it into a\n fully functional product. It enables initial product testing and feedback collection.\n
\n\n You might be wondering – why should I bother building a prototype? It has lots of benefits,\n we’ll get to them right now:\n
\n\n There is more than one prototyping technique which you can use, let’s take a quick look at\n them now.{' '}\n
\n\n Paper prototyping – its low cost and flexibility make it a popular\n option among designers. It can be tested with any type of interface including a website,\n mobile app, or software. It’s frequently confused with sketching but it goes beyond\n paper drawing. Paper prototypes can be made of cardboard or cut out of paper which makes\n interacting with them easier.\n
\n\n Source:{' '}\n \n Martha Eierdanz\n \n
\n\n Since you know what prototyping methodologies you can select from, it’s time for some\n practical skills on how to approach it.\n
\nThere are five steps that you should follow to develop a UX prototype, these are:
\n\n You can’t build a product without knowing the reason why you want to build it in the first\n place. Figure out what problem your product is going to solve, then focus on building a\n design that would enable users to meet their goals in the simplest way.\n
\n\n What features does your product require to deliver on its objectives? Start with\n shortlisting the must-have or core features and focus on prioritizing those, instead of\n listing an endless number of features which will only increase your development costs and\n decrease usability.{' '}\n
\n\n While at this stage most designers will already have product layouts and structures in mind,\n the purpose of this step is to explore what’s possible and what isn’t. So try to approach it\n with a fresh mind – start by drawing the core screens of your app.\n
\n\n Now that you have your sketches ready you can start building wireframes. Wireframes lay out\n the content and functionality, taking into consideration users’ needs. Its main purpose is\n to show to stakeholders which entities, pages, and components are going to be included in\n the app, and how they will interact with one another.{' '}\n
\nThe ultimate step is to build the prototype. You have two options:
\n\n With all of the above, it’s now time to review the best practices that will help you ensure\n you’re creating a{' '}\n \n good UX design\n \n .\n
\n .\n Here are some of the best UX experience best practices worth following while creating your\n design process:\n
\n\n You design products for specific users, this means you’ll have to get to know them inside\n out. Find out what their problems and pain points are, what their needs are, and what goals\n they try to achieve. Only by having this information, you can start thinking about product\n design.\n
\n\n Source:{' '}\n \n Unsplash\n \n
\n\n As humans, we often cling to what we’re familiar with – this also applies to products.\n Familiarity allows users to learn how to use new products faster, which also has a positive\n impact on engagement.{' '}\n
\n\n We frequently assume that users will interact with our product in a certain way; these,\n however, are just assumptions. And reality can surprise us, which is why it’s worth\n verifying your assumptions by observing how users interact with your product in real-life.{' '}\n
\n\n Not only will you be able to spot any potential roadblocks which prevent your users from\n meeting their goals, but you might also discover some design elements that bring joy to\n customers.\n
\n\n User flow visually displays all the steps that a user must take to reach their goal. While\n designing your user flow keep three questions in mind:\n
\n\n Source:{' '}\n \n UXdesign\n {' '}\n
\n\n Readability and accessibility play an important role in creating great user experiences.\n Just because the text in your app is error-free, doesn’t necessarily indicate it’s easy to\n read. Low readability will create navigation problems, and your users might feel lost.\n Instructions should be straightforward and easy to follow. This can only be achieved by\n using a simple and familiar language, which all users, irrespective of their age group, can\n understand.{' '}\n
\n\n If you’re seeking inspiration, then here are a few{' '}\n \n user experience examples\n {' '}\n that you can look at including, Google Search Engine, Facebook, Paypal, and Starbucks.\n
\n\n Offering great user experiences is no longer an option – it’s an expectation that most\n customers have, and are willing to pay extra for. However, creating great UX requires an\n in-depth knowledge of your target audience, which calls for extensive UX research. It forms\n the basis of an effective UX design process. Having it in place not only improves your\n chances of creating products that meet customers’ goals, but are also easy and enjoyable to\n use.{' '}\n
\n\n While creating your user experience design process remember to keep accessibility,\n readability, and simplicity in mind, and make sure that your user flow is consistent.{' '}\n
\n\n This was just a brief introduction to UX, and there’s much more to uncover! Click below to\n proceed to Chapter One – What is UX? 10 Experts Share Their Definition.\n
\nChapter 1
\nWhat is UX? 10 Experts Share Their Definition
\n