{"id":6434,"date":"2024-06-01T15:23:00","date_gmt":"2024-06-01T15:23:00","guid":{"rendered":"https:\/\/digm.drexel.edu\/uxid\/?p=6434"},"modified":"2024-07-18T14:13:14","modified_gmt":"2024-07-18T14:13:14","slug":"clink","status":"publish","type":"post","link":"https:\/\/philsinatra.net\/branches\/uxid\/2024\/06\/01\/clink\/","title":{"rendered":"Clink"},"content":{"rendered":"\n<h2><strong>Overview<br><\/strong> <\/h2>\n\n\n\n<p>\nClink is an app designed to help new drinkers find cocktails to try at the bar. Our team of 5 created it as our UX design senior capstone project. It was inspired from a shared struggle of never knowing what to order when we\u2019d go out.\n<\/p>\n\n\n\n<p>Timeline: 9 months<\/p>\n\n\n\n<p>Software: Figma, Illustrator, Midjourney<\/p>\n\n\n\n<p>Team &amp; Roles:<\/p>\n\n\n\n<ul><li>\nSteven McInerney \u2014 Project Lead &amp; UI Design\n<\/li><li>\nQuinn Khuc \u2014 UX Research &amp; UX Design\n<\/li><li>\nSylar Li \u2014 UX Design &amp; UX Research\n<\/li><li>\nChristine Yim \u2014 UI Design &amp; Graphic Design\n<\/li><li>\nAndrew Lenehan \u2014 Content Lead &amp; Graphic Design\n<\/li><\/ul>\n\n\n\n<h2><strong>Context &amp; Problem<br><\/strong> <\/h2>\n\n\n\n<p>\nWe found that new drinkers often struggled with ordering drinks at the bar. This struggle stemmed from them;\n<\/p>\n\n\n\n<ul><li>\nFeeling overwhelmed by the vast variety of drinks \n<\/li><li>\nBeing unfamiliar with their own preferences\n<\/li><li>\nLacking the knowledge of cocktails &amp; their ingredients\n<\/li><\/ul>\n\n\n\n<h2><strong>User Research Process<br><\/strong> <\/h2>\n\n\n\n<p>\nWe first had created social media posts to validate this problem. Of the 156 who commented, 84% of them said this was a normal issue for first time bar-goers to have.\n<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" width=\"998\" height=\"654\" src=\"https:\/\/digm.drexel.edu\/uxid\/wp-content\/uploads\/2024\/06\/image2-2.png\" alt=\"\" class=\"wp-image-6467\" title=\"image_tooltip\" srcset=\"https:\/\/philsinatra.net\/branches\/uxid\/wp-content\/uploads\/2024\/06\/image2-2.png 998w, https:\/\/philsinatra.net\/branches\/uxid\/wp-content\/uploads\/2024\/06\/image2-2-300x197.png 300w, https:\/\/philsinatra.net\/branches\/uxid\/wp-content\/uploads\/2024\/06\/image2-2-768x503.png 768w\" sizes=\"(max-width: 998px) 100vw, 998px\" \/><\/figure>\n\n\n\n<p>\nWe then sent out a survey to determine our target audience of 21 to 28-year-olds. The questions focused on their general age and experience level with cocktails.\n<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" width=\"998\" height=\"560\" src=\"https:\/\/digm.drexel.edu\/uxid\/wp-content\/uploads\/2024\/06\/image3-2.png\" alt=\"\" class=\"wp-image-6468\" title=\"image_tooltip\" srcset=\"https:\/\/philsinatra.net\/branches\/uxid\/wp-content\/uploads\/2024\/06\/image3-2.png 998w, https:\/\/philsinatra.net\/branches\/uxid\/wp-content\/uploads\/2024\/06\/image3-2-300x168.png 300w, https:\/\/philsinatra.net\/branches\/uxid\/wp-content\/uploads\/2024\/06\/image3-2-768x431.png 768w\" sizes=\"(max-width: 998px) 100vw, 998px\" \/><\/figure>\n\n\n\n<p>\nWe finally conducted user interviews with 25 participants. These helped us to better understand our target audiences\u2019 process of trying to order a drink.\n<\/p>\n\n\n\n<h2><strong>User Research Takeaways<br><\/strong><i>From our research&#8230;<\/i><\/h2>\n\n\n\n<ul><li>90% of inexperienced drinkers said they had trouble deciding what to order.\n<\/li><li>3 out of 4 respondent drinkers were eager to learn more about cocktails.\n<\/li><\/ul>\n\n\n\n<p><i>What people said&#8230;<\/i><\/p>\n\n\n\n<p>\n\u201cI was intimidated when I went to the bar for the first couple of years. I never really knew what to order&#8230;\u201d\n<\/p>\n\n\n\n<p>\n\u201cI get overwhelmed by the many drink options. I wish menus provided more information, like whether a drink is sweet or salty, as I usually just guess from the ingredients&#8230;\u201d\n<\/p>\n\n\n\n<p>\nFrom these takeaways, we had a clear idea of the problem, and who we were solving it for.\n<\/p>\n\n\n\n<h2><strong>Features &amp; Taskflows<\/strong><br> <\/h2>\n\n\n\n<p>\nWe conducted competitor analysis, NUF analysis, and an effort\/impact matrix. One takeaway was that no existing apps were offering a solution similar to ours. We also determined the <b>8 MVP Features<\/b> that would drive the underpinnings and design of our prototype.\n<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" width=\"1024\" height=\"576\" src=\"https:\/\/digm.drexel.edu\/uxid\/wp-content\/uploads\/2024\/06\/image4-2-1024x576.png\" alt=\"\" class=\"wp-image-6458\" title=\"image_tooltip\" srcset=\"https:\/\/philsinatra.net\/branches\/uxid\/wp-content\/uploads\/2024\/06\/image4-2-1024x576.png 1024w, https:\/\/philsinatra.net\/branches\/uxid\/wp-content\/uploads\/2024\/06\/image4-2-300x169.png 300w, https:\/\/philsinatra.net\/branches\/uxid\/wp-content\/uploads\/2024\/06\/image4-2-768x432.png 768w, https:\/\/philsinatra.net\/branches\/uxid\/wp-content\/uploads\/2024\/06\/image4-2-1536x864.png 1536w, https:\/\/philsinatra.net\/branches\/uxid\/wp-content\/uploads\/2024\/06\/image4-2-1440x810.png 1440w, https:\/\/philsinatra.net\/branches\/uxid\/wp-content\/uploads\/2024\/06\/image4-2.png 1920w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p>\nThese <b>8 Features<\/b> allowed us to build out our app\u2019s main task flows, and the sitemap of main screens that would be present.\n<\/p>\n\n\n\n<p>\nWe then had each member complete wireframe sketches that incorporated the features, prior to prototyping.\n<\/p>\n\n\n\n<h3><strong>Prototype Iterations<br><\/strong> <\/h3>\n\n\n\n<p>\nWe built out every stage of our prototype in Figma.\n<\/p>\n\n\n\n<p>\nFor the low-fidelity screens, we focused on the key interaction points of our layouts. We conducted numerous usability tests to confirm our structure and approach.\n<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" width=\"1024\" height=\"671\" src=\"https:\/\/digm.drexel.edu\/uxid\/wp-content\/uploads\/2024\/06\/image5-2-1024x671.png\" alt=\"\" class=\"wp-image-6459\" title=\"image_tooltip\" srcset=\"https:\/\/philsinatra.net\/branches\/uxid\/wp-content\/uploads\/2024\/06\/image5-2-1024x671.png 1024w, https:\/\/philsinatra.net\/branches\/uxid\/wp-content\/uploads\/2024\/06\/image5-2-300x197.png 300w, https:\/\/philsinatra.net\/branches\/uxid\/wp-content\/uploads\/2024\/06\/image5-2-768x503.png 768w, https:\/\/philsinatra.net\/branches\/uxid\/wp-content\/uploads\/2024\/06\/image5-2-1536x1007.png 1536w, https:\/\/philsinatra.net\/branches\/uxid\/wp-content\/uploads\/2024\/06\/image5-2-1440x944.png 1440w, https:\/\/philsinatra.net\/branches\/uxid\/wp-content\/uploads\/2024\/06\/image5-2.png 1648w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p>\nFor our mid-fidelity screens, we applied styling. We also had to make crucial adjustments to the way drinks were displayed, and how drink collections were created. Additionally, users were confused by how they \u201cliked\u201d drinks, so we revised that flow as well.\n<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" width=\"1024\" height=\"671\" src=\"https:\/\/digm.drexel.edu\/uxid\/wp-content\/uploads\/2024\/06\/image6-2-1024x671.png\" alt=\"\" class=\"wp-image-6460\" title=\"image_tooltip\" srcset=\"https:\/\/philsinatra.net\/branches\/uxid\/wp-content\/uploads\/2024\/06\/image6-2-1024x671.png 1024w, https:\/\/philsinatra.net\/branches\/uxid\/wp-content\/uploads\/2024\/06\/image6-2-300x197.png 300w, https:\/\/philsinatra.net\/branches\/uxid\/wp-content\/uploads\/2024\/06\/image6-2-768x503.png 768w, https:\/\/philsinatra.net\/branches\/uxid\/wp-content\/uploads\/2024\/06\/image6-2-1536x1007.png 1536w, https:\/\/philsinatra.net\/branches\/uxid\/wp-content\/uploads\/2024\/06\/image6-2-1440x944.png 1440w, https:\/\/philsinatra.net\/branches\/uxid\/wp-content\/uploads\/2024\/06\/image6-2.png 1648w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<h3>\n<strong>Visual Design<br><\/strong>\n<\/h3>\n\n\n\n<p>\nOur design direction was driven by the idea of minimal intrusion. We wanted our app to enhance our users\u2019 bar-going experience, without disrupting it.\n<\/p>\n\n\n\n<p>\nThese were the fundamental components to our design philosophy;\n<\/p>\n\n\n\n<ul><li>\n<b>Dark mode interface<\/b>, for clear viewing in dimly lit bars without disruption.\n<\/li><li>\n<b>Photo driven<\/b>, since we found that users choose drinks based on their appearance.\n<\/li><li>\n<b>AI imagery<\/b>, we generated all of our drink images in Midjourney, to ensure a cohesive look.\n<\/li><\/ul>\n\n\n\n<p>\nWe also created an entire <a href=\"https:\/\/www.figma.com\/design\/n47FMmKnDYaQD4SH0Ugpab\/Design-System?node-id=0-1&amp;t=SkzVKKoJcO7TTMaZ-1\" target=\"_blank\" rel=\"noopener\">design system<\/a> to house all our app\u2019s finalized components, styling guidelines, and content.\n<\/p>\n\n\n\n<h2><strong>Solution<br><\/strong> <\/h2>\n\n\n\n<p>\nOur solution was an app called Clink. Our final interactive prototype was a culmination of our design phases and research. It was rebuilt from the ground up using our design system.\n<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" width=\"1024\" height=\"673\" src=\"https:\/\/digm.drexel.edu\/uxid\/wp-content\/uploads\/2024\/06\/image7-2-1024x673.png\" alt=\"\" class=\"wp-image-6461\" title=\"image_tooltip\" srcset=\"https:\/\/philsinatra.net\/branches\/uxid\/wp-content\/uploads\/2024\/06\/image7-2-1024x673.png 1024w, https:\/\/philsinatra.net\/branches\/uxid\/wp-content\/uploads\/2024\/06\/image7-2-300x197.png 300w, https:\/\/philsinatra.net\/branches\/uxid\/wp-content\/uploads\/2024\/06\/image7-2-768x505.png 768w, https:\/\/philsinatra.net\/branches\/uxid\/wp-content\/uploads\/2024\/06\/image7-2.png 1370w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p>\nUsers first complete the onboarding, in which they select their dietary restrictions, as well as their liquor and taste preferences. We prioritized the use of a more approachable term such as \u201ctaste\u201d since new drinkers would be more familiar with it.\n<\/p>\n\n\n\n<figure class=\"wp-block-video\"><video controls src=\"https:\/\/digm.drexel.edu\/uxid\/wp-content\/uploads\/2024\/06\/image8.mp4\"><\/video><\/figure>\n\n\n\n<p>\nUsers are presented with 6 daily personalized drink recommendations. These are determined by how the user interacts with each drink. Ingredients and flavors from drinks they like are recommended more frequently, while elements from disliked drinks will appear less. Users can also share and save drinks to collections as well.\n<\/p>\n\n\n\n<figure class=\"wp-block-video\"><video controls src=\"https:\/\/digm.drexel.edu\/uxid\/wp-content\/uploads\/2024\/06\/image9.mp4\"><\/video><\/figure>\n\n\n\n<p>\nThe profile centers on three personalized tags which are generated based on a user\u2019s liked drink activity. It also features a History tab, where liked drink cards are easily revisited, and a Collections tab for creating and managing created and saved drink collections.\n<\/p>\n\n\n\n<figure class=\"wp-block-video\"><video controls src=\"https:\/\/digm.drexel.edu\/uxid\/wp-content\/uploads\/2024\/06\/image10.mp4\"><\/video><\/figure>\n\n\n\n<p>\nUsers can also search for cocktails manually. With autocomplete and filtering, they can explore new drinks and collections effortlessly.\n<\/p>\n\n\n\n<h2><strong>Results<br><\/strong> <\/h2>\n\n\n\n<p>\nOur team demoed Clink at Westphal&#8217;s Digital Media Senior Showcase &amp; Expo. We had over 40 guests come up to our booth to try out our <a href=\"https:\/\/www.figma.com\/proto\/OdgVnzTTltp6U8BwHTjMAz\/High-Fi-Prototype?page-id=0%3A1&amp;node-id=189-1469&amp;viewport=-117%2C384%2C0.06&amp;t=cKeAFFM5dZE6DrOL-1&amp;scaling=scale-down&amp;content-scaling=fixed&amp;starting-point-node-id=189%3A1466&amp;show-proto-sidebar=1\" target=\"_blank\" rel=\"noopener\">live prototype<\/a>, asking if they could download the app. 47 people signed up for our newsletter, to follow the development and future launch of Clink.\n<\/p>\n\n\n\n<p> We were tremendously proud of the outcome. Our level of polish, and the nearly unanimous excitement that test participants \/ showcase guests had towards our prototype have pushed us to pursue <a href=\"https:\/\/mailchi.mp\/a9ae8380d06f\/clink\" target=\"_blank\" rel=\"noopener\">further development<\/a>. <\/p>\n\n\n\n<figure class=\"wp-block-embed is-type-video is-provider-youtube wp-block-embed-youtube wp-embed-aspect-16-9 wp-has-aspect-ratio\"><div class=\"wp-block-embed__wrapper\">\n<iframe loading=\"lazy\"  id=\"_ytid_43480\"  width=\"326\" height=\"183\"  data-origwidth=\"326\" data-origheight=\"183\" src=\"https:\/\/www.youtube.com\/embed\/jhJJBh9rsgc?enablejsapi=1&#038;autoplay=0&#038;cc_load_policy=0&#038;cc_lang_pref=&#038;iv_load_policy=1&#038;loop=0&#038;modestbranding=0&#038;rel=1&#038;fs=1&#038;playsinline=0&#038;autohide=2&#038;theme=dark&#038;color=red&#038;controls=1&#038;\" class=\"__youtube_prefs__  epyt-is-override  no-lazyload\" title=\"YouTube player\"  allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture\" allowfullscreen data-no-lazy=\"1\" data-skipgform_ajax_framebjll=\"\"><\/iframe>\n<\/div><\/figure>\n","protected":false},"excerpt":{"rendered":"<p>Overview Clink is an app designed to help new drinkers find cocktails to try at the bar. Our team of 5 created it as our UX design senior capstone project. It was inspired from a shared struggle of never knowing what to order when we\u2019d go out. Timeline: 9 months &hellip;<\/p>\n","protected":false},"author":12,"featured_media":6489,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":[],"categories":[62,11,18,9,2],"tags":[24],"_links":{"self":[{"href":"https:\/\/philsinatra.net\/branches\/uxid\/wp-json\/wp\/v2\/posts\/6434"}],"collection":[{"href":"https:\/\/philsinatra.net\/branches\/uxid\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/philsinatra.net\/branches\/uxid\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/philsinatra.net\/branches\/uxid\/wp-json\/wp\/v2\/users\/12"}],"replies":[{"embeddable":true,"href":"https:\/\/philsinatra.net\/branches\/uxid\/wp-json\/wp\/v2\/comments?post=6434"}],"version-history":[{"count":11,"href":"https:\/\/philsinatra.net\/branches\/uxid\/wp-json\/wp\/v2\/posts\/6434\/revisions"}],"predecessor-version":[{"id":6661,"href":"https:\/\/philsinatra.net\/branches\/uxid\/wp-json\/wp\/v2\/posts\/6434\/revisions\/6661"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/philsinatra.net\/branches\/uxid\/wp-json\/wp\/v2\/media\/6489"}],"wp:attachment":[{"href":"https:\/\/philsinatra.net\/branches\/uxid\/wp-json\/wp\/v2\/media?parent=6434"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/philsinatra.net\/branches\/uxid\/wp-json\/wp\/v2\/categories?post=6434"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/philsinatra.net\/branches\/uxid\/wp-json\/wp\/v2\/tags?post=6434"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}