{"version":3,"sources":["webpack:///./src/pages/user-experience/ux-design-process.js","webpack:///./src/img/ui/arrow_white.svg","webpack:///./src/helpers/transformImages.js"],"names":["withUsabilityTestingTemplate","edges","useStaticQuery","allFile","images","transformImages","href","target","rel","fluid","triangle","node","childImageSharp","title","alt","portfolio","customerjourneymap","writing","className","src","arrow","module","exports","list","res","el","name"],"mappings":"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","file":"component---src-pages-user-experience-ux-design-process-js-38fa45625d67369342e7.js","sourcesContent":["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 arrow from 'img/ui/arrow_white.svg';\n\nconst UXDesignProcess = () => {\n const {\n allFile: { edges },\n } = useStaticQuery(graphql`\n query UXDesignProcess {\n allFile(\n filter: {\n extension: { regex: \"/(jpg)|(jpeg)|(png)/\" }\n relativeDirectory: { eq: \"user-experience/ux-design-process\" }\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 UX Design and Why It’s Important

\n

User experience

\n

\n To get a full understanding of what UX design process is, it’s crucial to start with a\n definition of user experience:\n

\n

\n It refers to the feelings and emotions which interacting with a product or service evokes in\n the user. The term was first introduced by Donald Norman,{' '}\n \n who said that\n \n :\n

\n

\n \n “I invented the term because I thought human interface and usability were too narrow. I\n 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

UX design

\n\n

\n Going back to UX design, it is the process of designing physical and digital products with\n the target user in mind; it’s about solving their problems by creating meaningful user\n experiences.\n

\n

\n Now that we have the definitions sorted out, you might wonder – why the UX design process is\n important. Let’s get right to it!\n

\n

Why UX design matter

\n\n

Having a UX design process in place brings significant benefits, some of them include:

\n \n

The Elements of the User Experience Process

\n\n

\n Hopefully, by now, we all agree that having an effective UX design process is necessary to\n build products that customers enjoy interacting with. The primary purpose of a UX design\n process is creating a great{' '}\n \n user experience\n \n . In order to do that it’s worth identifying the key UX elements.\n

\n\n

Research

\n\n

\n Research is the backbone of every effective UX design process. It’s necessary to understand\n user behavior, mindset, goals, and preferences.\n

\n

Visual design

\n

\n Shows the look and feel of the front end of any interface. It uses visual elements such as\n colors, images, and symbols to communicate a message to the audience.\n

\n

Information architecture

\n

\n Another important element of the user experience is information architecture. It’s about\n organizing and labeling information to make it easily discoverable and helpful to the users.\n According to{' '}\n \n Abby Covert\n \n , the author of How to Make Sense of Any Mess: Information Architecture for Everybody,\n “Information architecture is the way that we arrange the parts of something to make it\n understandable”.\n

\n \n

\n Source:{' '}\n \n NetSolutions{' '}\n \n

\n

Usability

\n

\n Usability refers to the degree a product can be used by a specific target group to realize\n their goals effectively and efficiently with a desired level of satisfaction. A properly\n designed app or a website enables users to easily interact with it from the first use.\n

\n

Accessibility

\n\n

\n Accessibility is also considered one of the user experience elements. The concept revolves\n around ease of use, reach, and understandability. It’s often viewed in the context of\n disability i.e. how easy the product is to use by people with disabilities.\n

\n

Human-computer interaction

\n\n

\n The last UX element we’re going to talk about is human-computer interaction. As explained by{' '}\n \n Wikipedia\n \n , “Human-computer interaction is concerned with the design, evaluation, and implementation\n of interactive computing systems for human use and with the study of major phenomena\n surrounding them”.\n

\n

6 Steps to Creating an Effective User Experience Design Process

\n\n

\n There are a number of steps which every effective UX design process should incorporate,\n these include:{' '}\n

\n

Step 1: Understand the user and the brand

\n\n

\n Trying to build a product without understanding your users first is like walking in a jungle\n without a compass – pretty clueless. Designing the user experience is all about solving user\n problems, and in order to do that, you need to know what their pain points are. You should\n find answers to three questions\n

\n
    \n
  1. What is the issue or issues you aim to resolve?
  2. \n
  3. What problems do your users have?
  4. \n
  5. What makes you think you can resolve those problems?
  6. \n
\n\n

\n Only after you get a deep understanding of your target audience struggles you can start\n creating a design strategy.\n

\n

Step 2: Research: 1:1 interviews, focus groups, surveys

\n

\n Research is the foundation of every successful UX design process – it helps you verify your\n hypotheses and saves you from making expensive design mistakes. You can select from a\n variety of research methods including:\n

\n \n

Step 3: Analyze your findings: user personas & user journey mapping

\n

\n Gather and analyze the findings you collected during the previous stages. For this purpose\n you can use two methods:{' '}\n

\n \n

Step 4: Building your design

\n

\n It’s time to build your design, which will include creating mockups, site maps, user flows,\n images, colors, etc. It is the right stage to start building wireframes – a basic\n representation of what your product will do. Bear in mind that it’s a continuous process,\n not a one-off – you’ll have to constantly modify your design based on user feedback.\n

\n

Step 5: Launch: beta testing, internal testing, user testing

\n

\n When you feel like your design is as good as it can be (at least at this stage), it’s launch\n time – you’ll pass on all the materials to the development team to build a high-fidelity\n version of it. After it’s built, there are a few things you can do to ensure its\n market-readiness:\n

\n \n

Step 6: Analyze and re-analyze

\n

\n After the product launch, you’ll have to take a closer look at the results, however, instead\n of looking at research, you’ll be able to analyze the final product. It’s worth thinking\n about:\n

\n \n\n

\n Getting answers to the above questions will not only allow you to enhance your UX design\n process, but it will also give you insights on how to improve your product to better meet\n user expectations.{' '}\n

\n \n

\n Source:{' '}\n \n Unsplash\n \n

\n

Summary

\n

\n You can’t build a product that your target audience will love without having a UX design\n process in place. Not only will it help you achieve product-market fit quicker and boost\n your conversion, but it will also have a positive impact on your brand image.{' '}\n

\n

\n The main purpose of a UX design process is to create a great user experience. For this\n reason, it’s worth remembering what the UX elements are: research, visual design,\n information architecture, usability, accessibility, and human-computer interaction. Before\n you start building your product prototype, remember to conduct thorough user research,\n analyze your findings, and never stop improving your product, even after the launch. Good\n luck!{' '}\n

\n
\n \n
\n

Chapter 3

\n

User Experience Design – How to Improve & Best Practices

\n
\n \"arrow\"\n \n
\n \n );\n};\n\nexport default withUsabilityTestingTemplate(UXDesignProcess);\n","module.exports = \"data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjQiIGhlaWdodD0iMjQiIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTAgMTMuNUgxOC4yMjRMOS44MjQwMSAyMS45TDEyIDI0TDI0IDEyTDEyIDBMOS44OTk5OSAyLjEwMDAxTDE4LjIyNCAxMC41SDBWMTMuNVoiIGZpbGw9IndoaXRlIi8+Cjwvc3ZnPgo=\"","/* 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":""}