{"version":3,"sources":["webpack:///./src/img/ui/arrow_white.svg","webpack:///./src/pages/user-experience/user-experience-design.js","webpack:///./src/helpers/transformImages.js"],"names":["module","exports","withUsabilityTestingTemplate","banner","useSourceParams","edges","useStaticQuery","allFile","images","transformImages","href","target","rel","fluid","semanticstudios","node","childImageSharp","alt","title","className","link","uxdesign","hackermoon","techcrunch","opayo","starbucks","src","arrow","list","res","el","name"],"mappings":"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","file":"component---src-pages-user-experience-user-experience-design-js-1fcaa5b3ce453849e496.js","sourcesContent":["module.exports = \"data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjQiIGhlaWdodD0iMjQiIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTAgMTMuNUgxOC4yMjRMOS44MjQwMSAyMS45TDEyIDI0TDI0IDEyTDEyIDBMOS44OTk5OSAyLjEwMDAxTDE4LjIyNCAxMC41SDBWMTMuNVoiIGZpbGw9IndoaXRlIi8+Cjwvc3ZnPgo=\"","import React from 'react';\nimport withUsabilityTestingTemplate from 'hoc/content-cluster';\nimport { graphql, useStaticQuery } from 'gatsby';\nimport Img from 'gatsby-image';\nimport Link from 'components/ui/link';\nimport { transformImages } from 'helpers/transformImages';\nimport { useSourceParams } from 'hooks/useSourceParams';\nimport arrow from 'img/ui/arrow_white.svg';\n\nconst UserExperienceDesign = () => {\n const banner = useSourceParams('banner');\n const {\n allFile: { edges },\n } = useStaticQuery(graphql`\n query UserExperienceDesign {\n allFile(\n filter: {\n extension: { regex: \"/(jpg)|(jpeg)|(png)/\" }\n relativeDirectory: { eq: \"user-experience/user-experience-design\" }\n }\n ) {\n edges {\n node {\n name\n childImageSharp {\n fluid(quality: 95) {\n ...GatsbyImageSharpFluid_withWebp\n }\n }\n }\n }\n }\n }\n `);\n const images = transformImages(edges);\n return (\n <>\n

What is User Experience Design?

\n\n

\n In the most simple terms,{' '}\n \n UX design\n {' '}\n is the process of increasing user satisfaction and making sure that the services you provide\n to your customers genuinely deliver value. This is often measured through metrics like\n mobile app use, the number of returning visitors, conversion rates, and others.\n

\n

\n User Experience Designer & Information Architecture pioneer Peter Morville does a great job\n at explaining UX by breaking it into 7 key areas, known as the{' '}\n \n UX Honeycomb\n \n .\n

\n \n

\n Source:{' '}\n \n Semantic Studios\n \n

\n

\n According to this theory, the quality of user experience design lies in the following\n qualities: usefulness, usability, desirability, accessibility, findability, credibility, and\n value for business and its sponsors.\n

\n

\n That being said, let’s now see how you can improve the{' '}\n \n user experience\n {' '}\n for your service.\n

\n

UX Best Practices - What Does it Take to Create Good UX Design?

\n\n

\n Effective UX is all about catering your design to your audience so that they feel confident\n and comfortable while meeting their end goal. What’s more, if your users find your interface\n easy and satisfying to use, it’s less probable they will leave you for a competitor.\n

\n

\n Below we share several top UX best practices – if you’re a designer, make sure to cross them\n off your checklist!\n

\n

Understand who your audience is

\n\n

\n UX design should start with gaining an intimate understanding of who your users are. There\n are several methods of learning about their needs and expectations, which include running\n surveys, talking to them directly, or collecting insights from analytics software. You\n should always design by looking at your product through the eyes of your users; ask\n yourself, “what are they trying to get from our product?”\n

\n

\n Here are a few questions you should aim to answer in the discovery phase of your product:\n

\n \n

Seek simplicity and familiarity

\n\n

\n Have you ever visited a website that has a completely different design than what you’re used\n to? Perhaps it doesn't have the typical hamburger menu, or there aren’t any tabs at the\n top. Odds are, you got frustrated and might have left the site altogether.\n

\n

\n Your audience doesn’t want to relearn how to use an app or a website, and, thus, it’s your\n job not to entirely reinvent the wheel when it comes to user experiences. Rely on existing\n behavioral patterns to design solutions your users are familiar with.\n

\n

\n Simplicity and familiarity in your designs and features will help your users achieve their\n goals faster and more efficiently.\n

\n

Observe how your users interact with your design

\n\n

\n You can’t know what to alter or improve unless you know what the user experience is truly\n like. Use session recordings or in-person usability testing to find out how your audience\n interacts with the design you have created.\n

\n

\n What do they like? What do they struggle with? How can you make elements of your design more\n intuitive (and, thus, create a faster and more efficient experience)?\n

\n \n If you want to observe how your users interact with your website or service, you can do so\n by signing up for LiveSession for free.\n \n

Make sure the entire user flow is consistent

\n\n

\n A user flow shows all the steps that a user has to take to achieve their goals. When you\n consider how a person will move throughout your website or app, you should ask yourself:\n

\n \n

\n \n User journey mapping\n {' '}\n is one way that you can narrow down any underperforming areas in user flow and address it in\n your UX design.\n

\n \n

\n Source:{' '}\n \n UXdesign\n \n

\n

Prioritize readability (and accessibility)

\n\n

\n The text you display in your product needs to be legible and promote maximum readability.\n Readability is the ease at which the reader can understand the written text. While you may\n have text that is grammatically correct, it doesn’t necessarily mean it’s easily readable.\n Aim at making it easy to understand for all age groups by using a familiar language.\n

\n

\n Depending on whom your product is targeted at, you should also consider designing\n interactions that extend beyond the screen – for instance, by creating a voice user\n interface (VUI) for the visually impaired. If you wish to explore this further, we recommend\n taking a look at the accessibility guidelines described on the{' '}\n \n Interaction Design Foundation\n {' '}\n site.\n

\n

4 User Experience Design Examples

\n\n

\n The biggest companies often lead in good user experience design. Just think of it – if they\n were able to dominate the market and become a global favorite among users, they must have\n done something right!\n

\n

\n That being said, UX design doesn’t only apply to big companies or brands. It just means that\n they’ve done a phenomenal job instituting it in their products, and it’s proven itself\n successful. If you’re currently looking for ways to grow your company’s position, good UX\n design can help you connect with your customers and foster brand loyalty.\n

\n

Below, we share 4 examples of the best UX design.

\n

1. Google Search Engine

\n

\n Google just had its 22nd birthday on September 4. Today, it is by far{' '}\n \n the world’s largest search engine\n {' '}\n with over 3.5 billion searches made. If there’s one secret to Google’s search engine\n success, it’s UX design. All you have to do is type your inquiry into the search bar and hit\n the ‘Enter’ key. Before you know it, thousands of hits matching your inquiry pop up.\n

\n \n

\n Source:{' '}\n \n Hackernoon{' '}\n \n

\n

\n As the simplest and fastest search tool ever created, customers know exactly what to expect.\n In the past 20 years, Google’s home page has varied little in its design, and in all\n honesty, it has only gotten simpler. By removing unnecessary links, even new users cannot be\n confused by what they need to do. Click, type, and search. It’s about as easy and familiar\n as it gets.\n

\n

2. Facebook

\n\n

\n Facebook was launched on February 2, 2004 from a Harvard dorm by Mark Zuckerberg. Today,\n there are over{' '}\n \n 2.7 billion\n {' '}\n monthly active users. Learning how to provide a good UX for each of these users has been\n challenging for Facebook, but they’ve risen to the occasion.\n

\n

\n Over the years, they’ve added new features about the user’s locations, languages, interests,\n activities, potential friends, groups, and more to help them connect with their network. As\n they’ve added more features, they’ve increased their user experience and the value they\n offer as a social media network.\n

\n \n

\n Source:{' '}\n \n Techcrunch\n \n

\n

\n Every few years, Facebook also updates its interface to ensure that it’s serving its\n audience effectively.\n

\n

3. PayPal

\n\n

\n PayPal was officially established in December 1998 as Confinity, which developed security\n software for handheld devices. However, with little success in that field, it switched its\n focus to a digital wallet. Its first version as an electronic payments system launched in\n 1999. Today, PayPal is the most trusted and secure online payment method.\n

\n \n

\n Source:{' '}\n \n Opayo\n \n

\n

\n However, the site was complex before they{' '}\n \n released a redesign\n {' '}\n of both their websites and optimized them for mobile in May 2014. The redesign launched in\n 24 countries to 154 million customers and sought to cut down on the number of words and\n links that overcomplicated the experience for its audience. Their main priority was to\n reduce the time that users needed to spend on their website. They also incorporated a\n mobile-first methodology so their site could be used on smartphones as well.\n

\n

4. Starbucks

\n\n

\n Starbucks is another user experience design example worth looking at. It has come a long way\n since its founding in 1971. On September 23, 2009, Starbucks launched its app, which is now\n the most regularly used loyalty rewards app amongst major restaurant chains. Nearly half of\n Starbucks drinkers (\n \n 48 percent\n \n ) use the mobile app, and its digital engagement is largely credited for its success.\n

\n

\n Part of this is the user-friendly mobile experience and personalization. The app makes\n online ordering easy by recording purchase histories and patterns. By narrowing down the\n menu items to a shortlist of what the customer has previously enjoyed, it makes it a more\n streamlined experience. If you’re a Starbucks regular, it’s unlikely that you’re looking at\n the full menu every single time you order. You’re likely ordering one of three or four\n drinks that you’ve had previously. The Starbucks app also highlights new drinks on the\n “Featured” tab. This way, their customers won’t miss out on anything they may want to try\n even if they’re creatures of habit.\n

\n \n

\n Source:{' '}\n \n Starbucks\n \n

\n

\n After you’ve selected your drink, you’ll see suggested food items that may pair well as well\n as suggested locations for where you may want to pick up your order. Starbucks’ geolocation\n feature highlights the closest physical location to you. All the while, you’ll be earning\n rewards points (“stars”) for your purchases, so you can get free drinks or food items\n periodically.\n

\n

\n The Starbucks app is quick and easy to use, which is why it’s been so successful with its\n customers.\n

\n

Final thoughts

\n\n

\n User experience helps to increase user satisfaction and usability. You can have a phenomenal\n product, but if its information and features aren’t laid out in the right way, your audience\n won’t be able to use it effectively. Companies like PayPal sought to redesign their user\n experience by seeking simplicity, which ultimately boosted their presence on mobile\n platforms. Starbucks, on the other hand, took a look at their audience and implemented\n personalization features that increased its app’s usability.\n

\n

\n Ultimately, when you focus on user experience design, you increase your company’s potential\n and open yourself up to the opportunity of providing greater value to your customers.\n

\n
\n \n
\n

Chapter 4

\n

How to develop a user journey map in 6 simple steps

\n
\n \"arrow\"\n \n
\n \n );\n};\n\nexport default withUsabilityTestingTemplate(UserExperienceDesign);\n","/* eslint-disable no-restricted-syntax */\n/* eslint-disable guard-for-in */\nexport const transformImages = (list) => {\n const res = [];\n for (const el of list) {\n res[el.node.name] = el;\n }\n return res;\n};\n"],"sourceRoot":""}