{"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":"+FAAA,0HA2XeA,uBAnXS,WACtB,IACaC,EACTC,yBAAe,cADjBC,QAAWF,MAsBPG,EAASC,YAAgBJ,GAC/B,OACE,oCACE,wEACA,gDACA,oJAIA,oLAE4D,IAC1D,kBAAC,IAAD,CACEK,KAAK,0EACLC,OAAO,SACPC,IAAI,gCAHN,iBAHF,KAYA,2BACE,gSAMF,0CAEA,6NAKA,6JAIA,qDAEA,qHACA,4BACE,4BACE,4DADF,kUAKI,IACF,kBAAC,IAAD,CACEF,KAAK,kEACLC,OAAO,SACPC,IAAI,gCAHN,iCANF,uCAauC,KAEvC,4BACE,sDADF,weAMsF,KAEtF,4BACE,0DADF,qXAKyD,IACvD,kBAAC,IAAD,CACEF,KAAK,wDACLC,OAAO,SACPC,IAAI,gCAHN,kBAMQ,IAZV,6DAa6D,MAG/D,4EAEA,6OAG8B,IAC5B,kBAAC,IAAD,CAAMF,KAAK,oBAAoBC,OAAO,SAASC,IAAI,uBAAnD,mBAJF,qEAUA,wCAEA,0KAIA,6CACA,+LAIA,wDACA,gOAGe,IACb,kBAAC,IAAD,CACEF,KAAK,0EACLC,OAAO,SACPC,IAAI,gCAHN,eAJF,kMAeA,kBAAC,IAAD,CACEC,MAAOL,EAAOM,SAASC,KAAKC,gBAAgBH,MAC5CI,MAAM,qDACNC,IAAI,aAEN,qCACU,IACR,kBAAC,IAAD,CACER,KAAK,2FACLC,OAAO,SACPC,IAAI,gCAHN,eAKe,MAGjB,yCACA,ySAKA,6CAEA,2RAKA,2DAEA,0HAC+F,IAC7F,kBAAC,IAAD,CACEF,KAAK,gEACLC,OAAO,SACPC,IAAI,gCAHN,aAFF,sMAaA,gGAEA,oIAEiB,KAEjB,0EAEA,mVAMA,4BACE,+EACA,iEACA,sFAGF,kJAIA,uFACA,uPAKA,4BACE,4BACE,kDADF,oHAIA,4BACE,gDADF,uJAE6F,KAE7F,4BACE,2CADF,gLAG4B,MAG9B,mGACA,iJAE2B,KAE3B,4BACE,4BACE,2BACE,kDADF,iOAGoF,KAEpF,kBAAC,IAAD,CACEC,MAAOL,EAAOW,UAAUJ,KAAKC,gBAAgBH,MAC7CI,MAAM,gBACNC,IAAI,2BAEN,qCACU,IACR,kBAAC,IAAD,CACER,KAAK,sDACLC,OAAO,SACPC,IAAI,gCAHN,UAMQ,MAGZ,4BACE,2BACE,wDADF,0EAE8B,KAE9B,kBAAC,IAAD,CACEC,MAAOL,EAAOY,mBAAmBL,KAAKC,gBAAgBH,MACtDI,MAAM,uBACNC,IAAI,yBAEN,qCACU,IACR,kBAAC,IAAD,CACER,KAAK,iEACLC,OAAO,SACPC,IAAI,gCAHN,WAMQ,OAId,6DACA,2XAMA,4FACA,uTAMA,4BACE,4BACE,6DADF,yFAE2C,KAE3C,4BACE,gDADF,0FAE+B,KAE/B,4BACE,oDADF,8EAKF,+DACA,2NAKA,4BACE,mDACA,kDACA,gGACA,4FAGF,mOAGqB,KAErB,kBAAC,IAAD,CACEC,MAAOL,EAAOa,QAAQN,KAAKC,gBAAgBH,MAC3CI,MAAM,UACNC,IAAI,qBAEN,qCACU,IACR,kBAAC,IAAD,CACER,KAAK,0CACLC,OAAO,SACPC,IAAI,gCAHN,aAQF,uCACA,6RAGgF,KAEhF,wdAMQ,KAER,yBAAKU,UAAU,gBACb,kBAAC,IAAD,CAAMZ,KAAK,4CACT,6BACE,wCACA,wFAEF,yBAAKa,IAAKC,IAAON,IAAI,QAAQD,MAAM,uB,mBCpX7CQ,EAAOC,QAAU,sT,u4BCEV,IAAMjB,EAAkB,SAACkB,GAE9B,IADA,IACA,EADMC,EAAM,GACZ,IAAiBD,KAAjB,aAAuB,CAAC,IAAbE,EAAY,QACrBD,EAAIC,EAAGd,KAAKe,MAAQD,EAEtB,OAAOD","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
\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\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
\nHaving a UX design process in place brings significant benefits, some of them include:
\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\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\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\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 Source:{' '}\n \n NetSolutions{' '}\n \n
\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\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\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\n There are a number of steps which every effective UX design process should incorporate,\n these include:{' '}\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 Only after you get a deep understanding of your target audience struggles you can start\n creating a design strategy.\n
\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 Gather and analyze the findings you collected during the previous stages. For this purpose\n you can use two methods:{' '}\n
\n\n Buyer personas – these are profiles of your ideal customers and can\n include the following information: age, gender, profession, goals, behaviors, spending\n habits, etc. All your design decisions should revolve around your buyer personas.{' '}\n
\n\n Source:{' '}\n \n Oberlo\n {' '}\n
\n\n User journey mapping – demonstrates step by step how users will\n interact with your product.{' '}\n
\n\n Source:{' '}\n \n NNGroup\n {' '}\n
\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\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 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 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 Source:{' '}\n \n Unsplash\n \n
\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
\nChapter 3
\nUser Experience Design – How to Improve & Best Practices
\n