{"id":691,"date":"2020-08-21T06:04:33","date_gmt":"2020-08-21T06:04:33","guid":{"rendered":"https:\/\/ux.lietzau.art\/index.php\/projects\/"},"modified":"2021-10-20T11:02:01","modified_gmt":"2021-10-20T11:02:01","slug":"projects","status":"publish","type":"page","link":"https:\/\/ux.lietzau.art\/index.php\/projects\/","title":{"rendered":"UX\/UI Projects"},"content":{"rendered":"\n<div class=\"wp-block-cover alignfull has-ast-global-color-8-background-color has-background-dim\" style=\"min-height:700px;aspect-ratio:unset;\"><img loading=\"lazy\" decoding=\"async\" width=\"1920\" height=\"1280\" class=\"wp-block-cover__image-background wp-image-986\" alt=\"\" src=\"https:\/\/ux.lietzau.art\/wp-content\/uploads\/2021\/09\/ux-ui-screan.jpg\" data-object-fit=\"cover\" srcset=\"https:\/\/ux.lietzau.art\/wp-content\/uploads\/2021\/09\/ux-ui-screan.jpg 1920w, https:\/\/ux.lietzau.art\/wp-content\/uploads\/2021\/09\/ux-ui-screan-300x200.jpg 300w, https:\/\/ux.lietzau.art\/wp-content\/uploads\/2021\/09\/ux-ui-screan-1024x683.jpg 1024w, https:\/\/ux.lietzau.art\/wp-content\/uploads\/2021\/09\/ux-ui-screan-768x512.jpg 768w, https:\/\/ux.lietzau.art\/wp-content\/uploads\/2021\/09\/ux-ui-screan-1536x1024.jpg 1536w\" sizes=\"auto, (max-width: 1920px) 100vw, 1920px\" \/><div class=\"wp-block-cover__inner-container is-layout-flow wp-block-cover-is-layout-flow\">\n<div class=\"wp-block-columns alignfull are-vertically-aligned-center is-layout-flex wp-container-core-columns-is-layout-7387b849 wp-block-columns-is-layout-flex\">\n<div class=\"wp-block-column is-vertically-aligned-center is-layout-flow wp-block-column-is-layout-flow\">\n<h1 class=\"has-white-color has-text-color wp-block-heading\">UX \/ UI Projects<\/h1>\n\n\n\n<p class=\"wp-block-paragraph\"><span class=\"has-inline-color has-ast-global-color-5-color\">Before starting my adventure with UX, I had already designed dozens of multimedia presentations in the past. Recently, I have learned that I&#8217;ve been intuitively using the same methods that are standard in UX design nowadays.<\/span><\/p>\n<\/div>\n\n\n\n<div class=\"wp-block-column is-vertically-aligned-center is-layout-flow wp-block-column-is-layout-flow\"><\/div>\n\n\n\n<div class=\"wp-block-column is-vertically-aligned-center is-layout-flow wp-block-column-is-layout-flow\"><\/div>\n<\/div>\n<\/div><\/div>\n\n\n\n<p class=\"wp-block-paragraph\"><\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><\/p>\n\n\n\n<div class=\"wp-block-columns is-layout-flex wp-container-core-columns-is-layout-7387b849 wp-block-columns-is-layout-flex\">\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\" style=\"flex-basis:100%\">\n<div class=\"wp-block-group is-layout-flow wp-block-group-is-layout-flow\">\n<p class=\"has-text-align-center has-large-font-size wp-block-paragraph\"><span class=\"has-inline-color has-ast-global-color-0-color\"><strong>However, <\/strong><\/span><span class=\"has-inline-color has-ast-global-color-0-color\"><strong>I&#8217;d like to tell the story <\/strong><\/span><br><span class=\"has-inline-color has-ast-global-color-0-color\"><strong>of the first project where <\/strong><\/span><span class=\"has-inline-color has-ast-global-color-0-color\"><strong>I have used my UX <\/strong><\/span><br><span class=\"has-inline-color has-ast-global-color-0-color\"><strong>knowledge purposefully<\/strong><\/span><\/p>\n<\/div>\n<\/div>\n<\/div>\n\n\n\n<p class=\"wp-block-paragraph\">More often than not, one is usually part of something bigger. In this case, it was a development team. That&#8217;s pretty good, as in teams it&#8217;s always easier to share your thoughts and experiences. That&#8217;s why from now on I&#8217;ll say that &#8216;we did this&#8217; and &#8216;we designed that&#8217;, although our individual roles only became clear by the end of the project. As it usually is with new endeavours, nobody could tell exactly where we were headed and what we were going to achieve.<\/p>\n\n\n\n<h2 class=\"has-text-align-center wp-block-heading\">Let&#8217;s begin!<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">I will use the double-diamond approach to solve the problem and the design thinking process.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large is-style-default\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"558\" src=\"https:\/\/ux.lietzau.art\/wp-content\/uploads\/2021\/10\/design-thinking--1024x558.png\" alt=\"\" class=\"wp-image-1426\" srcset=\"https:\/\/ux.lietzau.art\/wp-content\/uploads\/2021\/10\/design-thinking--1024x558.png 1024w, https:\/\/ux.lietzau.art\/wp-content\/uploads\/2021\/10\/design-thinking--300x163.png 300w, https:\/\/ux.lietzau.art\/wp-content\/uploads\/2021\/10\/design-thinking--768x418.png 768w, https:\/\/ux.lietzau.art\/wp-content\/uploads\/2021\/10\/design-thinking-.png 1081w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<h4 class=\"has-text-align-center has-text-color wp-block-heading\" style=\"color:#d0cbcb\"><\/h4>\n\n\n\n<div class=\"wp-block-columns is-layout-flex wp-container-core-columns-is-layout-7387b849 wp-block-columns-is-layout-flex\">\n<div class=\"wp-block-column has-ast-global-color-4-color has-text-color is-layout-flow wp-block-column-is-layout-flow\" style=\"flex-basis:100px\"><\/div>\n<\/div>\n\n\n\n<figure class=\"wp-block-gallery columns-1 is-cropped wp-block-gallery-1 is-layout-flex wp-block-gallery-is-layout-flex\"><ul class=\"blocks-gallery-grid\"><li class=\"blocks-gallery-item\"><figure><a href=\"https:\/\/ux.lietzau.art\/wp-content\/uploads\/2021\/10\/duble-diamond-.png\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"516\" src=\"https:\/\/ux.lietzau.art\/wp-content\/uploads\/2021\/10\/duble-diamond--1024x516.png\" alt=\"\" data-id=\"1429\" data-full-url=\"https:\/\/ux.lietzau.art\/wp-content\/uploads\/2021\/10\/duble-diamond-.png\" data-link=\"https:\/\/ux.lietzau.art\/index.php\/projects\/duble-diamond\/\" class=\"wp-image-1429\" srcset=\"https:\/\/ux.lietzau.art\/wp-content\/uploads\/2021\/10\/duble-diamond--1024x516.png 1024w, https:\/\/ux.lietzau.art\/wp-content\/uploads\/2021\/10\/duble-diamond--300x151.png 300w, https:\/\/ux.lietzau.art\/wp-content\/uploads\/2021\/10\/duble-diamond--768x387.png 768w, https:\/\/ux.lietzau.art\/wp-content\/uploads\/2021\/10\/duble-diamond-.png 1317w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/a><\/figure><\/li><\/ul><\/figure>\n\n\n\n<div class=\"wp-block-columns is-layout-flex wp-container-core-columns-is-layout-7387b849 wp-block-columns-is-layout-flex\">\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\">\n<div style=\"height:100px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<h2 class=\"has-text-align-left wp-block-heading\">Discover<\/h2>\n\n\n\n<hr class=\"wp-block-separator is-style-wide\"\/>\n\n\n\n<h2 class=\"wp-block-heading\"><strong>01.<\/strong> <\/h2>\n\n\n\n<h4 class=\"wp-block-heading\">Identifying The Problem<\/h4>\n<\/div>\n<\/div>\n\n\n\n<div class=\"wp-block-columns is-layout-flex wp-container-core-columns-is-layout-7387b849 wp-block-columns-is-layout-flex\">\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\" style=\"flex-basis:100%\">\n<div class=\"wp-block-columns is-layout-flex wp-container-core-columns-is-layout-7387b849 wp-block-columns-is-layout-flex\">\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\" style=\"flex-basis:100%\">\n<div class=\"wp-block-columns is-layout-flex wp-container-core-columns-is-layout-7387b849 wp-block-columns-is-layout-flex\">\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\">\n<p class=\"wp-block-paragraph\">At the start of every project there is a briefing and a meeting with stakeholders. &#8220;Every&#8221; is the key word here, no matter if we&#8217;re baking bread or building a ship, so nothing new here for me. However the stakeholder interview was a bit different. We asked for his hopes, precautions and expectations from the project, discussing how he&#8217;d like to change the world with this app and who it would be for. We essentially put ourselves in his shoes and took a stroll to understand his feelings about the project.<\/p>\n\n\n\n<blockquote class=\"wp-block-quote uagb-heading-text is-layout-flow wp-block-quote-is-layout-flow\"><p><em>We essentially put ourselves in his shoes and took a stroll to understand his feelings about the project.<\/em><\/p><\/blockquote>\n<\/div>\n\n\n\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\">\n<div class=\"wp-block-columns is-layout-flex wp-container-core-columns-is-layout-7387b849 wp-block-columns-is-layout-flex\">\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\">\n<blockquote class=\"wp-block-quote uagb-heading-text is-layout-flow wp-block-quote-is-layout-flow\"><p>The idea:<br>Connecting business partners such as spa-salons, sports centers, event and nightlife events, restaurants etc. with users to share them through social media platforms for group events.<\/p><\/blockquote>\n\n\n\n<p class=\"wp-block-paragraph\"><\/p>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n\n\n\n<h2 class=\"wp-block-heading\"><strong>02.<\/strong> <\/h2>\n\n\n\n<h4 class=\"wp-block-heading\">Competitor Analysis and Interview<\/h4>\n\n\n\n<div class=\"wp-block-columns is-layout-flex wp-container-core-columns-is-layout-7387b849 wp-block-columns-is-layout-flex\">\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\">\n<p class=\"wp-block-paragraph\"> Next, we scouted out the internet for competition: are there similar products out there? Turns out that yes, although there were a few, each has its own upsides and downsides and none of them are ideal. Doing our research, <strong>we interviewed four potential users <\/strong>about their thoughts on an app like this &#8211; to find out the way they live, work, think, choose events, book events, pay for tickets etc. Most importantly, we reviewed their frustrations with similar products and what they would expect of a new app. The user is always right, the product is made for them after all. Turns out, our app would solve a bunch of problems, very nice. <\/p>\n<\/div>\n\n\n\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\">\n<div class=\"wp-block-image is-style-default\"><figure class=\"aligncenter size-full is-resized\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/ux.lietzau.art\/wp-content\/uploads\/2021\/10\/Competitor-Analysis-Group-white.jpg\" alt=\"\" class=\"wp-image-1445\" width=\"454\" height=\"454\" srcset=\"https:\/\/ux.lietzau.art\/wp-content\/uploads\/2021\/10\/Competitor-Analysis-Group-white.jpg 802w, https:\/\/ux.lietzau.art\/wp-content\/uploads\/2021\/10\/Competitor-Analysis-Group-white-300x300.jpg 300w, https:\/\/ux.lietzau.art\/wp-content\/uploads\/2021\/10\/Competitor-Analysis-Group-white-150x150.jpg 150w, https:\/\/ux.lietzau.art\/wp-content\/uploads\/2021\/10\/Competitor-Analysis-Group-white-768x768.jpg 768w\" sizes=\"auto, (max-width: 454px) 100vw, 454px\" \/><\/figure><\/div>\n<\/div>\n<\/div>\n\n\n\n<h2 class=\"wp-block-heading\">Define<\/h2>\n\n\n\n<hr class=\"wp-block-separator is-style-wide\"\/>\n\n\n\n<div class=\"wp-block-group alignfull has-ast-global-color-4-background-color has-background is-layout-flow wp-block-group-is-layout-flow\">\n<h2 class=\"wp-block-heading\"><strong><strong>03.<\/strong> <\/strong><\/h2>\n\n\n\n<h4 class=\"wp-block-heading\">Affinity Map \/ Persona<\/h4>\n\n\n\n<div class=\"wp-block-columns is-layout-flex wp-container-core-columns-is-layout-7387b849 wp-block-columns-is-layout-flex\">\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\">\n<p class=\"wp-block-paragraph\"> After the interviews we exchanged thoughts through the colourful post-it notes on FigmaJam. (Shown very often on UX designer screenshots, so I don&#8217;t see the need to show it here) How did that work out? Lots of contradictory or similar paraphrased opinions. <\/p>\n\n\n\n<blockquote class=\"wp-block-quote is-layout-flow wp-block-quote-is-layout-flow\"><p>We sorted these thoughts up into different buckets, called an &#8220;Affinity map&#8221;.<\/p><\/blockquote>\n\n\n\n<p class=\"wp-block-paragraph\">This is where several <strong><span class=\"has-inline-color has-ast-global-color-8-color\">personas<\/span><\/strong> were born: models of potential users. Male, female, students or working professionals, we wanted to consider the common needs of each one.<\/p>\n<\/div>\n\n\n\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\">\n<div class=\"wp-block-image is-style-default\"><figure class=\"aligncenter size-large is-resized\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/ux.lietzau.art\/wp-content\/uploads\/2021\/09\/use-reherge-edited.jpg\" alt=\"\" class=\"wp-image-1286\" width=\"386\" height=\"385\" srcset=\"https:\/\/ux.lietzau.art\/wp-content\/uploads\/2021\/09\/use-reherge-edited.jpg 905w, https:\/\/ux.lietzau.art\/wp-content\/uploads\/2021\/09\/use-reherge-edited-300x300.jpg 300w, https:\/\/ux.lietzau.art\/wp-content\/uploads\/2021\/09\/use-reherge-edited-150x150.jpg 150w, https:\/\/ux.lietzau.art\/wp-content\/uploads\/2021\/09\/use-reherge-edited-768x768.jpg 768w\" sizes=\"auto, (max-width: 386px) 100vw, 386px\" \/><\/figure><\/div>\n<\/div>\n<\/div>\n\n\n\n<h2 class=\"wp-block-heading\">04. <\/h2>\n\n\n\n<div class=\"wp-block-columns is-layout-flex wp-container-core-columns-is-layout-7387b849 wp-block-columns-is-layout-flex\">\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\">\n<h4 class=\"wp-block-heading\">Empathy Maps <\/h4>\n\n\n\n<p class=\"wp-block-paragraph\">We developed those personas through Empathy Maps &#8211; essentially images with labels that show what each persona would feel, desire, do for a living, love, hate or be frustrated with.<\/p>\n<\/div>\n<\/div>\n\n\n\n<figure class=\"wp-block-image size-full is-resized is-style-zoooom\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/ux.lietzau.art\/wp-content\/uploads\/2021\/09\/2-emotion-maps-copy-3.jpg\" alt=\"\" class=\"wp-image-1085\" width=\"724\" height=\"289\" srcset=\"https:\/\/ux.lietzau.art\/wp-content\/uploads\/2021\/09\/2-emotion-maps-copy-3.jpg 1920w, https:\/\/ux.lietzau.art\/wp-content\/uploads\/2021\/09\/2-emotion-maps-copy-3-300x120.jpg 300w, https:\/\/ux.lietzau.art\/wp-content\/uploads\/2021\/09\/2-emotion-maps-copy-3-1024x409.jpg 1024w, https:\/\/ux.lietzau.art\/wp-content\/uploads\/2021\/09\/2-emotion-maps-copy-3-768x307.jpg 768w, https:\/\/ux.lietzau.art\/wp-content\/uploads\/2021\/09\/2-emotion-maps-copy-3-1536x614.jpg 1536w\" sizes=\"auto, (max-width: 724px) 100vw, 724px\" \/><figcaption>Empathy Map<\/figcaption><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\"><\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><\/p>\n\n\n\n<h2 class=\"wp-block-heading\">05.<\/h2>\n\n\n\n<h4 class=\"wp-block-heading\">task analysis <\/h4>\n\n\n\n<p class=\"wp-block-paragraph\">Based on the personas, we worked on &#8220;Task analysis&#8221;: the emotional journeys of each of the personas as they go through the app&#8217;s main process: starting from finding the event, telling their friends, group voting on who can come and when, through the booking process and finally confirming the purchase. This allowed us to find the exact sources of stress and frustrations the user could experience and plot them out on diagrams.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full is-resized is-style-zoooom\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/ux.lietzau.art\/wp-content\/uploads\/2021\/09\/4-personas.jpg\" alt=\"\" class=\"wp-image-1065\" width=\"709\" height=\"394\" srcset=\"https:\/\/ux.lietzau.art\/wp-content\/uploads\/2021\/09\/4-personas.jpg 1920w, https:\/\/ux.lietzau.art\/wp-content\/uploads\/2021\/09\/4-personas-300x167.jpg 300w, https:\/\/ux.lietzau.art\/wp-content\/uploads\/2021\/09\/4-personas-1024x570.jpg 1024w, https:\/\/ux.lietzau.art\/wp-content\/uploads\/2021\/09\/4-personas-768x427.jpg 768w, https:\/\/ux.lietzau.art\/wp-content\/uploads\/2021\/09\/4-personas-1536x854.jpg 1536w\" sizes=\"auto, (max-width: 709px) 100vw, 709px\" \/><figcaption>Task Analysis<\/figcaption><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\">06. <\/h2>\n\n\n\n<h4 class=\"wp-block-heading\">Task Experience<\/h4>\n\n\n\n<p class=\"wp-block-paragraph\">I compared this to the competing apps and discovered areas of opportunity, where in this journey our app would ease the pain and frustrations that are usually present. Nobody likes pain and would rather avoid it, which is exactly where our product could help out. This helped us understand the goal of the app and any problems related to its development.<\/p>\n\n\n\n<figure class=\"wp-block-gallery columns-1 is-cropped wp-block-gallery-2 is-layout-flex wp-block-gallery-is-layout-flex\"><ul class=\"blocks-gallery-grid\"><li class=\"blocks-gallery-item\"><figure><a href=\"https:\/\/ux.lietzau.art\/wp-content\/uploads\/2021\/09\/6-ask-exp-1-edited-942x1024.jpg\"><img loading=\"lazy\" decoding=\"async\" width=\"942\" height=\"1024\" src=\"https:\/\/ux.lietzau.art\/wp-content\/uploads\/2021\/09\/6-ask-exp-1-edited-942x1024.jpg\" alt=\"\" data-id=\"1110\" class=\"wp-image-1110\" srcset=\"https:\/\/ux.lietzau.art\/wp-content\/uploads\/2021\/09\/6-ask-exp-1-edited-942x1024.jpg 942w, https:\/\/ux.lietzau.art\/wp-content\/uploads\/2021\/09\/6-ask-exp-1-edited-276x300.jpg 276w, https:\/\/ux.lietzau.art\/wp-content\/uploads\/2021\/09\/6-ask-exp-1-edited-768x835.jpg 768w, https:\/\/ux.lietzau.art\/wp-content\/uploads\/2021\/09\/6-ask-exp-1-edited-1412x1536.jpg 1412w, https:\/\/ux.lietzau.art\/wp-content\/uploads\/2021\/09\/6-ask-exp-1-edited-1883x2048.jpg 1883w, https:\/\/ux.lietzau.art\/wp-content\/uploads\/2021\/09\/6-ask-exp-1-edited.jpg 1920w\" sizes=\"auto, (max-width: 942px) 100vw, 942px\" \/><\/a><figcaption class=\"blocks-gallery-item__caption\">Task Experience<\/figcaption><\/figure><\/li><\/ul><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\">07.<\/h2>\n\n\n\n<div class=\"wp-block-columns is-layout-flex wp-container-core-columns-is-layout-7387b849 wp-block-columns-is-layout-flex\">\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\">\n<h4 class=\"wp-block-heading\">Problem Statement<\/h4>\n\n\n\n<p class=\"wp-block-paragraph\">We completed the problem statement &#8211; a sentence boiling down what the app does and how it solves a certain problem. A hypothesis was also made here, about what we think could be done to solve this problem using the app. Now it was time to do exactly that.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Shorter summary crystallized Problem Statement and Hypothesis  <\/p>\n\n\n\n<ul class=\"wp-block-list\"><li>Apnakey needs a way to improve the decision-making process within group booking experiences&nbsp;<\/li><li>We believe that by creating a polling function we will allow users to improve the communication within a group and therefore make quick, hassle-free decisions on venues or activities<\/li><\/ul>\n<\/div>\n\n\n\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\">\n<div class=\"wp-block-image is-style-zoooom\"><figure class=\"alignleft size-large is-resized\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/ux.lietzau.art\/wp-content\/uploads\/2021\/09\/proble-ststement-edited.jpg\" alt=\"\" class=\"wp-image-1109\" width=\"332\" height=\"332\" srcset=\"https:\/\/ux.lietzau.art\/wp-content\/uploads\/2021\/09\/proble-ststement-edited.jpg 1438w, https:\/\/ux.lietzau.art\/wp-content\/uploads\/2021\/09\/proble-ststement-edited-300x300.jpg 300w, https:\/\/ux.lietzau.art\/wp-content\/uploads\/2021\/09\/proble-ststement-edited-1024x1024.jpg 1024w, https:\/\/ux.lietzau.art\/wp-content\/uploads\/2021\/09\/proble-ststement-edited-150x150.jpg 150w, https:\/\/ux.lietzau.art\/wp-content\/uploads\/2021\/09\/proble-ststement-edited-768x769.jpg 768w\" sizes=\"auto, (max-width: 332px) 100vw, 332px\" \/><\/figure><\/div>\n<\/div>\n<\/div>\n\n\n\n<h2 class=\"has-text-align-left wp-block-heading\">Development<\/h2>\n\n\n\n<hr class=\"wp-block-separator is-style-wide\"\/>\n\n\n\n<h2 class=\"wp-block-heading\">08. <\/h2>\n\n\n\n<h4 class=\"wp-block-heading\">User flow<\/h4>\n\n\n\n<p class=\"wp-block-paragraph\">8.1) First we discussed the &#8220;user flow&#8221;, which is the binary (yes\/no) route of the user through the steps of decision making. For each decision there were always two solutions &#8211; a fascinating task.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full is-resized is-style-zoooom\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/ux.lietzau.art\/wp-content\/uploads\/2021\/09\/tom-user-flows.jpg\" alt=\"\" class=\"wp-image-1112\" width=\"736\" height=\"395\" srcset=\"https:\/\/ux.lietzau.art\/wp-content\/uploads\/2021\/09\/tom-user-flows.jpg 1920w, https:\/\/ux.lietzau.art\/wp-content\/uploads\/2021\/09\/tom-user-flows-300x161.jpg 300w, https:\/\/ux.lietzau.art\/wp-content\/uploads\/2021\/09\/tom-user-flows-1024x549.jpg 1024w, https:\/\/ux.lietzau.art\/wp-content\/uploads\/2021\/09\/tom-user-flows-768x412.jpg 768w, https:\/\/ux.lietzau.art\/wp-content\/uploads\/2021\/09\/tom-user-flows-1536x824.jpg 1536w\" sizes=\"auto, (max-width: 736px) 100vw, 736px\" \/><figcaption>User Flow<\/figcaption><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\">8.2) Building on the user flow, we created the Wireframing &#8211; a few different journeys the user can take, as a sequence of hand drawn panels suggesting the screen of a smartphone. That is where we planned the position of buttons, images, text and menus &#8211; a simple black and white diagram of the app. <\/p>\n\n\n\n<div class=\"wp-block-image is-style-zoooom\"><figure class=\"alignleft size-large is-resized\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/ux.lietzau.art\/wp-content\/uploads\/2021\/09\/sketchframing-1024x453.jpg\" alt=\"\" class=\"wp-image-1117\" width=\"743\" height=\"329\" srcset=\"https:\/\/ux.lietzau.art\/wp-content\/uploads\/2021\/09\/sketchframing-1024x453.jpg 1024w, https:\/\/ux.lietzau.art\/wp-content\/uploads\/2021\/09\/sketchframing-300x133.jpg 300w, https:\/\/ux.lietzau.art\/wp-content\/uploads\/2021\/09\/sketchframing-768x340.jpg 768w, https:\/\/ux.lietzau.art\/wp-content\/uploads\/2021\/09\/sketchframing-1536x680.jpg 1536w, https:\/\/ux.lietzau.art\/wp-content\/uploads\/2021\/09\/sketchframing.jpg 1920w\" sizes=\"auto, (max-width: 743px) 100vw, 743px\" \/><\/figure><\/div>\n\n\n\n<div class=\"wp-block-columns is-layout-flex wp-container-core-columns-is-layout-7387b849 wp-block-columns-is-layout-flex\">\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\"><\/div>\n<\/div>\n\n\n\n<h2 class=\"has-text-align-center wp-block-heading\"> <\/h2>\n\n\n\n<p class=\"wp-block-paragraph\"><\/p>\n\n\n\n<h2 class=\"has-text-align-left wp-block-heading\">Deliver<\/h2>\n\n\n\n<hr class=\"wp-block-separator is-style-wide\"\/>\n\n\n\n<h2 class=\"wp-block-heading\">09.<\/h2>\n\n\n\n<h4 class=\"wp-block-heading\">Low fidelity prototype<\/h4>\n\n\n\n<p class=\"wp-block-paragraph\">9.1 Low fidelity framing &#8211; We made  these into Figma for an interactive experience and that&#8217;s the project done&#8230; only in theory for now!<\/p>\n\n\n\n<figure class=\"wp-block-image size-large is-resized is-style-zoooom\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/ux.lietzau.art\/wp-content\/uploads\/2021\/09\/low-fidelity1-1024x693.jpg\" alt=\"\" class=\"wp-image-1124\" width=\"715\" height=\"484\" srcset=\"https:\/\/ux.lietzau.art\/wp-content\/uploads\/2021\/09\/low-fidelity1-1024x693.jpg 1024w, https:\/\/ux.lietzau.art\/wp-content\/uploads\/2021\/09\/low-fidelity1-300x203.jpg 300w, https:\/\/ux.lietzau.art\/wp-content\/uploads\/2021\/09\/low-fidelity1-768x520.jpg 768w, https:\/\/ux.lietzau.art\/wp-content\/uploads\/2021\/09\/low-fidelity1-1536x1040.jpg 1536w, https:\/\/ux.lietzau.art\/wp-content\/uploads\/2021\/09\/low-fidelity1.jpg 1920w\" sizes=\"auto, (max-width: 715px) 100vw, 715px\" \/><\/figure>\n\n\n\n<h4 class=\"wp-block-heading\">Usability testing<\/h4>\n\n\n\n<p class=\"wp-block-paragraph\">9.2) We still had to do the usability test: testing the plan of the app on living specimens. We chose two people to test out the app and share their opinions. We&#8217;ll heard their thoughts on enquiries such as:<\/p>\n\n\n\n<ul class=\"wp-block-list\"><li>Does the project deliver on its promises?<\/li><li>Is it focused in the right direction?<\/li><li>Any feedback on what can be changed or improved?<\/li><li>Is anything missing or getting in the way?<\/li><li>We note down the responses to analyse them further.<\/li><\/ul>\n\n\n\n<blockquote class=\"wp-block-quote has-text-align-left is-layout-flow wp-block-quote-is-layout-flow\"><p>\u201cI would like to share my activities with phone book contacts and add venues to Google Calendar\u201d<br>\u201cI would appreciate to share the map function with my friends when choosing a group hangout\u201d<br>\u201cI really appreciate the poll feature and find it very helpful and handy\u201d<\/p><p><\/p><cite>Users<\/cite><\/blockquote>\n\n\n\n<h6 class=\"wp-block-heading\"><span class=\"has-inline-color has-ast-global-color-0-color\"><strong>The Feedback Was Surprisingly Positive And Very Encouraging, Super Happy About That!<\/strong><\/span><\/h6>\n\n\n\n<h2 class=\"wp-block-heading\">10.<\/h2>\n\n\n\n<h4 class=\"wp-block-heading\">High fidelity prototyping<\/h4>\n\n\n\n<div class=\"wp-block-columns is-layout-flex wp-container-core-columns-is-layout-7387b849 wp-block-columns-is-layout-flex\">\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\">\n<p class=\"wp-block-paragraph\">We adjusted the project based on the feedback from the testers. Next, we dressed up the app&#8217;s current black and white skeleton into colourful, fully featured skin and flesh containing weeks of our work.<\/p>\n\n\n\n<blockquote class=\"wp-block-quote is-layout-flow wp-block-quote-is-layout-flow\"><p>The colour palette was determined from branding, and a few complementary colours are added for a bit of contrast. We set the font style, size and the proportions of app elements. For the behavior we use Figma to handle the interactions.<\/p><\/blockquote>\n\n\n\n<p class=\"wp-block-paragraph\">We demonstrated the project to our client with all specifications and information about its workings.<\/p>\n\n\n\n<h6 class=\"wp-block-heading\"><span class=\"has-inline-color has-ast-global-color-0-color\">Overall, the feedback was very positive. Our solutions are going to be implemented into the app. Success!<\/span><\/h6>\n<\/div>\n\n\n\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\">\n<figure class=\"wp-block-gallery columns-1 is-cropped wp-block-gallery-3 is-layout-flex wp-block-gallery-is-layout-flex\"><ul class=\"blocks-gallery-grid\"><li class=\"blocks-gallery-item\"><figure><a href=\"https:\/\/ux.lietzau.art\/wp-content\/uploads\/2021\/09\/Free_iPhone_11_Pro_Mockup_4-1024x1024.jpg\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"1024\" src=\"https:\/\/ux.lietzau.art\/wp-content\/uploads\/2021\/09\/Free_iPhone_11_Pro_Mockup_4-1024x1024.jpg\" alt=\"\" data-id=\"1250\" class=\"wp-image-1250\" srcset=\"https:\/\/ux.lietzau.art\/wp-content\/uploads\/2021\/09\/Free_iPhone_11_Pro_Mockup_4-1024x1024.jpg 1024w, https:\/\/ux.lietzau.art\/wp-content\/uploads\/2021\/09\/Free_iPhone_11_Pro_Mockup_4-300x300.jpg 300w, https:\/\/ux.lietzau.art\/wp-content\/uploads\/2021\/09\/Free_iPhone_11_Pro_Mockup_4-150x150.jpg 150w, https:\/\/ux.lietzau.art\/wp-content\/uploads\/2021\/09\/Free_iPhone_11_Pro_Mockup_4-768x768.jpg 768w, https:\/\/ux.lietzau.art\/wp-content\/uploads\/2021\/09\/Free_iPhone_11_Pro_Mockup_4.jpg 1500w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/a><\/figure><\/li><\/ul><\/figure>\n<\/div>\n<\/div>\n\n\n\n<p class=\"wp-block-paragraph\"><\/p>\n<\/div>\n\n\n\n<div class=\"wp-block-group alignfull has-ast-global-color-4-background-color has-background is-layout-flow wp-block-group-is-layout-flow\">\n<figure class=\"wp-block-gallery columns-1 is-cropped wp-block-gallery-4 is-layout-flex wp-block-gallery-is-layout-flex\"><ul class=\"blocks-gallery-grid\"><li class=\"blocks-gallery-item\"><figure><a href=\"https:\/\/ux.lietzau.art\/wp-content\/uploads\/2021\/09\/2-high-fidelity-all-big-scaled.jpg\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"493\" src=\"https:\/\/ux.lietzau.art\/wp-content\/uploads\/2021\/09\/2-high-fidelity-all-big-1024x493.jpg\" alt=\"\" data-id=\"1265\" data-full-url=\"https:\/\/ux.lietzau.art\/wp-content\/uploads\/2021\/09\/2-high-fidelity-all-big-scaled.jpg\" data-link=\"https:\/\/ux.lietzau.art\/index.php\/projects\/2-high-fidelity-all-big\/\" class=\"wp-image-1265\" srcset=\"https:\/\/ux.lietzau.art\/wp-content\/uploads\/2021\/09\/2-high-fidelity-all-big-1024x493.jpg 1024w, https:\/\/ux.lietzau.art\/wp-content\/uploads\/2021\/09\/2-high-fidelity-all-big-300x145.jpg 300w, https:\/\/ux.lietzau.art\/wp-content\/uploads\/2021\/09\/2-high-fidelity-all-big-768x370.jpg 768w, https:\/\/ux.lietzau.art\/wp-content\/uploads\/2021\/09\/2-high-fidelity-all-big-1536x740.jpg 1536w, https:\/\/ux.lietzau.art\/wp-content\/uploads\/2021\/09\/2-high-fidelity-all-big-2048x987.jpg 2048w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/a><\/figure><\/li><\/ul><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\"><\/p>\n<\/div>\n\n\n\n<div class=\"wp-block-group alignfull has-ast-global-color-4-background-color has-background is-layout-flow wp-block-group-is-layout-flow\">\n<figure class=\"wp-block-gallery columns-1 is-cropped wp-block-gallery-5 is-layout-flex wp-block-gallery-is-layout-flex\"><ul class=\"blocks-gallery-grid\"><li class=\"blocks-gallery-item\"><figure><a href=\"https:\/\/ux.lietzau.art\/wp-content\/uploads\/2021\/09\/1-high-fidelity-all-big-scaled.jpg\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"493\" src=\"https:\/\/ux.lietzau.art\/wp-content\/uploads\/2021\/09\/1-high-fidelity-all-big-1024x493.jpg\" alt=\"\" data-id=\"1264\" data-full-url=\"https:\/\/ux.lietzau.art\/wp-content\/uploads\/2021\/09\/1-high-fidelity-all-big-scaled.jpg\" data-link=\"https:\/\/ux.lietzau.art\/index.php\/projects\/1-high-fidelity-all-big\/\" class=\"wp-image-1264\" srcset=\"https:\/\/ux.lietzau.art\/wp-content\/uploads\/2021\/09\/1-high-fidelity-all-big-1024x493.jpg 1024w, https:\/\/ux.lietzau.art\/wp-content\/uploads\/2021\/09\/1-high-fidelity-all-big-300x145.jpg 300w, https:\/\/ux.lietzau.art\/wp-content\/uploads\/2021\/09\/1-high-fidelity-all-big-768x370.jpg 768w, https:\/\/ux.lietzau.art\/wp-content\/uploads\/2021\/09\/1-high-fidelity-all-big-1536x740.jpg 1536w, https:\/\/ux.lietzau.art\/wp-content\/uploads\/2021\/09\/1-high-fidelity-all-big-2048x987.jpg 2048w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/a><\/figure><\/li><\/ul><\/figure>\n<\/div>\n\n\n\n<div class=\"wp-block-group alignfull has-ast-global-color-4-background-color has-background is-layout-flow wp-block-group-is-layout-flow\">\n<h4 class=\"wp-block-heading\">Summary<\/h4>\n\n\n\n<p class=\"has-ast-global-color-0-color has-text-color wp-block-paragraph\"><strong>What did I find most fascinating?<\/strong><\/p>\n\n\n\n<p class=\"wp-block-paragraph\">I was fascinated by creating the persona, especially defining what triggers her frustration and the obstacles to achieving her goal. I like observing and improving the user journey.<\/p>\n<\/div>\n\n\n\n<p class=\"has-ast-global-color-0-color has-text-color wp-block-paragraph\"><strong>What would I change if I were to do this again?<\/strong><\/p>\n\n\n\n<p class=\"wp-block-paragraph\">I would conduct more stakeholder interviews and create more personas. Next I would test two versions of the prototype with more users involved. Then I would compare the results and analyse user&nbsp;feedback and choose the best version. This approach would obviously take more time.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>However, I&#8217;d like to tell the story of the first project where I have used my UX knowledge purposefully More often than not, one is usually part of something bigger. In this case, it was a development team. That&#8217;s pretty good, as in teams it&#8217;s always easier to share your thoughts and experiences. That&#8217;s why [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"site-sidebar-layout":"no-sidebar","site-content-layout":"plain-container","ast-site-content-layout":"default","site-content-style":"default","site-sidebar-style":"default","ast-global-header-display":"","ast-banner-title-visibility":"","ast-main-header-display":"","ast-hfb-above-header-display":"","ast-hfb-below-header-display":"","ast-hfb-mobile-header-display":"","site-post-title":"disabled","ast-breadcrumbs-content":"","ast-featured-img":"disabled","footer-sml-layout":"","ast-disable-related-posts":"","theme-transparent-header-meta":"disabled","adv-header-id-meta":"","stick-header-meta":"","header-above-stick-meta":"","header-main-stick-meta":"","header-below-stick-meta":"","astra-migrate-meta-layouts":"default","ast-page-background-enabled":"default","ast-page-background-meta":{"desktop":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"ast-content-background-meta":{"desktop":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"footnotes":""},"class_list":["post-691","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/ux.lietzau.art\/index.php\/wp-json\/wp\/v2\/pages\/691","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/ux.lietzau.art\/index.php\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/ux.lietzau.art\/index.php\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/ux.lietzau.art\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/ux.lietzau.art\/index.php\/wp-json\/wp\/v2\/comments?post=691"}],"version-history":[{"count":206,"href":"https:\/\/ux.lietzau.art\/index.php\/wp-json\/wp\/v2\/pages\/691\/revisions"}],"predecessor-version":[{"id":1458,"href":"https:\/\/ux.lietzau.art\/index.php\/wp-json\/wp\/v2\/pages\/691\/revisions\/1458"}],"wp:attachment":[{"href":"https:\/\/ux.lietzau.art\/index.php\/wp-json\/wp\/v2\/media?parent=691"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}