https://alexkoehl.work Alex Koehl Design & Drinks Wed, 12 May 2021 17:29:16 +0000 https://alexkoehl.work en https://alexkoehl.work/CONTACT-ABOUT Mon, 13 Apr 2020 18:47:08 +0000 Alex Koehl Design & Drinks https://alexkoehl.work/CONTACT-ABOUT Hey y’all, I'm Alex...I’m a bartender and designer based in Brooklyn, NY. I’m currently working at Golden Ratio in the Clinton Hill neighborhood of Brooklyn. I also work freelance as a UX/UI designer. &nbsp; Feel free to reach out to me with questions or comments through any one (or all, why not?) of the following social channels, or just by email. ︎Email︎LinkedIn ︎Design Instagram ︎Drinks Instagram ︎︎︎Request my resume ︎︎︎Spotify <img width="3600" height="2403" width_o="3600" height_o="2403" data-src="https://freight.cargo.site/t/original/i/3e0e8fc06f47c639804a883ec5a129ac1258e9bd0496bfd59f51d7f59ff09e52/PorterGabi-5170.jpg" data-mid="233927008" border="0" src="https://freight.cargo.site/w/1000/i/3e0e8fc06f47c639804a883ec5a129ac1258e9bd0496bfd59f51d7f59ff09e52/PorterGabi-5170.jpg" />Image rights: Widow Jane and Gabi Porter https://alexkoehl.work/Work-Index Mon, 13 Apr 2020 18:47:08 +0000 Alex Koehl Design & Drinks https://alexkoehl.work/Work-Index Design https://alexkoehl.work/Drinks Mon, 13 Apr 2020 18:47:08 +0000 Alex Koehl Design & Drinks https://alexkoehl.work/Drinks Drinks <img width="1082" height="852" width_o="1082" height_o="852" data-src="https://freight.cargo.site/t/original/i/031b3766880c9dd66dfd2fc9ea1133012aa530caaa320ea3e3d37e77f543ceda/MenuShot.png" data-mid="191513439" border="0" src="https://freight.cargo.site/w/1000/i/031b3766880c9dd66dfd2fc9ea1133012aa530caaa320ea3e3d37e77f543ceda/MenuShot.png" /> Nixta Summer ‘23Menu Dev <img width="793" height="1224" width_o="793" height_o="1224" data-src="https://freight.cargo.site/t/original/i/b7f9d5b73c94f774f880db1c290143cf32d283beef27fd117c99449a9c94e404/CRUSH_MENU_2.png" data-mid="224448176" border="0" src="https://freight.cargo.site/w/793/i/b7f9d5b73c94f774f880db1c290143cf32d283beef27fd117c99449a9c94e404/CRUSH_MENU_2.png" /> Mini MenusMenu Dev <img width="4032" height="3024" width_o="4032" height_o="3024" data-src="https://freight.cargo.site/t/original/i/41dd053699b39fcf4a5833aa32f9b2fed8a2dd17beef9c0be8a2ab4494369834/IMG_9031.JPG" data-mid="191513440" border="0" src="https://freight.cargo.site/w/1000/i/41dd053699b39fcf4a5833aa32f9b2fed8a2dd17beef9c0be8a2ab4494369834/IMG_9031.JPG" /> Original DrinksRecipes <img width="4032" height="3024" width_o="4032" height_o="3024" data-src="https://freight.cargo.site/t/original/i/546e07dc3a3a7026ead9d3f1fc2e63f8192eb1ae7fbbc0029145a42e62140764/IMG_9689.jpg" data-mid="191513437" border="0" src="https://freight.cargo.site/w/1000/i/546e07dc3a3a7026ead9d3f1fc2e63f8192eb1ae7fbbc0029145a42e62140764/IMG_9689.jpg" /> Amari + Other LiqueursProducts https://alexkoehl.work/Capstone-Progress-Rotting-Well Sat, 20 Mar 2021 19:47:56 +0000 Alex Koehl Design & Drinks https://alexkoehl.work/Capstone-Progress-Rotting-Well Rotting Well MAY 2021 UX/UI and Development St. Louis, MO Typefaces: Tiny by Velvetyne Type Foundry and Epilogue by&nbsp;Tyler Finck, ETC <img width="3360" height="1894" width_o="3360" height_o="1894" data-src="https://freight.cargo.site/t/original/i/4740024a9b97c91fc5bea2ebe2c3bb44dd405a7512b2e679f08054885c91f7ec/Screen-Shot-2021-05-11-at-10.53.14-AM.png" data-mid="108111391" border="0" src="https://freight.cargo.site/w/1000/i/4740024a9b97c91fc5bea2ebe2c3bb44dd405a7512b2e679f08054885c91f7ec/Screen-Shot-2021-05-11-at-10.53.14-AM.png" /> TOPIC: COMPOSTING For our senior capstone project, we are prompted to generate a project in the media of our choosing on a topic of our choosing. Climate change is one of my largest out-of-class interests, and as it relates to our food system in particular. Composting is crucial to reducing the emissions of improper food waste, a more unknown source of methane gas, and the process seems intimidating. My project is aimed at making proper food waste disposal accessible and approachable to busy, city livers. RESEARCH To understand the problem space more in-depth, I had to conduct some primary and secondary research on composting, and specifically in cities. I talked to several recent grads in cities about their composting hesitations and barriers, as well as educating myself on the best ways to compost depending on user resources. DESIGN JUSTICE <img width="1756" height="518" width_o="1756" height_o="518" data-src="https://freight.cargo.site/t/original/i/1d45b7ac3800bc0933d414d58ec13a6e6012be4867a0dd2061ea37dd6c8f1ae3/Screen-Shot-2021-03-20-at-2.58.47-PM.png" data-mid="102697686" border="0" src="https://freight.cargo.site/w/1000/i/1d45b7ac3800bc0933d414d58ec13a6e6012be4867a0dd2061ea37dd6c8f1ae3/Screen-Shot-2021-03-20-at-2.58.47-PM.png" /> I started reading Design Justice during my winter break and was further introduced in UX Research class this semester. I wanted to ensure that my capstone considered the Design Justice Network Principles to have to most sustainable and equitable impact. In particular, I wanted to explore what resources already exist in this space and attempt to uplift those projects and practices in my final site. CONTENT STRUCTURING As my topic and content offerings narrowed from the impacts of food waste, to composting in a city, to composting specifically in NYC, my content structure had to adjust. On the right on the four versions of sitemaps I’ve gone through as the topic evolved. V.4 is the final sitemap. <img width="1522" height="1835" width_o="1522" height_o="1835" data-src="https://freight.cargo.site/t/original/i/56c30afe7c38f53c2336bd7f25f1c6de36cf37475af83c9161d3c48c0f6aaaeb/Sitemap-1.jpg" data-mid="102698862" border="0" data-scale="54" src="https://freight.cargo.site/w/1000/i/56c30afe7c38f53c2336bd7f25f1c6de36cf37475af83c9161d3c48c0f6aaaeb/Sitemap-1.jpg" /> <img width="1522" height="1835" width_o="1522" height_o="1835" data-src="https://freight.cargo.site/t/original/i/8cdfeb7f99496af40ae7198e48cc9958a3ab815eb94b94d6a20ced2f34cd067e/Sitemap-2.jpg" data-mid="102698868" border="0" src="https://freight.cargo.site/w/1000/i/8cdfeb7f99496af40ae7198e48cc9958a3ab815eb94b94d6a20ced2f34cd067e/Sitemap-2.jpg" /> <img width="1522" height="1835" width_o="1522" height_o="1835" data-src="https://freight.cargo.site/t/original/i/0943cda65cb935c489b4c76df867b3f75cc6e0044ff4d3c0465f508a43b18e9b/Sitemap-3.jpg" data-mid="102698871" border="0" src="https://freight.cargo.site/w/1000/i/0943cda65cb935c489b4c76df867b3f75cc6e0044ff4d3c0465f508a43b18e9b/Sitemap-3.jpg" /> <img width="1522" height="1835" width_o="1522" height_o="1835" data-src="https://freight.cargo.site/t/original/i/fe3a97bab87b0402f96455304a4acc2eb64ee3c6f2c8149bd36a2f0d75f78b24/Sitemap-4.jpg" data-mid="108139610" border="0" src="https://freight.cargo.site/w/1000/i/fe3a97bab87b0402f96455304a4acc2eb64ee3c6f2c8149bd36a2f0d75f78b24/Sitemap-4.jpg" /> SKETCHING <img width="3024" height="2902" width_o="3024" height_o="2902" data-src="https://freight.cargo.site/t/original/i/2fef5d70fa73ed34c51ba72645aed0dcb57ac2088b207883e09ee9e5ae928f2a/skecth2.jpg" data-mid="103915995" border="0" src="https://freight.cargo.site/w/1000/i/2fef5d70fa73ed34c51ba72645aed0dcb57ac2088b207883e09ee9e5ae928f2a/skecth2.jpg" /> <img width="3024" height="3396" width_o="3024" height_o="3396" data-src="https://freight.cargo.site/t/original/i/1cc8ec1638eb48cd3603290dafce362362f8d961263ccf87463f28915883756f/skecth1.jpg" data-mid="103915994" border="0" src="https://freight.cargo.site/w/1000/i/1cc8ec1638eb48cd3603290dafce362362f8d961263ccf87463f28915883756f/skecth1.jpg" /> <img width="2828" height="3420" width_o="2828" height_o="3420" data-src="https://freight.cargo.site/t/original/i/0ca3fa57a42f197e0d4d4bdfba20ad0abe58cea3189a1cc39a6bcf0d777b48c7/skecth3.jpg" data-mid="103915997" border="0" src="https://freight.cargo.site/w/1000/i/0ca3fa57a42f197e0d4d4bdfba20ad0abe58cea3189a1cc39a6bcf0d777b48c7/skecth3.jpg" /> <img width="3024" height="3531" width_o="3024" height_o="3531" data-src="https://freight.cargo.site/t/original/i/fe307b4f6867b7c94abc94a8225e7f77e38b247d8157e71e6f3eba5708c0a507/skecth4.jpg" data-mid="103915998" border="0" src="https://freight.cargo.site/w/1000/i/fe307b4f6867b7c94abc94a8225e7f77e38b247d8157e71e6f3eba5708c0a507/skecth4.jpg" /> <img width="1125" height="1445" width_o="1125" height_o="1445" data-src="https://freight.cargo.site/t/original/i/dde3a42bb1d5fa2847665bcf3314b13e4c1cd7cf442dfa931de3fa07eafe08cf/sketchesCp1.jpg" data-mid="108112226" border="0" src="https://freight.cargo.site/w/1000/i/dde3a42bb1d5fa2847665bcf3314b13e4c1cd7cf442dfa931de3fa07eafe08cf/sketchesCp1.jpg" /> <img width="1125" height="1485" width_o="1125" height_o="1485" data-src="https://freight.cargo.site/t/original/i/7a13e9498bff597c3683ed748db13e9ec339470d5e75347df748780cdb3f3def/sketchesCp2.jpg" data-mid="108112227" border="0" src="https://freight.cargo.site/w/1000/i/7a13e9498bff597c3683ed748db13e9ec339470d5e75347df748780cdb3f3def/sketchesCp2.jpg" /> To work through several compositions for my pages in a quick and iterable format, I started with sketching. Here are just a few of countless pages of sketches—ranging in their fidelity. This helped me evaluate options and nail down the organization of content in a low-commitment, time-efficient way. WIREFRAMING + PROTOTYPING I then translated my lo-fi wireframes from my sketchbook to a higher fidelity version in Figma. This way I was able to build out some pseudo-interactions in addition to fleshing out the visual language. <img width="1920" height="1080" width_o="1920" height_o="1080" data-src="https://freight.cargo.site/t/original/i/3690fb48a6b9ee15c601bf7c88b61564bb9d30bbab90c43039ffe9d2c362ed2d/How-To-Landing.png" data-mid="102700605" border="0" src="https://freight.cargo.site/w/1000/i/3690fb48a6b9ee15c601bf7c88b61564bb9d30bbab90c43039ffe9d2c362ed2d/How-To-Landing.png" /> <img width="1920" height="1080" width_o="1920" height_o="1080" data-src="https://freight.cargo.site/t/original/i/c54601870f05fc770608a246730c6d799b69b18bddc6e9a559a369722b0a812c/Dropoff_-Interior.png" data-mid="102700604" border="0" src="https://freight.cargo.site/w/1000/i/c54601870f05fc770608a246730c6d799b69b18bddc6e9a559a369722b0a812c/Dropoff_-Interior.png" /> USABILITY TESTINGOnce I had workable prototypes, I started to test my site’s usability, content structure, and general usability with a user in my target audience. My friend, who lives in Manhattan helped me by completing some A/B tests, think-aloud protocols, and retrospective probing during the process. One example of a direct impact was my subsequent choice to organize the flow by method of compost, rather than by borough. DRAWBOT ANIMATIONS <img width="950" height="950" width_o="950" height_o="950" data-src="https://freight.cargo.site/t/original/i/fbbb5073c45eeadd6cffb79708937accdf387e2d10708781a9b481a01d183d50/pickup.gif" data-mid="108137427" border="0" src="https://freight.cargo.site/w/950/i/fbbb5073c45eeadd6cffb79708937accdf387e2d10708781a9b481a01d183d50/pickup.gif" /> <img width="900" height="900" width_o="900" height_o="900" data-src="https://freight.cargo.site/t/original/i/d798fa1ca78bae34e7b0bcfc2859fa276d55ed6540915c64c844cf9a3a17900d/naturalScraps.gif" data-mid="108137426" border="0" src="https://freight.cargo.site/w/900/i/d798fa1ca78bae34e7b0bcfc2859fa276d55ed6540915c64c844cf9a3a17900d/naturalScraps.gif" /> <img width="950" height="950" width_o="950" height_o="950" data-src="https://freight.cargo.site/t/original/i/bd0d373fa359e8ca8a529f1c40164b96aef063d3b0cbef087f4c0847c94333f4/athome.gif" data-mid="108137424" border="0" src="https://freight.cargo.site/w/950/i/bd0d373fa359e8ca8a529f1c40164b96aef063d3b0cbef087f4c0847c94333f4/athome.gif" /> <img width="900" height="900" width_o="900" height_o="900" data-src="https://freight.cargo.site/t/original/i/1498ed5fb0a3186c407174796ff457266f1d034211625d95a57da52acb70ae62/chicknScraps.gif" data-mid="108137425" border="0" src="https://freight.cargo.site/w/900/i/1498ed5fb0a3186c407174796ff457266f1d034211625d95a57da52acb70ae62/chicknScraps.gif" /> <img width="1286" height="1168" width_o="1286" height_o="1168" data-src="https://freight.cargo.site/t/original/i/6d0d0dd83ceb746218a8857febe3b3b93446205aa21ec7664b4841ef082c7608/Screen-Shot-2021-03-17-at-6.36.30-PM.png" data-mid="102698161" border="0" src="https://freight.cargo.site/w/1000/i/6d0d0dd83ceb746218a8857febe3b3b93446205aa21ec7664b4841ef082c7608/Screen-Shot-2021-03-17-at-6.36.30-PM.png" /> <img width="1326" height="1538" width_o="1326" height_o="1538" data-src="https://freight.cargo.site/t/original/i/1452ae93818787e1a169c3216dc1da839406fdc38860ef1da246e0a7beb59833/Screen-Shot-2021-03-17-at-6.27.18-PM.png" data-mid="102698159" border="0" src="https://freight.cargo.site/w/1000/i/1452ae93818787e1a169c3216dc1da839406fdc38860ef1da246e0a7beb59833/Screen-Shot-2021-03-17-at-6.27.18-PM.png" /> To visually represent the metaphor of decomposing food aiding in the growth of new, more nutrient-rich food, I programmed a tool in Drawbot. The tool creates a GIF of a selected image that animates a decomposing and recomposing loop of the image’s pixels. On the left are some of the GIFs I programmed, as well as snippets of my code for the animations and the file selecting UI addition. FINAL SITE Go check out the final product at rottingwellnyc.com! https://alexkoehl.work/Spotify-Re-Wrapped Thu, 01 Apr 2021 00:52:41 +0000 Alex Koehl Design & Drinks https://alexkoehl.work/Spotify-Re-Wrapped Spotify (Re)Wrapped MARCH 2021 Creative Coding St. Louis, MO Typefaces: Neue Machina and NeueBit by PangramPangram Foundry, Obviously, Chee, and Beastly by OH no Type Co, and Miratrix by Andy Karter.&nbsp; &nbsp; Each Year Spotify drops the infamous Spotify Wrapped collection of data and playlists, custom to each user. People rush to Instagram to post the same boring graphic showing the highlights of their data. To avoid such a monotonous stream of graphics, I wrote a program in Drawbot that would read in people’s wrapped highlights as csv data and output a new IG story graphic. The visual guidelines are tailored to each users’ top genre and minutes listened to. It uses these parameters to draw a story highlighting their top artist and top 5 songs. &nbsp; Reach out to me if you’d like to use the code for your own Spotify Wrapped or to make a set of graphics of your own! <img width="1080" height="1920" width_o="1080" height_o="1920" data-src="https://freight.cargo.site/t/original/i/da64baf937dbe2b0ccea0983c50a0ea0b7481839f49d7eb35ed4adbece21fcf1/spotifyWrapped2020Arianna-G.png" data-mid="103911183" border="0" src="https://freight.cargo.site/w/1000/i/da64baf937dbe2b0ccea0983c50a0ea0b7481839f49d7eb35ed4adbece21fcf1/spotifyWrapped2020Arianna-G.png" /> <img width="1080" height="1920" width_o="1080" height_o="1920" data-src="https://freight.cargo.site/t/original/i/61836cb5858f83fe41500c0d812064de591fa3ee73ab913ba4470550ee22dbfa/spotifyWrapped2020Alex-K.png" data-mid="103911182" border="0" src="https://freight.cargo.site/w/1000/i/61836cb5858f83fe41500c0d812064de591fa3ee73ab913ba4470550ee22dbfa/spotifyWrapped2020Alex-K.png" /> <img width="1080" height="1920" width_o="1080" height_o="1920" data-src="https://freight.cargo.site/t/original/i/def219025b2d487e064a9e1e51ac59e11aef090c6ec01dd44badcdcd6c6ce0f9/spotifyWrapped2020Grant-K.png" data-mid="103911187" border="0" src="https://freight.cargo.site/w/1000/i/def219025b2d487e064a9e1e51ac59e11aef090c6ec01dd44badcdcd6c6ce0f9/spotifyWrapped2020Grant-K.png" /> <img width="1080" height="1920" width_o="1080" height_o="1920" data-src="https://freight.cargo.site/t/original/i/40d68ea2862fe4fca3197ad947e083403264c655280a673bcc381c891fa446a6/spotifyWrapped2020Lulu-F.png" data-mid="103911190" border="0" src="https://freight.cargo.site/w/1000/i/40d68ea2862fe4fca3197ad947e083403264c655280a673bcc381c891fa446a6/spotifyWrapped2020Lulu-F.png" /> <img width="1080" height="1920" width_o="1080" height_o="1920" data-src="https://freight.cargo.site/t/original/i/05b78d7843af8740d57a4f2672caee0bad87af84b9063897cad77164997d8fa5/spotifyWrapped2020David-E.png" data-mid="103911186" border="0" src="https://freight.cargo.site/w/1000/i/05b78d7843af8740d57a4f2672caee0bad87af84b9063897cad77164997d8fa5/spotifyWrapped2020David-E.png" /> <img width="1080" height="1920" width_o="1080" height_o="1920" data-src="https://freight.cargo.site/t/original/i/d374d8a0b8e6edbfd2a0e361f20f2e8f409b5e11656d2dfb87821c1ec50bad1e/spotifyWrapped2020Mia-L.png" data-mid="103911193" border="0" src="https://freight.cargo.site/w/1000/i/d374d8a0b8e6edbfd2a0e361f20f2e8f409b5e11656d2dfb87821c1ec50bad1e/spotifyWrapped2020Mia-L.png" /> https://alexkoehl.work/Venmo-Together Wed, 12 May 2021 17:29:16 +0000 Alex Koehl Design & Drinks https://alexkoehl.work/Venmo-Together Venmo: Together MAY 2021 UX Research and Strategy St. Louis, MOCollaborators: Miles Lee and Rachel Zemser PDF Presentation of Case Study <img width="2700" height="1800" width_o="2700" height_o="1800" data-src="https://freight.cargo.site/t/original/i/87a42e973aa4ad46a6de3761b07288f70d86b56db453cca2c03d1434949c3be9/Untitled-1-01.jpg" data-mid="108243894" border="0" src="https://freight.cargo.site/w/1000/i/87a42e973aa4ad46a6de3761b07288f70d86b56db453cca2c03d1434949c3be9/Untitled-1-01.jpg" /> Problem As mutual aid has become more prevalent since the start of the COVID-19 pandmic, several problems have arisen in its mass use and understanding. The process of engaging with mutual aid is disjointed and many who engage, especially via social media, see it as charity and not solidarity. Key Insight We did not have the time and resources to explore non-digital and non-monetary forms of MA engagement. However, in the digital, monetary space, those who engage with MA resources needed a more centralized location to find funds to engage with and to manage their contributions/requests within said funds. Solution With venmo being the most common hub for monetray transactions within MA, we developed a second platform within the venmo app, venmo: together. Within this feature, users can discover MA funds, manage recurring contributions, request monetary, request friends contribute to a fund, and more. Our Approach Research9 User Interviews 38 Survery Respondants 9 Competitive Analyses 6 Breakup/Love Letters SynthesisCollaborative Affinity Map3 Empathy Maps3 User Journeys3 User Need Statements3 8-Box Brainstorms OutputsProject RoadmapApp MapUser Flow Diagram Research <img width="249" height="322" width_o="249" height_o="322" data-src="https://freight.cargo.site/t/original/i/775ee05f16dfc9c3d1f4a3882b63e39c8909dee822eb740b666ec70a200cb773/Partcipant-1.jpg" data-mid="109732178" border="0" src="https://freight.cargo.site/w/249/i/775ee05f16dfc9c3d1f4a3882b63e39c8909dee822eb740b666ec70a200cb773/Partcipant-1.jpg" /><img width="249" height="322" width_o="249" height_o="322" data-src="https://freight.cargo.site/t/original/i/b52ad12d1332afb1e880c2bab16ae4abdc681f921ec5ec020f08833492f552aa/Partcipant-4.jpg" data-mid="109732182" border="0" src="https://freight.cargo.site/w/249/i/b52ad12d1332afb1e880c2bab16ae4abdc681f921ec5ec020f08833492f552aa/Partcipant-4.jpg" /> Through our research, we started broad on the topic mutual aid for our interviews and survey, and then narrowed in on digital platforms of mutual aid engagement. We recognized that the resources of time, networks, and energy limited us to exploring digital forms of mutual aid (although this does not cover the full scope of MA). Through Break Up/Love Letters we were able to get a better sense of what platforms people used and what their favorite parts or major pain points were with them. People specifically wanted to be in networks or groups of specific types of mutual aid and more control over where their funds went, in order to have more equitable reach. Synthesis Through the process of affinity mapping and subsequent empathy maps, jounrey maps, and user need statements, we synthesized all of the varied forms of data from our initial research. Some themes that came up were: the perceptions of mutual aid, successful fundraising and MA request strategies, and the ways in which people decide how much and where to engage their funds with. This led to the user need statements of: “Young adults who engage in mutual aid primarily through social media need to be presented with more variance in who, when, and how to provide aid in order to distribute aid that corresponds better with all the needs of the community.” <img width="1352" height="752" width_o="1352" height_o="752" data-src="https://freight.cargo.site/t/original/i/44283afc4891bae5be9117182da2abf23ba236a79b5fd6c57822a08c443a745d/Screen-Shot-2021-05-25-at-4.00.53-PM.png" data-mid="109732206" border="0" src="https://freight.cargo.site/w/1000/i/44283afc4891bae5be9117182da2abf23ba236a79b5fd6c57822a08c443a745d/Screen-Shot-2021-05-25-at-4.00.53-PM.png" /> <img width="578" height="788" width_o="578" height_o="788" data-src="https://freight.cargo.site/t/original/i/68933f048417c9a36125463ce4a43cb24e8bcb0d3276110b24c77c1d3dc96dee/Screen-Shot-2021-05-25-at-4.01.25-PM.png" data-mid="109732207" border="0" src="https://freight.cargo.site/w/578/i/68933f048417c9a36125463ce4a43cb24e8bcb0d3276110b24c77c1d3dc96dee/Screen-Shot-2021-05-25-at-4.01.25-PM.png" /> <img width="1110" height="792" width_o="1110" height_o="792" data-src="https://freight.cargo.site/t/original/i/9fe4c3d8bf6283c521af70b71372092539f6ebe206373d9951f1f31dc6fca9f4/Screen-Shot-2021-05-25-at-4.01.46-PM.png" data-mid="109732209" border="0" src="https://freight.cargo.site/w/1000/i/9fe4c3d8bf6283c521af70b71372092539f6ebe206373d9951f1f31dc6fca9f4/Screen-Shot-2021-05-25-at-4.01.46-PM.png" /> <img width="1198" height="922" width_o="1198" height_o="922" data-src="https://freight.cargo.site/t/original/i/50431d072647d8999b6ecc54cbf3ce3d8ebea396b37f1c86ca52cb897aafd2e0/Screen-Shot-2021-05-25-at-4.02.06-PM.png" data-mid="109732210" border="0" src="https://freight.cargo.site/w/1000/i/50431d072647d8999b6ecc54cbf3ce3d8ebea396b37f1c86ca52cb897aafd2e0/Screen-Shot-2021-05-25-at-4.02.06-PM.png" /> <img width="1036" height="560" width_o="1036" height_o="560" data-src="https://freight.cargo.site/t/original/i/de2ccd81550c66898dc434e3c0d4817ef4ae60115f9e850eee107091181f4aaf/Screen-Shot-2021-05-25-at-4.01.35-PM.png" data-mid="109732208" border="0" src="https://freight.cargo.site/w/1000/i/de2ccd81550c66898dc434e3c0d4817ef4ae60115f9e850eee107091181f4aaf/Screen-Shot-2021-05-25-at-4.01.35-PM.png" /> Ideation <img width="3093" height="2391" width_o="3093" height_o="2391" data-src="https://freight.cargo.site/t/original/i/e88ef7bdb6b50e2775eb267d84ef8b59727a8a5225f8072c1bc627f9d4e67f7b/Snapshot-12.PNG" data-mid="109802838" border="0" src="https://freight.cargo.site/w/1000/i/e88ef7bdb6b50e2775eb267d84ef8b59727a8a5225f8072c1bc627f9d4e67f7b/Snapshot-12.PNG" /> <img width="3200" height="2263" width_o="3200" height_o="2263" data-src="https://freight.cargo.site/t/original/i/d465a8d45412dd72ae66961beeaa6c405e0303456529402843913b28a173abef/Scannable-Document-on-May-2--2021-at-6_25_29-PM.png" data-mid="109802877" border="0" src="https://freight.cargo.site/w/1000/i/d465a8d45412dd72ae66961beeaa6c405e0303456529402843913b28a173abef/Scannable-Document-on-May-2--2021-at-6_25_29-PM.png" /> <img width="1449" height="1030" width_o="1449" height_o="1030" data-src="https://freight.cargo.site/t/original/i/a59697021dfecd46ed5721b546fa88f477ff8f2408bd51817692dda197b0acb4/IMG_4867-1.png" data-mid="109803034" border="0" src="https://freight.cargo.site/w/1000/i/a59697021dfecd46ed5721b546fa88f477ff8f2408bd51817692dda197b0acb4/IMG_4867-1.png" /> Each of the three of us completed an independent 8-box brainstorm (see left) to generate ideas for how to best fulfill the above user-need statement. Centering on the Design Justice Principle 10 of looking to what is already being used and working, we decided to re-design an existing platofrm currently in use: Venmo. After discussing our solutions, we settled on the idea of revamping Venmo with a new product feature. Venmo: Together would use several of the ideas we generated (customizable recurring contributions, requesting freinds contribute, MA netwroks, and a discover a fund feed) to create a robust mutual aid engagement platform in the digital space. Final Outputs In order to effectively communicate our idea for this new facet of Venmo, we put together a Project Rodamap (with the list of 10 core features and their respective priority in development), an App Map (showcasing the underlying structure of the app as a whole), and an example User Flow Diagram (displaying the steps a user would take in the app to complete a contribution). The final outputs are viewable below. For a more detailed overview of our research and strategy view this PDF Case Study. <img width="4750" height="5283" width_o="4750" height_o="5283" data-src="https://freight.cargo.site/t/original/i/692211d7bb29f6cdb0f400539869751b5044c682ccd23ab738ff6eed5c124b54/FINAL-SITEMAP.jpg" data-mid="109732166" border="0" src="https://freight.cargo.site/w/1000/i/692211d7bb29f6cdb0f400539869751b5044c682ccd23ab738ff6eed5c124b54/FINAL-SITEMAP.jpg" /> <img width="2611" height="5384" width_o="2611" height_o="5384" data-src="https://freight.cargo.site/t/original/i/6bb3556bd5fbc54f8ef1bfc60757553ade97048f3690d505cce6c34c18fda2ef/FINAL-USER-FLOW.jpg" data-mid="109732168" border="0" src="https://freight.cargo.site/w/1000/i/6bb3556bd5fbc54f8ef1bfc60757553ade97048f3690d505cce6c34c18fda2ef/FINAL-USER-FLOW.jpg" /> <img width="2820" height="1504" width_o="2820" height_o="1504" data-src="https://freight.cargo.site/t/original/i/b600a83bf813bae55084dccaa06ea01bebc0641ef53b557c949b4537200ff167/Features.jpg" data-mid="109732165" border="0" src="https://freight.cargo.site/w/1000/i/b600a83bf813bae55084dccaa06ea01bebc0641ef53b557c949b4537200ff167/Features.jpg" /> <img width="2914" height="1504" width_o="2914" height_o="1504" data-src="https://freight.cargo.site/t/original/i/b24898da07267187e59b0f2396a380fa42f1dd66afc47e9932b11d99bea22f4a/Priorities.jpg" data-mid="109732167" border="0" src="https://freight.cargo.site/w/1000/i/b24898da07267187e59b0f2396a380fa42f1dd66afc47e9932b11d99bea22f4a/Priorities.jpg" /> https://alexkoehl.work/Just-Vote-WashU Mon, 04 Jan 2021 18:40:52 +0000 Alex Koehl Design & Drinks https://alexkoehl.work/Just-Vote-WashU Just Vote, WashU NOV 2020 Integrated Campaign St. Louis, MO <img width="3360" height="1898" width_o="3360" height_o="1898" data-src="https://freight.cargo.site/t/original/i/815944dd173a98ff66e12206e4e96ae5804c0624383f37d2309800b70ff1140d/Class-Photo.jpg" data-mid="93917485" border="0" src="https://freight.cargo.site/w/1000/i/815944dd173a98ff66e12206e4e96ae5804c0624383f37d2309800b70ff1140d/Class-Photo.jpg" /> Problem The 2020 Presidential election was fast approaching and the WashU student body needed to be informed on how and when to vote. Key Insight Almost all students at WashU were already registered to vote, but the main issue would be getting them to the polls. Especially in the midst of a global pandemic, helping students develop robust voting plans was of the utmost importance. Solution Our class of 12 students split into 4 groups to target the ranging needs of on-campus, off-campus, and remote learners. Cheryl Kao, Lauren Jin, and I tackled the problem of getting first years to vote. And the main way to communicate with 18-19-year-olds right now is through TikTok. Enter our voter engagement TikTok account. Research In order to understand the best way to increase voter engagement in our student body, we sent out a survey to gauge the knowledge and completion of voting and registration processes. We received over 200 responses from students about what they knew and how they gather their voting and election news information. We also conducted interviews with fellow students and shared insights as a class. <img width="2496" height="1402" width_o="2496" height_o="1402" data-src="https://freight.cargo.site/t/original/i/d4d227e93f57781eaf147ec46421616f4ff3f3637eddec9896dd9a2e615162d2/Screen-Shot-2021-01-10-at-6.38.28-PM.png" data-mid="94623664" border="0" src="https://freight.cargo.site/w/1000/i/d4d227e93f57781eaf147ec46421616f4ff3f3637eddec9896dd9a2e615162d2/Screen-Shot-2021-01-10-at-6.38.28-PM.png" /> <img width="3360" height="1892" width_o="3360" height_o="1892" data-src="https://freight.cargo.site/t/original/i/507f452da6c5b1cd61767a07463b6ec13088eb9436322471a29b6355d1e04b01/Screen-Shot-2021-01-10-at-6.50.33-PM.png" data-mid="94623849" border="0" src="https://freight.cargo.site/w/1000/i/507f452da6c5b1cd61767a07463b6ec13088eb9436322471a29b6355d1e04b01/Screen-Shot-2021-01-10-at-6.50.33-PM.png" /> Synthesis <img width="2500" height="1398" width_o="2500" height_o="1398" data-src="https://freight.cargo.site/t/original/i/03cc25047719396ad432b238ed839f4843f45043260edb81a8c098d971fdcc47/Screen-Shot-2021-01-10-at-6.38.53-PM.png" data-mid="94623683" border="0" src="https://freight.cargo.site/w/1000/i/03cc25047719396ad432b238ed839f4843f45043260edb81a8c098d971fdcc47/Screen-Shot-2021-01-10-at-6.38.53-PM.png" /> <img width="2492" height="1388" width_o="2492" height_o="1388" data-src="https://freight.cargo.site/t/original/i/fa55ec39cd7a33229a8001f9a565aa4ef17863aa6cc99d382bde8ba2a710a49d/Screen-Shot-2021-01-10-at-6.38.41-PM.png" data-mid="94623675" border="0" src="https://freight.cargo.site/w/1000/i/fa55ec39cd7a33229a8001f9a565aa4ef17863aa6cc99d382bde8ba2a710a49d/Screen-Shot-2021-01-10-at-6.38.41-PM.png" /> After collecting insights from individual interviews and sifting through the data of the survey, we arranged our findings into KWHL tables in small groups. We shared these back with the class to come to a comprehensive understanding of the challenge we faced. We found that north of 90% of our student body was already registered, but they had questions about how to vote, especially during a pandemic. We also found out that many are first-time voters, and almost all students get most of their info via social media channels. Ideation + Iteration Once defined our main issue as getting registered voters to the polls, we also wanted to target based on location and need. So we created four subgroups of the campaign: on-campus, off-campus, faculty/staff, and remote learners. We then brainstormed ideas for each subgroup and then prepared to split off. <img width="2500" height="1402" width_o="2500" height_o="1402" data-src="https://freight.cargo.site/t/original/i/f3754114386009085902ce375d86efe4050d770f8b3c4897f7d8f17e89a735c6/Screen-Shot-2021-01-10-at-6.39.18-PM.png" data-mid="94623685" border="0" src="https://freight.cargo.site/w/1000/i/f3754114386009085902ce375d86efe4050d770f8b3c4897f7d8f17e89a735c6/Screen-Shot-2021-01-10-at-6.39.18-PM.png" /> <img width="2500" height="1398" width_o="2500" height_o="1398" data-src="https://freight.cargo.site/t/original/i/c7c7c6b5bb29ec60ba8d0ac11b5e542f304c2b64179ebb5aafa8e3b933732704/Screen-Shot-2021-01-10-at-6.39.07-PM.png" data-mid="94623684" border="0" src="https://freight.cargo.site/w/1000/i/c7c7c6b5bb29ec60ba8d0ac11b5e542f304c2b64179ebb5aafa8e3b933732704/Screen-Shot-2021-01-10-at-6.39.07-PM.png" /> Prototyping + Testing <img width="2504" height="1406" width_o="2504" height_o="1406" data-src="https://freight.cargo.site/t/original/i/35663a59dead455ff478fb23820e6c9a955a624c18bde5da68507bf37906dae7/Screen-Shot-2021-01-10-at-6.39.35-PM.png" data-mid="94623686" border="0" src="https://freight.cargo.site/w/1000/i/35663a59dead455ff478fb23820e6c9a955a624c18bde5da68507bf37906dae7/Screen-Shot-2021-01-10-at-6.39.35-PM.png" /> With a whole set of ideas from the class, and some generated on our own, Lauren, Cheryl, and I started prototyping how we would implement a campaign targeted at on-campus students (almost all first years). We knew first years were most easily reached on social media, and Tik Tok is their preferred social platform. So, we started writing TikToks to help them create a comprehensive voting plan. We used a 5 Es table, and class feedback to assess our prototypes along the way. &nbsp; Final Product Our final campaign brought all four subgroups together under one cohesive campaign message: “Just Vote, WashU.” The other groups created printed and digital voting plans, a google map of voting locations, zoom backgrounds, and a linktr.ee with voting resources. Together we put relevant materials from all groups into “goody bags” that were available at the mandatory Covid testing site. Our Tik Tok page received close to 2k views in just the one week prior to the election, and the campaign was featured in the school newspaper. My classmate, Amie Deng, and I presented the project at the Designing the Vote digital conference in mid-November 2020. View the presentation deck here. Special thanks to the professor who oversaw the project, Penina Acayo-Laker, and the 11 other students with who I collaborated on the campaign. <img width="2246" height="1680" width_o="2246" height_o="1680" data-src="https://freight.cargo.site/t/original/i/760b1e4a4ddb52caaf3482192ecad439227eeaefc7119311105b8893595547f2/Screen-Shot-2021-01-10-at-6.57.19-PM.png" data-mid="94698357" border="0" src="https://freight.cargo.site/w/1000/i/760b1e4a4ddb52caaf3482192ecad439227eeaefc7119311105b8893595547f2/Screen-Shot-2021-01-10-at-6.57.19-PM.png" /> <img width="2112" height="1890" width_o="2112" height_o="1890" data-src="https://freight.cargo.site/t/original/i/b211bb2566dd21c7f586ad7a5c75ebd221235c7cf0a8ebc5f86e74e989d7aa4c/Screen-Shot-2021-01-10-at-6.56.03-PM.png" data-mid="94624337" border="0" src="https://freight.cargo.site/w/1000/i/b211bb2566dd21c7f586ad7a5c75ebd221235c7cf0a8ebc5f86e74e989d7aa4c/Screen-Shot-2021-01-10-at-6.56.03-PM.png" /> <img width="3817" height="2862" width_o="3817" height_o="2862" data-src="https://freight.cargo.site/t/original/i/9004a0c0dd2be3a06c511263dd490563fcaa49ac591b2d94085a9ee2bc9533cf/IMG_3946.jpg" data-mid="94624332" border="0" src="https://freight.cargo.site/w/1000/i/9004a0c0dd2be3a06c511263dd490563fcaa49ac591b2d94085a9ee2bc9533cf/IMG_3946.jpg" /> <img width="3360" height="1898" width_o="3360" height_o="1898" data-src="https://freight.cargo.site/t/original/i/815944dd173a98ff66e12206e4e96ae5804c0624383f37d2309800b70ff1140d/Class-Photo.jpg" data-mid="93917485" border="0" src="https://freight.cargo.site/w/1000/i/815944dd173a98ff66e12206e4e96ae5804c0624383f37d2309800b70ff1140d/Class-Photo.jpg" /> <img width="3024" height="4032" width_o="3024" height_o="4032" data-src="https://freight.cargo.site/t/original/i/ae3520386e207ed2bd762ce3e690c41dd102a8b4378a6147ce70a8ace9b3f1d5/Testing-Site-Bags.jpeg" data-mid="94623729" border="0" src="https://freight.cargo.site/w/1000/i/ae3520386e207ed2bd762ce3e690c41dd102a8b4378a6147ce70a8ace9b3f1d5/Testing-Site-Bags.jpeg" /> <img width="2642" height="3652" width_o="2642" height_o="3652" data-src="https://freight.cargo.site/t/original/i/1dbf011da1dc086548854a5bc7932bea3badb4e77cb83fada7261de284e0bc69/IMG_3944.jpg" data-mid="94624329" border="0" src="https://freight.cargo.site/w/1000/i/1dbf011da1dc086548854a5bc7932bea3badb4e77cb83fada7261de284e0bc69/IMG_3944.jpg" /> <img width="3024" height="4032" width_o="3024" height_o="4032" data-src="https://freight.cargo.site/t/original/i/6022a34b8837d216b41db7db73db73c1b3f747813de7d243b59f8411ad45c69c/Yard-Signs.jpg" data-mid="94623730" border="0" src="https://freight.cargo.site/w/1000/i/6022a34b8837d216b41db7db73db73c1b3f747813de7d243b59f8411ad45c69c/Yard-Signs.jpg" /> <img width="2860" height="3814" width_o="2860" height_o="3814" data-src="https://freight.cargo.site/t/original/i/0eab593de4bdf1d278afc2459f48404daf21c67157559609c40f8d160f709e84/IMG_3945.jpg" data-mid="94624331" border="0" src="https://freight.cargo.site/w/1000/i/0eab593de4bdf1d278afc2459f48404daf21c67157559609c40f8d160f709e84/IMG_3945.jpg" /> https://alexkoehl.work/Teatro-Verdi Mon, 28 Dec 2020 21:35:17 +0000 Alex Koehl Design & Drinks https://alexkoehl.work/Teatro-Verdi Teatro Verdi May 2020IdentityFlorence, ItalyTypefaces: Big Caslon FB by Matthew Carter and TeX Gyre Heros by&nbsp;Boguslaw Jackowski <img width="1440" height="810" width_o="1440" height_o="810" data-src="https://freight.cargo.site/t/original/i/c76e4940b27e48c8c8caf1948da60bd3b20924f0afc44dc724bf574d4d9dc6c2/fullprojectanim.gif" data-mid="94857676" border="0" src="https://freight.cargo.site/w/1000/i/c76e4940b27e48c8c8caf1948da60bd3b20924f0afc44dc724bf574d4d9dc6c2/fullprojectanim.gif" /> Prompt Rebrand and create a visual identity system for Florence Italy’s historic Teatro Verdi. Key Insight Teatro Verdi’s theater style is denoted by it’s proscenium (the metaphorical vertical plane of space in a theatre). But a theater is incomplete without a an audience to connect with that stage. Additionally, the namesake of the theater, Guiseppe Verdi, was pivotal in the Italian unification movement. Coming together is a theme throughout the theater’s history. Solution The main components of the visual system are the round and squared bracket, signifying the stage and audience. The formal iterations with the full name show the metaphorical plane of the proscenium, while the monogram “tv” brings the two together as Teatro Verdi aims to do with its electrifying shows. Furthermore the unification of the brackets alludes to Giuseppe Verdi’s work as an activist. Research + Synthesis I began by visiting the theater, researching its historical and contemporary involvements, and the visual identities of other European cultural institutions. I broke this research into three main findings that I guided my design decisions going forward: Teatro Verdi is the oldest Italian Style Theater in Tuscany, Giuseppe Verdi was key in the Italian Unification movment, and competitors mainly use modern, geometric sans serif typefaces and minimal color. <img width="3764" height="2823" width_o="3764" height_o="2823" data-src="https://freight.cargo.site/t/original/i/f85e0e143eb53e0894846c839c8b3871b7b7e527d64edc72e9cf93d4d7f0b050/IMG_2234.JPG" data-mid="94858786" border="0" src="https://freight.cargo.site/w/1000/i/f85e0e143eb53e0894846c839c8b3871b7b7e527d64edc72e9cf93d4d7f0b050/IMG_2234.JPG" /> <img width="2485" height="3792" width_o="2485" height_o="3792" data-src="https://freight.cargo.site/t/original/i/fa66f4136ebe909af60d87718450d117c676236d1ab9421e8b5b5e6df3f03226/IMG_2237.JPG" data-mid="94858787" border="0" src="https://freight.cargo.site/w/1000/i/fa66f4136ebe909af60d87718450d117c676236d1ab9421e8b5b5e6df3f03226/IMG_2237.JPG" /> <img width="2958" height="1732" width_o="2958" height_o="1732" data-src="https://freight.cargo.site/t/original/i/e4bbc4c414a6ac2ed297db62551e89aa6832e7c99c8e6a8dc997bc09cbf5ab59/Screen-Shot-2021-01-12-at-2.18.39-PM.png" data-mid="94858784" border="0" src="https://freight.cargo.site/w/1000/i/e4bbc4c414a6ac2ed297db62551e89aa6832e7c99c8e6a8dc997bc09cbf5ab59/Screen-Shot-2021-01-12-at-2.18.39-PM.png" /> <img width="2968" height="1686" width_o="2968" height_o="1686" data-src="https://freight.cargo.site/t/original/i/19eeaebee8284c66d4b0fdf74815e611ccf6835ddfdf4c8303ebdd64502c7e0c/Screen-Shot-2021-01-12-at-2.17.50-PM.png" data-mid="94858783" border="0" src="https://freight.cargo.site/w/1000/i/19eeaebee8284c66d4b0fdf74815e611ccf6835ddfdf4c8303ebdd64502c7e0c/Screen-Shot-2021-01-12-at-2.17.50-PM.png" /> Ideation + Iteration <img width="548" height="595" width_o="548" height_o="595" data-src="https://freight.cargo.site/t/original/i/c7b7f9ea0ba907a88a3539903beab5f751da6f56238a14d4b3b7f49bb6c21ee8/process.jpg" data-mid="94856464" border="0" src="https://freight.cargo.site/w/548/i/c7b7f9ea0ba907a88a3539903beab5f751da6f56238a14d4b3b7f49bb6c21ee8/process.jpg" /> <img width="4500" height="4501" width_o="4500" height_o="4501" data-src="https://freight.cargo.site/t/original/i/291d7470b83e16352731882145c920fc7a9e046af6cc72e502e0bfed626ddbac/Iterations-10.jpg" data-mid="94856462" border="0" src="https://freight.cargo.site/w/1000/i/291d7470b83e16352731882145c920fc7a9e046af6cc72e502e0bfed626ddbac/Iterations-10.jpg" /> <img width="4501" height="4501" width_o="4501" height_o="4501" data-src="https://freight.cargo.site/t/original/i/c1ba5affdbea2a775ec84011163fda0b7fd45ab86af0f6e29555b9ca87320f0d/Iterations-09.jpg" data-mid="94856460" border="0" data-scale="57" src="https://freight.cargo.site/w/1000/i/c1ba5affdbea2a775ec84011163fda0b7fd45ab86af0f6e29555b9ca87320f0d/Iterations-09.jpg" /> <img width="4501" height="4501" width_o="4501" height_o="4501" data-src="https://freight.cargo.site/t/original/i/329c3cdce635a5d7a4daad8a40a2082593aeee71cf57dc3135b73c06167c6e9b/Iterations-08.jpg" data-mid="94856459" border="0" src="https://freight.cargo.site/w/1000/i/329c3cdce635a5d7a4daad8a40a2082593aeee71cf57dc3135b73c06167c6e9b/Iterations-08.jpg" /> With these main principles in mind, I started ideating on ways to incorporate them into the visual representation. I began by sketching out all of the ideas that I had, and selecting my favorite three to build out in a vector format. On the left you can see one page (of many) of my idea thumbnailing, followed by the three iterations that I built out. Prototyping + Testing Having selected an iteration to carry forward, I began testing it out in various mockups to evaluate its viability as an identity system. As I developed prototypes, I found more rigid rules and themes to carry out between the different applications of the identity. On the right is an example of the testing and iteration I did just for the calendar poster. I developed many compostions, and then played with color. Along this process of prototyping applications, I would test with classmates for feedback on clarity, hierarchy, and efficacy of concept. <img width="7367" height="10417" width_o="7367" height_o="10417" data-src="https://freight.cargo.site/t/original/i/a789a66e3980b2b6351e74f2a214d76685e3ccbd258943250eb88846c263c59f/posters-R2.B.png" data-mid="94857719" border="0" src="https://freight.cargo.site/w/1000/i/a789a66e3980b2b6351e74f2a214d76685e3ccbd258943250eb88846c263c59f/posters-R2.B.png" /> <img width="7367" height="10417" width_o="7367" height_o="10417" data-src="https://freight.cargo.site/t/original/i/f2cd7d95ef30f7875311fe48689b6c8fcf3d54240f610e3dbc03e2c64091f998/posters-r2.png" data-mid="94857720" border="0" src="https://freight.cargo.site/w/1000/i/f2cd7d95ef30f7875311fe48689b6c8fcf3d54240f610e3dbc03e2c64091f998/posters-r2.png" /> <img width="7367" height="10417" width_o="7367" height_o="10417" data-src="https://freight.cargo.site/t/original/i/7931badc1307ffa0af152067f612e538b1dab64023560f11ffcdc100c5623781/posters-r2.w.png" data-mid="94857722" border="0" src="https://freight.cargo.site/w/1000/i/7931badc1307ffa0af152067f612e538b1dab64023560f11ffcdc100c5623781/posters-r2.w.png" /> Final Product Below are the final mockups of the identity system, which look to visually highlight the message of the theater. Whether it be the unification of a nation or an audience with the performers onstage,&nbsp;Teatro Verdi has always been about bringing people together. It is historic and it is bold, just like its signature yellow color. It demands your attention, attendance, and engagement, because the people are what make a theater a theater. <img width="15222" height="11799" width_o="15222" height_o="11799" data-src="https://freight.cargo.site/t/original/i/5c647b9eabb6225d58a009b1bead958e2bcc9e62c6ca1ccd8b17f1dfce8f5c54/all-finals-14.png" data-mid="93293592" border="0" src="https://freight.cargo.site/w/1000/i/5c647b9eabb6225d58a009b1bead958e2bcc9e62c6ca1ccd8b17f1dfce8f5c54/all-finals-14.png" /> <img width="1920" height="1080" width_o="1920" height_o="1080" data-src="https://freight.cargo.site/t/original/i/3dcb08d9b5aea6710579afb9fa67054334b5ceedacc20ea383ead6bfdd8f9b2d/Teatro-V-final.gif" data-mid="93293595" border="0" src="https://freight.cargo.site/w/1000/i/3dcb08d9b5aea6710579afb9fa67054334b5ceedacc20ea383ead6bfdd8f9b2d/Teatro-V-final.gif" /> <img width="5000" height="3750" width_o="5000" height_o="3750" data-src="https://freight.cargo.site/t/original/i/9c51325be538139afc627cd3534b2cc321d0844c63d7b804e562234a5fdd2b46/logo-mock.jpg" data-mid="93293594" border="0" src="https://freight.cargo.site/w/1000/i/9c51325be538139afc627cd3534b2cc321d0844c63d7b804e562234a5fdd2b46/logo-mock.jpg" /> <img width="2500" height="1667" width_o="2500" height_o="1667" data-src="https://freight.cargo.site/t/original/i/6c28be8cbd3ee32417198f8c4905a51e3e48c5d48c4adc6c1f378fe2806dd88a/final-event-posters.png" data-mid="93293597" border="0" src="https://freight.cargo.site/w/1000/i/6c28be8cbd3ee32417198f8c4905a51e3e48c5d48c4adc6c1f378fe2806dd88a/final-event-posters.png" /> <img width="1913" height="1352" width_o="1913" height_o="1352" data-src="https://freight.cargo.site/t/original/i/b8c362c033dfb9fe22c4de8af6a94ff8cc119290386ccc48e1f9f2f8eecf804c/final-ticket.png" data-mid="93293598" border="0" src="https://freight.cargo.site/w/1000/i/b8c362c033dfb9fe22c4de8af6a94ff8cc119290386ccc48e1f9f2f8eecf804c/final-ticket.png" /> <img width="1964" height="1448" width_o="1964" height_o="1448" data-src="https://freight.cargo.site/t/original/i/f1450b7e49f09eb830ce39ff8c9d2f8f73ba31815b95d10bc443b5f37bad71b5/fall-calendar.png" data-mid="93293596" border="0" src="https://freight.cargo.site/w/1000/i/f1450b7e49f09eb830ce39ff8c9d2f8f73ba31815b95d10bc443b5f37bad71b5/fall-calendar.png" /> <img width="4000" height="3000" width_o="4000" height_o="3000" data-src="https://freight.cargo.site/t/original/i/dcc8caf835a04f29ccb6b02899b73ed01d53e55e516d98c201451643becc1023/tote-bag-mock.jpg" data-mid="93293593" border="0" src="https://freight.cargo.site/w/1000/i/dcc8caf835a04f29ccb6b02899b73ed01d53e55e516d98c201451643becc1023/tote-bag-mock.jpg" /> https://alexkoehl.work/Connect-Five Sun, 10 Jan 2021 00:22:35 +0000 Alex Koehl Design & Drinks https://alexkoehl.work/Connect-Five Connect Five: An Interactive Typeface OCT 2020Type design, Interaction, and UX ResearchSt. Louis, MO connectfive.webflow.io <img width="1680" height="947" width_o="1680" height_o="947" data-src="https://freight.cargo.site/t/original/i/b9d6e2fd958da6db03c999fbc8417b1c9de04f307373b788b93811e093f3a6a5/main-screen.gif" data-mid="94524599" border="0" src="https://freight.cargo.site/w/1000/i/b9d6e2fd958da6db03c999fbc8417b1c9de04f307373b788b93811e093f3a6a5/main-screen.gif" /> Problem Just using code, design a typeface that a user can interact with. Key Insight Simple interactions done in a complex and well-calculated can be just as successful as complex ones. Solution A typeface built on a 5x5 grid that includes at least one full row and/or column of 5 circles in each letterform. The site displays this underlying structure via appearing and disappearing elements on hover. Experimenting Given my lack of experience with JavaScript and JQuery, the research of this project was spent experimenting with the capabilities and learning how to code with this new language. I created a set of 25 circles, each with its own interaction to test the boundaries of simplicity and complexity. <img width="1344" height="758" width_o="1344" height_o="758" data-src="https://freight.cargo.site/t/original/i/4cfce8b3a772fa8e6230c10208df2ff89b92d18fa12e043dc95dadf7f72aa0c2/CHARETTES.gif" data-mid="94620819" border="0" src="https://freight.cargo.site/w/1000/i/4cfce8b3a772fa8e6230c10208df2ff89b92d18fa12e043dc95dadf7f72aa0c2/CHARETTES.gif" /> Refining <img width="1512" height="852" width_o="1512" height_o="852" data-src="https://freight.cargo.site/t/original/i/d1d4a0a7efc2c3284dcf13ae5cea27edf15e69d822c5e4c7966193c19f69cf7d/synthesis.gif" data-mid="94622769" border="0" src="https://freight.cargo.site/w/1000/i/d1d4a0a7efc2c3284dcf13ae5cea27edf15e69d822c5e4c7966193c19f69cf7d/synthesis.gif" /> I realized that I had layered way too many interactions on top of one another and this made it difficult for the user to connect their movement to a response. So I needed to tone things back and focus on just a couple of interactions. Ideating Now that I better understood the language of JS and how to more effectively use it, it was on to developing my typeface. I felt comfortable with the circles and the 5x5 grid, so that’s where I started. On the right are the various stages of iteration I went through in developing Connect Five. <img width="3360" height="2100" width_o="3360" height_o="2100" data-src="https://freight.cargo.site/t/original/i/2ec503e6bf7d8e58fd0edff2c6347d2664b352eae7086b94c28a64d490e079aa/Screen-Shot-2020-12-29-at-11.24.38-AM.png" data-mid="94622363" border="0" src="https://freight.cargo.site/w/1000/i/2ec503e6bf7d8e58fd0edff2c6347d2664b352eae7086b94c28a64d490e079aa/Screen-Shot-2020-12-29-at-11.24.38-AM.png" /> <img width="1966" height="868" width_o="1966" height_o="868" data-src="https://freight.cargo.site/t/original/i/baf1763c9ed9f60c00de4b7f54be6dd16507047e7ddc8d125b2edabd97563087/Screen-Shot-2021-01-10-at-5.46.02-PM.png" data-mid="94622362" border="0" src="https://freight.cargo.site/w/1000/i/baf1763c9ed9f60c00de4b7f54be6dd16507047e7ddc8d125b2edabd97563087/Screen-Shot-2021-01-10-at-5.46.02-PM.png" /> <img width="3360" height="2100" width_o="3360" height_o="2100" data-src="https://freight.cargo.site/t/original/i/fa661c9bb46a7189484360a2c86ad402030eca740fd1ba76ca75f6b3a0f5f0f5/Screen-Shot-2020-12-29-at-11.25.56-AM.png" data-mid="94622365" border="0" src="https://freight.cargo.site/w/1000/i/fa661c9bb46a7189484360a2c86ad402030eca740fd1ba76ca75f6b3a0f5f0f5/Screen-Shot-2020-12-29-at-11.25.56-AM.png" /> <img width="2376" height="1702" width_o="2376" height_o="1702" data-src="https://freight.cargo.site/t/original/i/7bf3122bdb64b6b8019032de1fb24d87e410447fd6f3ddea379706c02884e2af/Screen-Shot-2020-12-29-at-11.25.30-AM.png" data-mid="94622364" border="0" src="https://freight.cargo.site/w/1000/i/7bf3122bdb64b6b8019032de1fb24d87e410447fd6f3ddea379706c02884e2af/Screen-Shot-2020-12-29-at-11.25.30-AM.png" /> Prototyping + Testing <img width="2936" height="1370" width_o="2936" height_o="1370" data-src="https://freight.cargo.site/t/original/i/413c1257a2cf5e8186eecd4f11f3da669890f987b24c65b270e46214d2083aa0/User-Interview.png" data-mid="94620283" border="0" src="https://freight.cargo.site/w/1000/i/413c1257a2cf5e8186eecd4f11f3da669890f987b24c65b270e46214d2083aa0/User-Interview.png" /> Once the full typeface was built out, I was ready to overlay the interactions and build out a test site. Once I had that worked out, I. enlisted my brother to do a think-aloud protocol user test. Having him talk through his experience helped me refine some functions and cut other, unnecessary ones out. Final Product The final site is more about showcasing the construction of the typeface than the complexity of the interactive experience. By keeping it to a simple “show and hide” element the user can enjoy discovering the 5 in a row rule, and seeing how it applies to each of the letterforms. Through exploring JS’s capabilities, and my limitations, I was able to code a full typeface and make its specimen into an interactive experience for the user.&nbsp; Below are some key screens, which you can interact with at the Connect Five site. <img width="1680" height="947" width_o="1680" height_o="947" data-src="https://freight.cargo.site/t/original/i/b9d6e2fd958da6db03c999fbc8417b1c9de04f307373b788b93811e093f3a6a5/main-screen.gif" data-mid="94524599" border="0" data-scale="93" src="https://freight.cargo.site/w/1000/i/b9d6e2fd958da6db03c999fbc8417b1c9de04f307373b788b93811e093f3a6a5/main-screen.gif" /> <img width="1680" height="947" width_o="1680" height_o="947" data-src="https://freight.cargo.site/t/original/i/bb03bf7936c9abd0ac96ac567bdf9cab091a92b3eb763db2ef1cb9a69b911e8e/slide-down.gif" data-mid="94620261" border="0" src="https://freight.cargo.site/w/1000/i/bb03bf7936c9abd0ac96ac567bdf9cab091a92b3eb763db2ef1cb9a69b911e8e/slide-down.gif" /> <img width="1512" height="852" width_o="1512" height_o="852" data-src="https://freight.cargo.site/t/original/i/14fb1cf9b5e64e489fe9a5c7a1d234526b4fb01620e61bd6547d9bb7af29988b/full-typeface.gif" data-mid="94622309" border="0" src="https://freight.cargo.site/w/1000/i/14fb1cf9b5e64e489fe9a5c7a1d234526b4fb01620e61bd6547d9bb7af29988b/full-typeface.gif" /> https://alexkoehl.work/SF-Reservation-App Sun, 03 Jan 2021 20:35:48 +0000 Alex Koehl Design & Drinks https://alexkoehl.work/SF-Reservation-App Sam Fox Reservation App DEC 2020 UI/UX Design, and UX Research St. Louis, MOType: Roboto by Christian Robertson Prototypes: student and monitor <img width="1512" height="883" width_o="1512" height_o="883" data-src="https://freight.cargo.site/t/original/i/c51368527f2cc43fb84a35a528173afcbee2ca1931b2b235854c8fa828634e81/givens-bixby.gif" data-mid="94736338" border="0" src="https://freight.cargo.site/w/1000/i/c51368527f2cc43fb84a35a528173afcbee2ca1931b2b235854c8fa828634e81/givens-bixby.gif" /> Problem Sam Fox students needed a mobile app to reserve studio and workshop spaces. Monitors needed to track student usage of tools and spaces. All of this was needed to make the potential dangerous shops safe and accessible for all students. Key Insight Both shop users and monitors identified that the cornerstone of a safe shop environment was a strong sense of community and inclusivity in the space. Breaking down barriers to communication and connection would allow for more transparency, comfort, and eventual usage of the resources at the student’s disposal. Solution An app that was equally robust on the user and monitor side and that connected these two interfaces seamlessly. Providing necessary and relevant information about those in the space would allow everyone to feel more comfortable around one another. Additionally, this will allow students to know who to ask for help, and for the monitors to be best prepared to help those students. Research We started our process as a class by doing group user interviews via zoom. We interviewed one shop user and one shop monitor to get a better understanding of the needs of the two main users. Prior to our interviews, we received a presentation on best practices for user interviews from Google designer Molly Needelman.&nbsp; &nbsp; <img width="3360" height="2100" width_o="3360" height_o="2100" data-src="https://freight.cargo.site/t/original/i/8696628ce1dade19909944fb65e44720cc8c810634d605be30a5650febbd27ff/Screen-Shot-2021-01-04-at-4.35.37-PM.png" data-mid="93949833" border="0" src="https://freight.cargo.site/w/1000/i/8696628ce1dade19909944fb65e44720cc8c810634d605be30a5650febbd27ff/Screen-Shot-2021-01-04-at-4.35.37-PM.png" /> <img width="3360" height="2100" width_o="3360" height_o="2100" data-src="https://freight.cargo.site/t/original/i/4d6226755e5d9aa97abb609317569913422c4c700d2db1a48e5f53eecbfd5e3e/Screen-Shot-2021-01-04-at-4.37.02-PM.png" data-mid="93948235" border="0" src="https://freight.cargo.site/w/1000/i/4d6226755e5d9aa97abb609317569913422c4c700d2db1a48e5f53eecbfd5e3e/Screen-Shot-2021-01-04-at-4.37.02-PM.png" /> Synthesis <img width="2348" height="1860" width_o="2348" height_o="1860" data-src="https://freight.cargo.site/t/original/i/ba6b5a3f1b59ea4aee0ba9b4fc3718bc94f019c469bec7482356aa0093750ed0/Screen-Shot-2021-01-04-at-4.41.57-PM.png" data-mid="93948620" border="0" data-scale="86" src="https://freight.cargo.site/w/1000/i/ba6b5a3f1b59ea4aee0ba9b4fc3718bc94f019c469bec7482356aa0093750ed0/Screen-Shot-2021-01-04-at-4.41.57-PM.png" /> <img width="2372" height="1878" width_o="2372" height_o="1878" data-src="https://freight.cargo.site/t/original/i/bbafcaa23da5305f780312318c85bd4429837d55b15f849ee231d2a0a1de9ba8/Screen-Shot-2021-01-04-at-4.41.39-PM.png" data-mid="93948619" border="0" data-scale="86" src="https://freight.cargo.site/w/1000/i/bbafcaa23da5305f780312318c85bd4429837d55b15f849ee231d2a0a1de9ba8/Screen-Shot-2021-01-04-at-4.41.39-PM.png" /> We kept the group collaboration going for the synthesis of our user interviews. We began by writing down some of the key insights we individually picked up on and then grouped them based on similarities. Each of these reoccurring similarities was highlighted as a “theme”, the 5 final ones being: Safety, Community, Physicality, Availability, and Flexibility. Ideation + Iteration While I wanted to keep all five themes in mind with my design decisions, I focused on Safety and Community as the most important given their relatively higher frequency in the interviews I participated in. I began my feature ideation with a list of main needs taken from interviews and then developed an information architecture for the app with the features that fit well together.&nbsp; <img width="1625" height="1745" width_o="1625" height_o="1745" data-src="https://freight.cargo.site/t/original/i/6a6bf69d5011064435f66e92e164ac351a197ed90ef1cb8a1114bb9feefcbb21/Frame-5.png" data-mid="93949638" border="0" data-scale="49" src="https://freight.cargo.site/w/1000/i/6a6bf69d5011064435f66e92e164ac351a197ed90ef1cb8a1114bb9feefcbb21/Frame-5.png" /> <img width="1625" height="1745" width_o="1625" height_o="1745" data-src="https://freight.cargo.site/t/original/i/8848549d548f8c65d7094f701db5d434cf7646f99a99509c340a69b2f223c939/Frame-3.png" data-mid="93949636" border="0" data-scale="48" src="https://freight.cargo.site/w/1000/i/8848549d548f8c65d7094f701db5d434cf7646f99a99509c340a69b2f223c939/Frame-3.png" /> <img width="3097" height="1543" width_o="3097" height_o="1543" data-src="https://freight.cargo.site/t/original/i/0554445e4f02bf966f7b3a6ead50f4600849ae5fe5bcce31e57afaeb8f6be0d8/Frame-2.png" data-mid="93949635" border="0" src="https://freight.cargo.site/w/1000/i/0554445e4f02bf966f7b3a6ead50f4600849ae5fe5bcce31e57afaeb8f6be0d8/Frame-2.png" /> <img width="3799" height="1543" width_o="3799" height_o="1543" data-src="https://freight.cargo.site/t/original/i/8bee47b3fdf6c91d89b697101d9a85f8ba690bcbccefdf88b6e4a1f19974b290/Frame-1.png" data-mid="93949634" border="0" src="https://freight.cargo.site/w/1000/i/8bee47b3fdf6c91d89b697101d9a85f8ba690bcbccefdf88b6e4a1f19974b290/Frame-1.png" /> Prototyping + Testing <img width="375" height="812" width_o="375" height_o="812" data-src="https://freight.cargo.site/t/original/i/e75d460de53d415bf4d51ef926687ce4cada7da837c1581cb82c694ac92cd767/X---20.png" data-mid="94046336" border="0" src="https://freight.cargo.site/w/375/i/e75d460de53d415bf4d51ef926687ce4cada7da837c1581cb82c694ac92cd767/X---20.png" /> <img width="375" height="812" width_o="375" height_o="812" data-src="https://freight.cargo.site/t/original/i/d8feb6eda8210573ad8af435767d89bfc0d72161c0e75983722f0aa409882464/X---85.jpg" data-mid="94046333" border="0" src="https://freight.cargo.site/w/375/i/d8feb6eda8210573ad8af435767d89bfc0d72161c0e75983722f0aa409882464/X---85.jpg" /> <img width="375" height="812" width_o="375" height_o="812" data-src="https://freight.cargo.site/t/original/i/f72bf26047dcf2b0b2ae8fa9511317f286e3f99e95c2caf8b5d94654224ab242/X---86.jpg" data-mid="94046334" border="0" src="https://freight.cargo.site/w/375/i/f72bf26047dcf2b0b2ae8fa9511317f286e3f99e95c2caf8b5d94654224ab242/X---86.jpg" /> After building out the underlying structure of my app, I went into prototyping interface options for the final features. With many features, I adapted and changed them after getting user feedback on what was necessary/unnecessary, or helpful/unhelpful. A presentation on Usability Research from a Google UX Designer, allowed me to run think-aloud protocol, pair sampling, and retrospective probing tests on the same users we interviewed in our research phase. The slideshow shows some in-process prototypes I developed of the “Live” feature for the series of tests. We were also tasked to use Google Material Design in our designs, which you will see my understanding evolve through usage. Final Product Upon the implementation of user feedback, I was able to build out my full app prototype. These clips show a few short instances of the app’s functionalities. On the left, a tool page, where a student can view what shop spaces have that tool, how busy those shops are, and then reserve the tool in their desired location. Below is an example of how a student can reserve a tool and then ask for help once in the space, and then how that shows up on the monitor’s end. To test out the full capabilities of the app check out the Figma prototypes for the student interface and the monitor interface. <img width="1512" height="883" width_o="1512" height_o="883" data-src="https://freight.cargo.site/t/original/i/478ec538a1dda1053420838439ec84bc9dbc193c8921e966932333c93d71125f/profile-res.gif" data-mid="94737246" border="0" src="https://freight.cargo.site/w/1000/i/478ec538a1dda1053420838439ec84bc9dbc193c8921e966932333c93d71125f/profile-res.gif" /> <img width="1512" height="883" width_o="1512" height_o="883" data-src="https://freight.cargo.site/t/original/i/c51368527f2cc43fb84a35a528173afcbee2ca1931b2b235854c8fa828634e81/givens-bixby.gif" data-mid="94736338" border="0" src="https://freight.cargo.site/w/1000/i/c51368527f2cc43fb84a35a528173afcbee2ca1931b2b235854c8fa828634e81/givens-bixby.gif" /> <img width="1512" height="883" width_o="1512" height_o="883" data-src="https://freight.cargo.site/t/original/i/0adeca4a1fc87b033b6b2266c1ffe805b52471e62984bbda09ac9e44841e9b88/askforhelpmp4.gif" data-mid="94740333" border="0" src="https://freight.cargo.site/w/1000/i/0adeca4a1fc87b033b6b2266c1ffe805b52471e62984bbda09ac9e44841e9b88/askforhelpmp4.gif" /> <img width="1512" height="883" width_o="1512" height_o="883" data-src="https://freight.cargo.site/t/original/i/b1334e0064cc6abeb5d98cc988d5588926fb1e0cf0c571a60e1a4869e2997eed/student-help.gif" data-mid="94739671" border="0" src="https://freight.cargo.site/w/1000/i/b1334e0064cc6abeb5d98cc988d5588926fb1e0cf0c571a60e1a4869e2997eed/student-help.gif" />