{"id":2,"date":"2020-07-10T16:10:55","date_gmt":"2020-07-10T14:10:55","guid":{"rendered":"http:\/\/pjprojects.de\/?page_id=2"},"modified":"2021-03-09T11:36:58","modified_gmt":"2021-03-09T10:36:58","slug":"watergate","status":"publish","type":"page","link":"https:\/\/pjprojects.de\/?page_id=2","title":{"rendered":""},"content":{"rendered":"\n<div style=\"height:100px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<h2 class=\"has-text-align-center has-text-color wp-block-heading\" style=\"color:#f25164\">Watergate App<\/h2>\n\n\n\n<figure class=\"wp-block-image size-full is-style-default\"><img decoding=\"async\" width=\"2040\" height=\"1147\" src=\"http:\/\/pjprojects.de\/wp-content\/uploads\/2020\/08\/Ohne-Titel2-1.png\" alt=\"\" class=\"wp-image-2212\" srcset=\"https:\/\/pjprojects.de\/wp-content\/uploads\/2020\/08\/Ohne-Titel2-1.png 2040w, https:\/\/pjprojects.de\/wp-content\/uploads\/2020\/08\/Ohne-Titel2-1-300x169.png 300w, https:\/\/pjprojects.de\/wp-content\/uploads\/2020\/08\/Ohne-Titel2-1-1024x576.png 1024w, https:\/\/pjprojects.de\/wp-content\/uploads\/2020\/08\/Ohne-Titel2-1-768x432.png 768w, https:\/\/pjprojects.de\/wp-content\/uploads\/2020\/08\/Ohne-Titel2-1-1536x864.png 1536w, https:\/\/pjprojects.de\/wp-content\/uploads\/2020\/08\/Ohne-Titel2-1-1920x1080.png 1920w\" sizes=\"(max-width: 2040px) 100vw, 2040px\" \/><\/figure>\n\n\n\n<p id=\"bz\" style=\"color:#313131\">&#8222;No long queues, no high admission prices, but good music and a chat function: The Berlin club Watergate opened on Friday on the Augmented Reality platform &#8222;Yes, we&#8217;re open&#8220; and is thus a pioneer in the scene.&#8220;<\/p>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"alignright size-large is-resized\"><img decoding=\"async\" src=\"http:\/\/pjprojects.de\/wp-content\/uploads\/2020\/08\/bz-1024x184.png\" alt=\"\" class=\"wp-image-1087\" width=\"244\" height=\"44\" srcset=\"https:\/\/pjprojects.de\/wp-content\/uploads\/2020\/08\/bz-1024x184.png 1024w, https:\/\/pjprojects.de\/wp-content\/uploads\/2020\/08\/bz-300x54.png 300w, https:\/\/pjprojects.de\/wp-content\/uploads\/2020\/08\/bz-768x138.png 768w, https:\/\/pjprojects.de\/wp-content\/uploads\/2020\/08\/bz.png 1200w\" sizes=\"(max-width: 244px) 100vw, 244px\" \/><\/figure><\/div>\n\n\n\n<div style=\"height:50px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<div class=\"wp-block-columns is-layout-flex wp-container-core-columns-is-layout-9d6595d7 wp-block-columns-is-layout-flex\">\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\" style=\"flex-basis:50.8%\">\n<p class=\"brief\" style=\"font-size:14px;color:#313131; text-align: left;\"><strong>0.5.2020 &#8211; 07.2020<\/strong><br><strong>Brief<\/strong> \/<em> UI &amp; UX For Mobile App<br><\/em>\n<strong>Agency<\/strong> \/<em> Ping Pong Labs GmbH<br><\/em><strong>Client<\/strong> \/<em> Watergate<br><\/em><strong>Role <\/strong>\/<em> UI &amp; UX Designer<br>\n\n\n<br>#UI #UX #sketch #prototyping #styleguide #testing #architecture\n<\/em><\/p>\n<\/div>\n\n\n\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\" style=\"flex-basis:100%\">\n<p class=\"brief-text\" style=\"color:#313131; text-align: left;\">The <strong>coronavirus pandemic<\/strong> forced many cultural institutions to stop or reduce their activities to a minimum. Berlin-based music club <strong>Watergate<\/strong> reacted to this situation with an Augmented Reality platform that enabled a <strong>virtual club experience<\/strong>. This brand-new service was available on desktop and mobile devices (iOS). I created the UI &amp; UX for the app.<\/p>\n<\/div>\n<\/div>\n\n\n\n<figure class=\"wp-block-image size-full\"><img decoding=\"async\" width=\"1744\" height=\"1892\" src=\"http:\/\/pjprojects.de\/wp-content\/uploads\/2020\/08\/blub24.jpg\" alt=\"\" class=\"wp-image-1081\" srcset=\"https:\/\/pjprojects.de\/wp-content\/uploads\/2020\/08\/blub24.jpg 1744w, https:\/\/pjprojects.de\/wp-content\/uploads\/2020\/08\/blub24-277x300.jpg 277w, https:\/\/pjprojects.de\/wp-content\/uploads\/2020\/08\/blub24-944x1024.jpg 944w, https:\/\/pjprojects.de\/wp-content\/uploads\/2020\/08\/blub24-768x833.jpg 768w, https:\/\/pjprojects.de\/wp-content\/uploads\/2020\/08\/blub24-1416x1536.jpg 1416w, https:\/\/pjprojects.de\/wp-content\/uploads\/2020\/08\/blub24-1024x1111.jpg 1024w, https:\/\/pjprojects.de\/wp-content\/uploads\/2020\/08\/blub24-996x1080.jpg 996w\" sizes=\"(max-width: 1744px) 100vw, 1744px\" \/><\/figure>\n\n\n\n<div style=\"height:50px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<h2 class=\"has-text-align-left has-text-color wp-block-heading\" style=\"color:#f25164\">How It Works<\/h2>\n\n\n\n<p class=\"has-text-align-left has-text-color\" style=\"color:#313131\">On the website YWO (Yes, we&#8216; re open) you can<strong> buy a group or single ticket<\/strong>. You will then receive a URL ticket. This allows you to enter the club from a desktop computer or mobile device at the time of an event. In the club, you can listen to music on different floors or chat with guests in the chat room. You can go to the terrace to talk via video. And it is also possible to invite someone to a quiet place for a private chat. A group ticket is like a single ticket, except that you can party alone with friends.<\/p>\n\n\n\n<div style=\"height:50px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<h2 class=\"has-text-align-left has-text-color wp-block-heading\" style=\"color:#f25164\">Process<\/h2>\n\n\n\n<p class=\"has-text-align-left has-text-color\" style=\"color:#313131\">I was responsible for the <strong>UI and UX<\/strong> of the iOS app. After being briefed on general user requirements, technical specifications, guidelines, etc., I started planning the <strong>human-centered design process<\/strong>.<\/p>\n\n\n\n<div style=\"height:20px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<div style=\"height:20px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter size-full is-resized\"><img decoding=\"async\" src=\"http:\/\/pjprojects.de\/wp-content\/uploads\/2020\/11\/watergate_hcd.jpg\" alt=\"\" class=\"wp-image-7136\" width=\"855\" height=\"541\" srcset=\"https:\/\/pjprojects.de\/wp-content\/uploads\/2020\/11\/watergate_hcd.jpg 1889w, https:\/\/pjprojects.de\/wp-content\/uploads\/2020\/11\/watergate_hcd-300x190.jpg 300w, https:\/\/pjprojects.de\/wp-content\/uploads\/2020\/11\/watergate_hcd-1024x648.jpg 1024w, https:\/\/pjprojects.de\/wp-content\/uploads\/2020\/11\/watergate_hcd-768x486.jpg 768w, https:\/\/pjprojects.de\/wp-content\/uploads\/2020\/11\/watergate_hcd-1536x973.jpg 1536w, https:\/\/pjprojects.de\/wp-content\/uploads\/2020\/11\/watergate_hcd-1706x1080.jpg 1706w\" sizes=\"(max-width: 855px) 100vw, 855px\" \/><\/figure><\/div>\n\n\n\n<div style=\"height:40px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<h2 class=\"has-text-align-left has-text-color wp-block-heading\" style=\"color:#f25164\">Planning<\/h2>\n\n\n\n<p class=\"has-text-align-left has-text-color\" style=\"color:#313131\">My UX project plan contained:<\/p>\n\n\n\n<ul class=\"liste wp-block-list\"><li><strong>Quality objectives<\/strong> in respect of user experience and usability.<\/li><li>UX-<strong>Deliverables<\/strong> and related <strong>activities<\/strong>.<\/li><li><strong>Time<\/strong> and <strong>cost<\/strong> plan.<\/li><\/ul>\n\n\n\n<div style=\"height:50px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<h2 class=\"has-text-align-left has-text-color wp-block-heading\" style=\"color:#f25164\">Analysis<\/h2>\n\n\n\n<p class=\"has-text-align-left has-text-color\" style=\"color:#313131\">The first step was to analyze and specify the <strong>context of use<\/strong>. I have supplemented the information available to me with findings from further research. Based on this, a user group profile, an empathy map and an as-is scenario were created.<\/p>\n\n\n\n<div style=\"height:30px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<h3 class=\"has-text-align-left has-text-color wp-block-heading\" style=\"color:#be0e23\">User group profile<\/h3>\n\n\n\n<p class=\"has-text-align-left has-text-color has-background\" style=\"background-color:#eceaea;color:#313131\">People in their younger or middle age. They live primarily in cities and like to go out to bars, clubs or concerts. Sociable and communicative, they love meeting new people. It&#8217;s natural for them to use cell phones to interact and communicate.<\/p>\n\n\n\n<div style=\"height:30px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<h3 class=\"has-text-align-left has-text-color wp-block-heading\" style=\"color:#be0e23\">Empathy map<\/h3>\n\n\n\n<p class=\"has-text-align-left has-text-color\" style=\"color:#313131\">We put ourselves in the shoes of a prototypical YWO guest to capture its feelings, thoughts, and actions. Our goal was to become aware of the <strong>perspective of the club visitor<\/strong>.<\/p>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter size-full is-resized\"><img decoding=\"async\" src=\"http:\/\/pjprojects.de\/wp-content\/uploads\/2020\/10\/empathy-map1.jpg\" alt=\"\" class=\"wp-image-5873\" width=\"848\" height=\"633\" srcset=\"https:\/\/pjprojects.de\/wp-content\/uploads\/2020\/10\/empathy-map1.jpg 1960w, https:\/\/pjprojects.de\/wp-content\/uploads\/2020\/10\/empathy-map1-300x224.jpg 300w, https:\/\/pjprojects.de\/wp-content\/uploads\/2020\/10\/empathy-map1-1024x764.jpg 1024w, https:\/\/pjprojects.de\/wp-content\/uploads\/2020\/10\/empathy-map1-768x573.jpg 768w, https:\/\/pjprojects.de\/wp-content\/uploads\/2020\/10\/empathy-map1-1536x1146.jpg 1536w, https:\/\/pjprojects.de\/wp-content\/uploads\/2020\/10\/empathy-map1-1448x1080.jpg 1448w\" sizes=\"(max-width: 848px) 100vw, 848px\" \/><\/figure><\/div>\n\n\n\n<div style=\"height:20px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<h3 class=\"has-text-align-left has-text-color wp-block-heading\" style=\"color:#be0e23\">As-is scenario<\/h3>\n\n\n\n<p class=\"has-text-align-left has-text-color\" style=\"color:#313131\">In addition, I described a realistic but fictitious user in his context of use, what he <strong>thinks and does<\/strong>. My description was verified and adapted by real people.<\/p>\n\n\n\n<div class=\"wp-block-columns is-layout-flex wp-container-core-columns-is-layout-9d6595d7 wp-block-columns-is-layout-flex\">\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\">\n<p class=\"has-text-align-left has-text-color has-background\" style=\"background-color:#eceaea;color:#313131\">Max is a young architect from Berlin. He loves hanging out with his friends. On weekends, they usually go to a club to listen to cool DJs and meet new people. Because of the coronavirus pandemic, Max stays at home a lot now. He and his friends video conference regularly and sometimes have a beer in front of the screen &#8211; a substitute for the missing parties. Max is looking forward to going out again and having a party.<\/p>\n<\/div>\n<\/div>\n\n\n\n<div style=\"height:50px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<h2 class=\"has-text-align-left has-text-color wp-block-heading\" style=\"color:#f25164\">Requirements<\/h2>\n\n\n\n<p class=\"has-text-align-left has-text-color\" style=\"color:#313131\">The <strong>conditions that the app had to meet<\/strong> had to be verifiable in usability tests. For me, they were also useful as design guidelines to ensure that the app met user expectations.<\/p>\n\n\n\n<p class=\"has-text-align-left has-text-color\" style=\"color:#313131\">I first identified what is necessary for users to achieve goals in their context of use (<strong>1<\/strong>). Based on this, I described what users need to be able to do with the YWO app (<strong>2<\/strong>). Then, I determined the level of usability to meet users&#8216; needs, i.e., the acceptance criteria (<strong>3<\/strong>). Last but not least, I defined the rules that users must follow when performing tasks (<strong>4<\/strong>).<\/p>\n\n\n\n<div style=\"height:20px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<ol class=\"liste wp-block-list\"><li><strong>User need<\/strong>: A guest (user) of a virtual club (context of use), who not only wants to listen to music but also wants to meet people, needs interaction possibilities (prerequisite) in order to get in touch with others (goal).<\/li><li><strong>Qualitative user requirement<\/strong>: Users must be able to interact with other users in a low-threshold, face-to-face manner.<\/li><li><strong>Quantitative user requirement<\/strong>: After using the app during an event, 80% of 20 users must answer &#8222;I agree&#8220; to the statement &#8222;It was easy to get to know people.&#8220; (User experience).<\/li><li><strong>Organizational requirement<\/strong>: Before entering the club, users must confirm that they have read the Terms and Conditions.<\/li><\/ol>\n\n\n\n<div style=\"height:50px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<h2 class=\"has-text-align-left has-text-color wp-block-heading\" style=\"color:#f25164\">Design<\/h2>\n\n\n\n<h3 class=\"has-text-align-left has-text-color wp-block-heading\" style=\"color:#be0e23\">Information architecture<\/h3>\n\n\n\n<p class=\"has-text-align-left has-text-color\" style=\"color:#313131\">As a team, we structured the available information and visualized the path the user had to take through the app. At a very early stage of the process, we wanted to <strong>clarify causalities, uncover logic errors, and simplify the process<\/strong>.<\/p>\n\n\n\n<div class=\"wp-block-columns are-vertically-aligned-center is-layout-flex wp-container-core-columns-is-layout-9d6595d7 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<div class=\"wp-block-image\"><figure class=\"aligncenter size-full\"><img decoding=\"async\" width=\"1458\" height=\"1093\" src=\"http:\/\/pjprojects.de\/wp-content\/uploads\/2020\/08\/ywo_scribble_floor-structure-1.png\" alt=\"\" class=\"wp-image-1113\" srcset=\"https:\/\/pjprojects.de\/wp-content\/uploads\/2020\/08\/ywo_scribble_floor-structure-1.png 1458w, https:\/\/pjprojects.de\/wp-content\/uploads\/2020\/08\/ywo_scribble_floor-structure-1-300x225.png 300w, https:\/\/pjprojects.de\/wp-content\/uploads\/2020\/08\/ywo_scribble_floor-structure-1-1024x768.png 1024w, https:\/\/pjprojects.de\/wp-content\/uploads\/2020\/08\/ywo_scribble_floor-structure-1-768x576.png 768w, https:\/\/pjprojects.de\/wp-content\/uploads\/2020\/08\/ywo_scribble_floor-structure-1-1441x1080.png 1441w\" sizes=\"(max-width: 1458px) 100vw, 1458px\" \/><\/figure><\/div>\n<\/div>\n\n\n\n<div class=\"wp-block-column is-vertically-aligned-center is-layout-flow wp-block-column-is-layout-flow\">\n<div class=\"wp-block-image\"><figure class=\"aligncenter size-full\"><img decoding=\"async\" width=\"1458\" height=\"1093\" src=\"http:\/\/pjprojects.de\/wp-content\/uploads\/2020\/08\/ywo_scribble_floor-structure.png\" alt=\"\" class=\"wp-image-1110\" srcset=\"https:\/\/pjprojects.de\/wp-content\/uploads\/2020\/08\/ywo_scribble_floor-structure.png 1458w, https:\/\/pjprojects.de\/wp-content\/uploads\/2020\/08\/ywo_scribble_floor-structure-300x225.png 300w, https:\/\/pjprojects.de\/wp-content\/uploads\/2020\/08\/ywo_scribble_floor-structure-1024x768.png 1024w, https:\/\/pjprojects.de\/wp-content\/uploads\/2020\/08\/ywo_scribble_floor-structure-768x576.png 768w, https:\/\/pjprojects.de\/wp-content\/uploads\/2020\/08\/ywo_scribble_floor-structure-1441x1080.png 1441w\" sizes=\"(max-width: 1458px) 100vw, 1458px\" \/><\/figure><\/div>\n\n\n\n<p><\/p>\n<\/div>\n<\/div>\n\n\n\n<h3 class=\"has-text-align-left has-text-color wp-block-heading\" style=\"color:#be0e23\">Use scenario<\/h3>\n\n\n\n<p class=\"has-text-align-left has-text-color\" style=\"color:#313131\">Using the use scenarios, I began to describe <strong>how tasks can be done<\/strong> with the envisioned app.<\/p>\n\n\n\n<ul class=\"liste wp-block-list\"><li>A guest enters the virtual club and looks at the music floors. Then the guest goes to the terrace and talks to other guests via video. After a small talk, he invites one person to a quiet place.<\/li><\/ul>\n\n\n\n<div style=\"height:30px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<h3 class=\"has-text-align-left has-text-color wp-block-heading\" style=\"color:#be0e23\">Task model<\/h3>\n\n\n\n<p class=\"has-text-align-left has-text-color\" style=\"color:#313131\">For each task, I listed <strong>the subtasks that the user must complete<\/strong> to achieve his goal. This description should help me later to design the right solution.<\/p>\n\n\n\n<div class=\"wp-block-columns is-layout-flex wp-container-core-columns-is-layout-9d6595d7 wp-block-columns-is-layout-flex\">\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\" style=\"flex-basis:81.9%\">\n<p class=\"has-text-align-left has-text-color\" style=\"color:#313131\"><strong>Setting<\/strong><\/p>\n\n\n\n<ul class=\"liste2 wp-block-list\"><li>Interactive system: YWO app.<\/li><li>User: Person visiting the Watergate.<\/li><li><strong>Task: Invite a person to a quiet place<\/strong>.<\/li><li>Precondition: User has decided to meet other people.<\/li><li>Goal: Get to know someone in person.<\/li><\/ul>\n\n\n\n<p><\/p>\n<\/div>\n\n\n\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\" style=\"flex-basis:66.1%\">\n<p class=\"has-text-color\" style=\"color:#313131\"><strong>Subtasks<\/strong><\/p>\n\n\n\n<ul class=\"wp-block-list\"><li>Check out Watergate club.<\/li><li>Go to the terrace.<\/li><li>Choose a person you want to talk to in private.<\/li><li>Click on the menu in the picture of the person.<\/li><li>Click the button to invite to a quiet place.<\/li><\/ul>\n<\/div>\n<\/div>\n\n\n\n<div style=\"height:30px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<h3 class=\"has-text-align-left has-text-color wp-block-heading\" style=\"color:#be0e23\">Low fidelity prototype<\/h3>\n\n\n\n<p class=\"has-text-align-left has-text-color\" style=\"color:#313131\">After approaching the challenge with sketches, I began building a lo-fi interactive prototype using the Marvel app. This prototype was limited in functionality, but included <strong>basic information and controls<\/strong>. It was intended to illustrate the concept, give a first impression of the design, stimulate constructive discussion, and most importantly, enable <strong>early usability testing<\/strong>. At this stage, feedback could be integrated quickly and easily.<\/p>\n\n\n\n<div class=\"wp-block-columns is-layout-flex wp-container-core-columns-is-layout-9d6595d7 wp-block-columns-is-layout-flex\">\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\">\n<figure class=\"wp-block-image size-full\"><img decoding=\"async\" width=\"1808\" height=\"1278\" src=\"http:\/\/pjprojects.de\/wp-content\/uploads\/2020\/08\/ywo_sketch_rechner.png\" alt=\"\" class=\"wp-image-1099\" srcset=\"https:\/\/pjprojects.de\/wp-content\/uploads\/2020\/08\/ywo_sketch_rechner.png 1808w, https:\/\/pjprojects.de\/wp-content\/uploads\/2020\/08\/ywo_sketch_rechner-300x212.png 300w, https:\/\/pjprojects.de\/wp-content\/uploads\/2020\/08\/ywo_sketch_rechner-1024x724.png 1024w, https:\/\/pjprojects.de\/wp-content\/uploads\/2020\/08\/ywo_sketch_rechner-768x543.png 768w, https:\/\/pjprojects.de\/wp-content\/uploads\/2020\/08\/ywo_sketch_rechner-1536x1086.png 1536w, https:\/\/pjprojects.de\/wp-content\/uploads\/2020\/08\/ywo_sketch_rechner-1528x1080.png 1528w\" sizes=\"(max-width: 1808px) 100vw, 1808px\" \/><\/figure>\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-image size-full\"><img decoding=\"async\" width=\"1808\" height=\"1278\" src=\"http:\/\/pjprojects.de\/wp-content\/uploads\/2020\/08\/ywo_sketch-3.png\" alt=\"\" class=\"wp-image-1108\" srcset=\"https:\/\/pjprojects.de\/wp-content\/uploads\/2020\/08\/ywo_sketch-3.png 1808w, https:\/\/pjprojects.de\/wp-content\/uploads\/2020\/08\/ywo_sketch-3-300x212.png 300w, https:\/\/pjprojects.de\/wp-content\/uploads\/2020\/08\/ywo_sketch-3-1024x724.png 1024w, https:\/\/pjprojects.de\/wp-content\/uploads\/2020\/08\/ywo_sketch-3-768x543.png 768w, https:\/\/pjprojects.de\/wp-content\/uploads\/2020\/08\/ywo_sketch-3-1536x1086.png 1536w, https:\/\/pjprojects.de\/wp-content\/uploads\/2020\/08\/ywo_sketch-3-1528x1080.png 1528w\" sizes=\"(max-width: 1808px) 100vw, 1808px\" \/><\/figure>\n<\/div>\n<\/div>\n\n\n\n<h4 class=\"has-text-align-left wp-block-heading\">Guerilla Tests<\/h4>\n\n\n\n<p class=\"has-text-align-left has-text-color\" style=\"color:#313131\">Guerrilla testing is a great way to get quick feedback. I used this testing strategy in all phases of the project.<\/p>\n\n\n\n<div class=\"wp-block-columns are-vertically-aligned-center is-layout-flex wp-container-core-columns-is-layout-9d6595d7 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\" style=\"flex-basis:75.8%\">\n<ul class=\"liste wp-block-list\"><li><strong>Hypothesis to be tested:<\/strong> I believe that users want to be able to see and select all floors at any time. I will be right if 80% of the users surveyed rate this positively.<\/li><li><strong>Result:<\/strong> Test subjects do not need to see all &#8222;floors&#8220; all the time or be able to select one.<\/li><li><strong>Solution:<\/strong> The buttons have been removed.<\/li><li><strong>New hypothesis:<\/strong> I believe that users want to swipe between floors &#8211; just as they do between guests. I will be right if 80% of the users surveyed rate this positively.<\/li><\/ul>\n<\/div>\n\n\n\n<div class=\"wp-block-column is-vertically-aligned-center is-layout-flow wp-block-column-is-layout-flow\" style=\"flex-basis:30.6%\">\n<div class=\"wp-block-image\"><figure class=\"alignleft size-large is-resized\"><img decoding=\"async\" src=\"http:\/\/pjprojects.de\/wp-content\/uploads\/2020\/10\/ywo_sketch.jpg\" alt=\"\" class=\"wp-image-5750\" width=\"189\" height=\"292\" srcset=\"https:\/\/pjprojects.de\/wp-content\/uploads\/2020\/10\/ywo_sketch.jpg 365w, https:\/\/pjprojects.de\/wp-content\/uploads\/2020\/10\/ywo_sketch-194x300.jpg 194w\" sizes=\"(max-width: 189px) 100vw, 189px\" \/><\/figure><\/div>\n<\/div>\n<\/div>\n\n\n\n<div style=\"height:30px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<h3 class=\"has-text-align-left has-text-color wp-block-heading\" style=\"color:#be0e23\">High fidelity prototype<\/h3>\n\n\n\n<p class=\"has-text-align-left has-text-color\" style=\"color:#313131\">Next, I set to work on a detailed and feature-rich prototype. I used the <strong>iOS design kit<\/strong> and followed the <strong>style guide of the YWO desktop<\/strong> version to ensure consistency between the desktop and mobile version. I also considered general <strong>dialog principles<\/strong> (DIN EN ISO 9241-110), specific<strong> usability principles<\/strong> (Jakob Nielsen&#8217;s 10 Usability Heuristics for User Interface Design) and <strong>application specific principles<\/strong> (iOS Human Interface Guidelines).<\/p>\n\n\n\n<div style=\"height:40px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter size-large\"><img decoding=\"async\" width=\"1024\" height=\"593\" src=\"http:\/\/pjprojects.de\/wp-content\/uploads\/2020\/10\/rr-1024x593.jpg\" alt=\"\" class=\"wp-image-4237\" srcset=\"https:\/\/pjprojects.de\/wp-content\/uploads\/2020\/10\/rr-1024x593.jpg 1024w, https:\/\/pjprojects.de\/wp-content\/uploads\/2020\/10\/rr-300x174.jpg 300w, https:\/\/pjprojects.de\/wp-content\/uploads\/2020\/10\/rr-768x445.jpg 768w, https:\/\/pjprojects.de\/wp-content\/uploads\/2020\/10\/rr-1536x890.jpg 1536w, https:\/\/pjprojects.de\/wp-content\/uploads\/2020\/10\/rr-2048x1186.jpg 2048w, https:\/\/pjprojects.de\/wp-content\/uploads\/2020\/10\/rr-1865x1080.jpg 1865w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure><\/div>\n\n\n\n<div style=\"height:30px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<h3 class=\"has-text-align-left has-text-color wp-block-heading\" style=\"color:#be0e23\">Style guide<\/h3>\n\n\n\n<p class=\"has-text-align-left has-text-color\" style=\"color:#313131\">Style guide for the YWO <strong>iOS app<\/strong>.<\/p>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter size-large\"><img decoding=\"async\" width=\"1024\" height=\"541\" src=\"http:\/\/pjprojects.de\/wp-content\/uploads\/2020\/10\/style-guide-ohne-bilder-1024x541.jpg\" alt=\"\" class=\"wp-image-4235\" srcset=\"https:\/\/pjprojects.de\/wp-content\/uploads\/2020\/10\/style-guide-ohne-bilder-1024x541.jpg 1024w, https:\/\/pjprojects.de\/wp-content\/uploads\/2020\/10\/style-guide-ohne-bilder-300x159.jpg 300w, https:\/\/pjprojects.de\/wp-content\/uploads\/2020\/10\/style-guide-ohne-bilder-768x406.jpg 768w, https:\/\/pjprojects.de\/wp-content\/uploads\/2020\/10\/style-guide-ohne-bilder-1536x812.jpg 1536w, https:\/\/pjprojects.de\/wp-content\/uploads\/2020\/10\/style-guide-ohne-bilder-2048x1082.jpg 2048w, https:\/\/pjprojects.de\/wp-content\/uploads\/2020\/10\/style-guide-ohne-bilder-1920x1014.jpg 1920w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure><\/div>\n\n\n\n<div style=\"height:30px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<h2 class=\"has-text-align-left has-text-color wp-block-heading\" style=\"color:#f25164\">Evaluation<\/h2>\n\n\n\n<p class=\"has-text-align-left has-text-color\" style=\"color:#313131\">With the HiFi prototype, I also wanted to do a more <strong>in-depth usability evaluation<\/strong>. This time, representative users were to complete very specific tasks with the YWO app. The goal was to identify usability issues and measure effectiveness, efficiency and satisfaction.<\/p>\n\n\n\n<div style=\"height:30px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<h3 class=\"has-text-align-left has-text-color wp-block-heading\" style=\"color:#be0e23\">Study design<\/h3>\n\n\n\n<p class=\"has-text-align-left has-text-color\" style=\"color:#313131\">My <strong>test plan<\/strong> included information on usability results, test subjects, approximate duration of each session, frequency, and incentive. In a <strong>test script<\/strong> I described the steps in the test: briefing, pre-session interview, test tasks, and post-session interview. <br><br>The study was designed along questions\/hypotheses and tasks\/scenarios.<\/p>\n\n\n\n<ol class=\"liste wp-block-list\"><li><strong>Question:<\/strong> Can the user invite a guest to a quiet place?<\/li><li><strong>Hypothesis<\/strong>: User easily can invite other guests.<ul><li>Testable: Users understand information\/controls and use them correctly.<\/li><li>Disprovable: User cannot find relevant symbols.<\/li><\/ul><\/li><li><strong>Task<\/strong>: Go to the terrace and invite a guest to a quiet place.<\/li><li><strong>Scenario<\/strong>: You want to check out the people in the club. You visit the floors and finally go to the terrace. There you meet another club-goer (in the test: me). Invite this person to a quiet place.<\/li><\/ol>\n\n\n\n<div style=\"height:30px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<h3 class=\"has-text-align-left has-text-color wp-block-heading\" style=\"color:#be0e23\">Recruitment<\/h3>\n\n\n\n<p class=\"has-text-align-left has-text-color\" style=\"color:#313131\">I recruited <strong>five test persons<\/strong> with matching characteristics and contexts of use &#8211; according to Jakob Nielsen, 5 people already find 85% of usability problems. They were all digital-affine, clubbers, between 20 and 40 years old. The test took place in the user&#8217;s natural environment and lasted about an hour. One exclusion criterion: person is not a clubber.<\/p>\n\n\n\n<div style=\"height:30px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<h3 class=\"has-text-align-left has-text-color wp-block-heading\" style=\"color:#be0e23\">Session<\/h3>\n\n\n\n<p class=\"has-text-align-left has-text-color\" style=\"color:#313131\">My <strong>welcome<\/strong> was followed by a <strong>briefing<\/strong> on the purpose and process of the test, the participant&#8217;s contribution and some formalities. Then there was a <strong>pre-session interview<\/strong>. In this warm-up phase, participants were asked about their background, their experiences as clubbers and with similar apps. Next came the <strong>task part<\/strong>, that is, the question part with scenarios or general and specific tasks. Finally, I conducted a <strong>post-session interview<\/strong> to get an overall impression and answer open questions.<\/p>\n\n\n\n<div style=\"height:30px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<h3 class=\"has-text-align-left has-text-color wp-block-heading\" style=\"color:#be0e23\">Report<\/h3>\n\n\n\n<p class=\"has-text-align-left has-text-color\" style=\"color:#313131\">I made a presentation and report on my findings. It included an executive summary, the test script, the main results including recommendations, and screenshots to complement the descriptions.<\/p>\n\n\n\n<div class=\"wp-block-columns is-layout-flex wp-container-core-columns-is-layout-9d6595d7 wp-block-columns-is-layout-flex\">\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\">\n<figure class=\"wp-block-image size-full\"><img decoding=\"async\" width=\"1103\" height=\"393\" src=\"http:\/\/pjprojects.de\/wp-content\/uploads\/2020\/07\/e1.png\" alt=\"\" class=\"wp-image-873\" srcset=\"https:\/\/pjprojects.de\/wp-content\/uploads\/2020\/07\/e1.png 1103w, https:\/\/pjprojects.de\/wp-content\/uploads\/2020\/07\/e1-300x107.png 300w, https:\/\/pjprojects.de\/wp-content\/uploads\/2020\/07\/e1-1024x365.png 1024w, https:\/\/pjprojects.de\/wp-content\/uploads\/2020\/07\/e1-768x274.png 768w\" sizes=\"(max-width: 1103px) 100vw, 1103px\" \/><\/figure>\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-image size-full\"><img decoding=\"async\" width=\"1102\" height=\"396\" src=\"http:\/\/pjprojects.de\/wp-content\/uploads\/2020\/07\/u2.png\" alt=\"\" class=\"wp-image-869\" srcset=\"https:\/\/pjprojects.de\/wp-content\/uploads\/2020\/07\/u2.png 1102w, https:\/\/pjprojects.de\/wp-content\/uploads\/2020\/07\/u2-300x108.png 300w, https:\/\/pjprojects.de\/wp-content\/uploads\/2020\/07\/u2-1024x368.png 1024w, https:\/\/pjprojects.de\/wp-content\/uploads\/2020\/07\/u2-768x276.png 768w\" sizes=\"(max-width: 1102px) 100vw, 1102px\" \/><\/figure>\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-image size-large\"><img decoding=\"async\" width=\"1024\" height=\"365\" src=\"http:\/\/pjprojects.de\/wp-content\/uploads\/2020\/07\/u3-1024x365.png\" alt=\"\" class=\"wp-image-870\" srcset=\"https:\/\/pjprojects.de\/wp-content\/uploads\/2020\/07\/u3-1024x365.png 1024w, https:\/\/pjprojects.de\/wp-content\/uploads\/2020\/07\/u3-300x107.png 300w, https:\/\/pjprojects.de\/wp-content\/uploads\/2020\/07\/u3-768x274.png 768w, https:\/\/pjprojects.de\/wp-content\/uploads\/2020\/07\/u3.png 1103w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n<\/div>\n<\/div>\n\n\n\n<h4 class=\"has-text-align-left wp-block-heading\"><strong>Usability findings<\/strong><\/h4>\n\n\n\n<p class=\"has-text-align-left has-text-color\" style=\"color:#313131\">Using my criteria, I evaluated from the user&#8217;s perspective. I listed usability problems and positive usability results.<\/p>\n\n\n\n<ul class=\"liste wp-block-list\"><li><strong>Usability problem<\/strong>: Immediate display of own image when entering a floor.<\/li><\/ul>\n\n\n\n<ul class=\"liste wp-block-list\"><li><strong>Positive usability finding:<\/strong> Menu on the image of the people (may remain).<\/li><\/ul>\n\n\n\n<div style=\"height:30px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<h4 class=\"has-text-align-left wp-block-heading\">Recommendations<\/h4>\n\n\n\n<p class=\"has-text-align-left has-text-color\" style=\"color:#313131\">Last but not least, I have listed recommendations, both mine and those of the test persons.<\/p>\n\n\n\n<ul class=\"liste wp-block-list\"><li><strong>My recommendation:<\/strong> &#8222;More Floors&#8220; button to display floor overview &#8211; swiping function is hardly used.<\/li><\/ul>\n\n\n\n<ul class=\"liste wp-block-list\"><li><strong>Good idea from test person:<\/strong> Personal account to collect and share events or music tracks.<\/li><\/ul>\n\n\n\n<div style=\"height:50px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<h2 class=\"has-text-align-left has-text-color wp-block-heading\" style=\"color:#f25164\">Summing up<\/h2>\n\n\n\n<h3 class=\"has-text-align-left has-text-color wp-block-heading\" style=\"color:#be0e23\">Challenge<\/h3>\n\n\n\n<ul class=\"liste wp-block-list\"><li>The navigation system: the YWO app should provide a good experience when the club visitor would move between floors and guests.<\/li><\/ul>\n\n\n\n<div style=\"height:30px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<h3 class=\"has-text-align-left has-text-color wp-block-heading\" style=\"color:#be0e23\">Learning<\/h3>\n\n\n\n<ul class=\"liste wp-block-list\"><li>Creation of an exciting User Interface.<\/li><\/ul>\n\n\n\n<div style=\"height:40px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<p class=\"has-text-align-center has-text-color\" style=\"color:#313131;font-size:40px\"><strong>__<\/strong><\/p>\n\n\n\n<div style=\"height:20px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<p class=\"has-text-align-center has-text-color\" style=\"color:#313131; margin-bottom:0px;\">I want to work with you.<\/p>\n\n\n\n<p class=\"has-text-align-center\"><a href=\"mailto:pauljonczyk@gmail.com\">Email Paul<\/a><\/p>\n\n\n\n<p><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Watergate App &#8222;No long queues, no high admission prices, but good music and a chat function: The Berlin club Watergate opened on Friday on the Augmented Reality platform &#8222;Yes, we&#8217;re open&#8220; and is thus a pioneer in the scene.&#8220; 0.5.2020 &#8211; 07.2020Brief \/ UI &amp; UX For Mobile App Agency \/ Ping Pong Labs GmbHClient&hellip; <br \/> <a class=\"read-more\" href=\"https:\/\/pjprojects.de\/?page_id=2\">Weiterlesen<\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-2","page","type-page","status-publish","hentry"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v22.0 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>Watergate App: My creative impact as UI \/UX Designer<\/title>\n<meta name=\"description\" content=\"For the Augmented Reality platform of the Berlin club Watergate I did the UI \/ UX for the iOS app. Check out my work process here.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/pjprojects.de\/?page_id=2\" \/>\n<meta property=\"og:locale\" content=\"de_DE\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Watergate App: My creative impact as UI \/UX Designer\" \/>\n<meta property=\"og:description\" content=\"For the Augmented Reality platform of the Berlin club Watergate I did the UI \/ UX for the iOS app. Check out my work process here.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/pjprojects.de\/?page_id=2\" \/>\n<meta property=\"og:site_name\" content=\"Paul Jonczyk\" \/>\n<meta property=\"article:modified_time\" content=\"2021-03-09T10:36:58+00:00\" \/>\n<meta property=\"og:image\" content=\"http:\/\/pjprojects.de\/wp-content\/uploads\/2020\/08\/Ohne-Titel2-1.png\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Gesch\u00e4tzte Lesezeit\" \/>\n\t<meta name=\"twitter:data1\" content=\"8\u00a0Minuten\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\/\/pjprojects.de\/?page_id=2\",\"url\":\"https:\/\/pjprojects.de\/?page_id=2\",\"name\":\"Watergate App: My creative impact as UI \/UX Designer\",\"isPartOf\":{\"@id\":\"https:\/\/pjprojects.de\/#website\"},\"datePublished\":\"2020-07-10T14:10:55+00:00\",\"dateModified\":\"2021-03-09T10:36:58+00:00\",\"description\":\"For the Augmented Reality platform of the Berlin club Watergate I did the UI \/ UX for the iOS app. Check out my work process here.\",\"inLanguage\":\"de\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/pjprojects.de\/?page_id=2\"]}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/pjprojects.de\/#website\",\"url\":\"https:\/\/pjprojects.de\/\",\"name\":\"Paul Jonczyk\",\"description\":\"\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/pjprojects.de\/?s={search_term_string}\"},\"query-input\":\"required name=search_term_string\"}],\"inLanguage\":\"de\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Watergate App: My creative impact as UI \/UX Designer","description":"For the Augmented Reality platform of the Berlin club Watergate I did the UI \/ UX for the iOS app. Check out my work process here.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/pjprojects.de\/?page_id=2","og_locale":"de_DE","og_type":"article","og_title":"Watergate App: My creative impact as UI \/UX Designer","og_description":"For the Augmented Reality platform of the Berlin club Watergate I did the UI \/ UX for the iOS app. Check out my work process here.","og_url":"https:\/\/pjprojects.de\/?page_id=2","og_site_name":"Paul Jonczyk","article_modified_time":"2021-03-09T10:36:58+00:00","og_image":[{"url":"http:\/\/pjprojects.de\/wp-content\/uploads\/2020\/08\/Ohne-Titel2-1.png"}],"twitter_card":"summary_large_image","twitter_misc":{"Gesch\u00e4tzte Lesezeit":"8\u00a0Minuten"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/pjprojects.de\/?page_id=2","url":"https:\/\/pjprojects.de\/?page_id=2","name":"Watergate App: My creative impact as UI \/UX Designer","isPartOf":{"@id":"https:\/\/pjprojects.de\/#website"},"datePublished":"2020-07-10T14:10:55+00:00","dateModified":"2021-03-09T10:36:58+00:00","description":"For the Augmented Reality platform of the Berlin club Watergate I did the UI \/ UX for the iOS app. Check out my work process here.","inLanguage":"de","potentialAction":[{"@type":"ReadAction","target":["https:\/\/pjprojects.de\/?page_id=2"]}]},{"@type":"WebSite","@id":"https:\/\/pjprojects.de\/#website","url":"https:\/\/pjprojects.de\/","name":"Paul Jonczyk","description":"","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/pjprojects.de\/?s={search_term_string}"},"query-input":"required name=search_term_string"}],"inLanguage":"de"}]}},"_links":{"self":[{"href":"https:\/\/pjprojects.de\/index.php?rest_route=\/wp\/v2\/pages\/2","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/pjprojects.de\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/pjprojects.de\/index.php?rest_route=\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/pjprojects.de\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/pjprojects.de\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=2"}],"version-history":[{"count":1661,"href":"https:\/\/pjprojects.de\/index.php?rest_route=\/wp\/v2\/pages\/2\/revisions"}],"predecessor-version":[{"id":7616,"href":"https:\/\/pjprojects.de\/index.php?rest_route=\/wp\/v2\/pages\/2\/revisions\/7616"}],"wp:attachment":[{"href":"https:\/\/pjprojects.de\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=2"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}