https://lisafcai.me LISA F CAI Fri, 20 Jan 2023 21:25:51 +0000 https://lisafcai.me en https://lisafcai.me/Front-page Tue, 26 Oct 2021 00:22:20 +0000 LISA F CAI https://lisafcai.me/Front-page UI/UX — Design System — Motion Graphics — Visual Design — Editing — Design — Storytelling — Animation — Storyboarding —&nbsp;   https://lisafcai.me/Brand-Marketing Tue, 26 Oct 2021 23:06:57 +0000 LISA F CAI https://lisafcai.me/Brand-Marketing Portfolio /* Helpers */ .text-center { text-align: center; } /* Responsive videos/iframes */ .responsive-video { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; border: 0; } /* Responsive images */ .responsive-img { display: block; width: 100%; height: auto; max-width: 100%; } hr { margin: 1rem 0; } p { margin: 1rem 0; } small { display: block; margin-top: 0.5rem; line-height: 1.4; } /* Clean responsive video wrapper */ .video-wrapper { position: relative; width: 100%; aspect-ratio: 16 / 9; /* Adjust to match your video ratio */ overflow: hidden; } .video-wrapper iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; border: 0; } ♡ Azure Product Series ♡ Azure Product Series ♡ Azure Product Series ♡ Azure Product Series ♡ Azure Product Series I created a series of videos highlighting Microsoft Azure’s vast features, blending in-product UI animations with abstract visual storytelling to communicate complex ideas. I was involved from concept to final delivery, collaborating closely across product and brand. Programs — After Effects, Figma, Cinema 4D Client — Microsoft Audio — Amnon Freidlin Copy Writer — Casey Dickson 3D Artist — Sarah Kim Motion Director — Marie Robbins <img width="2002" height="1204" width_o="2002" height_o="1204" data-src="https://freight.cargo.site/t/original/i/4dbdb246983595a022eda60d5b96422df22ba3d18bed3d478f6deda3b7b765aa/Screenshot-2026-03-10-214032.png" data-mid="245873118" border="0" alt="Brainstorm &amp; rough storyboard" data-caption="Brainstorm &amp; rough storyboard" src="https://freight.cargo.site/w/1000/i/4dbdb246983595a022eda60d5b96422df22ba3d18bed3d478f6deda3b7b765aa/Screenshot-2026-03-10-214032.png" /> <img width="12985" height="8685" width_o="12985" height_o="8685" data-src="https://freight.cargo.site/t/original/i/8934da4fd95b7f4058c01205f0d9b91c5a0a79ab3528942c66620cbc57b022af/Storyboard.png" data-mid="245873256" border="0" alt="Polished storyboard" data-caption="Polished storyboard" src="https://freight.cargo.site/w/1000/i/8934da4fd95b7f4058c01205f0d9b91c5a0a79ab3528942c66620cbc57b022af/Storyboard.png" /> <img width="4184" height="2532" width_o="4184" height_o="2532" data-src="https://freight.cargo.site/t/original/i/8e7673e3e4950aefbc7cc4b626f7bcc6ba580e1c3c818f0bf6d006b9178f2b63/Styleframes.png" data-mid="245873307" border="0" alt="Styleframes" data-caption="Styleframes" src="https://freight.cargo.site/w/1000/i/8e7673e3e4950aefbc7cc4b626f7bcc6ba580e1c3c818f0bf6d006b9178f2b63/Styleframes.png" /> ♡ Visual Studio Insiders ♡ Visual Studio Insiders ♡ Visual Studio Insiders ♡ Visual Studio Insiders ♡ Visual Studio Insiders ♡ Visual Studio Insiders ♡ Visual Studio Insiders ♡ Visual Studio Insiders ♡ Visual Studio Insiders ♡ Visual Studio Insiders ♡ Visual Studio Insiders ♡ Visual Studio Insiders Visual Studio 2026 is coming with some big updates. I worked with the Product Designer, 3D artist and Sound Designer on my team to create a video that would give a sneak peak at what is to come, drum up hype and be used as marketing across the website and social. Programs — After Effects, Figma, Element 3D Client — Microsoft Audio — Amnon Freidlin Product Designer — Olivia Yu 3D Artist — Sarah Kim Copy Writer — Natalia Minasi Motion Director — Marie Robbins <img width="2319" height="1302" width_o="2319" height_o="1302" data-src="https://freight.cargo.site/t/original/i/0d42c2887f1b5aaae56bb615d507f8091d471cbd4167742a59531782721dcb35/Screenshot-2025-09-30-at-2.03.45PM.png" data-mid="238876241" border="0" src="https://freight.cargo.site/w/1000/i/0d42c2887f1b5aaae56bb615d507f8091d471cbd4167742a59531782721dcb35/Screenshot-2025-09-30-at-2.03.45PM.png" /> ♡ VS Code Hero Animation ♡ VS Code Hero Animation ♡ VS Code Hero Animation ♡ VS Code Hero Animation ♡ VS Code Hero Animation ♡ VS Code Hero Animation ♡ VS Code Hero Animation ♡ VS Code Hero Animation Working with a product lead and UX engineer, I animated the hero animation on Visual Studio Code's homepage. The video is product accurate and highlights the capabilities of Copilot. As VS Code is always evolving, I set up the file in After Effects to be quickly iterated on. Programs — After Effects, Figma Client — Microsoft Product Lead — Kaitlin Brooks UX Engineer — Hawk Ticehurst ♡ Swipe Night II ♡ Swipe Night II ♡ Swipe Night II ♡ Swipe Night II ♡ Swipe Night II ♡ Swipe Night II ♡ Swipe Night II ♡ Swipe Night II ♡ Swipe Night II ♡ Swipe Night II ♡ Swipe Night II ♡ Swipe Night II <img width="1080" height="450" width_o="1080" height_o="450" data-src="https://freight.cargo.site/t/original/i/e27e8aa18ae3992837264defbe7781fb112c7189dd4d5b8926c82b8061f73c43/SNII_Logo_Tagline_PurpleStroke-2.gif" data-mid="161394704" border="0" src="https://freight.cargo.site/w/1000/i/e27e8aa18ae3992837264defbe7781fb112c7189dd4d5b8926c82b8061f73c43/SNII_Logo_Tagline_PurpleStroke-2.gif" /> Swipe Night is an interactive experience on Tinder where your choices can lead to matches. Think Netflix’s Bandersnatch. Season one was a success, greenlighting season two, Swipe Night: Killer Weekend. I led all the motion needs and video assets. This ranged from the motion toolkit to UI animations to How-To Videos to promotional cutdowns. I created dozens of assets, all of which were then provided as editable files for our localization team to be used internationally. Programs — After Effects, Premiere, Figma, Photoshop Client — Tinder Sr. Graphic Designer — Vahagn Azaryan Graphic Designer — Lydia Ho Sr. Product Designer — Stephanie Liang Copy Writer — Kaelyn Lark Creative Director — Steven Pham Motion Design Intern — Emmy Buckman Production — 72 &amp; Sunny <img width="540" height="540" width_o="540" height_o="540" data-src="https://freight.cargo.site/t/original/i/3688a49097af2fcd9b59fa7a8f598e2e664ea137c154bfa37e2dc8ca93d718c2/Comp-1.2021-10-27-17_47_48.gif" data-mid="161394708" border="0" src="https://freight.cargo.site/w/540/i/3688a49097af2fcd9b59fa7a8f598e2e664ea137c154bfa37e2dc8ca93d718c2/Comp-1.2021-10-27-17_47_48.gif" /> <img width="540" height="540" width_o="540" height_o="540" data-src="https://freight.cargo.site/t/original/i/77d78c70f981a7de862962210d271300c8abe5d9435684519238d99d6a4dbafb/1_EveryoneHasSecrets_1.2021-10-27-17_59_06.gif" data-mid="161394703" border="0" src="https://freight.cargo.site/w/540/i/77d78c70f981a7de862962210d271300c8abe5d9435684519238d99d6a4dbafb/1_EveryoneHasSecrets_1.2021-10-27-17_59_06.gif" /> <img width="500" height="500" width_o="500" height_o="500" data-src="https://freight.cargo.site/t/original/i/62ac4079731161cb45ac3306d3d19d3fc3a0b24f55674ff8e9af90987b010648/SNII_Loader.2021-10-27-17_47_08.gif" data-mid="161394706" border="0" src="https://freight.cargo.site/w/500/i/62ac4079731161cb45ac3306d3d19d3fc3a0b24f55674ff8e9af90987b010648/SNII_Loader.2021-10-27-17_47_08.gif" /> <img width="500" height="500" width_o="500" height_o="500" data-src="https://freight.cargo.site/t/original/i/c2a64dcd585e393940926d629a23683880f3f9d8937bf58db17ed3492d9a45f7/Aimes_Shadow.2021-10-27-18_02_10.gif" data-mid="161394705" border="0" src="https://freight.cargo.site/w/500/i/c2a64dcd585e393940926d629a23683880f3f9d8937bf58db17ed3492d9a45f7/Aimes_Shadow.2021-10-27-18_02_10.gif" /> <img width="2286" height="1288" width_o="2286" height_o="1288" data-src="https://freight.cargo.site/t/original/i/5fa024464ab0683b5bfb9b646f7690aff4f5dc41d4decb8ab064f3f8e20a615b/TinyTake27-10-2021-06-15-01.png" data-mid="161395745" border="0" src="https://freight.cargo.site/w/1000/i/5fa024464ab0683b5bfb9b646f7690aff4f5dc41d4decb8ab064f3f8e20a615b/TinyTake27-10-2021-06-15-01.png" /> What If&nbsp;♡ What If ♡ What If ♡ What If ♡ What If♡ What If ♡ What If ♡ What If ♡&nbsp; What If ♡ What If ♡ What If ♡ What If ♡ What If ♡ What If ♡ ➼IG Post I was apart of Marvel’s What If social campaign. I worked on project from concept to launch, creating cutdowns, cinemagraphic loops, and a variety of motion graphics. Programs — After Effects, Premiere, Photoshop Client — Concept Arts Art Director — Junior Soto, Spencer Dina Pitch Video ( ➼ IG Post ) <img width="360" height="360" width_o="360" height_o="360" data-src="https://freight.cargo.site/t/original/i/1f6da0dc106b5c303744bb3e14acb2a8fcc75e92ee64e6e777816762dfa61095/AGS_Hope_Watcher_MotionLoop_SparkVideo.gif" data-mid="122791810" border="0" src="https://freight.cargo.site/w/360/i/1f6da0dc106b5c303744bb3e14acb2a8fcc75e92ee64e6e777816762dfa61095/AGS_Hope_Watcher_MotionLoop_SparkVideo.gif" /> <img width="360" height="360" width_o="360" height_o="360" data-src="https://freight.cargo.site/t/original/i/4f688280790407f556c071dac1c1777d993591ff0dddd0b205b8ffc11c218975/AGS_109_VivaLasVegas_Loop_SparkVideo-1.gif" data-mid="122791651" border="0" src="https://freight.cargo.site/w/360/i/4f688280790407f556c071dac1c1777d993591ff0dddd0b205b8ffc11c218975/AGS_109_VivaLasVegas_Loop_SparkVideo-1.gif" /> ➼Twitter Post Right to Love Right to Love ♡ Right to Love ♡ Right to Love ♡ Right to Love ♡ Right to Love ♡ My creative team at Tinder wanted to do something really impactful for Pride Month. We created a powerful #RightToLove PSA video that ran in-app, bringing awareness of The Equality Act to many of our users. Authenticity was important — we cast members of the LGBTQ+ community, including Tinder employees, as models. I created the animated projections in this video. Oh yeah, we also set up a 30-ft Pride Slide in Manhattan. Programs — After Effects, Photoshop Client — Tinder Creative Director — Shawna Lagnado Creative Manager — Nicole Lee Art Director — Steven Pham ACD — Kristin Collins Jackson Graphic Designer — Lydia Ho Copywriter — Kaelyn Lark Production — Burnish Creative Director — Angus Emmerson Animatic ☆ﾟ.*･｡ﾟ Animatic ☆ﾟ.*･｡ﾟ Animatic ☆ﾟ.*･｡ﾟ Animatic ☆ﾟ.*･｡ﾟ Animatic ☆ﾟ.*･｡ﾟ Animatic ☆ﾟ.*･｡ﾟ Animatic ☆ﾟ.*･｡ﾟ Animatic ☆ﾟ.*･｡ﾟ Animatic ☆ﾟ.*･｡ﾟ Animatic ☆ﾟ.*･｡ﾟ Animatic ☆ﾟ.*･｡ﾟ Animatic ☆ﾟ.*･｡ﾟ Animatic ☆ﾟ.*･｡ﾟ Animatic ☆ﾟ.*･｡ﾟ Animatic ☆ﾟ.*･｡ﾟ Animatic ☆ﾟ.*･｡ﾟ Animatic ☆ﾟ.*･｡ﾟ Animatic ☆ﾟ.*･｡ﾟ Animatic ☆ﾟ.*･｡ﾟ Animatic ☆ﾟ.*･｡ﾟ Animatic ☆ﾟ.*･｡ﾟ https://lisafcai.me/UI-UX-Animation Tue, 26 Oct 2021 00:22:20 +0000 LISA F CAI https://lisafcai.me/UI-UX-Animation ♡ Crypto Enroll&nbsp;♡ Crypto Enroll&nbsp;♡ Crypto Enroll&nbsp;♡ Crypto Enroll&nbsp;♡ Crypto Enroll&nbsp;♡ Crypto Enroll&nbsp;♡ Crypto Enroll Stash launched the ability to purchase Crypto, however before being able to trade, customers have to go through a “Enroll” flow to trade crypto. We needed to create an meaningful experience from the beginning to the end of the flow and help users percieve less latency during the mandatory wait.Our goal was to get users more informed and optimistic about crypto and help them build confidence to invest in crypto. We wanted this experience to be really easy to understand, so we landed on the literal interpretation of a crypto coin and it’s journey from opening to finish. From user testing learnings, we knew customers wanted to feel secure in purchasing crypto, so we leveraged the idea of a lock during the loading animation. I created lottie files of each animation and worked with engineering to implement across platforms.Programs — After Effects, Lottie, Figma Client — StashLead Product Designer — Allan Lopez <img width="1920" height="1080" width_o="1920" height_o="1080" data-src="https://freight.cargo.site/t/original/i/4248672fc09a438f9514a42ecbc99d23e36b88c015c6f8eee62e66cad5a3b1c0/1.png" data-mid="165522936" border="0" alt="Brainstorm and sketches" data-caption="Brainstorm and sketches" src="https://freight.cargo.site/w/1000/i/4248672fc09a438f9514a42ecbc99d23e36b88c015c6f8eee62e66cad5a3b1c0/1.png" /> <img width="1920" height="1080" width_o="1920" height_o="1080" data-src="https://freight.cargo.site/t/original/i/d894002afe593f6895c0d9766c1c970809ee7ee0b503e57c83a7d0681293afb7/4.png" data-mid="165523117" border="0" alt="Ring concept (not chosen)" data-caption="Ring concept (not chosen)" src="https://freight.cargo.site/w/1000/i/d894002afe593f6895c0d9766c1c970809ee7ee0b503e57c83a7d0681293afb7/4.png" /> <img width="1920" height="1080" width_o="1920" height_o="1080" data-src="https://freight.cargo.site/t/original/i/896703d98ff03f90d5e5f23e9f9e48da380a7d51d06f5696e4aebed5cddd8372/3.png" data-mid="165523152" border="0" alt="Coin concept storyboards" data-caption="Coin concept storyboards" src="https://freight.cargo.site/w/1000/i/896703d98ff03f90d5e5f23e9f9e48da380a7d51d06f5696e4aebed5cddd8372/3.png" /> Splash Screen ♡ Splash Screen ♡ Splash Screen ♡ Splash Screen ♡ Splash Screen ♡ Splash Screen ♡&nbsp; <img width="400" height="866" width_o="400" height_o="866" data-src="https://freight.cargo.site/t/original/i/33b31c6cad725760a702f4a56396ae77fdc8c3b8ca25a87aa46658919dd5a95a/SplashScreen_Slide_Final_828x1792.gif" data-mid="122669375" border="0" src="https://freight.cargo.site/w/400/i/33b31c6cad725760a702f4a56396ae77fdc8c3b8ca25a87aa46658919dd5a95a/SplashScreen_Slide_Final_828x1792.gif" /> I was tasked with creating Tinder’s first ever animated splash screen. &nbsp;I created several storyboard and midfi designs of exploration, thinking through a wide variety of concepts that were user based, text based and product based. Ultimately, I landed on an animation that opened with Tinder’s logo that revealed the flame through a “swipe right” movement with gamepad confetti, reflecting what the user would be doing in-app ︎. Programs — After Effects, Photoshop Client — TinderSr. Product Designer — Stephanie Liang Creative Manager — Nicole Lee <img width="400" height="866" width_o="400" height_o="866" data-src="https://freight.cargo.site/t/original/i/33b31c6cad725760a702f4a56396ae77fdc8c3b8ca25a87aa46658919dd5a95a/SplashScreen_Slide_Final_828x1792.gif" data-mid="122669375" border="0" src="https://freight.cargo.site/w/400/i/33b31c6cad725760a702f4a56396ae77fdc8c3b8ca25a87aa46658919dd5a95a/SplashScreen_Slide_Final_828x1792.gif" /> <img width="300" height="650" width_o="300" height_o="650" data-src="https://freight.cargo.site/t/original/i/f4b3c9d0d679fbec406db6b2d5d28629bdd2d0484189b8da564f817b90608a4e/SplashScreen_Cover.gif" data-mid="122669933" border="0" src="https://freight.cargo.site/w/300/i/f4b3c9d0d679fbec406db6b2d5d28629bdd2d0484189b8da564f817b90608a4e/SplashScreen_Cover.gif" /> <img width="300" height="649" width_o="300" height_o="649" data-src="https://freight.cargo.site/t/original/i/86d99bd926f26e64170dd65b7b4f45b486ff4f1ed808dcb52c8ff8b69f8d778f/SplashScreen_Chat.2021-10-25-18_37_58.gif" data-mid="122669932" border="0" src="https://freight.cargo.site/w/300/i/86d99bd926f26e64170dd65b7b4f45b486ff4f1ed808dcb52c8ff8b69f8d778f/SplashScreen_Chat.2021-10-25-18_37_58.gif" /> <img width="300" height="649" width_o="300" height_o="649" data-src="https://freight.cargo.site/t/original/i/b605e2d098664d5aaefea0c7b5e24372ff7d0592bd56edcb48238a60dd45b8d7/SplashScreen_Mask.2021-10-25-18_46_05.gif" data-mid="122669935" border="0" src="https://freight.cargo.site/w/300/i/b605e2d098664d5aaefea0c7b5e24372ff7d0592bd56edcb48238a60dd45b8d7/SplashScreen_Mask.2021-10-25-18_46_05.gif" /> <img width="300" height="649" width_o="300" height_o="649" data-src="https://freight.cargo.site/t/original/i/6d70332ac80684282d6ad4ea6ed1c1d7ac5899eeab2279a328846d0879207a79/SplashScreen_Infinite.2021-10-25-18_45_46.gif" data-mid="122669934" border="0" src="https://freight.cargo.site/w/300/i/6d70332ac80684282d6ad4ea6ed1c1d7ac5899eeab2279a328846d0879207a79/SplashScreen_Infinite.2021-10-25-18_45_46.gif" /> <img width="300" height="649" width_o="300" height_o="649" data-src="https://freight.cargo.site/t/original/i/609483c63f0e43dbda19e702cf4783351a6dc0fbf44dcd3e5c671ddd73f2a530/SplashScreen_Users.2021-10-25-19_07_11.gif" data-mid="122669936" border="0" src="https://freight.cargo.site/w/300/i/609483c63f0e43dbda19e702cf4783351a6dc0fbf44dcd3e5c671ddd73f2a530/SplashScreen_Users.2021-10-25-19_07_11.gif" /> Animation explorations Hot Takes ♡ Hot Takes ♡ Hot Takes ♡ Hot Takes ♡ Hot Takes ♡ Hot Takes ♡ Hot Takes ♡ Hot Takes ♡ Fast Chat: Hot Takes is a Tinder feature through which users can answer questions (or give their ‘Hot Takes’) to then get paired with someone new to chat with before deciding to match with them. My team was tasked with branding this feature and also creating the background for the question portion of the experience. During its first week of launch, millions played Hot Takes; a pairing even held a chat that was multiple hours long. Programs — After Effects, Cinema 4D, FigmaClient — Tinder Graphic Designer — Lydia HoSr. Product Designer — Stephanie LiangCopy Writer — Kaelyn LarkCreative Manager — Nicole LeeCreative Director— Steven Pham <img width="2480" height="1386" width_o="2480" height_o="1386" data-src="https://freight.cargo.site/t/original/i/1fbc0d7d89b5d6d6a36812fb7395728728dda120ea2792a1c9730ac844750535/TinyTake26-10-2021-02-46-49.png" data-mid="161391624" border="0" src="https://freight.cargo.site/w/1000/i/1fbc0d7d89b5d6d6a36812fb7395728728dda120ea2792a1c9730ac844750535/TinyTake26-10-2021-02-46-49.png" /> <img width="2492" height="1396" width_o="2492" height_o="1396" data-src="https://freight.cargo.site/t/original/i/22e183a602e44fc7a0a28ad6dda484acd6307bd08b270dcb3f35f33592cf5e34/TinyTake26-10-2021-02-47-14.png" data-mid="161391623" border="0" src="https://freight.cargo.site/w/1000/i/22e183a602e44fc7a0a28ad6dda484acd6307bd08b270dcb3f35f33592cf5e34/TinyTake26-10-2021-02-47-14.png" /> <img width="2479" height="1388" width_o="2479" height_o="1388" data-src="https://freight.cargo.site/t/original/i/f1c9a1a7a803292b9d3b7993197425c76bebb6bd1cb7665198bdb2ec1ef74a2a/TinyTake26-10-2021-02-47-35.png" data-mid="161391618" border="0" src="https://freight.cargo.site/w/1000/i/f1c9a1a7a803292b9d3b7993197425c76bebb6bd1cb7665198bdb2ec1ef74a2a/TinyTake26-10-2021-02-47-35.png" /><img width="2490" height="1403" width_o="2490" height_o="1403" data-src="https://freight.cargo.site/t/original/i/52f4de0141d0b09fe0817e1ec9405c4ab854094f55a3a943e267d43941e7c889/TinyTake26-10-2021-02-47-53.png" data-mid="161391617" border="0" src="https://freight.cargo.site/w/1000/i/52f4de0141d0b09fe0817e1ec9405c4ab854094f55a3a943e267d43941e7c889/TinyTake26-10-2021-02-47-53.png" /> Lights Out ♡ Lights Out ♡ Lights Outs ♡Lights Out ♡&nbsp;Lights Out ♡&nbsp;Lights Out ♡ Lights Out is a variation of Fast Chat where users can match with each other after answering questions -- the catch is, they will not know what the user looks until after matching. I worked with my design team to come up with a glow-in-the-dark look and feel to help emphasize the “blind date” aspect of Lights Out.Programs — After Effects, Cinema 4D, FigmaClient — TinderGraphic Designer — Lydia HoSr. Product Designer — Stephanie LiangCopy Writer — Kaelyn LarkCreative Manager — Nicole LeeCreative Director— Steven Pham Daily Log-In Bonus ♡ Daily Log-In Bonus ♡ Daily Log-In Bonus ♡ Daily Log-In Bonus ♡&nbsp; <img width="300" height="651" width_o="300" height_o="651" data-src="https://freight.cargo.site/t/original/i/e2e7a53fe989b87e4805d7f9952b52194d92582a7c6729d0ae72669b45c396dd/DLB_CoinFlip.2021-10-25-22_36_52.gif" data-mid="122672791" border="0" src="https://freight.cargo.site/w/300/i/e2e7a53fe989b87e4805d7f9952b52194d92582a7c6729d0ae72669b45c396dd/DLB_CoinFlip.2021-10-25-22_36_52.gif" /> <img width="300" height="651" width_o="300" height_o="651" data-src="https://freight.cargo.site/t/original/i/8e3089cd2b280d4f37b837171ec93cff8295a8ca8b689bd5edb19368fe2c0ab8/DLB_Day7.2021-10-25-22_37_27.gif" data-mid="122672792" border="0" src="https://freight.cargo.site/w/300/i/8e3089cd2b280d4f37b837171ec93cff8295a8ca8b689bd5edb19368fe2c0ab8/DLB_Day7.2021-10-25-22_37_27.gif" /> Tinder implemented a coin-based currency that can be used to redeem perks in-app. To promote this new addition to the app, our Product team created the Daily Log-In Bonus, where users would be rewarded with coins every day they logged in. I was tasked with bringing engaging motion to this experience, creating a fun coin flip animation and also shiny, clickable coins users would want to claim when prompted. I worked closely with the engineers on the project, exporting the animations as Lottie files and troubleshooting issues across IOS and Android. Programs — After Effects, Lottie, Figma Client — TinderProduct Designer — Ying ChenProduct Manager — Amir Zur <img width="700" height="390" width_o="700" height_o="390" data-src="https://freight.cargo.site/t/original/i/d14f9a276436540ca69502eecf592770af5a4e869989b95d14ac762d9faffd62/Screen-Recording-2021-10-25-at-10.52.34-PM.2021-10-25-22_57_01.gif" data-mid="122673373" border="0" src="https://freight.cargo.site/w/700/i/d14f9a276436540ca69502eecf592770af5a4e869989b95d14ac762d9faffd62/Screen-Recording-2021-10-25-at-10.52.34-PM.2021-10-25-22_57_01.gif" /> <img width="700" height="390" width_o="700" height_o="390" data-src="https://freight.cargo.site/t/original/i/ea32cf34467a655adf4e745ba78ef9e5aac2a8e48e39862cd479b66b37d9140e/Screen-Recording-2021-10-25-at-10.53.11-PM.2021-10-25-22_56_14.gif" data-mid="122673374" border="0" src="https://freight.cargo.site/w/700/i/ea32cf34467a655adf4e745ba78ef9e5aac2a8e48e39862cd479b66b37d9140e/Screen-Recording-2021-10-25-at-10.53.11-PM.2021-10-25-22_56_14.gif" /> <img width="600" height="335" width_o="600" height_o="335" data-src="https://freight.cargo.site/t/original/i/fff389fe5a15dd81e6d3e1337ebecf4c821c779deacbb9a73ade990216344941/Screen-Recording-2021-10-25-at-10.53.29-PM.2021-10-25-22_55_42.gif" data-mid="122673375" border="0" src="https://freight.cargo.site/w/600/i/fff389fe5a15dd81e6d3e1337ebecf4c821c779deacbb9a73ade990216344941/Screen-Recording-2021-10-25-at-10.53.29-PM.2021-10-25-22_55_42.gif" /> <img width="374" height="812" width_o="374" height_o="812" data-src="https://freight.cargo.site/t/original/i/ab455e781cae9abea601aae2585db7e9901c2e16c2ad6a07a84b56d41756d63f/DLB_Day1_V1.2021-10-25-22_57_48.gif" data-mid="122673372" border="0" src="https://freight.cargo.site/w/374/i/ab455e781cae9abea601aae2585db7e9901c2e16c2ad6a07a84b56d41756d63f/DLB_Day1_V1.2021-10-25-22_57_48.gif" /> <img width="374" height="812" width_o="374" height_o="812" data-src="https://freight.cargo.site/t/original/i/6c8280439337444a10e9d6a5c052e1db7c1f75f5b6b7c0260f4d231745c37058/DLB_Day1_V3.2021-10-25-22_59_26.gif" data-mid="122673376" border="0" src="https://freight.cargo.site/w/374/i/6c8280439337444a10e9d6a5c052e1db7c1f75f5b6b7c0260f4d231745c37058/DLB_Day1_V3.2021-10-25-22_59_26.gif" /> Gamepad Explorations ♡ Gamepad Explorations&nbsp; ♡ Gamepad Explorations ♡ Gamepad Explorations ♡ &nbsp; I worked closely with the Product team at Tinder to do explorations around elevating our gamepad button animations. We wanted the buttons to seem fun, tappable, and interactive, encouraging our users to continue swiping. I created Lottie files from these animations and worked with our engineering team to test them. The most challenging animation was for our Boost icon (far right). Our major inspiration came from the idea of a generator “revving” up and a radar-type movement, since Boosts will help more people see a user’s profile. I did several explorations around both ideas and ultimately landed on a seamless combination of the two. Programs — After Effects, Lottie, Figma Client — TinderProduct Designer — Cameron WardProduct Design Manager — Michael Appuhn Boost Animation Explorations https://lisafcai.me/Design-Systems Fri, 20 Jan 2023 21:25:51 +0000 LISA F CAI https://lisafcai.me/Design-Systems ♡ Design Systems ♡ Design Systems ♡ Design Systems ♡ Design Systems ♡ Design Systems Programs — Figma, Figma Prototyping, After Effects Client — StashDesign Systems Lead — Devin WilmotProduct Designers — Bentley Wong, Allan LopezEngineers — Manuel Fernandez, Nicholas Konecny, Anthony M. Problem There was no consistent motion language, motion tokens or motion documentation used at Stash. Engineers didn’t have one place to reference the interaction &amp; motion of designs, and designers isolated in squads would create bespoke animations, often for components that already had a different animation attached to them. This created odd, unintuitive interaction patterns and inconsistencies between components — within and across platforms and ultimately costed more eng and design time. That’s a lose-lose situation.Solution Establish Motion as a pillar in Stash’s Design System by creating motion tokens and clear documentation, documented right in the component. I did an audit of all motion &amp; interaction across Stash and with my learnings, created a Motion Philosophy to help guide all motion choices at Stash. ︎︎︎Motion Philosophy &nbsp;Using the philosophy as a guide, I created primitive tokens for easing curves, springs and duration. Easing curves &amp; springs determine the speed, acceleration and deceleration of an object. Our easing &amp; springs are split into two categories: Efficient Easing Use for instant, quick responses, such as functional microinteractions (controls, buttons) and standard transitions Emotional Easing Use for more delightful interactions and transitions, such as loaders, expand animations, and icon animations ︎︎︎Demo Easing Curves <img width="1920" height="3440" width_o="1920" height_o="3440" data-src="https://freight.cargo.site/t/original/i/dad24c6695234e6bff396b15f29a0170bfc5cd8c84465f67893155a19ef2cd5b/-componentDocumentationTemplate-1.png" data-mid="165439834" border="0" src="https://freight.cargo.site/w/1000/i/dad24c6695234e6bff396b15f29a0170bfc5cd8c84465f67893155a19ef2cd5b/-componentDocumentationTemplate-1.png" /> Our duration tokens in increments of 125ms (Rapid,Fast, Slow, etc). Standardizing easing curves with duration makes the motion and interaction in our app feel the same. <img width="1920" height="3361" width_o="1920" height_o="3361" data-src="https://freight.cargo.site/t/original/i/90723cf2ed42ae3f790c184ae954267f587ed26851f4da594d67c76bb8ac6ea2/-componentDocumentationTemplate-2.png" data-mid="165440844" border="0" src="https://freight.cargo.site/w/1000/i/90723cf2ed42ae3f790c184ae954267f587ed26851f4da594d67c76bb8ac6ea2/-componentDocumentationTemplate-2.png" /> Combining our easing and duration tokens along with other primitive properties (opacity, scale, position) creates our functional motion tokens, such as fadeInRapid, growMedium, slideDownFull, etc. All of the properties are self-contained inside the token’s component inside figma. The tokens are translated to code and ready for eng to referece and use. <img width="1038" height="1058" width_o="1038" height_o="1058" data-src="https://freight.cargo.site/t/original/i/4378aa0602ba3f6f14867810755f7f8a87efe9d111a8050069ac97d50d0e288e/Screenshot-2023-01-20-at-3.18.22-PM.png" data-mid="165441441" border="0" src="https://freight.cargo.site/w/1000/i/4378aa0602ba3f6f14867810755f7f8a87efe9d111a8050069ac97d50d0e288e/Screenshot-2023-01-20-at-3.18.22-PM.png" /> <img width="940" height="1050" width_o="940" height_o="1050" data-src="https://freight.cargo.site/t/original/i/cfe9700783356a43da6023b67504a3da97aa8399d2456d82263cbed089eef19b/Screenshot-2023-01-20-at-3.18.49-PM.png" data-mid="165441469" border="0" data-scale="91" src="https://freight.cargo.site/w/940/i/cfe9700783356a43da6023b67504a3da97aa8399d2456d82263cbed089eef19b/Screenshot-2023-01-20-at-3.18.49-PM.png" /> I also created a Best Practices document for anyone to view and get a quick snapshot of how to apply motion and interaction at Stash to stay on brand. <img width="2115" height="3530" width_o="2115" height_o="3530" data-src="https://freight.cargo.site/t/original/i/97ab4831ca5365c78e1d72a51aee9e36e8cb25ef193a591861c8aa692833bf9b/stashMotionOverview.png" data-mid="165444028" border="0" src="https://freight.cargo.site/w/1000/i/97ab4831ca5365c78e1d72a51aee9e36e8cb25ef193a591861c8aa692833bf9b/stashMotionOverview.png" /> Impact Creating a motion pillar in Stash’s Design System set Designers and Engineers up for success in creating new interaction patterns, components and animations across all platforms. They can use existing on-brand tokens to build new experiences and keep everything consistent with documantion. The system is still ever developing and flexible enough to adapt to any change needed, down the line. New tokens can be easily added to the system and the easing curves and duration could always be adjusted system-wide with a quick update. “motion tokens allow me to quickly understand how something needs to move and let me code that animation just by referencing a single string. its never been easier than this!” —Anthony M, Sr. Web Developer https://lisafcai.me/Info Wed, 27 Oct 2021 06:26:56 +0000 LISA F CAI https://lisafcai.me/Info Hi, I’m Lisa. I’m a Motion Designer with 9 years of experience across product design, marketing, brand storytelling, and UI/UX animation. I’ve worked with companies like Microsoft, Google, Tinder, Disney, and Taskrabbit. With a background in both tech and entertainment, I bring end-to-end motion skills to the table — from concepting and storyboarding to editing and delivering polished animations. In my free time, I like watching horror movies, eating beige vegan food and snuggling my cats, Boba and Taro. Email— lisafcai@gmail.com Resume Linkedin&nbsp; <img width="1102" height="1492" width_o="1102" height_o="1492" data-src="https://freight.cargo.site/t/original/i/2f1d894c08206b133c1c8b319bb2adbabd0e79147af5e55c353d9dbd14f7f0c1/IMG_2473.JPG" data-mid="122902845" border="0" data-scale="81" src="https://freight.cargo.site/w/1000/i/2f1d894c08206b133c1c8b319bb2adbabd0e79147af5e55c353d9dbd14f7f0c1/IMG_2473.JPG" />