https://angeltolentino.cargo.site Angel Tolentino - Portfolio Tue, 17 Jun 2025 05:20:52 +0000 https://angeltolentino.cargo.site en https://angeltolentino.cargo.site/Home Tue, 25 Jul 2023 06:28:08 +0000 Angel Tolentino - Portfolio https://angeltolentino.cargo.site/Home <img width="5616" height="4006" width_o="5616" height_o="4006" data-src="https://freight.cargo.site/t/original/i/bb0799d636686a71d40c3496b05b14e0c6a3340cba1e35ff033a894aa415781b/poster-copy.png" data-mid="234945153" border="0" src="https://freight.cargo.site/w/1000/i/bb0799d636686a71d40c3496b05b14e0c6a3340cba1e35ff033a894aa415781b/poster-copy.png" /> Digital Doll For my senior thesis, I crafted an interactive exhibition and experience centered around my decade old habit of journaling and turning it into several different products and pieces. By centering myself as the object of play, I hope people better understand their own habits around their data, personal information, and tech habits.&nbsp;&nbsp; Read more <img width="2062" height="1160" width_o="2062" height_o="1160" data-src="https://freight.cargo.site/t/original/i/4a819de8a1777453bd6aafc799fb59bee84371f85d5634684a8f6b04f9c03175/Screenshot-2023-12-30-at-8.36.57-PM.png" data-mid="200457849" border="0" src="https://freight.cargo.site/w/1000/i/4a819de8a1777453bd6aafc799fb59bee84371f85d5634684a8f6b04f9c03175/Screenshot-2023-12-30-at-8.36.57-PM.png" /> Snap Pass x Culver CityAn app designed to create an interactive and affordable experience to highlight key features and landmarks to visitors of Downtown Culver City using Snapchat.&nbsp; Read more <img width="960" height="540" width_o="960" height_o="540" data-src="https://freight.cargo.site/t/original/i/cf87414f13371e1f12a813bb9f888cfad59c2a9120196a9b5696920bd242c852/Header-Photo.png" data-mid="223753846" border="0" src="https://freight.cargo.site/w/960/i/cf87414f13371e1f12a813bb9f888cfad59c2a9120196a9b5696920bd242c852/Header-Photo.png" /> Views of Stonewall A Snapchat Lens created within the 2024 Snap Lens Academy for the theme of Inclusive Identity. It is a Snap Lens Fest Award Finalist for Best Creative Lens that allows the user to see the past and present history of LGBT+ Pride using Augmented Reality at the Stonewall Inn. Read more <img width="2880" height="1622" width_o="2880" height_o="1622" data-src="https://freight.cargo.site/t/original/i/8ac22c2d553ff00c7679c34248ecfae0f2050f3e993b81e7dc2b479baec2be15/GTE.png" data-mid="200812594" border="0" data-scale="100" src="https://freight.cargo.site/w/1000/i/8ac22c2d553ff00c7679c34248ecfae0f2050f3e993b81e7dc2b479baec2be15/GTE.png" /> Grand Theft EcoA UCLA English/Institute of Environment &amp; Sustainability experimental film project where I lead Art Direction &amp; Virtual Production. Set in a climate-impacted Los Angeles 25 years in the future filmed using Machinima: the process of cinematic production through a video game engine.&nbsp; &nbsp; Read more <img width="1958" height="1102" width_o="1958" height_o="1102" data-src="https://freight.cargo.site/t/original/i/a035322303394c31eafbb4ec30b05ebfe8d2ba0488754105c1a2fb18bcdf0838/Screenshot-2024-03-07-at-11.28.34-PM.png" data-mid="206298050" border="0" src="https://freight.cargo.site/w/1000/i/a035322303394c31eafbb4ec30b05ebfe8d2ba0488754105c1a2fb18bcdf0838/Screenshot-2024-03-07-at-11.28.34-PM.png" /> Love Letter App An application designed on the Apple WatchOS to take an ECG and heart rate to send to a loved one. Read more <img width="2176" height="1222" width_o="2176" height_o="1222" data-src="https://freight.cargo.site/t/original/i/b7f4b2acc78f29e44a8c6a341b543da4db267fd967a10025595a0e395ac09ebe/Screenshot-2024-06-08-at-3.46.59-AM.png" data-mid="212684478" border="0" src="https://freight.cargo.site/w/1000/i/b7f4b2acc78f29e44a8c6a341b543da4db267fd967a10025595a0e395ac09ebe/Screenshot-2024-06-08-at-3.46.59-AM.png" /> UrbaFarmA joint endeavor in product and interaction design to promote contemporary community gardening. Read more https://angeltolentino.cargo.site/GameStuff Tue, 02 Jan 2024 10:41:13 +0000 Angel Tolentino - Portfolio https://angeltolentino.cargo.site/GameStuff <img width="1914" height="1188" width_o="1914" height_o="1188" data-src="https://freight.cargo.site/t/original/i/a9163c61382e46992ea1897ec0a985785285d46a0a10c88bafb5e1e28b022b12/Screenshot-2024-01-02-at-2.45.16-AM.png" data-mid="200544619" border="0" data-scale="100" src="https://freight.cargo.site/w/1000/i/a9163c61382e46992ea1897ec0a985785285d46a0a10c88bafb5e1e28b022b12/Screenshot-2024-01-02-at-2.45.16-AM.png" /> Carrot Collector - Platformer - Unity - C# Read more <img width="2880" height="1800" width_o="2880" height_o="1800" data-src="https://freight.cargo.site/t/original/i/9d1e37e96f4a2a09792fa32f7f678b184f9b80a89c277527d2d1eb0b74afe326/Thumbnail.jpeg" data-mid="212689250" border="0" src="https://freight.cargo.site/w/1000/i/9d1e37e96f4a2a09792fa32f7f678b184f9b80a89c277527d2d1eb0b74afe326/Thumbnail.jpeg" /> The Chase Cinematic - Animated Short - Unreal Engine - Cinematic Level Sequencer Read more <img width="1946" height="1194" width_o="1946" height_o="1194" data-src="https://freight.cargo.site/t/original/i/4b3ff9517a879d24f56453655c765d8e0293617af88fc67bdee292db18910bb5/Screenshot-2024-01-01-at-2.54.30-PM.png" data-mid="200544456" border="0" data-scale="100" src="https://freight.cargo.site/w/1000/i/4b3ff9517a879d24f56453655c765d8e0293617af88fc67bdee292db18910bb5/Screenshot-2024-01-01-at-2.54.30-PM.png" /> Coffee Chaos- Simulator- Twine- HTML/CSS/Javascript Read more https://angeltolentino.cargo.site/About Fri, 22 Dec 2023 00:16:38 +0000 Angel Tolentino - Portfolio https://angeltolentino.cargo.site/About About Me Hi, my name’s Angel! I’m a multdisiciplinary designer/artist based in London. My work is driven by research, empathy, creativity, and all things cute! Cuteness is not just an aesthetic choice, but an emotional, impactful decision to be soft and playful in an often times sharp and difficult to navigate world.My previous background in healthcare led me to have an eye for detail, a brain for cognitive psychology, and a heart for empathy. My background is in technology, having studied my Bachelor’s in Interaction Design at Santa Monica College and having worked at the UCLA LENS Lab, Recharge Inc., and Snap Lens Academy. I’m currently studying Art and Design in the Graduate Diploma course at the Royal College of Art where some of my best work is done with play and craft in mind. By being born in the Philippines, raised in Los Angeles, and now living in London, the world has granted me a variety of experiences that inform my passion and perspective. Ultimately, I’m just a girl from the suburbs who wants to make a difference in other people’s lives. So reach out and let’s build a better, cuter world together! ︎ LinkedIn︎ Contact︎ Design Blog <img width="1013" height="1913" width_o="1013" height_o="1913" data-src="https://freight.cargo.site/t/original/i/1ccabffc7601721f10ae9701ddc328838db2a0c0dff064d1f419d24585541770/ValentinesDay2024.png" data-mid="206650922" border="0" data-scale="52" src="https://freight.cargo.site/w/1000/i/1ccabffc7601721f10ae9701ddc328838db2a0c0dff064d1f419d24585541770/ValentinesDay2024.png" /> My yearly Valentine’s Day Card. This year’s theme was International Phone Cards, like the ones I would use to call family back home. https://angeltolentino.cargo.site/Digital-Doll Tue, 17 Jun 2025 05:20:52 +0000 Angel Tolentino - Portfolio https://angeltolentino.cargo.site/Digital-Doll Digital DollDesigning critically on Artificial Intelligence and Technological Consumption Virtual Grad Show Presentation Brief For my senior capstone for the Interaction Design program at Santa Monica College, I decided to tackle Artificial Intelligence(AI). Working within the spaces of design, media, art, and technology, I crafted an interactive experience centered around my decade old habit of journaling and turning it into several different products and pieces. By centering myself as the object of play, I hope people better understand their own habits around their data, personal information, and technological consumption. <img width="5616" height="4006" width_o="5616" height_o="4006" data-src="https://freight.cargo.site/t/original/i/bb0799d636686a71d40c3496b05b14e0c6a3340cba1e35ff033a894aa415781b/poster-copy.png" data-mid="234682928" border="0" data-scale="66" src="https://freight.cargo.site/w/1000/i/bb0799d636686a71d40c3496b05b14e0c6a3340cba1e35ff033a894aa415781b/poster-copy.png" /> Digital Doll Poster Headline Time Frame: Spring 2025 (16 weeks) Skills: - Critical Design- Artificial Intelligence - Data Visualization - Product Design- Exhibition Design Tools: OpenAI/ChatGPT,&nbsp;Figma, Tableau, Google Sheets, Illustrator, Photoshop, p5js, and journaling! ProblemArtificial Intelligence has been touted as the future of technology and industry, but it does not come without its drawbacks. Issues around data misinformation/bias, privacy, intellectual copyright theft, and other ethical concerns have been put on the backburner in order for AI products to hit the market.&nbsp; <img width="1466" height="470" width_o="1466" height_o="470" data-src="https://freight.cargo.site/t/original/i/e5f4fcc10505316cf33a806eb665422206bed826f4389ab1f5cb72654ea63b5c/Screenshot-2025-06-16-at-10.42.53PM.png" data-mid="234682938" border="0" src="https://freight.cargo.site/w/1000/i/e5f4fcc10505316cf33a806eb665422206bed826f4389ab1f5cb72654ea63b5c/Screenshot-2025-06-16-at-10.42.53PM.png" /> AI Issues Headlines My Solution Digital Doll is designed to spark discussion on AI and the way people interact with their data and technology. Using artificial intelligence, data visualization, and processing, people can play with my own personal information in a variety of ways to stay informed on how data is scraped and played with online. <img width="4032" height="3024" width_o="4032" height_o="3024" data-src="https://freight.cargo.site/t/original/i/e5bb6606b09a9001a23909e1886349b63aead9bc26b2a73d7b1557a28033fa6b/IMG_0495.jpeg" data-mid="234682942" border="0" data-scale="79" src="https://freight.cargo.site/w/1000/i/e5bb6606b09a9001a23909e1886349b63aead9bc26b2a73d7b1557a28033fa6b/IMG_0495.jpeg" /> Final Exhibition Physical Space Process Journaling My main focus was to communicate who I am as a designer. This is done best through my journals. These hold a physical space for design inspiration, process documentation, sketches, self-reflection, archives, task management, and so much more. <img width="3831" height="2452" width_o="3831" height_o="2452" data-src="https://freight.cargo.site/t/original/i/2f63826addd3e895a223e6aeaa2cd99726a71482cca7209d8a777dd4afed7e3e/FullSizeRender.png" data-mid="234682992" border="0" src="https://freight.cargo.site/w/1000/i/2f63826addd3e895a223e6aeaa2cd99726a71482cca7209d8a777dd4afed7e3e/FullSizeRender.png" /> Diaries from 2015-2025 <img width="3860" height="2529" width_o="3860" height_o="2529" data-src="https://freight.cargo.site/t/original/i/f6783eb50aacd2163d040993fc445e993e8ae274767e1d17edf09e9dc7dc6692/DiaryEntries2.jpeg" data-mid="234682988" border="0" data-scale="98" src="https://freight.cargo.site/w/1000/i/f6783eb50aacd2163d040993fc445e993e8ae274767e1d17edf09e9dc7dc6692/DiaryEntries2.jpeg" /> Example of Journaling from July/August 2024 Research Additionally, research into different literature informed my methodology. Speculative Everything introduced me to critical design, the concept which describes design as a way to pose incisive questions, challenge the status quo, and think deeply about the possible future consequences of present choices. Dear Data presents information design as something that can be less cold and cynical and more human and abstract.&nbsp; <img width="311" height="400" width_o="311" height_o="400" data-src="https://freight.cargo.site/t/original/i/0b95a379225e87af46df645211b2aa61e1acef655c04d69ae1baab2e8975e728/specever.jpg" data-mid="234684711" border="0" data-scale="61" src="https://freight.cargo.site/w/311/i/0b95a379225e87af46df645211b2aa61e1acef655c04d69ae1baab2e8975e728/specever.jpg" /> Speculative Everything <img width="688" height="956" width_o="688" height_o="956" data-src="https://freight.cargo.site/t/original/i/d54b11fbc35dc70c9b78b88c3dcc9ebd73a217fc81b87ed90e9ffabd2c7b0b2e/deardata.jpeg" data-mid="234683247" border="0" data-scale="56" src="https://freight.cargo.site/w/688/i/d54b11fbc35dc70c9b78b88c3dcc9ebd73a217fc81b87ed90e9ffabd2c7b0b2e/deardata.jpeg" /> Dear Data Design The design of each feature was of course captured within my journals! Below are early mockups. <img width="3024" height="4032" width_o="3024" height_o="4032" data-src="https://freight.cargo.site/t/original/i/b0a213b32df137b883290daf1056b231464c2c9219cf0962aeeaf84e5dff6162/IMG_0078.jpeg" data-mid="234683293" border="0" src="https://freight.cargo.site/w/1000/i/b0a213b32df137b883290daf1056b231464c2c9219cf0962aeeaf84e5dff6162/IMG_0078.jpeg" /> Poster Mockup <img width="3024" height="4032" width_o="3024" height_o="4032" data-src="https://freight.cargo.site/t/original/i/d8ff348537ac5953478b5346cad495f70ed9a1ab9e773ffdcc77cd27260ba728/IMG_0265.jpeg" data-mid="234683292" border="0" src="https://freight.cargo.site/w/1000/i/d8ff348537ac5953478b5346cad495f70ed9a1ab9e773ffdcc77cd27260ba728/IMG_0265.jpeg" /> Exhibition Design Mockup <img width="3024" height="4032" width_o="3024" height_o="4032" data-src="https://freight.cargo.site/t/original/i/9cd47fc672ec63868eb35abcfffe2c242e9bb5903cf4b2640535964e471ae105/IMG_0164.jpeg" data-mid="234683291" border="0" src="https://freight.cargo.site/w/1000/i/9cd47fc672ec63868eb35abcfffe2c242e9bb5903cf4b2640535964e471ae105/IMG_0164.jpeg" /> Data Visualization Mockup Results The interactive exhibition relies on various digital/analog touchpoints: Processing, Data Visualization, and of course, Artificial Intelligence. Processing Processing is a program/software that allows one to use code to create visuals. p5js&nbsp;is a free and open-source JavaScript library that allows anyone to do this. A precedent for this project was Dear Diary, a random diary entry generator, which allows one to randomly click to see my diary entries or read the code to view them chronologically.&nbsp; https://angeltolentino.cargo.site/SnapPassCulverCity Wed, 20 Dec 2023 05:36:22 +0000 Angel Tolentino - Portfolio https://angeltolentino.cargo.site/SnapPassCulverCity Snap Pass x Culver CityA new Snapchat feature that allows users to explore Downtown Culver City easily as a unique and affordable experience. Brief Working in teams, the challenge was to explore and research a city center in order to design an interactive system to solve a problem found in the area.&nbsp; I came up with the idea to go to Downtown Culver City where we then conducted a design ethnography.<img width="3000" height="2000" width_o="3000" height_o="2000" data-src="https://freight.cargo.site/t/original/i/1fa7097dd613211c0f62a03d93ec5e994307b22ece0fffb8196f70ab727df932/culvermockup.png" data-mid="199803982" border="0" src="https://freight.cargo.site/w/1000/i/1fa7097dd613211c0f62a03d93ec5e994307b22ece0fffb8196f70ab727df932/culvermockup.png" /> Time Frame: Fall 2023 (16 weeks) Skills: - User Research - UI/UX Design - Product Design- Game Design - Motion GraphicsTools: Figma, Mural, Photoshop, &amp; Premiere Pro The Team: <img width="2018" height="554" width_o="2018" height_o="554" data-src="https://freight.cargo.site/t/original/i/30737a214683e0f53931621c16e8e4b737a4b441542c8e3578d56e18337494c6/Screenshot-2023-12-19-at-10.20.15-PM.png" data-mid="199804484" border="0" src="https://freight.cargo.site/w/1000/i/30737a214683e0f53931621c16e8e4b737a4b441542c8e3578d56e18337494c6/Screenshot-2023-12-19-at-10.20.15-PM.png" /> ContributionsAs a group project with my team, we each contributed to the process at every step of the way. We each conducted user interviews and reseach along with developing our design solution with journey mapping, prototyping, and user testing. For our video assignment, I supported by creating storyboards, editing the sound and visuals, and doing the voice-over. ProblemDowntown Culver City is seen as a hidden gem amongst many of its visitors; however, with the rising cost of living, increased traffic density, and lack of public knowledge of its many new features, it has become harder to engage with the space. Our Solution <img width="4800" height="2700" width_o="4800" height_o="2700" data-src="https://freight.cargo.site/t/original/i/a7c814438e7f1a44edb718c289259e7db5ee562208c858ec07f3503d2a9fbe4a/SnapPass-x-Culver-City-1920-x-1080-px.png" data-mid="199808062" border="0" data-scale="51" src="https://freight.cargo.site/w/1000/i/a7c814438e7f1a44edb718c289259e7db5ee562208c858ec07f3503d2a9fbe4a/SnapPass-x-Culver-City-1920-x-1080-px.png" />Our app was designed to create an interactive and affordable experience to highlight key features and landmarks to visitors of Downtown Culver City. Key Insights Found from research &amp; interviews. <img width="560" height="800" width_o="560" height_o="800" data-src="https://freight.cargo.site/t/original/i/76848a306435e411f5176f3592535bcc8681c819e3163d146522b34bea1a4842/Screenshot-2023-12-19-at-11.53.01-PM.png" data-mid="199808602" border="0" src="https://freight.cargo.site/w/560/i/76848a306435e411f5176f3592535bcc8681c819e3163d146522b34bea1a4842/Screenshot-2023-12-19-at-11.53.01-PM.png" /> Since the implementation of the protected bus &amp; bike lanes there have been increases in different modes of transportation: - 38% in bus ridership - 57% in cycling - 68% in micromobility (scooters, e-bikes, etc.) This along with dutch designed intersections makes our app usable in a compact, pedestrian friendly area.&nbsp; <img width="1280" height="1280" width_o="1280" height_o="1280" data-src="https://freight.cargo.site/t/original/i/9ee09e939176a197f8be8658093cd8cd30828f3f7c6687ecba617eda14ad93b2/IMG_3208-Large.png" data-mid="199810236" border="0" data-scale="90" src="https://freight.cargo.site/w/1000/i/9ee09e939176a197f8be8658093cd8cd30828f3f7c6687ecba617eda14ad93b2/IMG_3208-Large.png" /> <img width="1280" height="1280" width_o="1280" height_o="1280" data-src="https://freight.cargo.site/t/original/i/7db895b4ba543c9e4d6824e553fd05633240ab9056f717b4734e880e8df1e01e/IMG_5991-Large.png" data-mid="199810238" border="0" src="https://freight.cargo.site/w/1000/i/7db895b4ba543c9e4d6824e553fd05633240ab9056f717b4734e880e8df1e01e/IMG_5991-Large.png" /> <img width="1280" height="1280" width_o="1280" height_o="1280" data-src="https://freight.cargo.site/t/original/i/f169aa918e78fff8016bd19abc1bee782a9a68f379ea19cb6398fb2912ef55d4/IMG_3215-Large.png" data-mid="199810237" border="0" src="https://freight.cargo.site/w/1000/i/f169aa918e78fff8016bd19abc1bee782a9a68f379ea19cb6398fb2912ef55d4/IMG_3215-Large.png" /> <img width="444" height="840" width_o="444" height_o="840" data-src="https://freight.cargo.site/t/original/i/607a36b5e91799d011017daf639a7b97dc90ad1f19073b78fce43121f8851315/Screenshot-2023-12-20-at-12.33.30-AM.png" data-mid="199810661" border="0" src="https://freight.cargo.site/w/444/i/607a36b5e91799d011017daf639a7b97dc90ad1f19073b78fce43121f8851315/Screenshot-2023-12-20-at-12.33.30-AM.png" /> <img width="444" height="840" width_o="444" height_o="840" data-src="https://freight.cargo.site/t/original/i/2e588a554f3bbd78c5159790ede2b86b6df885028311c28e8374d7e995ca7b8e/Screenshot-2023-12-20-at-12.33.52-AM.png" data-mid="199810662" border="0" src="https://freight.cargo.site/w/444/i/2e588a554f3bbd78c5159790ede2b86b6df885028311c28e8374d7e995ca7b8e/Screenshot-2023-12-20-at-12.33.52-AM.png" /> <img width="554" height="800" width_o="554" height_o="800" data-src="https://freight.cargo.site/t/original/i/8b63cd933b0765ca5d23cd93f97d968c4812c3510e00f4185fd03c7ebecb3ce0/Screenshot-2023-12-19-at-11.53.27-PM.png" data-mid="199808607" border="0" src="https://freight.cargo.site/w/554/i/8b63cd933b0765ca5d23cd93f97d968c4812c3510e00f4185fd03c7ebecb3ce0/Screenshot-2023-12-19-at-11.53.27-PM.png" />After going online with our desktop research, there was polarizing opinions on Culver City from things such as car traffic vs increased public transit and economic growth vs increased cost of living. <img width="552" height="800" width_o="552" height_o="800" data-src="https://freight.cargo.site/t/original/i/18eb2047fe63fa9a38bd451d7eecbece1efdb1e37e923152c2b612395431781e/Screenshot-2023-12-19-at-11.53.55-PM.png" data-mid="199808608" border="0" src="https://freight.cargo.site/w/552/i/18eb2047fe63fa9a38bd451d7eecbece1efdb1e37e923152c2b612395431781e/Screenshot-2023-12-19-at-11.53.55-PM.png" /> The cost of living in Culver City is 65% higher than the national average. Additionally, the average home price is $1.29 million and the average rent is $3,950 a month.&nbsp; <img width="1125" height="1118" width_o="1125" height_o="1118" data-src="https://freight.cargo.site/t/original/i/66fd9b35d767f8e15c2ba59e3962ab50a926a412f3af29f72140213ae7ea406b/IMG_3966.jpeg" data-mid="199810903" border="0" data-scale="47" src="https://freight.cargo.site/w/1000/i/66fd9b35d767f8e15c2ba59e3962ab50a926a412f3af29f72140213ae7ea406b/IMG_3966.jpeg" /> Ken, 23, Artist“I’ve lived in Culver City since I was a toddler. I loved going to Downtown as a kid but as I’ve gotten older it’s harder to go because of how expensive it’s gotten. There are a couple places still affordable, like the thrift store, but there’s so little now.” Process Early Sketches Drawn by me! We decided early on that Snapchat carried all of the features we were hoping to design for: GPS, augmented reality, collectible stickers, and dedicated social media base. With this in mind, it made sense for us to build within a system rather than finding ways to validate our own. <img width="1280" height="960" width_o="1280" height_o="960" data-src="https://freight.cargo.site/t/original/i/c6ece91603d2bb80731f0a264a71742a8005d4538ec6dfc1a19a7a8f9e8cd42e/IMG_2639-Large.png" data-mid="199811808" border="0" src="https://freight.cargo.site/w/1000/i/c6ece91603d2bb80731f0a264a71742a8005d4538ec6dfc1a19a7a8f9e8cd42e/IMG_2639-Large.png" /> <img width="770" height="710" width_o="770" height_o="710" data-src="https://freight.cargo.site/t/original/i/5ba259acd9845379b0a84cb10180416bec39d5ac30498203fa7625efdf287ff5/Screens2.jpeg" data-mid="199811773" border="0" src="https://freight.cargo.site/w/770/i/5ba259acd9845379b0a84cb10180416bec39d5ac30498203fa7625efdf287ff5/Screens2.jpeg" /> <img width="764" height="722" width_o="764" height_o="722" data-src="https://freight.cargo.site/t/original/i/1e4c61566cd55c1e5b88cc658fa8cc6612ac1867734cfb84735e7de55d2ff5b2/Screens1.jpeg" data-mid="199811775" border="0" src="https://freight.cargo.site/w/764/i/1e4c61566cd55c1e5b88cc658fa8cc6612ac1867734cfb84735e7de55d2ff5b2/Screens1.jpeg" /> Mid Fidelity Prototype We created a paper prototype in order present our early concept.&nbsp; User Testing Insights 1.&nbsp; Better Testing: The usability test was conducted in a way where each step was conducted. In hindsight, more freedom should have been given to testers so that we may see which points they succeed and stumble at.&nbsp; 2. Tutorial Screens: Users had difficulty starting a mission as the interface was entirely new. This could be remedied with a tutorial screen that teaches players how to use the new feature.&nbsp; 3. Clearer Map: The Snapchat map and GPS functions confused users. Original testers were classmates who had not used Snapchat in months to years, so it was something to get accustomed to. This feature could be designed more user-friendly. Results Test Our Final Prototype Features Onboarding To combat users confusion with starting this new feature, a tutorial process was added. It demonstrates the process of going through&nbsp;the app and the features highlighted below. <img width="600" height="1212" width_o="600" height_o="1212" data-src="https://freight.cargo.site/t/original/i/8c46975a79919535b567c0a44fc9daa60c0827583dcc3eb4b31fa6172495f8f9/OnBoarding-1.gif" data-mid="199952897" border="0" data-scale="68" src="https://freight.cargo.site/w/600/i/8c46975a79919535b567c0a44fc9daa60c0827583dcc3eb4b31fa6172495f8f9/OnBoarding-1.gif" /> Weekly Missions Users get to explore Culver City in a new and costless way. Each mission contains up to three challenges: locations of landmarks in the area for them to find and snap. <img width="604" height="1222" width_o="604" height_o="1222" data-src="https://freight.cargo.site/t/original/i/492437d1a5f81de2c075582538de41e4a35ca6d20a3b8e914ad35ae02e80b0cb/Missions2.png" data-mid="199955000" border="0" data-scale="68" src="https://freight.cargo.site/w/604/i/492437d1a5f81de2c075582538de41e4a35ca6d20a3b8e914ad35ae02e80b0cb/Missions2.png" />&nbsp; Augmented Reality People loved our mascot Culvie the Lion, so they were incorporated into our AR component by having them highlight the history and features of each challenge location.&nbsp;<img width="600" height="1212" width_o="600" height_o="1212" data-src="https://freight.cargo.site/t/original/i/0681e214a9a43ad1af8266988dc031fb1996412a26d53f6239789b2a5b8c69a4/AR.gif" data-mid="199954936" border="0" data-scale="68" src="https://freight.cargo.site/w/600/i/0681e214a9a43ad1af8266988dc031fb1996412a26d53f6239789b2a5b8c69a4/AR.gif" /> Live Wayfinding The location for each weekly challenge is highlighted within a circular area. WithSnapchat’s GPS, they are able to know their own location in relation to each. A new age scavenger hunt. <img width="604" height="1222" width_o="604" height_o="1222" data-src="https://freight.cargo.site/t/original/i/c82998e0f40597763e351721fb3e40d21753bb0d82e8f54925d9122e00357d8a/Live-Map.png" data-mid="199955291" border="0" data-scale="68" src="https://freight.cargo.site/w/604/i/c82998e0f40597763e351721fb3e40d21753bb0d82e8f54925d9122e00357d8a/Live-Map.png" /> Rewards By completing each weekly mission, the player earns a reward to use at a local participating business. This further incentivizes its use and alleviates some of the costs of going Downtown.<img width="600" height="1212" width_o="600" height_o="1212" data-src="https://freight.cargo.site/t/original/i/bdd7caf4756eb099ccee98fecf36e942b07fce94e19db48c216a02e1794bc2c1/Rewards.gif" data-mid="199955289" border="0" data-scale="68" src="https://freight.cargo.site/w/600/i/bdd7caf4756eb099ccee98fecf36e942b07fce94e19db48c216a02e1794bc2c1/Rewards.gif" /> Social Media Users are able to share their stories to the local community and view others as well. For each challenge completed, the user earns an exclusive Snapchat sticker for their use on the app.&nbsp;<img width="604" height="1220" width_o="604" height_o="1220" data-src="https://freight.cargo.site/t/original/i/012cef26448e8f71c14e4f38139b7989f8edcee2be7cfb7ae49cad35272d3990/Social.png" data-mid="199956002" border="0" data-scale="68" src="https://freight.cargo.site/w/604/i/012cef26448e8f71c14e4f38139b7989f8edcee2be7cfb7ae49cad35272d3990/Social.png" /> Reflection Scalability&nbsp;Towards the end of the project we realized the capacity of this feature to be scaled globally to other regions. Imagine it in New York City or even in the UK. Scalability is something that should be more at the forefront of design, and we learned that in this process. Snap Pass x Culver City still provides a great breeding ground for early implementation and further development.&nbsp; Augmented Reality Additions We were thankful to have Raag Harshavat, Augmented Reality Developer Relations Lead at Snapchat, there to provide feedback. While we designed our AR feature to highlight local landmarks, there is much more that can be done to utilized AR to its full potential. Possibilities include additions to wayfinding and Snapchat lens filter functionality.&nbsp; User-Generated Content Social media integration in the form of stories and stickers were thought out, a feature of this size would get further support with content generated by its users. Thinking about how to get user generated recommendations and community input would be helpful to research.&nbsp; <img width="2348" height="1236" width_o="2348" height_o="1236" data-src="https://freight.cargo.site/t/original/i/b5828ab9a8bb924b571b4c06d8fd8cc35307339d829562a600d9fe05ba3734a2/End.png" data-mid="199958094" border="0" data-scale="80" src="https://freight.cargo.site/w/1000/i/b5828ab9a8bb924b571b4c06d8fd8cc35307339d829562a600d9fe05ba3734a2/End.png" /> This work was an academic project within Santa Monica College, but the following summer I was a Snap Lens Academy Scholar. See work I did within the apprenticeship&nbsp;here. https://angeltolentino.cargo.site/SLA Tue, 17 Dec 2024 22:28:53 +0000 Angel Tolentino - Portfolio https://angeltolentino.cargo.site/SLA Views of StonewallA Snap Lens Fest Award Finalist that lets you see the past and present of Pride.<img width="1914" height="1078" width_o="1914" height_o="1078" data-src="https://freight.cargo.site/t/original/i/f5ba431b8d18a9872b99748a8777cef31efac47a414c116a1733ce9a55a34129/Screenshot-2024-08-13-at-3.28.21PM.png" data-mid="223503066" border="0" src="https://freight.cargo.site/w/1000/i/f5ba431b8d18a9872b99748a8777cef31efac47a414c116a1733ce9a55a34129/Screenshot-2024-08-13-at-3.28.21PM.png" /> Brief Under the direction of Snap Inc. within the Snap Lens Academy, we were tasked with leveraging Augmented Reality to build unique experiences to promote greater social consciousness and help shape a more positive future. With our chosen topic of Inclusive Identity, we used Custom Location-Based AR to build a lens focused on the Stonewall Inn National Monument and the 1969 Stonewall Riots. This was done to center and uplift our target audience: transgender women of color who face marginalization and erasure to this day. Time Frame: July 22nd 2024 - August 13th 2024 (4 Weeks) Skills:- Augmented Reality - 3D Modeling- User Research- UI/UX Design- Product DesignTools: Snap Lens Studio, Blender, After Effects, Figma The Team <img src="https://lh7-rt.googleusercontent.com/docsz/AD_4nXeBlsa3YkgIdwiLWjdxF4JOSIWLMxnxohugcraSzvueD6z5_Cfb3oY9VqTewtuWKsOszZecm-ZGiREFnUq6SElWMuMYAKW_Y6xyYV4pJQOtqsLm7Ewxw2akwCC01248xV5uRUtCpblvkFjBosI2TcLyUgnO?key=6dVpLFMkjO6FbjNvs1d5hw" width="169" height="290.601" style="width: 169px; height: 290px;"> Yestin Arvin Gochuico Miami, FL Technical Artist Visual Designer <img src="https://lh7-rt.googleusercontent.com/docsz/AD_4nXdrFed5upkVE6an7vil13FGyAKdq4zlRJlGhdcXm2z8ONpatEyMtpBdmmZFP-aXc1lBvk3vmuvx6LfpWSUP2bRUGe2rMhNhwysiU8BUajto4fzptRDz_eGTWUqkhSGjDYw6S1Irl0YgA_4ofGUqSfl28qCg?key=6dVpLFMkjO6FbjNvs1d5hw" width="172" height="297.5805" style="width: 172px; height: 297px;"> Angel Tolentino Los Angeles, CA Project Manager Visual Designer <img src="https://lh7-rt.googleusercontent.com/docsz/AD_4nXc5BnxZsq8QCxnWPm64J7ziwwbBVyCAh5yTD1BUC9DEx91HrXQt8v22sjCMmCCMUgo7DThEMVVJ_uUQFSNF09F9OjY9EpnljJ4lUq2HWZdDvLCzEbMLof2WrdFH7RBxuda6v2j0khdyWzd7v9LAi8n8bHI?key=6dVpLFMkjO6FbjNvs1d5hw" width="168" height="291.4836" style="width: 168px; height: 291px;"> Saumya Tripathi New York, NY Quality Assurance Analyst Visual Designer Contributions As project manager, I supported the project by defining the goals of the project, establishing responsibilities, delegating tasks, and monitoring the progress of the lens until its release. I also guided the direction of the lens as the team member most knowledgable on the Stonewall Riots and Inclusive Identity. We each worked as visual designers for the lens from its storyboards to full creation with which I highlight my contributions below. Additionally, the final pitch presentation at the end of the SLA program was made collaboratively.&nbsp; ProblemInclusive Identity (Gender Identity, Sexual Orientation, &amp; Ethnicity) is a wide ranging topic, so we decided to initially narrow our focus down to LGBT+ Pride. So we turned to its origins: Stonewall. The Stonewall Inn was the site for the 1969 Stonewall Riots, a riot sparked by bar patrons and local residents who responded in protest to the police raid that occurred at the bar. It sparked many protests and is seen as a catalyst for the gay rights movement. <img width="1920" height="1585" width_o="1920" height_o="1585" data-src="https://freight.cargo.site/t/original/i/065cc8abc97d05658deffdb1feb6f0e9f9f03bc03da9eb5e845f0b3756eb76ab/stonewallinn.jpg" data-mid="223495339" border="0" data-scale="60" src="https://freight.cargo.site/w/1000/i/065cc8abc97d05658deffdb1feb6f0e9f9f03bc03da9eb5e845f0b3756eb76ab/stonewallinn.jpg" /> Insights We found that nearly half of all Americans don’t know about the Stonewall Riots. <img src="https://lh7-rt.googleusercontent.com/docsz/AD_4nXeOfvUeKX7_Yx-dGIjIegBdGlAUeXf0ZUDedQ2lLNbimnE0EGhKx8jlP-6WnkM6IEUJRoDdxzfdGGD8C-uWMRFQ2FMb7EghD9pyQX5QFSOFrCqCYb1d1MET63cZEdi4tTmpjZ08ec0IesPXAm0LekUy-4w?key=6dVpLFMkjO6FbjNvs1d5hw" width="601" height="338" style="width: 601px; height: 338px;" data-scale="100"> Not only that, but narratives around Stonewall are misinformed. It was started primarily by queer and trans people of color who attended the bar. This quote by Jason Baumann,&nbsp; a writer and archivist, puts it succinctly:<img src="https://lh7-rt.googleusercontent.com/docsz/AD_4nXelP8rXpzglN1fQbP4GxpbhRnd4a_KFF1qyW5TLt-pl9XC9KWjrQdJ2_jsjZAGBR8VglpjYbo7xGFXHrNiqKGxclN50ypAceArSbr3I3zR-vyCHcSVY6DRjG0M_t6aJktxp8HErm1cMVZltj0ATGkdEpjoa?key=6dVpLFMkjO6FbjNvs1d5hw" width="255" height="256" style="width: 255px; height: 256px;"> “…an even greater challenge has been the way the LGBTQ archives we have inherited have already been structured by the exclusion from the record of the voices of people of color.” - Jason Baumann, The Stonewall Reader This all reflects our present, where anti-LGBTQ+ hate is still prevalent to this day. Specifically, transgender women of color face higher rates of violence and sometimes don’t even have support from those within the community.<img src="https://lh7-rt.googleusercontent.com/docsz/AD_4nXfOFsW1nC8lj0LBJGYP5CXtaCbW1TT3ODrP9GGPu0cgzM1OQk-kOdyHYQPelvy6TOfvUhpYcbjCOEmSZkB4b9gnYViO4WSE6sfrp8eheU78JxrHDPPX8ZUOqNs_nGyO3jeJ4hhtva_1bS8asPAePrlbHWQZ?key=6dVpLFMkjO6FbjNvs1d5hw" width="624" height="429" style="width: 624px; height: 429px;"> Our Solution With all of this in mind, we set out to create a project for a front lens and an immersive world lens experience that showcases the evolution of Pride. This is important because the current historical narrative is nuanced, and we aim to support it by educating and raising awareness. It uses the location of the Stonewall Inn to showcase the celebratory nature of Pride today, along with the history of Pride as a form of protest in the past. <img src="https://lh7-rt.googleusercontent.com/docsz/AD_4nXdoHoriw42Rt4Bb_jHY3MVlMZZByJGplvk27WWXAOSeE9EnYqaIOYbG5uPRxY3WQmbJYsCDww0-Y8XQpfLf6CDvNqBKre5T7UCLpWbQJ5nLigjk15N4EKSE1hijLAAL6CAKoiVgO4VznfW5e8-MU7NTIcRd?key=6dVpLFMkjO6FbjNvs1d5hw" width="145" height="259" style="width: 145px; height: 259px;" data-scale="100"> Process StoryboardingCreating the storyboard in Figma allowed us to visualize our concept, list all the key details we would need to create for its assets, and settle upon a minimum viable product. It is divided into specifically the front and back camera. From here, I specifically organized the asset list to go through so that we could delegate each piece. <img width="3840" height="7804" width_o="3840" height_o="7804" data-src="https://freight.cargo.site/t/original/i/7708d80e4d8f08a76d1ffe7d11a2fefb096ce87ac5e970c5914dbd4868a881e3/Storyboard.png" data-mid="223495936" border="0" data-scale="70" src="https://freight.cargo.site/w/1000/i/7708d80e4d8f08a76d1ffe7d11a2fefb096ce87ac5e970c5914dbd4868a881e3/Storyboard.png" />3D ModelingMany different components were made for this lens. I handled 3D asset creation for the flower crown for the front camera as well as the banner and newspaper assets for the protest scene. &nbsp; <img width="3024" height="1732" width_o="3024" height_o="1732" data-src="https://freight.cargo.site/t/original/i/bdd133edd7dccb341845b66019a59bb2d55f9bde648e71a8cb41f3850cbd51b5/Screenshot-2024-07-31-at-1.39.15PM.png" data-mid="223501440" border="0" src="https://freight.cargo.site/w/1000/i/bdd133edd7dccb341845b66019a59bb2d55f9bde648e71a8cb41f3850cbd51b5/Screenshot-2024-07-31-at-1.39.15PM.png" /> Banner from a Stonewall protest recreated in Photoshop. <img width="2540" height="1247" width_o="2540" height_o="1247" data-src="https://freight.cargo.site/t/original/i/4c09eedfeb379a60805ae7ec50fec6e848c69988ebbcf7da60153f4042e4e24f/Screenshot-2024-07-31-at-2.56.39PM.png" data-mid="223501448" border="0" data-scale="100" src="https://freight.cargo.site/w/1000/i/4c09eedfeb379a60805ae7ec50fec6e848c69988ebbcf7da60153f4042e4e24f/Screenshot-2024-07-31-at-2.56.39PM.png" /> 3D Asset created from the Stonewall asset in Blender.&nbsp; <img width="2930" height="1706" width_o="2930" height_o="1706" data-src="https://freight.cargo.site/t/original/i/84ca591f197123193feda5a2c870c2788206d1427f5b21d2540872e57c4725ac/Screenshot-2024-07-30-at-2.11.30PM.png" data-mid="223501449" border="0" src="https://freight.cargo.site/w/1000/i/84ca591f197123193feda5a2c870c2788206d1427f5b21d2540872e57c4725ac/Screenshot-2024-07-30-at-2.11.30PM.png" /> Assets were then imported into Lens Studio such as the newspaper article of the Stonewall Riots.&nbsp; Marsha P Johnson was known for her beautiful flower crowns. Originally, it was modeled in blender by me before switching to using Lens Studio’s Flower Maker tool in their asset library for better optimization. <img width="1235" height="943" width_o="1235" height_o="943" data-src="https://freight.cargo.site/t/original/i/96e4b3a42c86fa26aea1828df351c14d4a493ae9b5f5b5ad5d711f078b7f5b5c/Screenshot-2024-08-01-at-10.45.17AM.png" data-mid="223501474" border="0" src="https://freight.cargo.site/w/1000/i/96e4b3a42c86fa26aea1828df351c14d4a493ae9b5f5b5ad5d711f078b7f5b5c/Screenshot-2024-08-01-at-10.45.17AM.png" /> <img width="2558" height="1319" width_o="2558" height_o="1319" data-src="https://freight.cargo.site/t/original/i/753ae99e4aaaf2c6fcb316d65bf5b8974d48c77e542fae3f0b78c88a392789aa/Screenshot-2024-07-31-at-4.17.59PM.png" data-mid="223501468" border="0" src="https://freight.cargo.site/w/1000/i/753ae99e4aaaf2c6fcb316d65bf5b8974d48c77e542fae3f0b78c88a392789aa/Screenshot-2024-07-31-at-4.17.59PM.png" /> <img width="958" height="1090" width_o="958" height_o="1090" data-src="https://freight.cargo.site/t/original/i/dfe192747461f66fd3268d051687190176e8c8adb0beb7bcf2fa542e1cadd764/Screenshot-2024-08-05-at-4.18.45PM.png" data-mid="223501471" border="0" src="https://freight.cargo.site/w/958/i/dfe192747461f66fd3268d051687190176e8c8adb0beb7bcf2fa542e1cadd764/Screenshot-2024-08-05-at-4.18.45PM.png" /> <img width="479" height="522" width_o="479" height_o="522" data-src="https://freight.cargo.site/t/original/i/0fc3318b42b744762d65ead84efd8331787cbe652943daeaf681aee841ffafbb/Screenshot-2024-08-05-at-11.48.51AM.png" data-mid="223501476" border="0" src="https://freight.cargo.site/w/479/i/0fc3318b42b744762d65ead84efd8331787cbe652943daeaf681aee841ffafbb/Screenshot-2024-08-05-at-11.48.51AM.png" /> <img width="926" height="744" width_o="926" height_o="744" data-src="https://freight.cargo.site/t/original/i/6e62e54d0ac89f01019a784dc747dcd3c94bffde6de9aacdf8c7fe93eef93221/Screenshot-2024-08-05-at-10.01.56AM.png" data-mid="223501475" border="0" src="https://freight.cargo.site/w/926/i/6e62e54d0ac89f01019a784dc747dcd3c94bffde6de9aacdf8c7fe93eef93221/Screenshot-2024-08-05-at-10.01.56AM.png" /> Custom Location AR Testing One challenge we had was that the Stonewall Inn had scaffolding up, so we pivoted to using the Visitor’s Center next door. In order to make sure the lens worked properly, Saumya tested the lens on site at the Stonewall Inn while me and Yestin updated the lens in real-time using Lens Studio remotely. &nbsp; <img src="https://lh7-rt.googleusercontent.com/docsz/AD_4nXfHhX9jblPyvvDWTy6ER56LyLS2e5HbpEHr-nbCk-k9DLdSUYbrqR1pkKA02whTjBtW0_zEhATZ52BwRgyERprto-xFXWtSv4uQaydQL8-mODvP1IapiyRIosxxV3HNJ_P7nLD8JZ5yA1XZmnyy-IRyBW23?key=6dVpLFMkjO6FbjNvs1d5hw" width="270.22769999999997" height="202" style="width: 270px; height: 202px;"> <img src="https://lh7-rt.googleusercontent.com/docsz/AD_4nXcN_jDzkDvUg_UC_h_XPCOs3KciBtzaubBW6uDyJZ6j6y73MR6ILwdE6P0VBj8aUBCyxL2Tzs1vq0qESYlWl3Pgf6nAagFcmUcyB528QGV7Z8ZuDZFh_Yd08qBSw5KPS9HFezwFTIQRGpxU7p_ptxqZV6Wo?key=6dVpLFMkjO6FbjNvs1d5hw" width="211.4838" height="281.8506" style="width: 211px; height: 281px;"> <img src="https://lh7-rt.googleusercontent.com/docsz/AD_4nXevN4AZYL2FUStgSk88XImjrHdSkKpNGreWEoO5kmgzSldbQm5qY1bgtOCvayVNmgQqY3YI_jpa3IusFBsPkwfB3bURhgmoegL_HPlVSaDCGTmSYxIR8aym_1fYE9TnvayQZQYiK2th0rKdS2Z-B9ha8U8?key=6dVpLFMkjO6FbjNvs1d5hw" width="248" height="198" style="width: 248px; height: 198px;"> Results: Our Final LensThe lens features both a Pride/Protest Scene, along with the front lens experience of a flower crown.&nbsp; <img src="https://lh7-rt.googleusercontent.com/docsz/AD_4nXcIrcUCkHXO5m6hoALV8XQNqeVOYYZV9sjDdC6yAn7_MftmzsjeTP8ibuUkcw6i6fsGPRmRd3YfA_Wu_phPrg2SX-fLbdpKyfgru1RweFYxdoXJIhacW3djj9YLbu5QnEX-fucnRLKQwqehVPYtzfHc6hab?key=6dVpLFMkjO6FbjNvs1d5hw" width="273" height="504" style="width: 273px; height: 504px;"> <img src="https://lh7-rt.googleusercontent.com/docsz/AD_4nXeFU5zU4oJ7CvulddNF2QGrjrs_1kcyZ7d5GBqhm7JpMtqQpuaQss9ZDhsMNyXq3exTCRtp8bw1GrfomB8s7de8xfYf37yUwm2s7ZJYDCdovygvS_ZkFLzHiVBvMI_npPBDfofHtZSifaEI6P-eEBF4IOlI?key=6dVpLFMkjO6FbjNvs1d5hw" width="284" height="506" style="width: 284px; height: 506px;"> Try it for Yourself! While it is a custom location-based AR lens, there is still some functionality scanning the code and using it with a still image. Try it out for yourself, and hopefully visit the living monument yourself one day! <img width="1914" height="1078" width_o="1914" height_o="1078" data-src="https://freight.cargo.site/t/original/i/cf43531f4f0f3355958484cf7745884881d5905609d1b3d5b893ffa02997461f/Screenshot-2024-08-13-at-3.28.21PM.png" data-mid="223503063" border="0" src="https://freight.cargo.site/w/1000/i/cf43531f4f0f3355958484cf7745884881d5905609d1b3d5b893ffa02997461f/Screenshot-2024-08-13-at-3.28.21PM.png" /> Reflection Highlighting HistoryOur lens was designed to highlight the history of trans women of color through a stark comparison of the past history of Stonewall Inn to how pride is today, and we think our lens showcased exactly what we wanted to convey. An important reflection we realized while developing this AR experience was the importance of highlighting stories of people in a way that is respectful, accurate, and empowering. This required us to research deeply with the communities we wanted to represent, listening to their voices, and ensuring that our work reflected their experiences authentically. Optimization One of the biggest challenges we had was trying to optimize the lens. We wanted to have the lens to be accurate to our original vision and be as detailed as possible, but we faced issues having to balance the details of the assets used in the lens with performance efficiency. We learned that there is a trade-off between the richness of the assets and the overall performance of the lens. It’s important to consider technical constraints early on to prevent unnecessary work and optimize accordingly. Further Possibilities Our minimum viable lens conveys all the key features we were hoping for, but more could always be added. We had more ideas on how to make the feature more interactive including touch elements that highlighted more history, audio from historical documentaries, and more visual assets but due to time constraints did not add them. With more time and experience, we will get better at using Lens Studio to make projects like these faster and more expansive. <img src="https://lh7-rt.googleusercontent.com/docsz/AD_4nXf7jjRKR7phNAP4NtMbJyvR3BtwW6rsiJgqPNqqeCztI543v0PgOiPaEvuBQB3fEobEgXWNSXoCWd2AYcV1Epm3RiyFvlt1_XqzBXExW5gebTTcmj6PfKPckJW8-kuyMo-WQife-Uhd-6T-HUXtHpL2SKw?key=6dVpLFMkjO6FbjNvs1d5hw" width="147" height="147" style="width: 147px; height: 147px;"> <img src="https://lh7-rt.googleusercontent.com/docsz/AD_4nXeVFYYAnQ9Fb2Bq2-SHd8vhW1zBBcUnOjOqcrb3d-2YOVJYFy9T5SfyKmwmzfP2JsJe4H1erm6mPvxCX6Fkw3Xhw_uHcdS5XSzlgovKZ3s1XIOLYoQYDJuplLg-uK5HZmRcAVVw2IKgzMB_fOWTyMmE3Ocw?key=6dVpLFMkjO6FbjNvs1d5hw" width="143" height="143" style="width: 143px; height: 143px;"> <img src="https://lh7-rt.googleusercontent.com/docsz/AD_4nXddgUduJqXEOTkQxNYHPzRctXsE-_2LWul4omW2bPz4RnFPxnjTGG43gXqXjsZM0GoMdJLYomMLmVl6nm35u2Htn6lvIeFJlxtXeML2jJjmdg7BMxk-Q1ot3cY_o5I8w5Xy1Y5qrySmEj0jQvq_-ir2Iyoi?key=6dVpLFMkjO6FbjNvs1d5hw" width="146" height="146" style="width: 146px; height: 146px;"> https://angeltolentino.cargo.site/GrandTheftEco Sat, 30 Dec 2023 11:12:04 +0000 Angel Tolentino - Portfolio https://angeltolentino.cargo.site/GrandTheftEco Grand Theft Eco Project Summary I helped in the process of creating a short episodic series using Machinima: the process of cinematic production through a video game engine. Using gaming technology, I created and designed a modified version of Grand Theft Auto V for the UCLA Laboratory for Environmental Narrative Strategies (LENS) to produce episodes about a climate-impacted Los Angeles set 25 years in the future.&nbsp; LENS Project Page | UCLA Newsroom Article Time Frame: Hired 8/2022 - Present Skills:&nbsp; - Filmmaking- Design Research- Virtual Production- Modding Tools: Game Image Manipulation Program, Premiere Pro, GTA V, &amp; Rockstar Advanced Game Engine Mods Used: Script Hook V, OpenIV, Codewalker, Menyoo, Natural Visions Evolved, &amp; Scene Director The Team: Led by Professors Ursula K. Heise and Danny Snelson Art Direction by Angel Tolentino Virtual Production by Angel Tolentino, Brenna McConnell, Danny Snelson, &amp; Elliot Bear Yu Cinematography by Chase Niesner &amp; Alexander Shassetz Sound Design by Adam WandTechnical Advising by Angel Tolentino &amp; Elliot Bear Yu Script by UCLA Institute of the Environment &amp; Sustainability LENS Affiliated Faculty: Ursula K. Heise, Kristy Guevara-Flanagan, Jon Christensen, Comfort Uda, Spencer Robins, &amp; Shouhei Tanaka&nbsp; ContributionsAs Art Director &amp; Virtual Production Designer, I lead the filming of the projet. I read the script, research design elements outside of the game, advise in the technical implementation of the elements in-game, create the sets and assets in the game, coordinate/direct the in-game scene, and record it. ResearchInspired by neofuturism, solarpunk aeshetics and current LA River revitalization efforts, the vanilla map was modified with additional assets to set the film. <img width="1641" height="1231" width_o="1641" height_o="1231" data-src="https://freight.cargo.site/t/original/i/1e00ff423bc4c73c5375ac536be89fbae11b08429e601e89a1a07eb32dfecb19/0.jpg" data-mid="200425583" border="0" data-scale="94" src="https://freight.cargo.site/w/1000/i/1e00ff423bc4c73c5375ac536be89fbae11b08429e601e89a1a07eb32dfecb19/0.jpg" /> Trip to LA River <img width="1582" height="928" width_o="1582" height_o="928" data-src="https://freight.cargo.site/t/original/i/db52b52f0346cd4ba398514d511e3423ae065c447b6481deb891c1ee8d01e4c0/83415157-e510-49ca-921b-aef84298b606.jpg" data-mid="200425584" border="0" data-scale="100" src="https://freight.cargo.site/w/1000/i/db52b52f0346cd4ba398514d511e3423ae065c447b6481deb891c1ee8d01e4c0/83415157-e510-49ca-921b-aef84298b606.jpg" />LA River Master Plan Design Phase Environment Design I reviewed the script and selected environments in GTA V to redesign using mods.&nbsp; <img width="2560" height="1440" width_o="2560" height_o="1440" data-src="https://freight.cargo.site/t/original/i/d690eb12f3c38a2d20e415d3e812065110edbbf763e46399561035c59bb323ad/gtav-city-before.png" data-mid="200424087" border="0" src="https://freight.cargo.site/w/1000/i/d690eb12f3c38a2d20e415d3e812065110edbbf763e46399561035c59bb323ad/gtav-city-before.png" />Before <img width="2560" height="1440" width_o="2560" height_o="1440" data-src="https://freight.cargo.site/t/original/i/5e37dcba7af104f5c05a9adaaf95c7b8a56c57509c21905af26f1bcc698bc06d/gtav-city-after.png" data-mid="200424086" border="0" src="https://freight.cargo.site/w/1000/i/5e37dcba7af104f5c05a9adaaf95c7b8a56c57509c21905af26f1bcc698bc06d/gtav-city-after.png" />After Asset Design Some scenes required the creation of specific assets. The methods used would be to create new game objects by using mods or to re-texture already embedded game objects by using GNU Image Manipulation Program (GIMP). New Game Objects <img width="3104" height="1846" width_o="3104" height_o="1846" data-src="https://freight.cargo.site/t/original/i/902f433aa35b9b167b155d302fb5b52a71e81056c0673617933402315326f446/Screenshot-2023-12-30-at-4.59.33-AM.png" data-mid="200427329" border="0" src="https://freight.cargo.site/w/1000/i/902f433aa35b9b167b155d302fb5b52a71e81056c0673617933402315326f446/Screenshot-2023-12-30-at-4.59.33-AM.png" />Platform Bus from Script <img width="2560" height="1440" width_o="2560" height_o="1440" data-src="https://freight.cargo.site/t/original/i/812b17a51e22e4bd0c3800d1b0a851972000a7f5f50c492b2a2e1903a5351572/Scene5Robots.png" data-mid="200424084" border="0" src="https://freight.cargo.site/w/1000/i/812b17a51e22e4bd0c3800d1b0a851972000a7f5f50c492b2a2e1903a5351572/Scene5Robots.png" />Pedestrians with TVs Attached as Robots <img width="2560" height="1440" width_o="2560" height_o="1440" data-src="https://freight.cargo.site/t/original/i/45350c1a4afb9cdd0ef6df8f1d7689130917c935ac8325f3909e96406f5182d0/Scene21build.png" data-mid="200424090" border="0" src="https://freight.cargo.site/w/1000/i/45350c1a4afb9cdd0ef6df8f1d7689130917c935ac8325f3909e96406f5182d0/Scene21build.png" /> Retrofitting Towers to Become Aqueducts 2D Re-textured Asset <img width="1312" height="905" width_o="1312" height_o="905" data-src="https://freight.cargo.site/t/original/i/e412e591e6cca0929654e5f73e24438a77b72eab41ae4901b51010588346eb4f/RetextureCodewalker.png" data-mid="200424096" border="0" data-scale="81" src="https://freight.cargo.site/w/1000/i/e412e591e6cca0929654e5f73e24438a77b72eab41ae4901b51010588346eb4f/RetextureCodewalker.png" /> Asset Retrieved with Codewalker Mod <img width="2340" height="1282" width_o="2340" height_o="1282" data-src="https://freight.cargo.site/t/original/i/6f7250e1c22f7c37e1bef41d8663d37444ac068954f1435b268175abafe6a48f/RetextureProcess.PNG" data-mid="200424098" border="0" src="https://freight.cargo.site/w/1000/i/6f7250e1c22f7c37e1bef41d8663d37444ac068954f1435b268175abafe6a48f/RetextureProcess.PNG" />Texture Edited in GIMP <img width="2560" height="1440" width_o="2560" height_o="1440" data-src="https://freight.cargo.site/t/original/i/39b46d259421dd8beef2e0b94562101de9d79c809dc5026bae861b30d1f7daba/RetextureFinal.png" data-mid="200424097" border="0" src="https://freight.cargo.site/w/1000/i/39b46d259421dd8beef2e0b94562101de9d79c809dc5026bae861b30d1f7daba/RetextureFinal.png" /> Scene in Editor with New Designs 3D Re-textured Asset <img width="1535" height="1227" width_o="1535" height_o="1227" data-src="https://freight.cargo.site/t/original/i/a66e3d475fa7be2d22980039ade0482eb28520344f2afe4704a1252b07ee379c/parrot.png" data-mid="200427112" border="0" src="https://freight.cargo.site/w/1000/i/a66e3d475fa7be2d22980039ade0482eb28520344f2afe4704a1252b07ee379c/parrot.png" /> Original Parrot Asset <img width="1535" height="1227" width_o="1535" height_o="1227" data-src="https://freight.cargo.site/t/original/i/cc6e83440868042ec835c42097ecc8e3b9d5dac3dbf92e2b67b7f24db797f760/ParrotNew.png" data-mid="200427110" border="0" src="https://freight.cargo.site/w/1000/i/cc6e83440868042ec835c42097ecc8e3b9d5dac3dbf92e2b67b7f24db797f760/ParrotNew.png" /> LA Parrot Edit <img width="3104" height="1846" width_o="3104" height_o="1846" data-src="https://freight.cargo.site/t/original/i/6c36596b98f82a4785cbf19b05973f9f993531965af87009906298d37c3d316c/Screenshot-2023-12-30-at-4.36.17-AM.png" data-mid="200427040" border="0" data-scale="100" src="https://freight.cargo.site/w/1000/i/6c36596b98f82a4785cbf19b05973f9f993531965af87009906298d37c3d316c/Screenshot-2023-12-30-at-4.36.17-AM.png" /> Parrot within Episode One Filming Filming was done using a mix of vanilla and modded software. Scene Director allowed me to coordinate scenes that involved heavy character choreography while I used Rockstar Editor to record. This footage was passed onto the editors. Early Rough Cut of Scene for Episode One: The iBear in the River Reflections Documentation of Process It wasn’t until portfolio building that I thought to document the intricacies of each process, but this was a highly important component that should not be missed. By doing this, I left behind records that will make any successor to the roles on this project much easier to navigate. A lot of the work on this was trial and error by going onto forums and talking to my boss Danny Snelson. I was able to streamline virtual production for the rest of the time by writing out guides, organizing the file storage into a simple system, and teaching the rest of the team through experiential learning. Recommendations &amp; Technical AdviceGTA V was meant to be run as a video game and NOT a film which meant that there was still many difficulties in designing and recording scenes. There were barriers such as software updates and mechanical restrictions that limited what could be made even with the modifications present because it is first and foremost a game. Portions of my job included biweekly meetings with the rest of the team to discuss the progress being made on different fronts and for myself I had to learn how to communicate these issues to members who were not as well-versed on modding or video games, and providing advice and recommendations on how to proceed. It was a very great skill to learn!&nbsp; Project UpdatesEpisode one was released and screened at Melnitz Hall over two screenings of 50+ people each. Plans are underway for festival submission. Production of episode two is in the works and I slowly transitioned out of the role to do work at the Snap Lens Academy which can be found here. This page will be updated as the project moves forward. Here is our first release poster: <img width="1080" height="1350" width_o="1080" height_o="1350" data-src="https://freight.cargo.site/t/original/i/10997e0890296e11212f82252c5452e56131f65fa3432c6f41d9db68a6ed0ae4/GTE-Poster.png" data-mid="226235974" border="0" data-scale="48" src="https://freight.cargo.site/w/1000/i/10997e0890296e11212f82252c5452e56131f65fa3432c6f41d9db68a6ed0ae4/GTE-Poster.png" /> https://angeltolentino.cargo.site/CoffeeChaos Mon, 01 Jan 2024 06:15:09 +0000 Angel Tolentino - Portfolio https://angeltolentino.cargo.site/CoffeeChaos Coffee ChaosA short Twine-produced barista simulator.&nbsp; <img width="1946" height="1194" width_o="1946" height_o="1194" data-src="https://freight.cargo.site/t/original/i/6bc6cb1172be5955894a85451d925f480c97a0ceb753d0d427d3b1dd54c8c24b/Screenshot-2024-01-01-at-2.54.30-PM.png" data-mid="200523077" border="0" data-scale="71" src="https://freight.cargo.site/w/1000/i/6bc6cb1172be5955894a85451d925f480c97a0ceb753d0d427d3b1dd54c8c24b/Screenshot-2024-01-01-at-2.54.30-PM.png" /> Link to Demo Time Frame: 3/1/22-3/18/22 (~3 weeks) Skills: - Game Development - Game Design - HTML/CSS - Javascript Tools: Twine, Procreate, &amp; Illustrator For the final project for ENGL M138.2: Gaming Experiments and Multimedia Scripting at UCLA, I created a short visual novel game using Twine based on my experience being a barista at a corporate coffee chain. Design PhaseMechanics - Pathing The game is built on Twine so it is a simple point and click visual novel. You will start over if you make a mistake. The story works as paths that can loop, move forward, and end the game <img width="2272" height="1660" width_o="2272" height_o="1660" data-src="https://freight.cargo.site/t/original/i/faee8f0a5ad40165428c677ad341f59beda3b1af1ab0a2f5d14c28b6a8354ca1/Screenshot-2023-02-28-at-5.51.54-PM.png" data-mid="200493854" border="0" data-scale="78" src="https://freight.cargo.site/w/1000/i/faee8f0a5ad40165428c677ad341f59beda3b1af1ab0a2f5d14c28b6a8354ca1/Screenshot-2023-02-28-at-5.51.54-PM.png" /> Building paths in the software Mechanics - TimerTo simulate the fast paced environment of a cafe, a timer was implemented. Inspired by the timer used in the Twine game Queers in Love at the End of the World. <img width="2272" height="1424" width_o="2272" height_o="1424" data-src="https://freight.cargo.site/t/original/i/2c0a56814c783f7d0a025ec47692841fb332df6716582d007da57b6c970b5d16/TimerCodeExample.png" data-mid="200493855" border="0" src="https://freight.cargo.site/w/1000/i/2c0a56814c783f7d0a025ec47692841fb332df6716582d007da57b6c970b5d16/TimerCodeExample.png" /> Example Code <img width="1612" height="1342" width_o="1612" height_o="1342" data-src="https://freight.cargo.site/t/original/i/65fbd173bad1cf05a6cedd2fa0e4336fff5eddf5b33a6b10fe92481762926996/Screenshot-2023-02-28-at-6.35.26-PM.png" data-mid="200493856" border="0" src="https://freight.cargo.site/w/1000/i/65fbd173bad1cf05a6cedd2fa0e4336fff5eddf5b33a6b10fe92481762926996/Screenshot-2023-02-28-at-6.35.26-PM.png" /> How it looks in-game <img width="1612" height="1342" width_o="1612" height_o="1342" data-src="https://freight.cargo.site/t/original/i/cbf74b0d9c9cb52391a88c2e01b9ddcda49d3290580cef4ce7df25edf6e4296d/Screenshot-2023-02-28-at-6.35.35-PM.png" data-mid="200493857" border="0" src="https://freight.cargo.site/w/1000/i/cbf74b0d9c9cb52391a88c2e01b9ddcda49d3290580cef4ce7df25edf6e4296d/Screenshot-2023-02-28-at-6.35.35-PM.png" /> Failing to reach time Creating Art AssetsInspired by the look of Corporate Memphis for the character creator. <img width="2880" height="1640" width_o="2880" height_o="1640" data-src="https://freight.cargo.site/t/original/i/cdc0dcc8c2362849f36fe8975ca7c7b2fd0ef39402fff772ae466cb34fc2680a/Character-Creator.png" data-mid="200493860" border="0" data-scale="65" src="https://freight.cargo.site/w/1000/i/cdc0dcc8c2362849f36fe8975ca7c7b2fd0ef39402fff772ae466cb34fc2680a/Character-Creator.png" /><img width="2048" height="1668" width_o="2048" height_o="1668" data-src="https://freight.cargo.site/t/original/i/862ee93df53354eaa4b0a035b7e42970857e2bfc1a62a055d6be9cdc128fba88/Image-Assets.png" data-mid="200493861" border="0" data-scale="60" src="https://freight.cargo.site/w/1000/i/862ee93df53354eaa4b0a035b7e42970857e2bfc1a62a055d6be9cdc128fba88/Image-Assets.png" /><img width="2272" height="1208" width_o="2272" height_o="1208" data-src="https://freight.cargo.site/t/original/i/39a1990b82058456bdcc01fac6ac798b5f57596e1d8d119d4debc0cd600f96d0/ConvergingCreator.png" data-mid="200493862" border="0" data-scale="82" src="https://freight.cargo.site/w/1000/i/39a1990b82058456bdcc01fac6ac798b5f57596e1d8d119d4debc0cd600f96d0/ConvergingCreator.png" /><img width="1500" height="1862" width_o="1500" height_o="1862" data-src="https://freight.cargo.site/t/original/i/b1c4acbd033e7fb369feae6ba7b9789fd6753ca52b998cf43e10d17cda4cc87d/Screenshot-2023-02-28-at-7.24.30-PM.png" data-mid="200493863" border="0" data-scale="56" src="https://freight.cargo.site/w/1000/i/b1c4acbd033e7fb369feae6ba7b9789fd6753ca52b998cf43e10d17cda4cc87d/Screenshot-2023-02-28-at-7.24.30-PM.png" /> Playtesting Friends provided feedback: - Simulated the experience for users who were baristas and illuminated the experience to those who weren’t. - They enjoyed the character creator and spotted the art style easily. - All pathways led to its proper target, but some typos had to be corrected. Play It Here Reflections Introduction to Twine Other than the week spent on Twine Poetics for the course, it was my only other time using the software and I’m proud of what I was able to accomplish with it. Capacity &amp; Scope I learned a lot about what I am able to accomplish within the timeframe. Creating artwork for the entire project and writing more scenarios would be too time-consuming, so only making art for the character creator and stopping the game after ~10 scenarios were decisions I had to make. This involved communication with my professor and coming to agreements over the scope of the final. Further Development There is so much room for extension into a longer game. One could be more CSS elements and artwork to stylize the game. Working in a team setting would be amazing. I have friends who do music and sound design that would create that would add the chaotic noises that go into being a barista. Additionally, friends made recommendations on writing from their own barista experience that would make for great collaboration.&nbsp; https://angeltolentino.cargo.site/CarrotCollector Tue, 02 Jan 2024 10:03:33 +0000 Angel Tolentino - Portfolio https://angeltolentino.cargo.site/CarrotCollector Carrot Collector Collect all the carrots throughout the scene in this short platformer. <img width="2144" height="1424" width_o="2144" height_o="1424" data-src="https://freight.cargo.site/t/original/i/4df9af0396974257f506a47eddfecfa31f1136925cb99a8e807d6aa1cdd945a8/Screenshot-2024-01-01-at-3.34.48-PM.png" data-mid="200543527" border="0" data-scale="91" src="https://freight.cargo.site/w/1000/i/4df9af0396974257f506a47eddfecfa31f1136925cb99a8e807d6aa1cdd945a8/Screenshot-2024-01-01-at-3.34.48-PM.png" /> Time Frame: 10/29/23-12/19/23 (~7 weeks) Skills:&nbsp; - Game Development - Game Design - Unity/C# Programming Tools: Unity, Visual Studio, &amp; Mixamo I created a short platformer game using the Unity engine as the final project for SMC’s CS 34A: Games Programming I course.&nbsp; Design Phase Game Design Document Our first assignment related to the final was to create a one-page document as the first step in the process. I kept it to things I knew I could accomplish given my beginning level understanding of Unity and C#.&nbsp; <img width="1094" height="1416" width_o="1094" height_o="1416" data-src="https://freight.cargo.site/t/original/i/e86af16be336d123d274a3d88b55b133ea00bad532ae2a1a61d95f9f61e89297/Screenshot-2024-01-02-at-2.19.17-AM.png" data-mid="200543794" border="0" data-scale="41" src="https://freight.cargo.site/w/1000/i/e86af16be336d123d274a3d88b55b133ea00bad532ae2a1a61d95f9f61e89297/Screenshot-2024-01-02-at-2.19.17-AM.png" /> Map A level map helped to organize what the level would look like. <img width="2048" height="2048" width_o="2048" height_o="2048" data-src="https://freight.cargo.site/t/original/i/2c5a18864e408deeb5919b95107d8566b3a2522b2a7748dc5d98c22a6c2ca1ea/level_sketch.png" data-mid="200543835" border="0" data-scale="44" src="https://freight.cargo.site/w/1000/i/2c5a18864e408deeb5919b95107d8566b3a2522b2a7748dc5d98c22a6c2ca1ea/level_sketch.png" /> Grayboxing This technique is used to block out the basic level design using shapes, such as gray boxes. In this stage I was able to code in the player movement, camera, and environmental interactions.&nbsp; <img width="600" height="340" width_o="600" height_o="340" data-src="https://freight.cargo.site/t/original/i/7b07fafd1955de84d84db6289d0bce5b02c675b529779c15dee66ad5b3dac3e2/grayboxing.gif" data-mid="200544133" border="0" src="https://freight.cargo.site/w/600/i/7b07fafd1955de84d84db6289d0bce5b02c675b529779c15dee66ad5b3dac3e2/grayboxing.gif" /> Final Prototype After grayboxing, I added UI elements, simple character animations, and the full 3D environment.&nbsp; <img width="600" height="375" width_o="600" height_o="375" data-src="https://freight.cargo.site/t/original/i/a42d15e5ebe6d5bec56cb24d96d0c7cfc692848b49c117b9000e1848cd279234/carrotcollector.gif" data-mid="200545211" border="0" src="https://freight.cargo.site/w/600/i/a42d15e5ebe6d5bec56cb24d96d0c7cfc692848b49c117b9000e1848cd279234/carrotcollector.gif" /> Play It Here Reflections Keeping It Simple (KISs) The final milestone was to send in the full length project, and one of the objects was to Keep It Simple (KISs). I really appreciated this goal as someone who had a beginning level of understanding of Unity and C# programming. When the game design became too complex for implementation such as with the spawn/ending rabbit hole, I felt comfortable in making the decision to scale back. Ultimately, it led me to a final project that felt complete start to finish, leaving zero uninformed intentions. Introduction to Unity This course was my introduction to the Unity game engine along with C# as a programming language. By starting the class in Visual Studio Code I was able to learn a lot of coding essentials such as loops that helped inform my game design. Then, in Unity I was able to learn enough to make my own finished product. I know that what I learned here will help me understand and communicate in the field of game development.&nbsp; https://angeltolentino.cargo.site/EmailExploration Fri, 22 Mar 2024 01:01:30 +0000 Angel Tolentino - Portfolio https://angeltolentino.cargo.site/EmailExploration LeanMail: Email Entwined with Kanban MethodologyIXD 330 Midterm Assignment on Email Exploration<img width="1445" height="1008" width_o="1445" height_o="1008" data-src="https://freight.cargo.site/t/original/i/3265cfcb76a9fcfabbfb3bd48f0109aef412415a80fb87b18bbd1ac76ecf0007/FullFrame.png" data-mid="208258204" border="0" src="https://freight.cargo.site/w/1000/i/3265cfcb76a9fcfabbfb3bd48f0109aef412415a80fb87b18bbd1ac76ecf0007/FullFrame.png" /> BriefIn our midterm project for IXD 330: Interaction Design Studio 2, we were asked to redesign the interactions users have with desktop clients with a heavy focus on microinteractions and user interface(UI). ResearchTruthfully, I do not enjoy email. I would like to spend the least amount of time with emails. I decided that I would focus on productivity for this project for this reason. I noticed the popularity of project management softwares in another course and it sparked my idea. Specifically, how to integrate the Kanban method into handling emails. SWOT Analysis My SWOT Analysis focused on how different email platforms support users in being productive through thei features. None of these platforms themselves attempted to combine project management with emailing which presented my idea with the opportunity to fill that niche.&nbsp; <img width="1024" height="768" width_o="1024" height_o="768" data-src="https://freight.cargo.site/t/original/i/f8a3176c964f90edea948016ec8bebf42726eabd0b27ab655dff2414dee5cc5e/Email-SWOT-Analysis.png" data-mid="207309626" border="0" data-scale="78" src="https://freight.cargo.site/w/1000/i/f8a3176c964f90edea948016ec8bebf42726eabd0b27ab655dff2414dee5cc5e/Email-SWOT-Analysis.png" /> Decision Flow Maps Flow maps were used to analyze the flow of tasks and how/where they could be redesigned. <img width="1586" height="1585" width_o="1586" height_o="1585" data-src="https://freight.cargo.site/t/original/i/4faca5633bcf1cfea27eabdc2ae2626f2e75a7e3d791a73aef2ee30cc1c12932/Flow-Map-1.png" data-mid="207309636" border="0" data-scale="66" src="https://freight.cargo.site/w/1000/i/4faca5633bcf1cfea27eabdc2ae2626f2e75a7e3d791a73aef2ee30cc1c12932/Flow-Map-1.png" /> Inspiration A project management tool that is kanban-style is Trello, so studying their UI was helpful in formulating my own tool. <img width="2834" height="1294" width_o="2834" height_o="1294" data-src="https://freight.cargo.site/t/original/i/59fd2a01271ffa8eb4400c0a6c040376fcab5abc88c1c32721c6f7b3c906272b/Kanban-Inspo.png" data-mid="207585085" border="0" data-scale="66" src="https://freight.cargo.site/w/1000/i/59fd2a01271ffa8eb4400c0a6c040376fcab5abc88c1c32721c6f7b3c906272b/Kanban-Inspo.png" /> Design Initial DraftI used Gmail as a base to design from which helped in early visualization of it. It made sense to me considering Trello for Gmail is a Google Workspace application already. At this stage, I received insightful feedback that this could be pushed further into its own platform. Additionally, the template lists could follow a better flow that mimicked the process of obtaining an email.&nbsp; <img width="1788" height="1158" width_o="1788" height_o="1158" data-src="https://freight.cargo.site/t/original/i/127df17f8bec0d8e23d2fa148acd04f2d19646a31cd0b5e3838b9e97efdd6ba9/Kanban-Draft.png" data-mid="207589531" border="0" data-scale="77" src="https://freight.cargo.site/w/1000/i/127df17f8bec0d8e23d2fa148acd04f2d19646a31cd0b5e3838b9e97efdd6ba9/Kanban-Draft.png" /> Iterating Since it could be made into its own platform, I went back to the drawing board! This early sketch explored how a sidebar could be implemented to hold all received mail in the inbox, along with a better email reading flow.&nbsp; <img width="3714" height="2692" width_o="3714" height_o="2692" data-src="https://freight.cargo.site/t/original/i/6fa9363dafe66e7100f523b63e204f974a389b2c93032ca96938bebe17afdc57/Sketch.jpeg" data-mid="207589733" border="0" data-scale="66" src="https://freight.cargo.site/w/1000/i/6fa9363dafe66e7100f523b63e204f974a389b2c93032ca96938bebe17afdc57/Sketch.jpeg" /> Kanban Integration Following the Kanban methodology, the email task list follows a highly visual, continuous flow. This is the default template, but additions and edits could be made so that it follows each individual’s personalized process. <img width="1753" height="942" width_o="1753" height_o="942" data-src="https://freight.cargo.site/t/original/i/7d6797609e4b47dc6aad5cefb6d65ab51f964eed30051043af2f113744749deb/Kanban-Frame.png" data-mid="208258820" border="0" data-scale="75" src="https://freight.cargo.site/w/1000/i/7d6797609e4b47dc6aad5cefb6d65ab51f964eed30051043af2f113744749deb/Kanban-Frame.png" /> MicrointeractionsThe most prevalent microinteraction is the use of dropdown menus as a method of sorting boards, mail, and labels. I found they were the simplest and intuitive way to list all the necessary components of email that can get pretty lengthy. <img width="1280" height="720" width_o="1280" height_o="720" data-src="https://freight.cargo.site/t/original/i/6bf2ca0e97ff7c07b1670c58d41e47bd8b6b97d1b99d10a8db2a3fd8dccc3032/DropDownLabel.gif" data-mid="208323729" border="0" data-scale="67" src="https://freight.cargo.site/w/1000/i/6bf2ca0e97ff7c07b1670c58d41e47bd8b6b97d1b99d10a8db2a3fd8dccc3032/DropDownLabel.gif" /> Final Layout The final design follows the sketch iteration with some differences. Dropdowns were used, a compose button added for email, and the labels tag moved. Here is an example flow from receiving an email to assigning it into the list. <img width="600" height="338" width_o="600" height_o="338" data-src="https://freight.cargo.site/t/original/i/7d7a4b3c8077e4698c0d904f16ad4c21ab735d085d677b20b878f5b408bd8bf7/Flow-ezgif.com-video-to-gif-converter.gif" data-mid="208323734" border="0" src="https://freight.cargo.site/w/600/i/7d7a4b3c8077e4698c0d904f16ad4c21ab735d085d677b20b878f5b408bd8bf7/Flow-ezgif.com-video-to-gif-converter.gif" />&nbsp; Presentation As our midterm, we were tasked with presenting our project. Mine is below. Angel IXD 330 Midterm Presentation by Angel Tolentino Feedback:&nbsp; - The presentation style followed a flow that was well-received. From the design methodology, research analysis, design process, and further possibilities, it followed a story-like flow that demonstrated exactly where I was coming from. - While the goal of the project was to not have an immensely detailed prototype, mine could have used a bit more polish particularly in regards to spacing. Looking at other platforms and more into the KanbanMail process could have beem helpful.&nbsp; Link to Prototype Reflections User ExperienceThe user experience was not as well thought out in this project because the nature of this assignment was focused on UI. Better testing could be done.&nbsp;The way people navigate emails as tasks could be further explored to see how boards can look different.Drag &amp; Drop MicrointeractionsI noticed deep into the project that the boxes for each email and the spreadsheet-like UI could make it so that drag &amp; drop could be a potential design solution. Due to time constraints this was not explored, but should be in the future. Polish UI The UI can use some refining, particularly with border radii and padding. Additionally, the horizontal scroll was not well received by my instructor, though that is the most common UI for most Kanban method softwares use.&nbsp;