https://lanyichun.com yichun.lan Mon, 08 Jul 2024 14:59:46 +0000 https://lanyichun.com en https://lanyichun.com/Authority-Sorter-Sound-installation Fri, 17 Sep 2021 10:36:58 +0000 yichun.lan https://lanyichun.com/Authority-Sorter-Sound-installation Authority Sorter sound installation for exploring the social hierarchies Designer: Yi-Chun, Lan Advisor: Chiao-Wei, Ho/ Rung-Huei Liang Date: &nbsp;2020 3D printing: Hong-Rui, LinInstallation Structure: Xiang, Liang 3D animation: Yan-Qi, You Special Thanks: Xiao-Ni, Chen Pin-Chen, Kuo Rui-Yu, Kuo <img src="https://freight.cargo.site/t/original/i/45ce46284027dc366e1c3ec9f605697d4b75c65ce3d7094e68f9c2a156edb7fb/lan2020.jpg" style="width:100% "> Overview Authority Sorter is an interactive sound installation that explored the theme of social hierarchy and mainly focused on the relationship between human control and cultural behaviors. The idea of this work derives from my personal experience—In vitro fertilization triplet delivered by Caesarean secession. According to the research of Austrian psychologist Alfred Adler, the birth order influences how we are treated at home. Also, it affects our personality, preferences, even how we make a choice. The phenomenon makes me can't help wondering how the public will choose if we can decide our birth order or whether we will doubt this divine power. <img width="1622" height="1048" width_o="1622" height_o="1048" data-src="https://freight.cargo.site/t/original/i/b0d4bdcffff7f3379fbc32fb6abda6fb92768c2b66d884994dae31240eee08f8/100100592_3186256938093527_8538986697797402624_n.jpg" data-mid="165164996" border="0" src="https://freight.cargo.site/w/1000/i/b0d4bdcffff7f3379fbc32fb6abda6fb92768c2b66d884994dae31240eee08f8/100100592_3186256938093527_8538986697797402624_n.jpg" /> It seems reasonable that doctors decide the sequence of fertilization and our birth order. Still, this artificially selected order has replaced the spontaneous labor one, which makes me curious about the influence in nature or the society. I explored the ranking relationship among groups in nature and found " Yuhina brunneiceps ", which is endemic species of Taiwan. They often declare their ranking relationship with special birdsong. And only the most powerful bird in the flock can freely sing this particular melody. <img width="4961" height="3309" src="https://freight.cargo.site/w/2500/q/75/i/9165b370eb7dd616082f004732db3c6f84b6d3055e831fa9b1e96eab554776b6/Sun-Shining-Through-Forest_0929.jpg" style="width: 695.133px; height: 463.655px;"> <img width="4961" height="3509" width_o="4961" height_o="3509" data-src="https://freight.cargo.site/t/original/i/e81ff35f4c09348f45db4a50a1aa5d3ed6f62b44cc70ef52e9139101ef70071f/A3x5_-1--3.jpg" data-mid="119193283" border="0" src="https://freight.cargo.site/w/1000/i/e81ff35f4c09348f45db4a50a1aa5d3ed6f62b44cc70ef52e9139101ef70071f/A3x5_-1--3.jpg" /> <img width="2700" height="1800" width_o="2700" height_o="1800" data-src="https://freight.cargo.site/t/original/i/bcaa45d00ad966750cba4822032786fb9feb178c427037566ebfc1cc620e26c6/04_painting_input.jpg" data-mid="119192908" border="0" src="https://freight.cargo.site/w/1000/i/bcaa45d00ad966750cba4822032786fb9feb178c427037566ebfc1cc620e26c6/04_painting_input.jpg" /> Details and Scenario The Authority Sorter is composed of two parts: the top part looks like a horn is a sound originating port of the highest-ranking tune, and the lower section, which is similar to the DNA sequence, is the sound sensing port. When the general singing voice of the Yuhina brunneiceps is detected, the device converts it into the melody of the highest order and broadcasts it. It stands upright in the forest, trying to manipulate the natural order and play the godlike role. It seems that the work rearranges the natural order artificially, but it classifies all individuals into the same class. Try to make the public imagine a society without sorting. Will it become an equal world or fall into irreparable chaos? <img width="4463" height="2975" width_o="4463" height_o="2975" data-src="https://freight.cargo.site/t/original/i/162df7e3d2d999351faa7f7a944013a63fbc9a0057a03803502e5f8f82fb1353/03_looking-up.jpg" data-mid="119193305" border="0" src="https://freight.cargo.site/w/1000/i/162df7e3d2d999351faa7f7a944013a63fbc9a0057a03803502e5f8f82fb1353/03_looking-up.jpg" /> Development Process <img width="4472" height="2874" width_o="4472" height_o="2874" data-src="https://freight.cargo.site/t/original/i/1920d16cf08ec3b643821864df462662808e5cba4aba65064136193e779c7aa3/-2.jpg" data-mid="120381536" border="0" src="https://freight.cargo.site/w/1000/i/1920d16cf08ec3b643821864df462662808e5cba4aba65064136193e779c7aa3/-2.jpg" /> <img width="5891" height="2428" width_o="5891" height_o="2428" data-src="https://freight.cargo.site/t/original/i/5885466ff244f92fafcf091235fe7477fd89e7e42aa98089d6b57515c73a6005/-2020-03-29-9.43.23.jpg" data-mid="125894560" border="0" src="https://freight.cargo.site/w/1000/i/5885466ff244f92fafcf091235fe7477fd89e7e42aa98089d6b57515c73a6005/-2020-03-29-9.43.23.jpg" /> &gt;&gt; Read about Development Process <img width="7917" height="2973" width_o="7917" height_o="2973" data-src="https://freight.cargo.site/t/original/i/2e90a8f99f05807c59f4b8f8af9bab78c763f81a0304ea7cb55433895c12689e/01.jpg" data-mid="171752869" border="0" src="https://freight.cargo.site/w/1000/i/2e90a8f99f05807c59f4b8f8af9bab78c763f81a0304ea7cb55433895c12689e/01.jpg" /> Reflection Based on a certain degree of research facts, Authority Sorter mainly exists in the fabricated world. The role it plays does not prove that it can destroy birds' power and ecological structure, just as we can never know how society will develop without the birth order, and we cannot get the answer from this work either. The existence of Authority Sorter reminds us that human beings always manipulate nature and artificial. Perhaps human enjoys the superiority of ranking and class over others by nature. Are people willing to give in to equality after eliminating sorting? Just as the utopia where everyone is equal is only a social dream after all. This work was showed in the exhibition 《New Now: Critical, Speculative and Fictional》 <img width="1400" height="934" width_o="1400" height_o="934" data-src="https://freight.cargo.site/t/original/i/59c776922a40e6d6c7e747e8c5e6aaf9ca5ade39c573160f2a1367dcef3e9ad5/mottimes_images_9620201015161707.jpg" data-mid="119193547" border="0" src="https://freight.cargo.site/w/1000/i/59c776922a40e6d6c7e747e8c5e6aaf9ca5ade39c573160f2a1367dcef3e9ad5/mottimes_images_9620201015161707.jpg" /> <img width="2736" height="1824" width_o="2736" height_o="1824" data-src="https://freight.cargo.site/t/original/i/1ce9d99ce15b09acf519331874f4736546be3f3ca6fbec831d923f86ac68260e/IMG_1121_Original-2.jpg" data-mid="119193548" border="0" src="https://freight.cargo.site/w/1000/i/1ce9d99ce15b09acf519331874f4736546be3f3ca6fbec831d923f86ac68260e/IMG_1121_Original-2.jpg" /> Exhibitors: Alice Wang, Cai-Hua Xie, Chia-Yin Wu, Chin-Lin Tu, Guan-Hao Zhu, Kuang-Yi Ku, Paul Gong, Pei-Ying Lin, Pin-Hsun Hsiung, Te-Chen Chuan Sun, Tsung-Shuian Hsieh, Ya-Ching Yang, Yi-Chun Lan, Yi-Ju Lin Organizer: Taipei Art Direction &amp; Design Assoc.,Curatorial Direction &amp; Production: digital medicine lab, tuanco., oval-graphic Visual Design: Chung-Yi Yeh (graphic), Pin-Hsu Chiang (motion) Exhibition &amp; Graphic Design: tuanco. Exhibition Production: JKS Studio, uPrintForeword: Huai-An Hsing Curated by Ho Chiao-Wei, Peng Hsing-Kai, photographed by Huang Shao-Jou(Darren) Oct. 2020 https://lanyichun.com/The-Digital-Glimpse Tue, 02 Jul 2024 19:45:35 +0000 yichun.lan https://lanyichun.com/The-Digital-Glimpse The Digital Glimpse:&nbsp;the Partial Reality between Privacy and Security Date:&nbsp; 2024 Tools:&nbsp; Touchdesigner Description "The Digital Glimpse" is an immersive installation that offers a unique perspective on the intricate relationship between privacy, security, and technology. By layering publicly accessible surveillance footage with real-time captures of the audience, the piece creates a thought-provoking, semi-real digital environment that invites viewers to question the delicate balance between personal privacy and collective safety in our digital age. This work encourages critical reflection on the potential consequences of technological advancements and questions on the social and ethical aspects of surveillance culture. Technical Description TCP/IP protocol: access to live camera footage without password protection. OpenCV (Blob detection): detecting movement in video from both CCTVs and the onsite camera. <img width="4439" height="2387" width_o="4439" height_o="2387" data-src="https://freight.cargo.site/t/original/i/6ff1426ed01cfe188fa98380d7f9dcf92b93fca6349c3ce4f7e9e4d9ff1bc68b/thesis-diagram.jpg" data-mid="214016169" border="0" src="https://freight.cargo.site/w/1000/i/6ff1426ed01cfe188fa98380d7f9dcf92b93fca6349c3ce4f7e9e4d9ff1bc68b/thesis-diagram.jpg" /> These cameras are not hacked. All cameras I can access do not have any password protection. They are available to all internet users that use surveillance camera search software and sites. The only solution to make your camera private is to set up a password! Visual Experiments Research &amp; Inspiration<img width="3300" height="2550" width_o="3300" height_o="2550" data-src="https://freight.cargo.site/t/original/i/3475287e945ba46af12eb05eddafab6e83fb7501b6a4a09e28dc07053bbe9d28/perec_readings.jpg" data-mid="214016168" border="0" data-scale="73" src="https://freight.cargo.site/w/1000/i/3475287e945ba46af12eb05eddafab6e83fb7501b6a4a09e28dc07053bbe9d28/perec_readings.jpg" /> - An attenpt at exhausting a place in paris Georges Perec -&nbsp;Exhausting a Crowd&nbsp;Kyle McDonald United States 2015 720 min-&nbsp;Stay v3&nbsp;Hasan Elahi-&nbsp;33 Questions per Minute&nbsp;RAFAEL LOZANO-HEMMER -&nbsp;The Follower&nbsp;Dries Depoorter-&nbsp;Browser History Visualization&nbsp;Shan Huang-&nbsp;Social Identity model of Deindividuation Effects (SIDE)-&nbsp;CCTV surveillance for crime prevention. A 40-year systematic review with meta-analysis -&nbsp;Cues of being watched enhance cooperation in a real-world setting&nbsp; - and my previous work:&nbsp;Manufactured Landscape https://lanyichun.com/Manufactured-Landscape-Projection-Artwork Mon, 27 Mar 2023 15:11:39 +0000 yichun.lan https://lanyichun.com/Manufactured-Landscape-Projection-Artwork &nbsp; Manufactured Landscape:&nbsp;&nbsp; &nbsp; A real-time collage of landscapes &nbsp; &nbsp; sourced from surveillance cameras around the world! Advisor:&nbsp; Carrie WangAuthors: Yi-Chun, Lan Date:&nbsp; 2023&nbsp; Tools:OBS Touchdesigner insecam.org Background The proliferation of CCTV cameras has led to a widespread sense of surveillance in modern society. While this has raised concerns about privacy and civil liberties, it has also opened up new possibilities for creative expression. In this design work, I sought to harness the power of CCTV cameras to create new and unique landscapes that challenge our perceptions of the world around us. Methodology To create my landscapes, I began by selecting live CCTV footage from various locations around the world. This footage was streamed online, allowing me to capture a real-time view of different environments at any given moment. From there, I used a combination of digital manipulation techniques to experiment with different combinations of scenes. Using tools like layering, blending, and collage, I transformed the raw footage into new and unique landscapes. Finally, I streamed the finished collages online, allowing viewers to experience them in real-time as well. <img width="3020" height="1564" width_o="3020" height_o="1564" data-src="https://freight.cargo.site/t/original/i/cb661d036e8975ee126ab810512a00f77145cf8e1638dcb7561836aa3ccf1dd6/-2023-04-08-6.02.41.png" data-mid="174689095" border="0" src="https://freight.cargo.site/w/1000/i/cb661d036e8975ee126ab810512a00f77145cf8e1638dcb7561836aa3ccf1dd6/-2023-04-08-6.02.41.png" /> These cameras are not hacked. All cameras I can access do not have any password protection. They are available to all internet users that use surveillance camera search software and sites. The only solution to make your camera private is to set up a password! <img width="1592" height="950" width_o="1592" height_o="950" data-src="https://freight.cargo.site/t/original/i/e8ee7d2315bbf9104fa57ff52cc95c407a92420d58b28092441ea0573f6dc29f/-2023-03-28-9.48.50.png" data-mid="174688303" border="0" src="https://freight.cargo.site/w/1000/i/e8ee7d2315bbf9104fa57ff52cc95c407a92420d58b28092441ea0573f6dc29f/-2023-03-28-9.48.50.png" /> <img width="4358" height="2471" width_o="4358" height_o="2471" data-src="https://freight.cargo.site/t/original/i/1dd97cdac501b2fe352a42421f9431a9210edfb9182b437a75c5face42651286/landscape_collage-21.jpg" data-mid="174687929" border="0" src="https://freight.cargo.site/w/1000/i/1dd97cdac501b2fe352a42421f9431a9210edfb9182b437a75c5face42651286/landscape_collage-21.jpg" /> <img width="3296" height="2217" width_o="3296" height_o="2217" data-src="https://freight.cargo.site/t/original/i/99ba96f7c25363dae85ad69c3b170dc12bfbff3386be27d63b24fc81c2aca2c6/landscape_collage-25.jpg" data-mid="174687924" border="0" src="https://freight.cargo.site/w/1000/i/99ba96f7c25363dae85ad69c3b170dc12bfbff3386be27d63b24fc81c2aca2c6/landscape_collage-25.jpg" /> <img width="4513" height="2329" width_o="4513" height_o="2329" data-src="https://freight.cargo.site/t/original/i/ba29f446436db64f9f3eccd409497105cc3beb2a4fd9857b2e8344e686bf3529/landscape_collage-18.jpg" data-mid="174687932" border="0" src="https://freight.cargo.site/w/1000/i/ba29f446436db64f9f3eccd409497105cc3beb2a4fd9857b2e8344e686bf3529/landscape_collage-18.jpg" /> <img width="2874" height="2112" width_o="2874" height_o="2112" data-src="https://freight.cargo.site/t/original/i/0fec3c9cb0d6a5b5751983a810f3ffbc65806e0f13a104d5dd171765205473b7/landscape_collage-10.jpg" data-mid="174687940" border="0" src="https://freight.cargo.site/w/1000/i/0fec3c9cb0d6a5b5751983a810f3ffbc65806e0f13a104d5dd171765205473b7/landscape_collage-10.jpg" /> <img width="3217" height="2438" width_o="3217" height_o="2438" data-src="https://freight.cargo.site/t/original/i/4acc962d6e134218cf249946e9ffbef7a04708c31716b94824a1d6563c6ced7e/landscape_collage-11.jpg" data-mid="174687939" border="0" src="https://freight.cargo.site/w/1000/i/4acc962d6e134218cf249946e9ffbef7a04708c31716b94824a1d6563c6ced7e/landscape_collage-11.jpg" /> <img width="4250" height="1825" width_o="4250" height_o="1825" data-src="https://freight.cargo.site/t/original/i/d69b831357bec2c3965077b62f3cb38296048356ba8434fde3d654d9aba299ff/landscape_collage-14.jpg" data-mid="174687936" border="0" src="https://freight.cargo.site/w/1000/i/d69b831357bec2c3965077b62f3cb38296048356ba8434fde3d654d9aba299ff/landscape_collage-14.jpg" /> <img width="3767" height="2079" width_o="3767" height_o="2079" data-src="https://freight.cargo.site/t/original/i/af6402abca623b597a16b32ffb10998780dc4ef87c0fac670931d1fa7f4b1c5a/landscape_collage-17.jpg" data-mid="174687933" border="0" src="https://freight.cargo.site/w/1000/i/af6402abca623b597a16b32ffb10998780dc4ef87c0fac670931d1fa7f4b1c5a/landscape_collage-17.jpg" /> <img width="4358" height="2446" width_o="4358" height_o="2446" data-src="https://freight.cargo.site/t/original/i/d9abfeb2c20abd0c08b7208fe219ffe97f2b65c48037b7ff6ffd1b6a8be6ab36/landscape_collage-23.jpg" data-mid="174687926" border="0" src="https://freight.cargo.site/w/1000/i/d9abfeb2c20abd0c08b7208fe219ffe97f2b65c48037b7ff6ffd1b6a8be6ab36/landscape_collage-23.jpg" /> <img width="3121" height="2138" width_o="3121" height_o="2138" data-src="https://freight.cargo.site/t/original/i/8b001c82681057ab3e7e471ef856c9bc6900f9cf9f623723be757701609d8aee/landscape_collage-20.jpg" data-mid="174687930" border="0" src="https://freight.cargo.site/w/1000/i/8b001c82681057ab3e7e471ef856c9bc6900f9cf9f623723be757701609d8aee/landscape_collage-20.jpg" /> <img width="4333" height="3258" width_o="4333" height_o="3258" data-src="https://freight.cargo.site/t/original/i/c3bee901806c723f8e0cb9857c87733ed865f555370ac2feed80a2b8881379d1/landscape_collage-24.jpg" data-mid="174687925" border="0" src="https://freight.cargo.site/w/1000/i/c3bee901806c723f8e0cb9857c87733ed865f555370ac2feed80a2b8881379d1/landscape_collage-24.jpg" /> <img width="2442" height="1846" width_o="2442" height_o="1846" data-src="https://freight.cargo.site/t/original/i/2a94e06ac577d52d9b65b8ca034217d4e55e4ff39140659066c1f001d50db9a1/landscape_collage-19.jpg" data-mid="174687931" border="0" src="https://freight.cargo.site/w/1000/i/2a94e06ac577d52d9b65b8ca034217d4e55e4ff39140659066c1f001d50db9a1/landscape_collage-19.jpg" /> <img width="3504" height="1954" width_o="3504" height_o="1954" data-src="https://freight.cargo.site/t/original/i/c870cb7f9a98bb7f9da99d37363dcd660dd921a313ffed9e1d426580b628075d/landscape_collage-13.jpg" data-mid="174687937" border="0" src="https://freight.cargo.site/w/1000/i/c870cb7f9a98bb7f9da99d37363dcd660dd921a313ffed9e1d426580b628075d/landscape_collage-13.jpg" /> <img width="4292" height="2321" width_o="4292" height_o="2321" data-src="https://freight.cargo.site/t/original/i/a5ad4357e5c06c2eac18cf805b4154a1b8a336619f081cb51c2b1c30355f28f4/landscape_collage-26.jpg" data-mid="174687923" border="0" src="https://freight.cargo.site/w/1000/i/a5ad4357e5c06c2eac18cf805b4154a1b8a336619f081cb51c2b1c30355f28f4/landscape_collage-26.jpg" /> <img width="5292" height="2963" width_o="5292" height_o="2963" data-src="https://freight.cargo.site/t/original/i/087324278fa937790e8494b482ab7fbff53f3d653826820dd4d884f3b3e3c65b/landscape_collage-22.jpg" data-mid="174687928" border="0" src="https://freight.cargo.site/w/1000/i/087324278fa937790e8494b482ab7fbff53f3d653826820dd4d884f3b3e3c65b/landscape_collage-22.jpg" /> <img width="3667" height="1588" width_o="3667" height_o="1588" data-src="https://freight.cargo.site/t/original/i/09358abe684dd186cc1b0e38592322b39409727a74d8ea2251c549fd9a99073a/landscape_collage-12.jpg" data-mid="174687938" border="0" src="https://freight.cargo.site/w/1000/i/09358abe684dd186cc1b0e38592322b39409727a74d8ea2251c549fd9a99073a/landscape_collage-12.jpg" /> Design Choices Throughout the process, I made a number of key design choices that shaped the final outcome of my work. For example, I selected footage that showcased a range of different environments, from bustling urban streets to quiet rural landscapes. I also paid close attention to the color palettes of each scene, experimenting with different combinations to create a harmonious overall effect. Additionally, I used different techniques to create different visual effects, such as masking and layering to create a sense of depth and movement. <img width="1920" height="1080" width_o="1920" height_o="1080" data-src="https://freight.cargo.site/t/original/i/94c95a4c2b6465fd4bd0a5d4fcc008c88b05357c976bd9f0e7de43849672f746/-2023-03-25-8.53.48.png" data-mid="174688276" border="0" src="https://freight.cargo.site/w/1000/i/94c95a4c2b6465fd4bd0a5d4fcc008c88b05357c976bd9f0e7de43849672f746/-2023-03-25-8.53.48.png" /> <img width="1531" height="866" width_o="1531" height_o="866" data-src="https://freight.cargo.site/t/original/i/6fcf3f2f4f4d3ce3306cbcbf6a144e796a9859fdd8a015fcb7fa2e6c2b46761d/-2023-03-02-7.06.17.png" data-mid="174688390" border="0" src="https://freight.cargo.site/w/1000/i/6fcf3f2f4f4d3ce3306cbcbf6a144e796a9859fdd8a015fcb7fa2e6c2b46761d/-2023-03-02-7.06.17.png" /> <img width="1430" height="766" width_o="1430" height_o="766" data-src="https://freight.cargo.site/t/original/i/3a9b8157097c799dd480e54bb339f3c7ec310cf5f6f9c97e3877f918f3d727e2/-2023-03-02-7.06.08.png" data-mid="174688391" border="0" src="https://freight.cargo.site/w/1000/i/3a9b8157097c799dd480e54bb339f3c7ec310cf5f6f9c97e3877f918f3d727e2/-2023-03-02-7.06.08.png" /> <img src="https://freight.cargo.site/t/original/i/d14af178cfef87ac6f4075ac4014c91103e3da043ed4159ceff4e067983ec0bb/realtime_collage_1.gif" style="width:100%"><img src="https://freight.cargo.site/t/original/i/87d93c145f535c7ee56ecfd599334b9aa8853b3f07dce69f3d2398478397f0c9/realtime_collage2.gif" style="width:100%"><img src="https://freight.cargo.site/t/original/i/2a4d79c26d2a9cb94e58251c63d7bc2802f4d3110b01554589b99be1cb14c7ed/collage3-4000.gif" style="width:100%"> Reflection Through this project, I gained a deeper understanding of the ways in which technology, society, and the environment are interconnected. By manipulating and combining footage from different parts of the world, I was able to create a sense of unity and continuity that transcended geographical boundaries. I also gained insights into the potential for art to be a powerful tool for reflection and introspection, encouraging viewers to consider their own impact on the world around them. https://lanyichun.com/The-Wind-from-the-Past-Digital-Household-Appliance Wed, 29 Sep 2021 06:21:30 +0000 yichun.lan https://lanyichun.com/The-Wind-from-the-Past-Digital-Household-Appliance The Wind from the Past exploration of household appliance Design Director: &nbsp;Chiao-Wei, Ho Designer: &nbsp;Yi-Chun, Lan Date: &nbsp;2021 Tool:&nbsp;TouchDesigner <img src="https://freight.cargo.site/t/original/i/a7e1c30d2d40578b4b0355f5f041164de863802b45560a6605fd7d763c0fe1f6/wind2.jpg" style="width:100%"> Overall Nowadays, the inventions of household appliances and consumer electronics are all pursuing efficiency and accessibility. I wonder what if these products can offer other services. <img width="7087" height="6687" width_o="7087" height_o="6687" data-src="https://freight.cargo.site/t/original/i/efbd53814a487881bf3b6331d8f0af0f149d5c21eb0f7ac896eec7b007a25c2d/wind1.jpg" data-mid="148683332" border="0" src="https://freight.cargo.site/w/1000/i/efbd53814a487881bf3b6331d8f0af0f149d5c21eb0f7ac896eec7b007a25c2d/wind1.jpg" /> Introduction and Design Concepts After reading Maslow's hierarchy of needs &amp; some theories about the order of consumer needs, I tried to change the function of the appliance to serve our emotions. Inspired by the scroll painting in the Japanese meditate room, this project poetically illustrates the relationship between time and memory. By connecting time, wind speed data, and the action of leaves falling, The Wind from the Past illustrates a silent view of the wind flow. The audience can feel the wind from the dancing of the leaves. At the same time, let their thoughts linger in the memories. I wish different household appliances could be a vital stimulus in people's thinking. How it functions <img width="801" height="2051" width_o="801" height_o="2051" data-src="https://freight.cargo.site/t/original/i/f7c3b119d1cb45c06ac4a5e267c204b923b3b46e1aff8825a5dc32d52c1182eb/wind7.gif" data-mid="120417752" border="0" src="https://freight.cargo.site/w/801/i/f7c3b119d1cb45c06ac4a5e267c204b923b3b46e1aff8825a5dc32d52c1182eb/wind7.gif" /> <img width="3724" height="1578" width_o="3724" height_o="1578" data-src="https://freight.cargo.site/t/original/i/e89210aabcaac6c792d5cf726c29c55f29ddeab922673060136ee2155a1b91bf/-2021-10-01-3.06.31.jpg" data-mid="120407014" border="0" src="https://freight.cargo.site/w/1000/i/e89210aabcaac6c792d5cf726c29c55f29ddeab922673060136ee2155a1b91bf/-2021-10-01-3.06.31.jpg" /> <img width="2558" height="1280" width_o="2558" height_o="1280" data-src="https://freight.cargo.site/t/original/i/6ef4cff4c746f87efb7645556d65bf6bd75609a110852dc07525bcfad16f9290/-2021-10-01-3.08.26.png" data-mid="120407012" border="0" src="https://freight.cargo.site/w/1000/i/6ef4cff4c746f87efb7645556d65bf6bd75609a110852dc07525bcfad16f9290/-2021-10-01-3.08.26.png" /> Users can choose the time and location, and it will show the corresponding expression of wind speed and direction through the weather data. In addition, I create these scenes without topographic features to supply more space for imaging and avoid distractions from feeling the delicate sentiment. <img width="2074" height="1383" width_o="2074" height_o="1383" data-src="https://freight.cargo.site/t/original/i/2cb4f941090370cb2de12c2eb5cae0c16ac93ecbc76c81b28b3a31ba7fc65b1d/whitetable2.jpg" data-mid="120216514" border="0" src="https://freight.cargo.site/w/1000/i/2cb4f941090370cb2de12c2eb5cae0c16ac93ecbc76c81b28b3a31ba7fc65b1d/whitetable2.jpg" /> Reference &amp; Reasearch 1. Domestic spaces in post-mao china:on electronic household appliances For the purpose of knowing more historical and background knowledge, the publication of China researcher Wang Minan《 On Electronic Household Appliances》inspired me a lot.This article takes household appliances as the subject of a biography and discusses the spatial power structure of washing machines, refrigerators, mobile phones, televisions, and other appliances in daily life. These objects chosen in the works show our desires, needs and the changes of our life. The action of washing clothes becomes the actuation of the start switch, and the action of writing becomes percussion. These changes mean that inventions and technology form people’s life posture. <img width="540" height="323" width_o="540" height_o="323" data-src="https://freight.cargo.site/t/original/i/a164027497b38b5f5d859cad11432293361381beec99796d64364521fea9f9db/_5401.jpeg" data-mid="120822004" border="0" data-scale="100" src="https://freight.cargo.site/w/540/i/a164027497b38b5f5d859cad11432293361381beec99796d64364521fea9f9db/_5401.jpeg" />Domestic spaces in post-mao china:on electronic household appliances by&nbsp;Wang Minan(2015): &nbsp;/ photograph: Liu Yiwei 2. Maslow's hierarchy of needs &nbsp;&amp;&nbsp; Hierarchy of consumer needs Maslow's hierarchy of needs is used to study how humans intrinsically partake in behavioral motivation. Maslow used the terms "physiological", "safety", "belonging and love", "social needs" or "esteem", and "self-actualization" to describe the pattern through which human motivations generally move. This means that in order for motivation to arise at the next stage, each stage must be satisfied within the individual themselves. Additionally, this hierarchy is a main base in knowing how effort and motivation are correlated when discussing human behavior. Each of these individual levels contains a certain amount of internal sensation that must be met in order for an individual to complete their hierarchy. The goal in Maslow's hierarchy is to attain the fifth level or stage: self-actualization. <img width="2165" height="1389" width_o="2165" height_o="1389" data-src="https://freight.cargo.site/t/original/i/49ec085e3eaa28e0f774f16bac7fe4d8f69ade5fb98f902ac2c2d4608669b8bd/1-s2.0-S1369702103012239-gr2_lrg.jpg" data-mid="121241757" border="0" src="https://freight.cargo.site/w/1000/i/49ec085e3eaa28e0f774f16bac7fe4d8f69ade5fb98f902ac2c2d4608669b8bd/1-s2.0-S1369702103012239-gr2_lrg.jpg" />Maslow's hierarchy of needs image from: https://www.simplypsychology.org/maslow.html) <img width="2000" height="1052" width_o="2000" height_o="1052" data-src="https://freight.cargo.site/t/original/i/fa6e805829415f769a0d26d142753b1f912abf33c7fd22afef3ce6209c83c22b/Maslows-Hierarchy-of-Needs.jpg" data-mid="120822498" border="0" src="https://freight.cargo.site/w/1000/i/fa6e805829415f769a0d26d142753b1f912abf33c7fd22afef3ce6209c83c22b/Maslows-Hierarchy-of-Needs.jpg" /> A hierarchy of consumer needs by P. Jordan (image from: http://www.sciencedirect.com/science/article/pii/S1369702103012239) https://lanyichun.com/oklao-redesign Mon, 08 Jul 2024 14:59:46 +0000 yichun.lan https://lanyichun.com/oklao-redesign OKLAO Coffee:Rebranding + E-commerce Web Design Welcome to OKLAO, a branding redesign and demonstration of various web development technologies and features combined to create an e-commerce platform.&nbsp; <img width="5391" height="1906" width_o="5391" height_o="1906" data-src="https://freight.cargo.site/t/original/i/33005e0097b81623ddda18fef6442e45964e1ab1575fdbaadae17a074268f1f2/oklao-headerlogo.png" data-mid="214306826" border="0" data-scale="46" src="https://freight.cargo.site/w/1000/i/33005e0097b81623ddda18fef6442e45964e1ab1575fdbaadae17a074268f1f2/oklao-headerlogo.png" /> ￪ click to website ￪ My Role Brand DesignerUI Developer Design ToolFigma/ illustrator/ photoshop Development ToolReact.js / Next.js/ Express.js /&nbsp; Firebase / Firebase Authenticatio / Firebase Storage / React-Dom / Stripe API The project scope covered two aspects, including and Brand design and Web development. Please click the sections below to explore each component in detail. Brand Design Web Development Section ② Web Development Oklao website was designed to streamline the shopping experience with a user-friendly interface and robust backend integration. Key features include: <img src="https://freight.cargo.site/w/600/q/75/i/2f4660e2707cda459f8f9896bfe4a428fae11aec8b97b17036042872575680cb/screen-record.gif" style="width:100%;"> 1. User Authentication: Leveraging Firebase for secure user login and authentication.2. Product Display and Categorization: Products are dynamically displayed using a slice from data.js, allowing for easy categorization and management.3. Checkout and Payment: Integrated with Stripe for secure and efficient payment processing, featuring components like &lt;CheckOutProducts /&gt; and &lt;CardElement /&gt;.4. State Management: Utilizes a StateProvider and works similarly to Redux, with actions and reducers to manage the application state effectively.5. Modular Component Structure: Organized folder structure with dedicated components for various functionalities including header, footer, products, and checkout. 6. Responsive Design: Mobile-first, adaptive layout using CSS media queries for optimal viewing on any device. Programming Structure <img src="https://freight.cargo.site/w/1500/q/75/i/06c8bc4e18bbb8a92a49b0aeea3b77e3431025c58dea43afe9e71ba8f4f3d1f2/Frame-90.png" style="width:100%" class=""> Pages:Routing and Server-Side RenderingThe first part of the diagram focuses on the routing structure, utilizing Next.js's server-side rendering (SSR) feature. This approach significantly improves SEO and initial load times by rendering pages on the server before sending them to the client. Key components in this section include page.js for defining routes, layout.js for consistent page layout, and StateProvider.js for managing the global state. Components:Component Structure and State ManagementThe second part emphasizes the component architecture and state management to ensure data flow and state consistency. Each component is designed to handle specific tasks, such as displaying products, managing checkout processes, and rendering UI elements. The application uses a state provider similar to Redux, with actions and reducers to update and manage the state.&nbsp; Responsive Design <img src="https://freight.cargo.site/w/960/q/94/i/72d7c1147f287c97fc27aed8ba29d61cd7f869451b8d6457552e1822724f0a31/-2024-05-22-2.38.50.gif" style="width: 100%;"> Explore the Demo:To get started, follow these steps to set up your testing account: Option 1: Create a Test Account Click on "Sign Up" on the demo website. Follow the on-screen instructions to create a unique account using your email and a secure password. Option 2: Use the Shared Testing Account Account: testtest@gmail.comPassword: 123456&nbsp;Card NUmber : 5555 5555 5555 4444 &nbsp; <img src="https://freight.cargo.site/w/2000/q/75/i/a5b18b0e0eb0be2b533b058bee8a39f20d8974b30a42b60c0d1fce4186f49d5f/oklao-headerlogo.png" style="width: 50%;"> ︎ Link to Website ︎ Github Section ① Brand Design&nbsp;Our goal was to create a dynamic atmosphere and attract younger customers to Oklao, a Taiwan-based coffee brand. To achieve this, we focused on designing a modern and energetic visual identity that would resonate with this demographic. <img src="https://freight.cargo.site/w/889/q/75/i/f868dda903bd9c899a721ea214237734c87850eb9c477c359b5bbf1fbfc559b2/oklao-original-logo.png" style="width:39%"> <img src="https://freight.cargo.site/w/1000/q/75/i/289b978422d3084c76f1706456125da76c95471ca13ceb1612170143b2fe15bd/-2024-05-22-2.29.34.png" style="width: 66%;"> <img src="https://freight.cargo.site/w/1000/q/75/i/3e1e2b5c240ba92aba60c5a187a44c72dcea6805e10c7ca05143a3b9551e3a78/-2024-05-22-2.30.08.png" style="width: 66%;"> Website and Logo before ResearchMarket Analysis:The specialty coffee market is rapidly growing, with younger consumers (ages 18-24) being the primary drivers of this growth. This demographic values not only the quality of the coffee but also the overall experience, including the ambiance of the coffee shop and the brand’s online presence. Younger customers are drawn to brands that offer a blend of authenticity and modernity, with a strong emphasis on aesthetics and storytelling.- Specialty Coffee Market Size, Share &amp; Trends Analysis Report By Age Group (18-24, 25-39, 40-59, Above 60) Design <img width="8000" height="4500" width_o="8000" height_o="4500" data-src="https://freight.cargo.site/t/original/i/18af1be66ad1c748cebf02278c26f49691b8c77a282e9e2ae6b288c077de3cda/oklao-45.png" data-mid="214306852" border="0" src="https://freight.cargo.site/w/1000/i/18af1be66ad1c748cebf02278c26f49691b8c77a282e9e2ae6b288c077de3cda/oklao-45.png" /><img width="8000" height="4500" width_o="8000" height_o="4500" data-src="https://freight.cargo.site/t/original/i/a4f651d7c165c8bee8d1509e30899c919ac3ccea555fd33392ede85644128cfd/oklao-48-1.png" data-mid="233010313" border="0" src="https://freight.cargo.site/w/1000/i/a4f651d7c165c8bee8d1509e30899c919ac3ccea555fd33392ede85644128cfd/oklao-48-1.png" /><img width="8000" height="4500" width_o="8000" height_o="4500" data-src="https://freight.cargo.site/t/original/i/6ef910cd45152986e28ae1d298cfe4feddeec694a9763b991ce8ee71de0243b7/oklao-46-1.png" data-mid="233010314" border="0" src="https://freight.cargo.site/w/1000/i/6ef910cd45152986e28ae1d298cfe4feddeec694a9763b991ce8ee71de0243b7/oklao-46-1.png" /> <img width="8000" height="4500" width_o="8000" height_o="4500" data-src="https://freight.cargo.site/t/original/i/dc4e0e2b646f62db6044d33329f9c1d4697da82bd0eb2829dd0e84bae702c0d4/oklao-50.png" data-mid="214306853" border="0" src="https://freight.cargo.site/w/1000/i/dc4e0e2b646f62db6044d33329f9c1d4697da82bd0eb2829dd0e84bae702c0d4/oklao-50.png" /><img width="8000" height="4500" width_o="8000" height_o="4500" data-src="https://freight.cargo.site/t/original/i/69ee4d01926535e86e4cbf3afa852a3e8f58ce8171f4e6ee0b2d19cee5364e91/oklao-animal.jpg" data-mid="216892896" border="0" src="https://freight.cargo.site/w/1000/i/69ee4d01926535e86e4cbf3afa852a3e8f58ce8171f4e6ee0b2d19cee5364e91/oklao-animal.jpg" /> Armed with these insights, I set out to redesign Oklao’s brand identity to better attract younger customers. Our approach included: 1. Logo Redesign: Creating a modern and dynamic logo that reflects Oklao’s energy and appeal. 2. Color Palette: Developing a lively color palette that conveys energy and freshness, appealing to the youthful market. 3. Typography Selection: Choosing typography that is both stylish and readable, aligning with contemporary design trends. 4. Brand Pattern: Establishing a cohesive brand style that ensures consistency across all touchpoints, from packaging to social media. By focusing on these elements, we aimed to create a brand identity that not only attracts younger customers but also fosters a lasting connection with them. The new visual identity of Oklao is designed to be vibrant, engaging, and reflective of the values and preferences of the modern coffee consumer. &nbsp; &nbsp; <img width="3000" height="2000" width_o="3000" height_o="2000" data-src="https://freight.cargo.site/t/original/i/d38015768c1d6901b4e05441d93ace5c640cb1e243af6f85b2893cee5344b247/03-Free-Enamel-Mug-Mockup.jpg" data-mid="214306846" border="0" src="https://freight.cargo.site/w/1000/i/d38015768c1d6901b4e05441d93ace5c640cb1e243af6f85b2893cee5344b247/03-Free-Enamel-Mug-Mockup.jpg" /> <img width="521" height="651" width_o="521" height_o="651" data-src="https://freight.cargo.site/t/original/i/2edf9eb92746c3b3dd7a0abdd8fc87b63665d113e06ceba3497610e4d7588e74/PaperBag-Unmark_2000.jpg" data-mid="214306845" border="0" src="https://freight.cargo.site/w/521/i/2edf9eb92746c3b3dd7a0abdd8fc87b63665d113e06ceba3497610e4d7588e74/PaperBag-Unmark_2000.jpg" /> <img width="2500" height="2513" width_o="2500" height_o="2513" data-src="https://freight.cargo.site/t/original/i/6b85c394374b0a029905ca0acc012a97dba0ff5593ad4296eb5de571010e7e1a/oklao-animal-package-64.jpg" data-mid="216892917" border="0" src="https://freight.cargo.site/w/1000/i/6b85c394374b0a029905ca0acc012a97dba0ff5593ad4296eb5de571010e7e1a/oklao-animal-package-64.jpg" /> <img width="2500" height="2513" width_o="2500" height_o="2513" data-src="https://freight.cargo.site/t/original/i/0087e3374680bdea3942ce05ba43fbc8dd9f7091d3b5fe326d7e23c07a8c7c02/oklao-animal-package-63.jpg" data-mid="216892918" border="0" src="https://freight.cargo.site/w/1000/i/0087e3374680bdea3942ce05ba43fbc8dd9f7091d3b5fe326d7e23c07a8c7c02/oklao-animal-package-63.jpg" /> <img width="2500" height="2513" width_o="2500" height_o="2513" data-src="https://freight.cargo.site/t/original/i/52d96c20d37294f2f865b48c7fdc87d4a87ca64be1c35b266a2c39cf0d97c894/oklao-animal-package-62.jpg" data-mid="216892919" border="0" src="https://freight.cargo.site/w/1000/i/52d96c20d37294f2f865b48c7fdc87d4a87ca64be1c35b266a2c39cf0d97c894/oklao-animal-package-62.jpg" /> <img width="2500" height="2500" width_o="2500" height_o="2500" data-src="https://freight.cargo.site/t/original/i/cec02650c69aea41c01597a9c9077dd8c874065bbca451f8b43d4c38047c1038/oklao-animal-package-61.jpg" data-mid="216892921" border="0" src="https://freight.cargo.site/w/1000/i/cec02650c69aea41c01597a9c9077dd8c874065bbca451f8b43d4c38047c1038/oklao-animal-package-61.jpg" /> <img width="2500" height="2500" width_o="2500" height_o="2500" data-src="https://freight.cargo.site/t/original/i/8ae60220171df46c4671929461aa4cbb4dabf06af4132e48697ff6dc55d6d3d6/oklao-animal-package-60.jpg" data-mid="216892925" border="0" src="https://freight.cargo.site/w/1000/i/8ae60220171df46c4671929461aa4cbb4dabf06af4132e48697ff6dc55d6d3d6/oklao-animal-package-60.jpg" /> <img width="2500" height="2500" width_o="2500" height_o="2500" data-src="https://freight.cargo.site/t/original/i/96b44a54087152eb333c8ff0282fe8e4fd63455ffb33e0c6a860ca000df5afce/oklao-animal-package-59.jpg" data-mid="216892931" border="0" src="https://freight.cargo.site/w/1000/i/96b44a54087152eb333c8ff0282fe8e4fd63455ffb33e0c6a860ca000df5afce/oklao-animal-package-59.jpg" /> <img src="https://freight.cargo.site/w/2000/q/75/i/eb7175ed85303c3e6b1a97ac63bce99f76182aaa3fe19503d273162e2c853876/image-from-rawpixel-id-12419297-2jpeg.jpg" style="width: 100%;"> <img width="8000" height="2708" width_o="8000" height_o="2708" data-src="https://freight.cargo.site/t/original/i/3bac2d707748d9b5d821994b3e095f217c39f5d205c01b91ee6801c6000a54b2/oklao-key-2.jpg" data-mid="216892837" border="0" src="https://freight.cargo.site/w/1000/i/3bac2d707748d9b5d821994b3e095f217c39f5d205c01b91ee6801c6000a54b2/oklao-key-2.jpg" /> <img src="https://freight.cargo.site/w/1500/q/75/i/624ab929f891545bf2c7fb0c8047d403782aa1530a5b95fdeac9a753e7ad7e79/oklao-53.png" style="width: 100%;"> <img src="https://freight.cargo.site/w/1000/q/75/i/04a637de04f15557093d2190d98b816ddd6e897ebab5ddaabe8fd83babfe769b/oklao-54.jpg" style="width: 100%;"> <img width="1961" height="1307" width_o="1961" height_o="1307" data-src="https://freight.cargo.site/t/original/i/7ff48b502464df4c69aa640670b81359f6699eeb43422ab849f9c0892feb67db/FeiryBunny.png" data-mid="216892979" border="0" src="https://freight.cargo.site/w/1000/i/7ff48b502464df4c69aa640670b81359f6699eeb43422ab849f9c0892feb67db/FeiryBunny.png" /> <img width="1961" height="1307" width_o="1961" height_o="1307" data-src="https://freight.cargo.site/t/original/i/e789998b1ab37ff4f4f66cf25a2ace39668fa5dac451ba1ec8038d09f33a086f/CurlyMouse.png" data-mid="216892976" border="0" src="https://freight.cargo.site/w/1000/i/e789998b1ab37ff4f4f66cf25a2ace39668fa5dac451ba1ec8038d09f33a086f/CurlyMouse.png" /> <img width="1961" height="1307" width_o="1961" height_o="1307" data-src="https://freight.cargo.site/t/original/i/4b831840fbff988be8ec1fb534dae5eec680c5a144d21d27eeefd760a23c92d1/ShyBunny.png" data-mid="216892977" border="0" src="https://freight.cargo.site/w/1000/i/4b831840fbff988be8ec1fb534dae5eec680c5a144d21d27eeefd760a23c92d1/ShyBunny.png" /> <img width="1961" height="1307" width_o="1961" height_o="1307" data-src="https://freight.cargo.site/t/original/i/9e6fadf5f6d9a7185e79f9df5bbfdede76057449f75286d2a36d5cd147078247/PlayfulDog.png" data-mid="216892980" border="0" src="https://freight.cargo.site/w/1000/i/9e6fadf5f6d9a7185e79f9df5bbfdede76057449f75286d2a36d5cd147078247/PlayfulDog.png" /> <img width="1961" height="1307" width_o="1961" height_o="1307" data-src="https://freight.cargo.site/t/original/i/215637e7fe6385a83f2a1b26adbcc38700b7073aae795ead7f4a420dd8a93b8d/LongEar.png" data-mid="216892978" border="0" src="https://freight.cargo.site/w/1000/i/215637e7fe6385a83f2a1b26adbcc38700b7073aae795ead7f4a420dd8a93b8d/LongEar.png" /> <img width="1961" height="1307" width_o="1961" height_o="1307" data-src="https://freight.cargo.site/t/original/i/263416c96ec15b7b492a4367093e451d92198bd33ef709420efb73b5b527a4c7/WhiskeredCat-.png" data-mid="216892981" border="0" src="https://freight.cargo.site/w/1000/i/263416c96ec15b7b492a4367093e451d92198bd33ef709420efb73b5b527a4c7/WhiskeredCat-.png" /> <img width="1813" height="1208" width_o="1813" height_o="1208" data-src="https://freight.cargo.site/t/original/i/dc1bb3be73d8e6f1fb35a3e67f62c382ee37010004e9fd16f0580a1080025d7b/Cup_Free-2.jpg" data-mid="214628174" border="0" src="https://freight.cargo.site/w/1000/i/dc1bb3be73d8e6f1fb35a3e67f62c382ee37010004e9fd16f0580a1080025d7b/Cup_Free-2.jpg" /> <img src="https://freight.cargo.site/t/original/i/0b5cfc2a48eba8a519cea05225a9f77bc4c09fd5492705ef3b617abf5e770532/oklao.jpg" style="width:100%"> <img src="https://freight.cargo.site/w/2000/q/75/i/915f8ed08339d11e6a9ea32016177c01455ef2bbb22f83283d6a85c4381d7390/Free_Glass_Shop_Sign_Mockup.jpg" style="width:100%"> <img src="https://freight.cargo.site/w/700/q/75/i/1fb92f7f953031d40b381fc45d942376dcf2abf61e8c69c83018124afbef064e/coffee-bag-green.png" style="width: 100%;"> <img src="https://freight.cargo.site/w/700/q/75/i/806ab91429ac1de10fde30c0204ecaa7cef81a9ee68e3478b9333bfc79d3dfc3/coffee-bag-black.png" style="width: 100%;"> <img src="https://freight.cargo.site/w/700/q/75/i/e8f67ed8b58d86b885d0a1748c2ec9256cbc79a2abe8ce96bac9aa12118b3b4d/coffee-bag.png" style="width: 100%;"> Click the button below to switch the other part ! Brand Design Web Development img { scale: 100%; } #zoom img{ transition: 0.3s ease-in-out; } #zoom img.zoomed { transform: scale(1.15); transition: 0.3s ease-in-out; } /* Style the buttons that are used to open the tab content */ .tab button { font-size: 1.4rem; font-weight: 600; color: #ffffff; background-color: #f77736; float:initial; outline: none; cursor: pointer; padding: 16px 28px; margin: 0 2rem 1rem 0; transition: 0.3s; border-radius: 5rem; border: 0; } /* Change background color of buttons on hover */ .tab button:hover { background-color: #ff671b; font-size:1.44rem ; } /* Style the tab content */ .tabcontent { display: none; margin: auto; width: 90%; /* border: 1px solid #ccc; */ border-top: none; } .tabcontent { animation: fadeEffect 1s; /* Fading effect takes 1 second */ } /* Go from zero to full opacity */ @keyframes fadeEffect { from { opacity: 0; } to { opacity: 1; } } @media only screen and (min-width: 1201px) { /* Style the tab */ .tab { justify-content: center; overflow: hidden; width: 90%; margin: auto; color: #f1f1f1; align-items: center; justify-content: space-between; display: flex; } .tab button { font-size: 1.4rem; line-height: 1.5rem; margin: 0 0.5rem 0.5rem 0; } } @media only screen and (min-width: 993px) and (max-width: 1200px){ /* Style the tab */ .tab { justify-content: center; overflow: hidden; width: 90%; margin: auto; color: #f1f1f1; align-items: center; justify-content: space-between; display: flex; } .tab button { font-size: 1.4rem; line-height: 1.3rem; margin: 0 0.2rem 0.5rem 0; } } @media only screen and (min-width: 771px) and (max-width: 992px){ .tab { /* justify-content: center; */ overflow: hidden; display: flex; width: 100%; margin: auto; color: #f1f1f1; align-items: center; justify-content:center; } .tab button { font-size: 1.4rem; line-height: 1.3rem; margin: 0 0.5rem 0.5rem 0; } .linkButton{ width:50%; } } @media only screen and (max-width: 770px) { .tab { /* justify-content: center; */ overflow: hidden; display: flex; width: 95%; margin: auto; color: #f1f1f1; align-items: center; justify-content:center; } .tab button { font-size: 1.4rem; line-height: 1.3rem; margin: 0 0.2rem 0.5rem 0; padding: 6px 12px; } #oklao-link-button{ display:flex; width:30%; } } function openTab(event, tabName) { // Get all elements with class="tabcontent" and hide them var tabcontents = document.getElementsByClassName("tabcontent"); for (var i = 0; i < tabcontents.length; i++) { tabcontents[i].style.display = "none"; } // Get all elements with class="tablinks" and remove the class "active" var tablinks = document.getElementsByClassName("tablinks"); for (var i = 0; i < tablinks.length; i++) { tablinks[i].classList.remove("active"); } // Show the current tab, and add an "active" class to the button that opened the tab document.getElementById(tabName).style.display = "block"; event.currentTarget.classList.add("active"); } // Open the default tab document.getElementById("defaultOpen").click(); document.getElementById('zoom').addEventListener('click', function(e) { const tgt = e.target; tgt.classList.toggle('zoomed') }) function scrollToTop(){ $('html, body').animate({ scrollTop: $("#top-panel").offset().top }, 2000); } https://lanyichun.com/Berkley-Center-Web-Design Sun, 07 Apr 2024 01:26:10 +0000 yichun.lan https://lanyichun.com/Berkley-Center-Web-Design <img width="1920" height="630" width_o="1920" height_o="630" data-src="https://freight.cargo.site/t/original/i/76f3da39d0bdf7241075d40977238c21dd2a8e4f29216e959456a53919ee81de/Frame-1.jpg" data-mid="208433306" border="0" src="https://freight.cargo.site/w/1000/i/76f3da39d0bdf7241075d40977238c21dd2a8e4f29216e959456a53919ee81de/Frame-1.jpg" /> Berkley Center Web Design In this project, I worked on revamping the Berkley Center website to improve its overall appearance and user experience. My focus was on reorganizing the page structure, simplifying design elements, and making sure the content was easy to read.&nbsp; Over the course of six months, these improvements resulted in a 7.8K increase in visitors and a 20k boost in page views. <img width="3837" height="1334" width_o="3837" height_o="1334" data-src="https://freight.cargo.site/t/original/i/06697054cdab9e65f2618db5722fc5e8d7394859e25e0b8fa21a421f0fc5175d/-3.png" data-mid="210926395" border="0" data-scale="100" src="https://freight.cargo.site/w/1000/i/06697054cdab9e65f2618db5722fc5e8d7394859e25e0b8fa21a421f0fc5175d/-3.png" /> Click to Website My RoleUX Designer/ Developer ToolHTML/ CSS/ WordPress ClientNYU Berkley Center DirectorsPaul Foster/ Shay Gaskins/ Steph Shyu/ Cynthia Franklin Result Problem Statement According to user feedback, the existing Berkley Center website faces challenges with an overwhelming amount of text and a lack of clear visual hierarchy, making it difficult for users to comprehend the content easily. Additionally, some users have encountered formatting and scrolling issues while browsing the site on mobile devices, further affecting their experience and potentially decreasing overall user satisfaction. Goals Improve Readability Cohesive Design Responsive Design Design Approach ① - Improve Readibility I made several design improvements to optimize visual clarity and overall aesthetics: ① Increased spacing between elements&nbsp;② Soften sections divisions &nbsp; ③ Reduce Content &nbsp;④ Consistent design elements Design Approach ② - Reorganize content ② -1 Organize information into different levels To reduce the content, I separate content into different levels and create a clear hierarchy, then implement an intuitive navigation structure for easy access to information. <img width="4000" height="2250" width_o="4000" height_o="2250" data-src="https://freight.cargo.site/t/original/i/5e2c286667e01bf21d01bf6cdb2efcbf5768670edd875bad90326b9a9646640b/wordpress-renew-directory.jpg" data-mid="211456970" border="0" src="https://freight.cargo.site/w/1000/i/5e2c286667e01bf21d01bf6cdb2efcbf5768670edd875bad90326b9a9646640b/wordpress-renew-directory.jpg" /> <img width="8000" height="4500" width_o="8000" height_o="4500" data-src="https://freight.cargo.site/t/original/i/ff9aafbbd7f0f50a33c5aa75208145afb4cbd7a6f09f2cb1207cb60ef5c6badb/berkleyCenter_-1-.png" data-mid="209167758" border="0" src="https://freight.cargo.site/w/1000/i/ff9aafbbd7f0f50a33c5aa75208145afb4cbd7a6f09f2cb1207cb60ef5c6badb/berkleyCenter_-1-.png" /> I also organized information into distinct categories based on their themes. After this I build distinct pages and components to create a clear hierarchy. This allows each page to maintain a clear focus, making it easier for users to find and understand relevant content. Design Approach ③ - Responsive Design I started from the venture showcase pages which were designed for physical event, including the team directory and instructions for all the entreperneur teams.&nbsp;In this page, multiple participating teams could be featured, and people will read the the content on their mobile. <img width="608" height="1080" width_o="608" height_o="1080" data-src="https://freight.cargo.site/t/original/i/0d2fc1fb89ed728381ca0bc9242c21c956e83b929b4a380498c25bd467038e3a/directory-2.gif" data-mid="211459261" border="0" src="https://freight.cargo.site/w/608/i/0d2fc1fb89ed728381ca0bc9242c21c956e83b929b4a380498c25bd467038e3a/directory-2.gif" /> Results HighlightSince the redesign, page views jumped to 20K, and visitor numbers increased by 7,800. One of the most notable improvements came during the Entrepreneur Challenge’s Venture Showcase,&nbsp;this page achieved remarkable user engagement, attracting over 500 users and more than 1000 pageviews.&nbsp; Users praised the website's simplicity and intuitive design, enhancing their experience while accessing valuable insights about competitors' backgrounds, accomplishments, and other relevant details. Reflection: Reflecting on this project, it was a pleasure to revamp the Berkley Center website, focusing on improving its appearance and user experience. Over six months, these changes attracted 7.8K more visitors and increased page views by 20k! While I'm pleased with the outcome, there's always room for growth. Moving forward, I'd like to apply these design elements to other pages, ensuring a cohesive and polished look throughout the entire site. See more day-to-day design work for the Berkley Center here!—including social media, motion, and print materials <img width="8226" height="3639" width_o="8226" height_o="3639" data-src="https://freight.cargo.site/t/original/i/04b8c0550b96bcb48f1817592d02c82e8ce70877305cab663b62bbfb6f5ca373/quickvie-berkley.png" data-mid="233171534" border="0" src="https://freight.cargo.site/w/1000/i/04b8c0550b96bcb48f1817592d02c82e8ce70877305cab663b62bbfb6f5ca373/quickvie-berkley.png" /> $(window).scroll(function(){ var myVideo = document.getElementById("berkley-1"); // console.log($(window).scrollTop()); if($(window).scrollTop() > myVideo.offsetTop - 300 ){ myVideo.play(); }else{ myVideo.pause(); } }) $(window).scroll(function(){ var myVideo2 = document.getElementById("berkley-2"); if($(window).scrollTop() > myVideo2.offsetTop - 300 ){ myVideo2.play(); }else{ myVideo2.pause(); } }) https://lanyichun.com/Lans-Bar Wed, 28 Feb 2024 02:20:47 +0000 yichun.lan https://lanyichun.com/Lans-Bar Lan’s Home Cocktail Bar Lan's Bar is a 3D web website designed to replicate the refined ambiance of my home bar. There exists a profound atmosphere during drinking with friends, and it is my aspiration to recreate this sentiment within the digital realm. Leveraging React technology, this project provides users with an immersive environment by 3D and the check out experience. Click to Website My Role Designer/ Developer ProjectSelf-initiated ToolReact.js / three.js / Html / CSS / Figma / Blender TeamYi-Chun Lan&nbsp; Overview Background Living miles away from my friends in Taiwan, I found myself missing those cozy nights when we'd gather around my home bar, sharing stories and laughter over cocktails. Receiving messages from friends expressing their miss on my signature cocktails made me want to share my recipe and create an online experience for my friends with the warm, welcoming atmosphere. <img width="800" height="576" width_o="800" height_o="576" data-src="https://freight.cargo.site/t/original/i/06debbc0a3b52ef29a4c64133a492e0b62839b6bd578a7c564090d430a94fe46/friendss.gif" data-mid="205810320" border="0" src="https://freight.cargo.site/w/800/i/06debbc0a3b52ef29a4c64133a492e0b62839b6bd578a7c564090d430a94fe46/friendss.gif" /> Project Goals: 1. Emulate Home Bar Experience:My goal is to create a digital space that feels just like my home bar – cozy, inviting, and filled with the warmth of friendship, no matter where they are in the world. 2. Share My Cocktail Secrets for Recreation：I want to share my cocktail recipes within the 3D viewing experience, allowing them to replicate their favorite drinks! 3. Express My Love in an Innovative Way:By offering users personalized digital receipts adorned with discounts and special offers, I aim to convey my appreciation for their virtual presence and my love. Results <img width="3014" height="1574" width_o="3014" height_o="1574" data-src="https://freight.cargo.site/t/original/i/b8f9381b8648882e5ca762c8909dc6cdfa02ed778c9758a17e6d833bd516c2f7/-2024-07-10-9.22.34.png" data-mid="215407880" border="0" src="https://freight.cargo.site/w/1000/i/b8f9381b8648882e5ca762c8909dc6cdfa02ed778c9758a17e6d833bd516c2f7/-2024-07-10-9.22.34.png" /> <img width="3020" height="1590" width_o="3020" height_o="1590" data-src="https://freight.cargo.site/t/original/i/3eea5d68880b888147ce425fa48f068cbb8146a0d8a299fe4260ba8db9293c12/-2024-07-17-8.59.22.png" data-mid="215407807" border="0" src="https://freight.cargo.site/w/1000/i/3eea5d68880b888147ce425fa48f068cbb8146a0d8a299fe4260ba8db9293c12/-2024-07-17-8.59.22.png" /> <img width="3012" height="1596" width_o="3012" height_o="1596" data-src="https://freight.cargo.site/t/original/i/c7fbf02728e220e20124c1b883fe07b6e04bc0e100be0c9992bc291ffa5255b8/-2024-07-17-8.59.46.png" data-mid="215407806" border="0" src="https://freight.cargo.site/w/1000/i/c7fbf02728e220e20124c1b883fe07b6e04bc0e100be0c9992bc291ffa5255b8/-2024-07-17-8.59.46.png" /> <img width="3018" height="1606" width_o="3018" height_o="1606" data-src="https://freight.cargo.site/t/original/i/020798d1e0aebcff330915401e7913ebff2ce1b129e58b83cf6412d446b35ffa/-2024-07-17-9.00.01.png" data-mid="215407805" border="0" src="https://freight.cargo.site/w/1000/i/020798d1e0aebcff330915401e7913ebff2ce1b129e58b83cf6412d446b35ffa/-2024-07-17-9.00.01.png" /> <img width="3022" height="1588" width_o="3022" height_o="1588" data-src="https://freight.cargo.site/t/original/i/b116f5b9b40d125120e757a5290893e8651279cfdb3b06becbc8f3a2e2dbe914/-2024-07-17-9.00.34.png" data-mid="215407804" border="0" src="https://freight.cargo.site/w/1000/i/b116f5b9b40d125120e757a5290893e8651279cfdb3b06becbc8f3a2e2dbe914/-2024-07-17-9.00.34.png" /> 3D Experience: <img src="https://freight.cargo.site/t/original/i/a1798eec5f6c58e6583f80c7d828ee7e6519a99297a69104f9155daf15dffdc1/bar.gif" style="width:100%"> Dynamic Receipt: <img src="https://freight.cargo.site/t/original/i/43a490d89604c1e237c47e055ec4709ce2589db1a0122c4031ae1bc03127d401/printout.gif" style="width:100%"> Reservation: <img src="https://freight.cargo.site/t/original/i/4f1f3699934821cd3ca935763b7bbdc2308e5a5b40361d367f2e79e77db49098/-2024-02-25-4.06.53.gif" style="width:100%"> Design ProcessSite Map <img width="3840" height="2160" width_o="3840" height_o="2160" data-src="https://freight.cargo.site/t/original/i/5a8fd5ce00fbab6f8f1f7a0385b2fbf0e54e7e0b13569ce765e5c8372f8cfd6d/Slide-16_9---1.jpg" data-mid="205921515" border="0" src="https://freight.cargo.site/w/1000/i/5a8fd5ce00fbab6f8f1f7a0385b2fbf0e54e7e0b13569ce765e5c8372f8cfd6d/Slide-16_9---1.jpg" />Low Fidelity Prototype<img src="https://freight.cargo.site/t/original/i/5d9a0699b3cc073cc124e54b890934b4cf7250885eb270d57e2fc336627c62de/-6.jpg" style="width:100%"> Wireframe and Programming Struture <img src="https://freight.cargo.site/t/original/i/cdae29ff8d1e952084a3c0cc686f1a228946d46d085bbeec5ac12673682db45d/Frame-15-1.jpg" style="width:100%"> <img width="5150" height="2678" width_o="5150" height_o="2678" data-src="https://freight.cargo.site/t/original/i/841b16f84f48c54eb7640309932a26269c986427671fa3e52449e0bc0d135f8a/Frame-15-2.jpg" data-mid="205949113" border="0" src="https://freight.cargo.site/w/1000/i/841b16f84f48c54eb7640309932a26269c986427671fa3e52449e0bc0d135f8a/Frame-15-2.jpg" /><img width="5150" height="2276" width_o="5150" height_o="2276" data-src="https://freight.cargo.site/t/original/i/79e14dac9212a05374d1ef10ba368937b54a193eff500dbbc5c31489b0f63b50/Frame-15-3.jpg" data-mid="205949114" border="0" src="https://freight.cargo.site/w/1000/i/79e14dac9212a05374d1ef10ba368937b54a193eff500dbbc5c31489b0f63b50/Frame-15-3.jpg" /> 3D Modeling &amp; Development <img width="640" height="334" width_o="640" height_o="334" data-src="https://freight.cargo.site/t/original/i/5968b3e2b49abdf59957c4e871b073cc3a5e46a0767270b44a1beba9dd89b433/-2024-03-03-3.08.43.gif" data-mid="205924954" border="0" src="https://freight.cargo.site/w/640/i/5968b3e2b49abdf59957c4e871b073cc3a5e46a0767270b44a1beba9dd89b433/-2024-03-03-3.08.43.gif" /> <img width="640" height="334" width_o="640" height_o="334" data-src="https://freight.cargo.site/t/original/i/3cf7bfd3552b7cd3cb4bfa9fd554985d773b5e3e249f6fb91911ad618ea5af29/-2024-03-03-3.03.39.gif" data-mid="205924955" border="0" src="https://freight.cargo.site/w/640/i/3cf7bfd3552b7cd3cb4bfa9fd554985d773b5e3e249f6fb91911ad618ea5af29/-2024-03-03-3.03.39.gif" /> <img width="1920" height="1050" width_o="1920" height_o="1050" data-src="https://freight.cargo.site/t/original/i/b309a8c86269c67054bd0d0f95b44be06c903af3013be5953a020d6951f17fe9/-2024-03-03-1.43.24.png" data-mid="205949044" border="0" src="https://freight.cargo.site/w/1000/i/b309a8c86269c67054bd0d0f95b44be06c903af3013be5953a020d6951f17fe9/-2024-03-03-1.43.24.png" /> <img width="952" height="740" width_o="952" height_o="740" data-src="https://freight.cargo.site/t/original/i/4d197b3c8ea81c90f5d3e1e1713bbf072f42a946541db63304762a7feea3c5f8/-2024-03-03-1.43.53.png" data-mid="205949043" border="0" src="https://freight.cargo.site/w/952/i/4d197b3c8ea81c90f5d3e1e1713bbf072f42a946541db63304762a7feea3c5f8/-2024-03-03-1.43.53.png" /> ReflectionReflecting on this journey fills me with gratitude for the opportunity to bring my vision to life and share it with those closest to me. Despite the inevitable challenges encountered along the way, the satisfaction of seeing this project evolve and become a reality has been incredibly rewarding. As I continue to refine and enhance this website, I look forward to further enriching the experience for my friends and fellow cocktail enthusiasts, knowing that every enhancement brings us closer together in spirit, even if we're miles apart. 🧡 <img src="https://media1.giphy.com/media/v1.Y2lkPTc5MGI3NjExNTlheGNranQwaWxxNmM0emNoMXJ4anRweHYwdTdsOTdwMjhqMDE3NSZlcD12MV9pbnRlcm5hbF9naWZfYnlfaWQmY3Q9Zw/NC0jMfkigksgRGz1gz/giphy.gif" style="width:30%"> Click to Website https://lanyichun.com/Talk-to-me Tue, 24 Oct 2023 23:01:41 +0000 yichun.lan https://lanyichun.com/Talk-to-me Talk to Me "Talk to Me" is a chatbot project that merges the realms of web development and interactive storytelling. This project was developed to create an interactive chat experience to captivate and entertain users , play around the theme of a "mountain echo "&nbsp; and creative chat with Large Language Model. Click to Website My RoleDesigner/ Developer ProjectSelf-initiated ToolRivescript /&nbsp;HTML / CSS LLM (meta/llama-2-70b-chat) TeamYi-Chun Lan Key&nbsp; Features ❶ Conversational AI &amp; Theme Intergration: The project centered around the creation of a chatbot named "Mountain." Unlike traditional chatbots, Mountain was designed to mimic the user's responses and keep telling you dad jokes, creating a novel and intriguing conversational dynamic. In the technical part, the mountain mixed two ways of responses. The first one is about setting a rule to let the bot follow (RiveScript), and the second one is sending a request to the toned language model to get the response! ❷ Interactive Narrative: The chatbot experience was structured around a playful narrative, where users engage in a dialogue with Mountain, unveiling questions, jokes, and playful surprises along the way.The chatbot's responses were designed to mimic the user's input, creating an echo effect and infusing humor into the conversation. Programming Struture<img width="5354" height="3826" width_o="5354" height_o="3826" data-src="https://freight.cargo.site/t/original/i/a81878a41e7c274a542b34de5e0ce4349e545fd7f5d6b3535601b2badfd65dc4/Frame-89.png" data-mid="214237724" border="0" src="https://freight.cargo.site/w/1000/i/a81878a41e7c274a542b34de5e0ce4349e545fd7f5d6b3535601b2badfd65dc4/Frame-89.png" /> ↓Talk to Mountain↓ Let’s chat! <img width="2825" height="986" width_o="2825" height_o="986" data-src="https://freight.cargo.site/t/original/i/4f37e0eb09b1952d6b661f745cc1657f516e118a4b2afb0d08aae777cc7d26c3/twomountain.gif" data-mid="199556744" border="0" data-scale="47" src="https://freight.cargo.site/w/1000/i/4f37e0eb09b1952d6b661f745cc1657f516e118a4b2afb0d08aae777cc7d26c3/twomountain.gif" /> https://lanyichun.com/Osiris-rex Fri, 05 Jan 2024 13:53:24 +0000 yichun.lan https://lanyichun.com/Osiris-rex Osiris-Rex: 3D Interactive WebSite The Osiris Rex 3D Interactive Experience aims to transform complex space mission into an engaging and understandable 3D web format. Our goal is to make the Osiris Rex mission accessible and captivating to a wider audience. Click to Website My Role Designer/ Developer ProjectSelf-initiated ToolReact.js / three.js / Html / CSS / Figma / Blender TeamYi-Chun Lan, Keyi Fu.Or Fleisher, Yuliya, Parshina-Kottas Overview BackgroundAfter encountering news about the Osiris Rex mission online, we delved into NASA's updates on their website. The concept of a satellite not landing on Earth intrigued us greatly.&nbsp;When we shared this discovery with classmates, we noticed their interest in the mission, but they felt overwhelmed by the scattered information online. This sparked our initiative to create an interactive website that offers a more engaging and accessible way to understand this mission. <img width="316" height="876" width_o="316" height_o="876" data-src="https://freight.cargo.site/t/original/i/9cf684ab4e108427e39b2b9a18c8ad2d0d197d102705e8918f7fafc6175a64e0/-2024-02-27-6.14.29.png" data-mid="205619372" border="0" data-scale="51" src="https://freight.cargo.site/w/316/i/9cf684ab4e108427e39b2b9a18c8ad2d0d197d102705e8918f7fafc6175a64e0/-2024-02-27-6.14.29.png" /> <img width="788" height="1596" width_o="788" height_o="1596" data-src="https://freight.cargo.site/t/original/i/9b845f441fb68d233f5797eb3b8b11b3005b78b419462cbef580b21704266b6e/-2024-02-27-6.19.12.png" data-mid="205619488" border="0" data-scale="66" src="https://freight.cargo.site/w/788/i/9b845f441fb68d233f5797eb3b8b11b3005b78b419462cbef580b21704266b6e/-2024-02-27-6.19.12.png" /> <img width="808" height="1598" width_o="808" height_o="1598" data-src="https://freight.cargo.site/t/original/i/22d28b4435286f98817d6f9c18a23080978af157119ac6b8b7438060b04b01d4/-2024-02-27-6.19.22.png" data-mid="205619485" border="0" data-scale="65" src="https://freight.cargo.site/w/808/i/22d28b4435286f98817d6f9c18a23080978af157119ac6b8b7438060b04b01d4/-2024-02-27-6.19.22.png" /> <img width="722" height="1500" width_o="722" height_o="1500" data-src="https://freight.cargo.site/t/original/i/b63be519a50e71056bfb0db9dbd2522272c8fd7f3bc2c24703888e4e9f97bd88/-2024-02-27-6.14.47.png" data-mid="205619365" border="0" data-scale="71" src="https://freight.cargo.site/w/722/i/b63be519a50e71056bfb0db9dbd2522272c8fd7f3bc2c24703888e4e9f97bd88/-2024-02-27-6.14.47.png" /> User Research: In the initial phases of the project, we conducted group interviews with people who are interesied in technology and individuals with varying levels of knowledge about space missions to gain insights into the specific interests and curiosity levels of potential users regarding the Osiris Rex mission. These interviews helped us understand what aspects of the mission intrigued them the most and what questions they had. <img width="204" height="204" width_o="204" height_o="204" data-src="https://freight.cargo.site/t/original/i/a2a74165695c00b3f8657f9f312d9a3400514eb4e0dfe75a30509451265b9286/Ellipse-4.png" data-mid="205620451" border="0" data-scale="52" src="https://freight.cargo.site/w/204/i/a2a74165695c00b3f8657f9f312d9a3400514eb4e0dfe75a30509451265b9286/Ellipse-4.png" /> "How difficult is the entire delivery process and why is it difficult? Would like to know the detailed steps and the relative positions." <img width="204" height="204" width_o="204" height_o="204" data-src="https://freight.cargo.site/t/original/i/860032737e592a49ba1a1b022c9bca85cc2214ffb9a33cbb31db91423f388aa0/Ellipse-2.png" data-mid="205620465" border="0" data-scale="58" src="https://freight.cargo.site/w/204/i/860032737e592a49ba1a1b022c9bca85cc2214ffb9a33cbb31db91423f388aa0/Ellipse-2.png" /> "I'm really curious about how they grab a sample from an asteroid. It sounds like a delicate operation." <img width="204" height="204" width_o="204" height_o="204" data-src="https://freight.cargo.site/t/original/i/dd10eb6a4ec00d991d205a1734aec73c52e549a6f8022adb9c327602791540d9/Ellipse-16.png" data-mid="205620495" border="0" data-scale="53" src="https://freight.cargo.site/w/204/i/dd10eb6a4ec00d991d205a1734aec73c52e549a6f8022adb9c327602791540d9/Ellipse-16.png" /> "Why don't they consider landing directly? How much cost can be saved by not landing rather than landing and taking off again?" <img width="204" height="204" width_o="204" height_o="204" data-src="https://freight.cargo.site/t/original/i/7aca21d9fac46e8c0c7c71cbcce431c8a9231b9a9cba5db15bf68627b1a24e02/Ellipse-14.png" data-mid="205620493" border="0" data-scale="50" src="https://freight.cargo.site/w/204/i/7aca21d9fac46e8c0c7c71cbcce431c8a9231b9a9cba5db15bf68627b1a24e02/Ellipse-14.png" /> "I am interested in learning more about Bennu and what makes it unique and worth exploring, as well as what it looks like." Key Findings: Through our research, we uncovered several key findings that informed our design approach:Our audiences are interested in ①&nbsp; Spacecraft's technology&nbsp;Users were highly curious about the spacecraft's technology, with questions about its propulsion, navigation, and scientific instruments topping the list. ②&nbsp; Sampling Process:&nbsp;Many users expressed a strong interest in understanding the process of collecting samples from an asteroid. They were keen to know how the spacecraft interacted with the asteroid's surface and how samples were secured. ③&nbsp; Mission Journey:&nbsp;Additionally, users were intrigued by the spacecraft's journey, from launch to arrival at the asteroid and back to Earth. They wanted to visualize and understand the path it took through space. Problem Statement: How might we address the challenge of fragmented information and complex terminology in existing online platforms, to create an interactive experience that provides a more engaging and accessible experience for users seeking to understand NASA's missions? Design Process: The design process began with crafting a storyline with 3D scenes and the informations to organize mission logically. We then designed flows to guide users through different mission stages, and interaction design focused on creating an intuitive and immersive 3D experience. Define Key Phases <img width="4904" height="1854" width_o="4904" height_o="1854" data-src="https://freight.cargo.site/t/original/i/bfdcf8a9a5a120eda168f80bfd3c01bd3e6cd67223bb8681ab1f6ed845a1aa76/2-main-stages.jpg" data-mid="201057591" border="0" src="https://freight.cargo.site/w/1000/i/bfdcf8a9a5a120eda168f80bfd3c01bd3e6cd67223bb8681ab1f6ed845a1aa76/2-main-stages.jpg" /> Storyboard and User testing Version ①&nbsp; Maintaining Object Proportions During this phase, we created a storyboard outlining the user journey through the Osiris Rex 3D Interactive Experience. We designed each scene to ensure that users could explore the spacecraft and mission phases while maintaining accurate object proportions. <img src="https://freight.cargo.site/t/original/i/e025e314c652fb57674279fa6868bd57f0906fea3e0cd73033d7f932b94391ce/osiris-storyboard-04.jpg" style="width:100%"> <img width="960" height="580" width_o="960" height_o="580" data-src="https://freight.cargo.site/t/original/i/507fc718d749649df7d9d94f43090d865a14fa8f0a381e5a4ba350f01d6d7d82/blender.gif" data-mid="201064450" border="0" src="https://freight.cargo.site/w/960/i/507fc718d749649df7d9d94f43090d865a14fa8f0a381e5a4ba350f01d6d7d82/blender.gif" /><img width="960" height="543" width_o="960" height_o="543" data-src="https://freight.cargo.site/t/original/i/4915d28a02b7cc9737850291184f61b78dc7b8bd8f29ae48167fad6223da9541/developing.gif" data-mid="201064122" border="0" src="https://freight.cargo.site/w/960/i/4915d28a02b7cc9737850291184f61b78dc7b8bd8f29ae48167fad6223da9541/developing.gif" /> At the same time, we also display the models and different way of navigating in browser to get some feedback and what thay would love to experience in the website. The results were insightful, with users appreciating the realistic scale of these models. However, some users expressed a desire for more detailed views of the spacecraft components and different angles to better understand them. Version ②&nbsp; Enlarging Objects for Clearer Details &nbsp; After the testing of the Version 1, we developed a second version of the storyboard. In this version, we enlarged certain objects within the 3D model to provide users with clearer model details. This approach aimed to address user feedback from the first version. To compare both versions, we conducted separate user testing sessions for Version 2. The results showed that users found the enlarged objects helpful in understanding the spacecraft's intricacies. This approach allowed users to appreciate finer model details. Version1 <img width="960" height="580" width_o="960" height_o="580" data-src="https://freight.cargo.site/t/original/i/507fc718d749649df7d9d94f43090d865a14fa8f0a381e5a4ba350f01d6d7d82/blender.gif" data-mid="201064450" border="0" src="https://freight.cargo.site/w/960/i/507fc718d749649df7d9d94f43090d865a14fa8f0a381e5a4ba350f01d6d7d82/blender.gif" />display the size relationship in blender <img src="https://freight.cargo.site/t/original/i/e025e314c652fb57674279fa6868bd57f0906fea3e0cd73033d7f932b94391ce/osiris-storyboard-04.jpg" style="width:100%"> Version 2 <img width="960" height="580" width_o="960" height_o="580" data-src="https://freight.cargo.site/t/original/i/521ed20c08b9dda82dd9dab7041592de45ae2d7b7bc4ab99dad98d91001b02d0/blender-fix.gif" data-mid="201067641" border="0" src="https://freight.cargo.site/w/960/i/521ed20c08b9dda82dd9dab7041592de45ae2d7b7bc4ab99dad98d91001b02d0/blender-fix.gif" />display the size relationship in blender <img src="https://freight.cargo.site/t/original/i/0cd49ace246365888cf4ab96d63630c66311d35fd59ea1921206672ebf9a40e1/osiris-storyboard-05.jpg" style="width:100%"> add the introduction of the spacecraft’s details In this version, we observed that the majority of users enjoyed a linear scrolling experience to follow the storyline while obtaining detailed information about the spacecraft. Some users mentioned that an excessive amount of introductory details could distract from the narrative, causing them to lose track of the overall mission structure. Low-fi prototype &amp; WireframeIn response to the feedback we got at the storyboard stage, we made adjustments to the texts in different section. Instead of overwhelming users with excessive details at the beginning, we now offer a concise overview of the entire narrative. This allows users to grasp the overarching story structure first.&nbsp; Subsequently, users have the option to delve into specific details by clicking on different pages to access supplementary information after grasping the entirety of the storyline. This approach allows users to have a smoother and more immersive experience while accommodating those who seek additional insights into the mission. Moreover, we explored innovative ways to collaborate with image sources and video content to enhance the clarity and attractiveness of the storytelling process. This effort aims to engage users further and make the journey through the Osiris Rex mission more captivating and informative. <img src="https://freight.cargo.site/t/original/i/34d1a9c692183cddcf9f6d752b1b0f84d8fe19be0d68075515b6081a29e5d19b/osiris.jpg" style="width:100%"> Implementation and Release We translated the design into a fully functional 3D web experience by react.js and react-three-fiber. Also, we utilized version control to manage updates and staged the release of the 3D interactive experience on our website. The deployment process went smoothly, with positive user feedback on the enhanced Osiris Rex experience, highlighting its value in making space missions accessible. <img width="3012" height="1584" width_o="3012" height_o="1584" data-src="https://freight.cargo.site/t/original/i/5eb32d836abe1db0eae693f40ed479a8b69c477355ab435f7a2dbb6f98a3341f/-2024-01-06-10.31.36.png" data-mid="201069953" border="0" src="https://freight.cargo.site/w/1000/i/5eb32d836abe1db0eae693f40ed479a8b69c477355ab435f7a2dbb6f98a3341f/-2024-01-06-10.31.36.png" /> <img width="3012" height="1588" width_o="3012" height_o="1588" data-src="https://freight.cargo.site/t/original/i/059d5eaad215da834534ef222e5accab7865431f69895fb827050fa1f0a7f000/-2024-01-06-10.32.02.png" data-mid="201069951" border="0" src="https://freight.cargo.site/w/1000/i/059d5eaad215da834534ef222e5accab7865431f69895fb827050fa1f0a7f000/-2024-01-06-10.32.02.png" /> <img width="2990" height="1670" width_o="2990" height_o="1670" data-src="https://freight.cargo.site/t/original/i/c12cde74b895e2ace7c13702e1d5339803c1fd01784a2c533e39df6a6d902100/-2024-01-08-6.02.25.png" data-mid="201069921" border="0" src="https://freight.cargo.site/w/1000/i/c12cde74b895e2ace7c13702e1d5339803c1fd01784a2c533e39df6a6d902100/-2024-01-08-6.02.25.png" /> <img width="3024" height="1714" width_o="3024" height_o="1714" data-src="https://freight.cargo.site/t/original/i/337cd1975613f80dbe6186bf2dd0df394ffd44e2f536e4d897d39c873b5691bc/-2024-01-08-6.06.58.png" data-mid="201070136" border="0" src="https://freight.cargo.site/w/1000/i/337cd1975613f80dbe6186bf2dd0df394ffd44e2f536e4d897d39c873b5691bc/-2024-01-08-6.06.58.png" /> <img width="3024" height="1894" width_o="3024" height_o="1894" data-src="https://freight.cargo.site/t/original/i/803ced9033d9fefb4a206623915194206b53f480847b76960b20b3e804a8a265/-2024-01-08-6.20.30.png" data-mid="201070510" border="0" src="https://freight.cargo.site/w/1000/i/803ced9033d9fefb4a206623915194206b53f480847b76960b20b3e804a8a265/-2024-01-08-6.20.30.png" /> 5. Conclusion and Future Work The journey of creating this website has been enlightening, filled with valuable lessons and exciting prospects on the horizon. We've gained insights from user feedback, deepening our understanding of storytelling, information organization, and blending technology with narrative. Throughout this endeavor, we've appreciated the diverse perspectives of our user community. Some sought technical details, while others preferred a more understandable narrative. This diversity encouraged us to find a delicate balance among these preferences. A significant lesson we've learned pertains to information arrangement. User feedback prompted us to reevaluate our narrative structure. As a result, we adopted a dynamic approach, intertwining technical details into the story while providing supplementary pages for deeper insights, ensuring a personalized experience for each user. Looking ahead, we believe that if we can consolidate related missions and projects within this platform can transform it into a gateway for comprehending the intricacies of space exploration.&nbsp;In closing, we want to express our appreciation for NASA's diligent support of this mission. Their clear documentation, news updates, and wonderful 3D models have significantly enriched this presentation. We look forward to enhancing and expanding this platform to foster a deeper appreciation of space exploration. Thanks for reading and being part of this journey.🚀 Visit the Website https://lanyichun.com/AmazingTalker-App-redesign Sun, 08 Jan 2023 07:10:14 +0000 yichun.lan https://lanyichun.com/AmazingTalker-App-redesign @media screen and (max-width: 981px) { .AmazingTalkerNav{ display:none; } } .AmazingTalkerNav{ padding:0 1rem 0 1rem; text-decoration: none !important; border-radius: 1rem; } a{ border-bottom: 0px !important; } &nbsp;About&nbsp; &nbsp;Current Experience &nbsp; &nbsp;User Research &nbsp; &nbsp;Persona&nbsp; &nbsp;Interview Process &nbsp; &nbsp;Problem Statement &nbsp; &nbsp;Solution1- Efficient IA &nbsp; &nbsp;Solution2- Hierarchy&nbsp; &nbsp;Figma Prototype&nbsp; &nbsp;Results&nbsp; &nbsp;Reflections &nbsp; // 浮動選單_監聽網頁滾動 window.addEventListener('scroll', function () { var scrollPosition = window.scrollY; var anchorLinks = document.getElementsByClassName('anchor-link'); for (var i = 0; i < anchorLinks.length; i++) { var targetId = anchorLinks[i].firstChild.getAttribute('href').substring(1); var targetElement = document.getElementById(targetId); if (targetElement) { var targetPosition = targetElement.offsetTop - 300; // 偏移量，根據需要自行調整 if (scrollPosition >= targetPosition && scrollPosition < targetPosition + targetElement .offsetHeight) { // 將之前的活動錨點取消活動狀態 var activeLinks = document.getElementsByClassName('anchor-link active'); for (var j = 0; j < activeLinks.length; j++) { activeLinks[j].classList.remove('active'); } // 將目前滾動到的區塊的錨點設置為活動狀態 anchorLinks[i].classList.add('active'); anchorLinks[i].firstChild.classList.add('active'); } else { // 若區塊滾動出視窗，則移除活動狀態 anchorLinks[i].classList.remove('active'); anchorLinks[i].firstChild.classList.remove('active'); } } } }); a.active { background-color: #ff6d6d; color: white; } <img width="3240" height="3240" width_o="3240" height_o="3240" data-src="https://freight.cargo.site/t/original/i/6a1c2cba1ce3b403a44c76e657da94009dd284e018adc8b3ff9f89c3b63f0d45/Slide-16_9---58.png" data-mid="185428072" border="0" src="https://freight.cargo.site/w/1000/i/6a1c2cba1ce3b403a44c76e657da94009dd284e018adc8b3ff9f89c3b63f0d45/Slide-16_9---58.png" /> AmazingTalker Redesign UX case study and UI redesign for language learning iOS app 🕒&nbsp; 2022 Dec - 2023 Feb📗&nbsp; Solo Passion Projects 👨‍🎨&nbsp; UX researcher + Visual Designer 🏷️&nbsp; Language Learning app About Amazing Talker AmazingTalker is a language learning app featuring diverse teachers and flexible scheduling. It offers basic conversation practice as well as advanced classes for business and interview preparation. <img width="945" height="630" width_o="945" height_o="630" data-src="https://freight.cargo.site/t/original/i/65141d2706afb802a143d9f23651348364fce48eb6e1004066775a23ddd19289/amazingtalker_learning_platform.jpg" data-mid="200633006" border="0" data-scale="72" src="https://freight.cargo.site/w/945/i/65141d2706afb802a143d9f23651348364fce48eb6e1004066775a23ddd19289/amazingtalker_learning_platform.jpg" /> Current experience This redesign project stems from my personal experience. Despite using the app for over a year, I have consistently faced difficulties in finding the things I need efficiently. Surprisingly, some of my friends have encountered the same problem. "I like the essential functions, but too much irrelevant content." — User A (31)&nbsp; &nbsp; “Checking my class time shouldn't be this complicated! It's a real struggle to find what I need with the confusing structure.” — User B (24) User Research In Taiwan's thriving adult English education market, young professionals with language learning subsidies are a significant demographic. In this research study, I enlisted the participation of five young professionals who were frequent users of AmazingTalker. The primary objective was to gather their experiences and insights regarding the app's usability. The research process involved sharing their personal experiences with the app and completing preassigned mobile tasks. Each participant's involvement took approximately 40 minutes in total. <img width="3024" height="1964" width_o="3024" height_o="1964" data-src="https://freight.cargo.site/t/original/i/9d8b90d354dd8e2c8d99f122a9cd8a69b6f6d7760d1c97c3f1fa3acd09a043cb/-2023-01-11-10.34.52.jpg" data-mid="185650231" border="0" src="https://freight.cargo.site/w/1000/i/9d8b90d354dd8e2c8d99f122a9cd8a69b6f6d7760d1c97c3f1fa3acd09a043cb/-2023-01-11-10.34.52.jpg" /> <img width="3024" height="1964" width_o="3024" height_o="1964" data-src="https://freight.cargo.site/t/original/i/e27b003ad8bc0c87d3bfbf4cb0b1394d40af63107d2b171b5b3118760245ca6c/-2023-01-18-10.35.59-1.png" data-mid="197799421" border="0" src="https://freight.cargo.site/w/1000/i/e27b003ad8bc0c87d3bfbf4cb0b1394d40af63107d2b171b5b3118760245ca6c/-2023-01-18-10.35.59-1.png" /> <img width="1462" height="857" width_o="1462" height_o="857" data-src="https://freight.cargo.site/t/original/i/bb80e1f07afec2beb2992cdb4d1118393b5fb7e3892707c1301d8b777cbee5fe/-2023-01-14-10.44.07.jpg" data-mid="197799487" border="0" src="https://freight.cargo.site/w/1000/i/bb80e1f07afec2beb2992cdb4d1118393b5fb7e3892707c1301d8b777cbee5fe/-2023-01-14-10.44.07.jpg" /> <img width="3024" height="1114" width_o="3024" height_o="1114" data-src="https://freight.cargo.site/t/original/i/eba8981e677c96590f7eb2517fb84cb5b76566501433eea29c8b0cb5beb589f6/-2023-02-19-12.38.33.png" data-mid="185651390" border="0" src="https://freight.cargo.site/w/1000/i/eba8981e677c96590f7eb2517fb84cb5b76566501433eea29c8b0cb5beb589f6/-2023-02-19-12.38.33.png" /> Persona of a typical AmazingTalker user I created a user persona of target user and visualize various aspects of their behavior and motivations. This persona was roughly based on the users interviewed during the usability testing. <img width="1190" height="795" width_o="1190" height_o="795" data-src="https://freight.cargo.site/t/original/i/9ccd6e99b2c01aa43c5c269080551ffc37960e03d9833dbe73216189a3fca65c/persona.png" data-mid="200638056" border="0" src="https://freight.cargo.site/w/1000/i/9ccd6e99b2c01aa43c5c269080551ffc37960e03d9833dbe73216189a3fca65c/persona.png" /> The Processes of interview <img width="3988" height="1130" width_o="3988" height_o="1130" data-src="https://freight.cargo.site/t/original/i/dcc03e3ae7aace07924440354e21eacb980235fd5a9729b3958eb040fb3c8de8/amazingtalker-research.png" data-mid="200636313" border="0" data-scale="89" src="https://freight.cargo.site/w/1000/i/dcc03e3ae7aace07924440354e21eacb980235fd5a9729b3958eb040fb3c8de8/amazingtalker-research.png" /> <img width="8547" height="4521" width_o="8547" height_o="4521" data-src="https://freight.cargo.site/t/original/i/61f407394beba5b250d81a752b49440f1f3fe69412b38773a1a36385274a12df/postit-03-2.jpg" data-mid="185650166" border="0" data-scale="83" src="https://freight.cargo.site/w/1000/i/61f407394beba5b250d81a752b49440f1f3fe69412b38773a1a36385274a12df/postit-03-2.jpg" />Some steps they did and the questions they asked. Part 1 Questions: ︎How often do you take language learning classes?︎When you do, what is your motivation for doing so? ︎What challenges do you face in the whole process? &nbsp; &nbsp; &nbsp;How does this make you feel? ︎Is there any way in which you feel these challenges could be resolved?︎What do you want to see first as you open the app?︎Which function do you use most or most useful? ︎Any thoughts or problems with the &nbsp;experience? The tasks in Part 2 : ︎Find your last class and review.︎Find your incoming clas.︎Find the lasted notification.︎Find the message.︎Navigate to teachers you saved.︎Navigate to your purchase history︎Access to the shorts video page.︎Let’s go through the booking processes ( stop before you pay.) What users said: “I usually put the classes in my reminder rather than in AmazingTalker app.”“Uhh…I am a little confused.” “Should I go to my profile first?” “Is the notification here?&nbsp; There is a number here.” “Should I find the history and get into that class information?” Through these questions, I found that most of them are in two situations, with different purposes for using this app: ①&nbsp; They have bought some sessions and stably taking the classes from their tutor → They care whether they can easily check the calendar, notifications, and teacher’s messages. ② They are looking for a new tutor → They care whether the teacher’s information fits their requirements. Analysis Questions 2x2 Matrix These questions were found through user testing, and I used the 2x2 matrixes to prioritize them. This method helps me better understand how important these issues are to customers and the AmazingTalker company. At the same time, it also helped me prioritize which problems to tackle first. After these steps, I defined the two pain points and proposed solutions. <img width="5137" height="4278" width_o="5137" height_o="4278" data-src="https://freight.cargo.site/t/original/i/812fd70fbf0278896073c797f8fa8a6bdb7ba746dc6245d4df5cf2fc0cbb1cd6/postit-03-3.jpg" data-mid="185650167" border="0" src="https://freight.cargo.site/w/1000/i/812fd70fbf0278896073c797f8fa8a6bdb7ba746dc6245d4df5cf2fc0cbb1cd6/postit-03-3.jpg" /> Problem Statement By conducting interviews and usability testing, I identified two pain points: ・Unclear navigation &nbsp; &nbsp; &nbsp;&nbsp; ・Unintuitive user journey Here are two examples to show what the users are most confused about: Confusing home page On AmazingTalker, the home tab's presentation can be confusing, with learning resources and tutor sections interwoven in a way that makes it challenging for new users to read the content effortlessly. <img width="5286" height="3240" width_o="5286" height_o="3240" data-src="https://freight.cargo.site/t/original/i/56b45802f3f36cd4d57748e9b1c4c1caa59808b54c54af97b8d0aa82d363c65e/Slide-16_9---59.png" data-mid="185755779" border="0" src="https://freight.cargo.site/w/1000/i/56b45802f3f36cd4d57748e9b1c4c1caa59808b54c54af97b8d0aa82d363c65e/Slide-16_9---59.png" /> Difficulties in Checking Notifications Amazing Talker current design presents a usability problem: To check notifications, users must navigate through the ➊ bottom message tab(click the “message” tab) ➋ top navigation bar (switch to “Notification”). This unintuitive and time-consuming steps, leading to dissatisfaction and confusion. <img width="5286" height="3240" width_o="5286" height_o="3240" data-src="https://freight.cargo.site/t/original/i/e3066bf0e9ccd89678afe99ee13969f502c6b5cdc201ccd6085d3ebd12b36826/Slide-16_9---61.png" data-mid="186095195" border="0" src="https://freight.cargo.site/w/1000/i/e3066bf0e9ccd89678afe99ee13969f502c6b5cdc201ccd6085d3ebd12b36826/Slide-16_9---61.png" /> In response to these findings, I proposed two solutions to tackle the problems.&nbsp; 👇 Solution 1 Efficient Information Architechture 👉&nbsp; Reorganize the pages in a intuitivel way. 👉&nbsp; Renew the content in tab bar. 1-1. Regroup functions &amp; New information architecture &nbsp; <img width="1920" height="1080" width_o="1920" height_o="1080" data-src="https://freight.cargo.site/t/original/i/2f006d14527e81c70f4a205f28b39a480191816f54eea62983670267235ce8d8/ia.gif" data-mid="200798895" border="0" src="https://freight.cargo.site/w/1000/i/2f006d14527e81c70f4a205f28b39a480191816f54eea62983670267235ce8d8/ia.gif" /> To improve the usability of the app, I made two changes to the information architecture. 1. First, I moved the "Message" and "Notification" buttons from their original location and placed them on the Home page. I arrived at this decision after researching some Navigation bar document and finding that this placement would be more intuitive for users. By doing this, users can access their messages and notifications more easily, without having to navigate to a separate tab. <img width="394" height="102" width_o="394" height_o="102" data-src="https://freight.cargo.site/t/original/i/a3e2daaf2fc0b2f40634212f98d97846e8b954a619424ed251b5c069195162b0/-2023-03-19-3.32.31.png" data-mid="172283828" border="0" src="https://freight.cargo.site/w/394/i/a3e2daaf2fc0b2f40634212f98d97846e8b954a619424ed251b5c069195162b0/-2023-03-19-3.32.31.png" /> 2. Upon reviewing the original information architecture, I noticed that several functions were seperated in the different tabs.To improve it, I regrouped the functions based on their relationship. For instance, "Discount," "Tutors," and "Learning Resources." Base on these groups and two senerios I found in the user reaserch, I created new four tabs to organize these function groups better. <img width="2073" height="1251" width_o="2073" height_o="1251" data-src="https://freight.cargo.site/t/original/i/095f6e1728f50e76b07ec365e1b125e667c70f91279405456e54d711b23c64fc/new-tab-bar.png" data-mid="200690286" border="0" data-scale="81" src="https://freight.cargo.site/w/1000/i/095f6e1728f50e76b07ec365e1b125e667c70f91279405456e54d711b23c64fc/new-tab-bar.png" /> 1-3. Interaction Map and Wireframe Base on two senerios I got from the interviews and the new information architechture, I outlined the Interaction Map and the Wireframe to figure out the flow and what elements I will need in these pages. <img width="2627" height="1752" width_o="2627" height_o="1752" data-src="https://freight.cargo.site/t/original/i/504983e0b48ce4b4036be417114ba3ee82c351d34ebd81e813855529aee96577/lofi.jpg" data-mid="200788143" border="0" src="https://freight.cargo.site/w/1000/i/504983e0b48ce4b4036be417114ba3ee82c351d34ebd81e813855529aee96577/lofi.jpg" /> <img width="3403" height="2270" width_o="3403" height_o="2270" data-src="https://freight.cargo.site/t/original/i/4d2011ef3ee0f7b287c3da8f2716b597ba64c1cea66b1a43060f3b588dd7e483/lofi.jpg" data-mid="200788165" border="0" src="https://freight.cargo.site/w/1000/i/4d2011ef3ee0f7b287c3da8f2716b597ba64c1cea66b1a43060f3b588dd7e483/lofi.jpg" /> 1-4. Develop New Tab Bar <img width="4383" height="3240" width_o="4383" height_o="3240" data-src="https://freight.cargo.site/t/original/i/ed81a5fa2e03b0f8b024ac4399c86ae3b93137144a3612ab246ab99c44b756aa/Slide-16_9---51.png" data-mid="212720743" border="0" src="https://freight.cargo.site/w/1000/i/ed81a5fa2e03b0f8b024ac4399c86ae3b93137144a3612ab246ab99c44b756aa/Slide-16_9---51.png" /> To better serve our users, I separated the tutor-related functions, such as searching for a tutor and favorite tutors, from the calendar and course-related functions. This way, users can more easily navigate the system and find what they need. Second, I updated the tab names based on the new groups of functions to make them more intuitive. This change ensures that users can quickly and easily find what they need. 1-5. Result: Before / After Solution 2 Comprehensive Hierachy 👉&nbsp; Top navigation bar &nbsp;👉&nbsp; Card system 2-1. Top Navigation Bar <img width="5760" height="3240" width_o="5760" height_o="3240" data-src="https://freight.cargo.site/t/original/i/5093a85c1d70e8ea1cfb2165d02e679e384b3559f0b5b40f778f1be2b0543a5d/Slide-16_9---49.jpg" data-mid="173004510" border="0" src="https://freight.cargo.site/w/1000/i/5093a85c1d70e8ea1cfb2165d02e679e384b3559f0b5b40f778f1be2b0543a5d/Slide-16_9---49.jpg" /> I added a modified tab bar to the app. Unlike the original version, this new tab bar includes indicators that show users their current location within the app. By doing this, users can easily keep track of where they are within the app and navigate to other areas more quickly. <img width="1364" height="1604" width_o="1364" height_o="1604" data-src="https://freight.cargo.site/t/original/i/2302e8fbd2be895fc20da4212d7c093adf96705fedb06b72d63131e7e8e8d7ce/Slide-16_9---52.png" data-mid="212720608" border="0" src="https://freight.cargo.site/w/1000/i/2302e8fbd2be895fc20da4212d7c093adf96705fedb06b72d63131e7e8e8d7ce/Slide-16_9---52.png" /> &nbsp; 2-2. Card System <img width="5760" height="3240" width_o="5760" height_o="3240" data-src="https://freight.cargo.site/t/original/i/bbf41d066fdeea875b58906b60d8f2125732ebaadb9a24e6843c9627df1908e1/Slide-16_9---47.jpg" data-mid="173003973" border="0" src="https://freight.cargo.site/w/1000/i/bbf41d066fdeea875b58906b60d8f2125732ebaadb9a24e6843c9627df1908e1/Slide-16_9---47.jpg" /> I implemented card structures and unified style text titles across all sections of the app. This change provides greater clarity and consistency when users search for information across different sections. Furthermore, this design approach makes future updates or content additions easier to implement. By establishing a unified structure and style, new content can be added more seamlessly, without the need for significant design changes. This enhances the scalability of the app and ensures a smooth user experience for future updates. Figma Prototype Test the prototype here! Before ⬆ Working Prototype! ⬆ Scroll to see the original design. After ⬆ Working Prototype! ⬆Scroll to see the difference. HomeTo balance the needs of the user and the business, I kept the discount and course-related content sections on the page, as they are crucial for users. Welcome Card Within the discount section, I created a card that includes cashback, referrals, and coupons, which displays prominently at the top of the homepage. This ensures that users can easily find and take advantage of the best prices available in the app. Calendar Card Based on user research, I found that the calendar, booking classes and checking incoming classes are essential for users. Message &amp; Notification I also relocated the notification and message to the top navigation bar, making them more easily accessible for users. <img width="3470" height="4928" width_o="3470" height_o="4928" data-src="https://freight.cargo.site/t/original/i/a37afd31b2c22ca2fee2c1c530ffafcf4707d5fc86c519ab16f8c55f2d8c210c/Slide-16_9---53.png" data-mid="212720428" border="0" src="https://freight.cargo.site/w/1000/i/a37afd31b2c22ca2fee2c1c530ffafcf4707d5fc86c519ab16f8c55f2d8c210c/Slide-16_9---53.png" /> TutorTo make it easier for users to find and save their favorite tutors, I created a new "Tutor" tab in the app. This tab includes all the sections that can lead users to the tutor's page in the original version, but now users can access them all in one place. <img width="3470" height="3222" width_o="3470" height_o="3222" data-src="https://freight.cargo.site/t/original/i/4eb23adfe830196926cec77d159cd85ac325891d916dae7a447a29603e963a84/Slide-16_9---54.png" data-mid="212720432" border="0" src="https://freight.cargo.site/w/1000/i/4eb23adfe830196926cec77d159cd85ac325891d916dae7a447a29603e963a84/Slide-16_9---54.png" /> Learning ResourceDuring usability testing, several users commented that they would appreciate having a dedicated section for the app's learning resources. One user even commented that they would use these resources during their commute if they were easily accessible. Taking this feedback into account, I rearranged the app's learning resources and created a dedicated tab for them on the bottom navigation bar. <img width="3470" height="2430" width_o="3470" height_o="2430" data-src="https://freight.cargo.site/t/original/i/750312c210dc0759840532c98e196e486740479a87a8b7c784172efce15d1299/Slide-16_9---55.png" data-mid="212720538" border="0" src="https://freight.cargo.site/w/1000/i/750312c210dc0759840532c98e196e486740479a87a8b7c784172efce15d1299/Slide-16_9---55.png" /> Account To motivate users to keep learning, I added a new card to the app that displays how many classes and minutes the user has already completed. This feature provides users with a sense of accomplishment and encourages them to continue using the app. Additionally, to keep the app's interface clean and organized, I removed some repeated functions that were previously available in other tabs. This helps to streamline the user experience and keep the app's main functions easily accessible. <img width="3470" height="2430" width_o="3470" height_o="2430" data-src="https://freight.cargo.site/t/original/i/b7ce96814fa699cbcf12d491623ed84267c3ed59bd05d27306035553c41d79f5/Slide-16_9---56.png" data-mid="212720547" border="0" src="https://freight.cargo.site/w/1000/i/b7ce96814fa699cbcf12d491623ed84267c3ed59bd05d27306035553c41d79f5/Slide-16_9---56.png" /> Reflections&nbsp; I am thrilled to work on this project because I have used this product a lot. I recognized this as an excellent opportunity to further develop my design skills by engaging in the design processes of this project. I hope that my enthusiasm for this endeavor has come across and that you have enjoyed learning about it as much as I have enjoyed working on it. As always, I welcome any feedback you may have, and thank you for taking the time to read about my journey in the process.&nbsp;