https://www.lauren-tsao-portfolio.com/tutorials daily 0.75 2026-01-20 https://images.squarespace-cdn.com/content/v1/6797e73dcc7f53637938d525/a9c756c1-10b0-4a57-95ad-ae3ad79aa1a1/M.gif https://images.squarespace-cdn.com/content/v1/6797e73dcc7f53637938d525/2d42b338-ba32-4a2e-9851-3959d46579f4/E.gif https://images.squarespace-cdn.com/content/v1/6797e73dcc7f53637938d525/bd22d1ce-f435-4027-bcbf-16e35bb58167/R.gif https://images.squarespace-cdn.com/content/v1/6797e73dcc7f53637938d525/b4b2a015-fe5f-453c-af03-203bae4acbaa/O.gif https://images.squarespace-cdn.com/content/v1/6797e73dcc7f53637938d525/f153e04e-8d3e-47ea-8a71-c369d5dce69d/P.gif https://images.squarespace-cdn.com/content/v1/6797e73dcc7f53637938d525/b2f501e9-69fe-4ddc-9915-65c3b772ad65/V.gif https://www.lauren-tsao-portfolio.com/tutorials/how-to-create-lottie-animations monthly 0.5 2026-01-20 https://images.squarespace-cdn.com/content/v1/6797e73dcc7f53637938d525/1767729128072-BW404X8IDVJKGS6OJ6XL/CORRECT_540px.gif Tutorials - How to — Create Lottie Animations https://images.squarespace-cdn.com/content/v1/6797e73dcc7f53637938d525/1767733689323-M2TD4N4UMVFHHESRC6SA/QUIZ-TIME_540px.gif Tutorials - How to — Create Lottie Animations https://images.squarespace-cdn.com/content/v1/6797e73dcc7f53637938d525/1767733671371-8KDZHEPYHDK208DYV3CY/EXPERT_540px.gif Tutorials - How to — Create Lottie Animations https://images.squarespace-cdn.com/content/v1/6797e73dcc7f53637938d525/1767733692249-121OVZGVDBN0Y1ALXNLP/NICE-TRY_540px.gif Tutorials - How to — Create Lottie Animations https://images.squarespace-cdn.com/content/v1/6797e73dcc7f53637938d525/c3e1093c-42e8-466a-92be-32cd5c096e70/Bob+v02_02_pose.png Tutorials - How to — Create Lottie Animations - When animated, I want Bob to wave at you guys! This is how I envision him waving. It would serve as a reference of how I should plan my layering structure to achieve this pose. https://images.squarespace-cdn.com/content/v1/6797e73dcc7f53637938d525/9af65536-65b6-44d3-a617-84c3b5466af9/Bob+v02_01_layering+structure.png Tutorials - How to — Create Lottie Animations - This is how my layering structure looks like. Notice how every part of Bob has its own individual layer. I highly recommend doing this to all your characters. It provides you more room to animate. More layers, more flexibility. https://images.squarespace-cdn.com/content/v1/6797e73dcc7f53637938d525/14f14de6-02cd-4977-be28-1fc9f52ec2bc/Bob+v02_03_import+file.png Tutorials - How to — Create Lottie Animations - Start by importing your .ai file into After Effects. Note: If your characters are created in Figma, don’t panic! Just export as .svg, and use Adobe Illustrator to re-export it as an .ai file. https://images.squarespace-cdn.com/content/v1/6797e73dcc7f53637938d525/a0560b2d-346b-4535-873c-52754b517627/Bob+v02_03_import+file+settings.png Tutorials - How to — Create Lottie Animations - For the import settings, make sure these are enabled: Composition - Retain layer sizes Create Composition is checked ✅️ https://images.squarespace-cdn.com/content/v1/6797e73dcc7f53637938d525/f5f0b2b4-3e0f-4efd-9b91-bcaf3c9a4cbd/Bob+v02_04_shapes-from-vector-layer.png Tutorials - How to — Create Lottie Animations - Convert all your layers into shape layers. You can do this by right clicking on your layers > Create > Create Shapes from Vector Layer. https://images.squarespace-cdn.com/content/v1/6797e73dcc7f53637938d525/c8ba99bb-4c6f-4220-a7f1-fb563ca0701c/Bob+v02_05_anchor-point.png Tutorials - How to — Create Lottie Animations - Its rigging time! Just like how a human is structured, Bob needs to have joints in order for him to move naturally. These ‘joints’ are basically your layers’ anchor points, which you would need to move to their desired positions. For example, your legs moves where your hips are. So I positioned the anchor points of Bob’s legs to the end closer to his hips. https://images.squarespace-cdn.com/content/v1/6797e73dcc7f53637938d525/28d130ba-d642-405a-a863-383ca0140282/Bob+v02_05_pan-behind.png Tutorials - How to — Create Lottie Animations - You can move your anchor points by using the pan-behind tool. https://images.squarespace-cdn.com/content/v1/6797e73dcc7f53637938d525/ed0ad98e-c99e-403f-a5b0-f9daba3fe005/Bob+v02_06_pick-whipping.png Tutorials - How to — Create Lottie Animations - You might want some layers to move together with the another layer. We call the former layer the child and the latter layer the parent. For example, I want Bob’s eyes and mouth to move together with the body. So I select all those layers, click on the pick-whip icon and drag my mouse towards the parent later, which is the body. https://images.squarespace-cdn.com/content/v1/6797e73dcc7f53637938d525/6056ecb3-b991-4479-8fc6-3daa239d0769/Bob+v02_07_choosing-rotation.png Tutorials - How to — Create Lottie Animations - First, pick a parameter you want to manipulate. In this case, I pick Rotate, since I would be rotating Bob’s arm upwards to wave. https://images.squarespace-cdn.com/content/v1/6797e73dcc7f53637938d525/57bd3a17-96f2-45bf-9c72-caa75902e6b7/Bob+v02_07_stopwatch.png Tutorials - How to — Create Lottie Animations - Click on the stopwatch next to it. Doing so will produce your first keyframe. It looks like a little diamond! https://images.squarespace-cdn.com/content/v1/6797e73dcc7f53637938d525/e900bc58-0e5d-42b7-98b9-504bda845f50/Bob+v02_08_second-keyframe.png Tutorials - How to — Create Lottie Animations - Move your playhead further down the timeline and rotate Bob’s arm. You will see that a new keyframe has been produced containing the updated value of the rotation. https://images.squarespace-cdn.com/content/v1/6797e73dcc7f53637938d525/e9263f6b-5dbd-4f60-930d-54b0ec02ac7d/08_Arm-Rotation.gif Tutorials - How to — Create Lottie Animations - Now move your playhead back to the first keyframe and press spacebar to play. You should now see Bob’s arm rotate! https://images.squarespace-cdn.com/content/v1/6797e73dcc7f53637938d525/300ecfb6-9189-49d0-9ae1-058a4eeaae39/Bob+v02_10_easy-ease.png Tutorials - How to — Create Lottie Animations - You can now move on to animating Bob’s other layers! Tip: If you want to add a simple easing, click and drag your mouse over the keyframes, right click on them, hover over ‘Keyframe Assistant’ and click ‘Easy Ease’. https://images.squarespace-cdn.com/content/v1/6797e73dcc7f53637938d525/81f99b90-8512-48b4-90b8-652ac5f60fc5/Bob+v02_11_bodymovin-location.png Tutorials - How to — Create Lottie Animations - Start by opening up the Bodymovin’ plugin within After Effects You should find it by clicking Window > Extensions > Bodymovin https://images.squarespace-cdn.com/content/v1/6797e73dcc7f53637938d525/0ef5d2be-3dd8-480d-bc10-b0c01778dc51/Bob+v02_12_bodymovin-UI.png Tutorials - How to — Create Lottie Animations - Make it stand out Whatever it is, the way you tell your story online can make all the difference. https://images.squarespace-cdn.com/content/v1/6797e73dcc7f53637938d525/0139daa6-4de7-4756-8dca-bb38fd86a2ba/Bob+v02_13_gear-symbol.png Tutorials - How to — Create Lottie Animations - All set? Great, let’s keep going. Click on Settings (the gear symbol) of the composition you want rendered. https://images.squarespace-cdn.com/content/v1/6797e73dcc7f53637938d525/1984482d-b679-4201-a0ab-382e5e4df240/Bob+v02_14_bodymovin-settings.png Tutorials - How to — Create Lottie Animations - Make it stand out Whatever it is, the way you tell your story online can make all the difference. https://images.squarespace-cdn.com/content/v1/6797e73dcc7f53637938d525/5d6079e6-bbfd-478b-aa82-c40199abb879/Bob+v02_15_folder-items.png Tutorials - How to — Create Lottie Animations - Render’s done! Now what? Check your destination folder. Its contents should have the following items: A demo folder - This contains a .html file. Click on it and preview your Lottie animation A .json file - This is the Lottie animation https://images.squarespace-cdn.com/content/v1/6797e73dcc7f53637938d525/eb279acc-506c-4ea8-aafe-fe8b8dc9d1ed/Bob+v02_16_lottie-website-dashboard.png Tutorials - How to — Create Lottie Animations - Log in / create an account on LottieFiles. Once done, click on ‘My Dashboard’. https://images.squarespace-cdn.com/content/v1/6797e73dcc7f53637938d525/2a02994c-f622-4e8a-8422-526a816d4f39/17_Upload-Animations-Button.gif Tutorials - How to — Create Lottie Animations - Click on the ‘Upload animations’ button. A new modal window should open. Drag and drop your .json file into the dotted box. https://images.squarespace-cdn.com/content/v1/6797e73dcc7f53637938d525/42b47be5-0494-4b7f-ba32-8e3236292894/Bob+v02_18_access-animation-details.png Tutorials - How to — Create Lottie Animations - While on the Dashboard, click on your animation. You will be taken to a new page where you would see a preview of your animation being played and a couple of options on the right. https://images.squarespace-cdn.com/content/v1/6797e73dcc7f53637938d525/da0c392e-ab06-4a32-b18e-8685b2ee160a/Bob+v02_19_embed-HTML.png Tutorials - How to — Create Lottie Animations - Click ‘Handoff </>’. Under ‘Integration guide’, copy the code under Embed HTML and paste it into the code of your website’s .html file. And that’s it, you’re all set! https://images.squarespace-cdn.com/content/v1/6797e73dcc7f53637938d525/ddb7b809-ba34-4fb3-a179-0e69ec0d60aa/Bob_v02_Animated_1080px.gif Tutorials - How to — Create Lottie Animations - Thank you for viewing this tutorial, it means a lot to me! I hope that it was easy to follow and that you did not run into any issues in the process of creating your Lottie animation. That being said, if you have any questions or feedback on how I can improve the way I structured this tutorial, please feel free to email me at enwei.tsao@gmail.com. https://www.lauren-tsao-portfolio.com/thesis daily 0.75 2026-03-28 https://www.lauren-tsao-portfolio.com/thesis/week-08-design-interview-research-plan monthly 0.5 2026-03-28 https://images.squarespace-cdn.com/content/v1/6797e73dcc7f53637938d525/5ce978dd-f0b2-49fe-b899-1191819ee9c0/Usability-testing_signup-sheet.png Thesis - Week 08 - Design Interview Research Plan - Approach I utilized demo day to recruit participants via an interest form. As shown in the left image, the link to the form was embedded into a QR code, which was printed and displayed at my table showcase. Scanning the QR code immediately loads the form, providing a seamless sign-up experience. Post-demo day, I discovered a flaw in this approach. Attendees from demo day would have already interacted with MiniKin. In order to achieve more accurate results pertaining to whether MiniKin accurately conveys its behavioral cues to users, participants of the interview must not have had any contact with MiniKin prior to it. Having attendees of demo interact with MiniKin when they already have before would result in inaccurate data as they are already aware of what the behavioral cues entail. Thus, I revised this approach to instead reach out to individuals that are completely unaware of MiniKin’s existence. This is done though enquiring verbally, followed by providing the link to the Google Form for interested parties to fill out. After they have filled out the form, I proceeded to schedule an interview session with them. A total duration of two weeks have been allocated for this phase to allow flexibility for recruiting and scheduling. https://www.lauren-tsao-portfolio.com/thesis/week-07-demo-day-feedback monthly 0.5 2026-03-26 https://www.lauren-tsao-portfolio.com/thesis/week-06 monthly 0.5 2026-03-10 https://images.squarespace-cdn.com/content/v1/6797e73dcc7f53637938d525/dcadeed6-be06-4047-84e9-a02c4c9aaca5/queue-stretch%2Bhydration-times_original-to-demo-day_pt01.gif Thesis - Week 06 - Demo Day Preparation - Make it stand out Adjusting countdown to next 15 minutes to 5 minutes https://images.squarespace-cdn.com/content/v1/6797e73dcc7f53637938d525/27912f02-722e-48a7-8d94-8c44a8bbbd5a/queue-stretch%2Bhydration-times_original-to-demo-day_pt02.gif Thesis - Week 06 - Demo Day Preparation - Make it stand out Whatever it is, the way you tell your story online can make all the difference. https://images.squarespace-cdn.com/content/v1/6797e73dcc7f53637938d525/ed576abe-0166-4c7d-beee-6b272bbced56/queue-stretch%2Bhydration-times_original-to-demo-day_pt03.gif Thesis - Week 06 - Demo Day Preparation - Make it stand out Whatever it is, the way you tell your story online can make all the difference. https://images.squarespace-cdn.com/content/v1/6797e73dcc7f53637938d525/e134596e-64c7-424b-b181-c51380dc5f5b/sleep-reminder_original-to-demo-day.gif Thesis - Week 06 - Demo Day Preparation - Make it stand out Whatever it is, the way you tell your story online can make all the difference. https://images.squarespace-cdn.com/content/v1/6797e73dcc7f53637938d525/10b866cd-ce33-4437-848a-4caf374c0325/rain-mode_original-to-demo-day.gif Thesis - Week 06 - Demo Day Preparation - Make it stand out Whatever it is, the way you tell your story online can make all the difference. https://images.squarespace-cdn.com/content/v1/6797e73dcc7f53637938d525/1c198635-8521-4341-b3fe-d2a90ac6b8e4/Table-setup_sketch_cropped.jpg Thesis - Week 06 - Demo Day Preparation - When thinking of the table setup. I thought about what I want to showcase, and how I can weave the reveal of MiniKin into a narrative. There needs to be flow in storytelling, and it would be presented physically in the following sequence: 1. Laptop 01 containing contextual slides 2. Laptop 02 containing the interactive demo 3. Usability sign up sheet 4. Writing materials for attendees to leave feedback With this in mind, I proceed to sketch out how these materials will be laid out. Ultimately, I decided to position these materials from the attendees left to right. I am also planning to bring my iPad to extend the screen of my laptop. On its screen, I am able to make changes to the aforementioned code when needed. https://images.squarespace-cdn.com/content/v1/6797e73dcc7f53637938d525/810fe807-cee6-4e35-839c-68e3d3e350ca/Presentation-slides_sketch_cropped.jpg Thesis - Week 06 - Demo Day Preparation - For the presentation slides, I want other attendees to easily navigate between content in the case that I am preoccupied with another attendee. Therefore, an ordinary slide deck would not suffice, as it would be frustrating for the attendee to constantly press the back/forward buttons to navigate to the pages they want to see. To address this issue, I decided to create the deck in Figma Design to allow users to interact with it, much like how they would with a website. This would allow them to easily navigate between sections at their own pace. Show below is the finalized presentation deck. https://www.lauren-tsao-portfolio.com/thesis/week-05 monthly 0.5 2026-03-10 https://images.squarespace-cdn.com/content/v1/6797e73dcc7f53637938d525/3ff6b2d7-f471-4881-b61a-15d612031123/MiniKin_logic-mapping_cropped.jpg Thesis - Week 05 - Developing MiniKin - The sketch shows the structure of the MiniKin app and how each file and folder relates to each other. To give more context to each folder and file: Characters folder contains all of MiniKin appearances (e.g Hopper-default, Hopper-rain, Groovy-default etc.) character.js contains everything related to MiniKin’s behavior (e.g time-based functions to execute when MiniKin is hydrating / stretching) stateMachine.js contains all the frame ranges of each MiniKin’s Lottie .json file. Each frame range represents a different state / action weatherForm.js contains handler functions to allow MiniKin to change weather mode appearances renderer.js wires together all the above modules and starts the app in the renderer process https://images.squarespace-cdn.com/content/v1/6797e73dcc7f53637938d525/87e220a9-1153-428b-ba40-44bd62ea9334/AE-lottie_animation-consolidation.jpg Thesis - Week 05 - Developing MiniKin - Make it stand out Whatever it is, the way you tell your story online can make all the difference. https://images.squarespace-cdn.com/content/v1/6797e73dcc7f53637938d525/1772398588454-P4OMZ8UIM5ROZZV8NTUH/stateMachine_default-mode.jpg Thesis - Week 05 - Developing MiniKin https://images.squarespace-cdn.com/content/v1/6797e73dcc7f53637938d525/1772398480732-U5PKNZZ8QE2EC5OZZMR1/stateMachine_rain-mode.jpg Thesis - Week 05 - Developing MiniKin https://images.squarespace-cdn.com/content/v1/6797e73dcc7f53637938d525/86c17194-fad5-4e03-8bfa-536491c38247/hydrate%2Bstretch_implementation_01.jpg Thesis - Week 05 - Developing MiniKin - Once that is done, I created the character.js file and imported the stateMachine function from stateMachine.js into it. It contains the selectedCharacter function. I named it as such for preparation of implementing the Groovy and Turnip characters in the future. https://images.squarespace-cdn.com/content/v1/6797e73dcc7f53637938d525/2fbed8bc-34d7-4877-94e1-ac8e80566641/hydrate%2Bstretch_implementation_02a.jpg Thesis - Week 05 - Developing MiniKin - After that, I proceeded to assign variables to their default states. quartHrTimeout came later during my coding process when implementing the quarter hour timer. pendingStretch and pendingHydrate variables also came later when queueing the stretch and hydrate actions, which was an unexpected challenge (More on that later). https://images.squarespace-cdn.com/content/v1/6797e73dcc7f53637938d525/a9e73756-6d66-439f-917f-b115996632c2/hydrate%2Bstretch_implementation_03.jpg Thesis - Week 05 - Developing MiniKin - I wanted to create helper functions for the animations to streamline my workflow. playOnce() is the function for animations that play once. startLoop() is the function for animations that loop. https://images.squarespace-cdn.com/content/v1/6797e73dcc7f53637938d525/1a2fdbb8-e92f-478c-9d0b-9532baa8fc3a/hydrate%2Bstretch_implementation_03.jpg Thesis - Week 05 - Developing MiniKin - I applied the helper functions when assigning functions to each animation. https://images.squarespace-cdn.com/content/v1/6797e73dcc7f53637938d525/794122f3-af4d-43b6-81a5-04f1abf824b8/hydrate%2Bstretch_implementation_05a.jpg Thesis - Week 05 - Developing MiniKin - Make it stand out Whatever it is, the way you tell your story online can make all the difference. https://images.squarespace-cdn.com/content/v1/6797e73dcc7f53637938d525/e9512630-375e-43c0-9925-2f7c27ea37fb/hydrate%2Bstretch_implementation_06b.jpg Thesis - Week 05 - Developing MiniKin - Make it stand out Whatever it is, the way you tell your story online can make all the difference. https://images.squarespace-cdn.com/content/v1/6797e73dcc7f53637938d525/065159fe-010f-4b5d-aa17-b30f8ce07ca8/hydrate%2Bstretch_implementation_06c.jpg Thesis - Week 05 - Developing MiniKin - Make it stand out Whatever it is, the way you tell your story online can make all the difference. https://images.squarespace-cdn.com/content/v1/6797e73dcc7f53637938d525/25a6f5db-76c7-4995-8057-a6cca228b649/hydrate%2Bstretch_implementation_07.jpg Thesis - Week 05 - Developing MiniKin - Make it stand out Whatever it is, the way you tell your story online can make all the difference. https://images.squarespace-cdn.com/content/v1/6797e73dcc7f53637938d525/1772427317852-K4RMJLWTD5H952RIXQ4C/only_hydrate_half-res.gif Thesis - Week 05 - Developing MiniKin - MiniKin hydrating at 9:45pm https://images.squarespace-cdn.com/content/v1/6797e73dcc7f53637938d525/1772427334541-4PEJYFHM249YADGDNNZO/both_hydrate%2Bstretch_half-res.gif Thesis - Week 05 - Developing MiniKin - MiniKin hydrating and stretching at 10:00pm https://www.lauren-tsao-portfolio.com/thesis/week-04 monthly 0.5 2026-03-10 https://www.lauren-tsao-portfolio.com/thesis/week-03 monthly 0.5 2026-02-17 https://images.squarespace-cdn.com/content/v1/6797e73dcc7f53637938d525/1771292166421-ZXKEZXAGB5YWT58BVSM1/anim_Option-C_Groovy_default_idle.gif Thesis - Week 03 - Character Animations &amp; Prototype - Default - Idle https://images.squarespace-cdn.com/content/v1/6797e73dcc7f53637938d525/1771292166352-5J2JLTZTIP9Y75IWKARL/anim_Option-C_Groovy_default_pat.gif Thesis - Week 03 - Character Animations &amp; Prototype - Default - Patted https://images.squarespace-cdn.com/content/v1/6797e73dcc7f53637938d525/1771292167991-L2P1FGPCC2VR66Z5Y34Z/anim_Option-C_Groovy_default_sleepy.gif Thesis - Week 03 - Character Animations &amp; Prototype - Default - Sleeping https://images.squarespace-cdn.com/content/v1/6797e73dcc7f53637938d525/1771292167908-J2448FGT2MQN04Q3120P/anim_Option-C_Groovy_default_stretch.gif Thesis - Week 03 - Character Animations &amp; Prototype - Default - Stretching https://images.squarespace-cdn.com/content/v1/6797e73dcc7f53637938d525/1771292169646-XZ9DRROFSC7PVYJN15DN/anim_Option-C_Groovy_default_water.gif Thesis - Week 03 - Character Animations &amp; Prototype - Default - Hydrating https://images.squarespace-cdn.com/content/v1/6797e73dcc7f53637938d525/1771292169646-0YKGRX9EL69MVYZPVIG5/anim_Option-C_Groovy_rain_idle.gif Thesis - Week 03 - Character Animations &amp; Prototype - Rainy - Idle https://images.squarespace-cdn.com/content/v1/6797e73dcc7f53637938d525/1771292170854-Q00DIZ6PHC1444GL8RB2/anim_Option-C_Groovy_rain_pat.gif Thesis - Week 03 - Character Animations &amp; Prototype - Rainy - Patted https://images.squarespace-cdn.com/content/v1/6797e73dcc7f53637938d525/1771292171313-MRX1G7440BPNUIFCWJT3/anim_Option-C_Groovy_rain_sleepy.gif Thesis - Week 03 - Character Animations &amp; Prototype - Rainy - Sleeping https://images.squarespace-cdn.com/content/v1/6797e73dcc7f53637938d525/1771292172123-Y36D158FDC9STELGA4Q7/anim_Option-C_Groovy_rain_stretch.gif Thesis - Week 03 - Character Animations &amp; Prototype - Rainy - Stretching https://images.squarespace-cdn.com/content/v1/6797e73dcc7f53637938d525/1771292172697-TQH590UQ99SI1YQ41LIY/anim_Option-C_Groovy_rain_water.gif Thesis - Week 03 - Character Animations &amp; Prototype - Rainy - Hyrdrating https://images.squarespace-cdn.com/content/v1/6797e73dcc7f53637938d525/1771292234547-263EPV1SI01QJINM60B4/anim_Option-C_Turnip_default_idle.gif Thesis - Week 03 - Character Animations &amp; Prototype - Default - Idle https://images.squarespace-cdn.com/content/v1/6797e73dcc7f53637938d525/1771292234433-LZNP9YHS9DESOEMMVZNX/anim_Option-C_Turnip_default_pat.gif Thesis - Week 03 - Character Animations &amp; Prototype - Default - Patted https://images.squarespace-cdn.com/content/v1/6797e73dcc7f53637938d525/1771292235956-8555SQO84GEO02EKPVB8/anim_Option-C_Turnip_default_sleepy.gif Thesis - Week 03 - Character Animations &amp; Prototype - Default - Sleeping https://images.squarespace-cdn.com/content/v1/6797e73dcc7f53637938d525/1771292236013-N4YK66WIBUZEHWUBH0D0/anim_Option-C_Turnip_default_stretch.gif Thesis - Week 03 - Character Animations &amp; Prototype - Default - Stretching https://images.squarespace-cdn.com/content/v1/6797e73dcc7f53637938d525/1771292237789-FI6NUE8ZB1JS9APIZGN4/anim_Option-C_Turnip_default_water.gif Thesis - Week 03 - Character Animations &amp; Prototype - Default - Hydrating https://images.squarespace-cdn.com/content/v1/6797e73dcc7f53637938d525/1771292237842-4ZE1BFZ4VV1J29KJLS8R/anim_Option-C_Turnip_rain_idle.gif Thesis - Week 03 - Character Animations &amp; Prototype - Rainy - Idle https://images.squarespace-cdn.com/content/v1/6797e73dcc7f53637938d525/1771292238977-JTF50ZFZ9VNTCT8GK8U6/anim_Option-C_Turnip_rain_pat.gif Thesis - Week 03 - Character Animations &amp; Prototype - Rainy - Patted https://images.squarespace-cdn.com/content/v1/6797e73dcc7f53637938d525/1771292239837-G3NN05VTG136A35NUVZN/anim_Option-C_Turnip_rain_sleepy.gif Thesis - Week 03 - Character Animations &amp; Prototype - Rainy - Sleeping https://images.squarespace-cdn.com/content/v1/6797e73dcc7f53637938d525/1771292240242-E4E19OTZIWH8QIAFVLL5/anim_Option-C_Turnip_rain_stretch.gif Thesis - Week 03 - Character Animations &amp; Prototype - Rainy - Stretching https://images.squarespace-cdn.com/content/v1/6797e73dcc7f53637938d525/1771292241464-FV26F09CZ2LTGA5MZ57S/anim_Option-C_Turnip_rain_water.gif Thesis - Week 03 - Character Animations &amp; Prototype - Rainy - Hydrating https://images.squarespace-cdn.com/content/v1/6797e73dcc7f53637938d525/1771292010726-JF6LSVKRHA4R204Q6P25/anim_Option-C_Hopper_default_idle.gif Thesis - Week 03 - Character Animations &amp; Prototype - Default - Idle https://images.squarespace-cdn.com/content/v1/6797e73dcc7f53637938d525/1771292010522-EAVHKG3MUS0JF52H7NEB/anim_Option-C_Hopper_default_pat.gif Thesis - Week 03 - Character Animations &amp; Prototype - Default - Patted https://images.squarespace-cdn.com/content/v1/6797e73dcc7f53637938d525/1771292011794-R8KYJIRMY9SI02BLTRBJ/anim_Option-C_Hopper_default_sleepy.gif Thesis - Week 03 - Character Animations &amp; Prototype - Default - Sleeping https://images.squarespace-cdn.com/content/v1/6797e73dcc7f53637938d525/1771292011900-SS3CPAINPSJ02Q0J2NE9/anim_Option-C_Hopper_default_stretch.gif Thesis - Week 03 - Character Animations &amp; Prototype - Default - Stretching https://images.squarespace-cdn.com/content/v1/6797e73dcc7f53637938d525/1771292013079-6BB05CJJEYW2MCLITTY2/anim_Option-C_Hopper_default_water.gif Thesis - Week 03 - Character Animations &amp; Prototype - Default - Hydrating https://images.squarespace-cdn.com/content/v1/6797e73dcc7f53637938d525/1771292048032-TAH5V7JTEUXD8KCSDS2P/anim_Option-C_Hopper_rain_idle.gif Thesis - Week 03 - Character Animations &amp; Prototype - Rainy - Idle https://images.squarespace-cdn.com/content/v1/6797e73dcc7f53637938d525/1771292047891-5O58ER0JJZN6C2B9FHCX/anim_Option-C_Hopper_rain_pat.gif Thesis - Week 03 - Character Animations &amp; Prototype - Rainy - Patted https://images.squarespace-cdn.com/content/v1/6797e73dcc7f53637938d525/1771292049700-3E89HZPZ6CSQB47ROJH8/anim_Option-C_Hopper_rain_sleepy.gif Thesis - Week 03 - Character Animations &amp; Prototype - Rainy - Sleeping https://images.squarespace-cdn.com/content/v1/6797e73dcc7f53637938d525/1771292049594-7JDA9DER4P1VDFXWE5LM/anim_Option-C_Hopper_rain_stretch.gif Thesis - Week 03 - Character Animations &amp; Prototype - Rainy - Stretching https://images.squarespace-cdn.com/content/v1/6797e73dcc7f53637938d525/1771292050968-VNRP7LXYT1QKS3DVOT18/anim_Option-C_Hopper_rain_water.gif Thesis - Week 03 - Character Animations &amp; Prototype - Rainy - Hydrating https://www.lauren-tsao-portfolio.com/thesis/week-02 monthly 0.5 2026-02-09 https://images.squarespace-cdn.com/content/v1/6797e73dcc7f53637938d525/db6ffe6a-b00b-4765-92ce-cebbfeeae570/Blue_survey_results.jpg Thesis - Week 02 - Character Designs - The Blue category was the most volatile. Groovy was initially in the lead, but Cirrus overtook it, and remained neck-to-neck with Chipper. Surprisingly, Groovy pushed through at the leg of the race and emerged as the winner with 19 votes! https://images.squarespace-cdn.com/content/v1/6797e73dcc7f53637938d525/5eb7f007-cc78-4f01-8026-8134042703c1/Green_survey_results.jpg Thesis - Week 02 - Character Designs - Onigiri was originally in the lead when the race started out. Eventually Turnip overtook it at the midway point and emerged as the winner at 31 votes! https://images.squarespace-cdn.com/content/v1/6797e73dcc7f53637938d525/bcb410b6-f6ac-465f-af61-2bcb027d46b8/Yellow_survey_results.jpg Thesis - Week 02 - Character Designs - The Yellow category saw the least competition. Hopper remained undefeated throughout the course of the survey and won with a total of 25 votes! https://images.squarespace-cdn.com/content/v1/6797e73dcc7f53637938d525/1b0e9d55-fbaf-49cf-8cca-96e9c232905d/survey_winners.png Thesis - Week 02 - Character Designs - Make it stand out Meet our winners! From left: Groovy, Turnip and Hopper. https://images.squarespace-cdn.com/content/v1/6797e73dcc7f53637938d525/1770516247333-UUGM767KNYDE9R0HDCKB/Option_C_-_Hopper+stretch.png Thesis - Week 02 - Character Designs - Stretching MiniKin will stretch in timed intervals to signal to the user to stretch too. https://images.squarespace-cdn.com/content/v1/6797e73dcc7f53637938d525/1770516248167-B0DBR4ZFNLJ1A1R9WPXB/Option_C_-_Hopper+water.png Thesis - Week 02 - Character Designs - Drinking Water MiniKin will take out a glass of water to drink, signaling to the user to drink some water as well. https://images.squarespace-cdn.com/content/v1/6797e73dcc7f53637938d525/1770516248305-GRL23750SIOGYT8YXWPZ/Option_C_-_Hopper+yawn.png Thesis - Week 02 - Character Designs - Yawning MiniKin yawns when it is time for the user’s bedtime. https://images.squarespace-cdn.com/content/v1/6797e73dcc7f53637938d525/1770516247251-67UBKJNK86H9P12TMP6R/Option_C_-_Hopper+sleepy.png Thesis - Week 02 - Character Designs - Sleeping MiniKin will fall asleep if it is very late in the night. https://images.squarespace-cdn.com/content/v1/6797e73dcc7f53637938d525/1770518417130-JT8VH47CQ2HWJ2QRYUJO/Option_C_-_Hopper+freezing.png Thesis - Week 02 - Character Designs - Freezing MiniKin will don this outfit if temperatures are below freezing point. https://images.squarespace-cdn.com/content/v1/6797e73dcc7f53637938d525/1770518417143-0DNL0QBIZ75DREEEEKIT/Option_C_-_Hopper+rain.png Thesis - Week 02 - Character Designs - Raining MiniKin will wear a raincoat when it is raining. https://images.squarespace-cdn.com/content/v1/6797e73dcc7f53637938d525/1770599832893-MPBRBYGHECDEXMDNQ4E0/anim_Option-C_Hopper_default_idle+%280-00-03-24%29.png Thesis - Week 02 - Character Designs - Default - Idle https://images.squarespace-cdn.com/content/v1/6797e73dcc7f53637938d525/1770599832824-19595N8G7A33B32MPI5O/anim_Option-C_Hopper_default_pat+%280-00-01-12%29.png Thesis - Week 02 - Character Designs - Default - Patted https://images.squarespace-cdn.com/content/v1/6797e73dcc7f53637938d525/1770599833902-0TWBWGP8Z698B0J103T2/anim_Option-C_Hopper_default_sleepy+%280-00-01-20%29.png Thesis - Week 02 - Character Designs - Default - Yawning https://images.squarespace-cdn.com/content/v1/6797e73dcc7f53637938d525/1770599833905-FJABLKL081G04ZKVVO6F/anim_Option-C_Hopper_default_sleepy+%280-00-04-11%29.png Thesis - Week 02 - Character Designs - Default - Sleeping https://images.squarespace-cdn.com/content/v1/6797e73dcc7f53637938d525/1770599834852-MBYC3Y60VZ38FNVEYUHS/anim_Option-C_Hopper_default_stretch+%280-00-01-00%29.png Thesis - Week 02 - Character Designs - Default - Stretching https://images.squarespace-cdn.com/content/v1/6797e73dcc7f53637938d525/1770599834907-A3I3T3XPRV6HR47IQHOI/anim_Option-C_Hopper_default_water+%280-00-02-00%29.png Thesis - Week 02 - Character Designs - Default - Hydrating https://images.squarespace-cdn.com/content/v1/6797e73dcc7f53637938d525/1770602760530-VPZK0FK41LNKGLTH4SKB/anim_Option-C_Hopper_rain_idle+%280-00-03-24%29.png Thesis - Week 02 - Character Designs - Rainy - Idle https://images.squarespace-cdn.com/content/v1/6797e73dcc7f53637938d525/1770602760586-U6JK1FPDALBJ27WL0MDN/anim_Option-C_Hopper_rain_pat+%280-00-01-12%29.png Thesis - Week 02 - Character Designs - Rainy - Patted https://images.squarespace-cdn.com/content/v1/6797e73dcc7f53637938d525/1770602761566-M6HJTZ8MAL8YW8FQBPFF/anim_Option-C_Hopper_rain_sleepy+%280-00-01-20%29.png Thesis - Week 02 - Character Designs - Rainy - Yawning https://images.squarespace-cdn.com/content/v1/6797e73dcc7f53637938d525/1770602761620-H6TEGPP12SGOHGHJCDW2/anim_Option-C_Hopper_rain_sleepy+%280-00-04-11%29.png Thesis - Week 02 - Character Designs - Rainy - Sleeping https://images.squarespace-cdn.com/content/v1/6797e73dcc7f53637938d525/1770602762624-M4VS5249YT0M4YIZS1K8/anim_Option-C_Hopper_rain_stretch+%280-00-01-00%29.png Thesis - Week 02 - Character Designs - Rainy - Stretching https://images.squarespace-cdn.com/content/v1/6797e73dcc7f53637938d525/1770602762716-RALCSIU3YJU4Z5WOLBKO/anim_Option-C_Hopper_rain_water+%280-00-02-00%29.png Thesis - Week 02 - Character Designs - Rainy - Hyrdrating https://images.squarespace-cdn.com/content/v1/6797e73dcc7f53637938d525/1770600158366-7NNJ9C50YHECCT55OU4G/anim_Option-C_Turnip_default_idle+%280-00-03-24%29.png Thesis - Week 02 - Character Designs - Default - Idle https://images.squarespace-cdn.com/content/v1/6797e73dcc7f53637938d525/1770600158394-JPB687HN6TZQH0KOVX0D/anim_Option-C_Turnip_default_pat+%280-00-01-12%29.png Thesis - Week 02 - Character Designs - Default - Patted https://images.squarespace-cdn.com/content/v1/6797e73dcc7f53637938d525/1770600159352-BEZ12CHGY2X0J3074F1W/anim_Option-C_Turnip_default_sleepy+%280-00-01-20%29.png Thesis - Week 02 - Character Designs - Default - Yawning https://images.squarespace-cdn.com/content/v1/6797e73dcc7f53637938d525/1770600159702-33TQM5D3O887WAIIVTRC/anim_Option-C_Turnip_default_sleepy+%280-00-04-11%29.png Thesis - Week 02 - Character Designs - Default - Sleeping https://images.squarespace-cdn.com/content/v1/6797e73dcc7f53637938d525/1770600160434-RI4R7WN9G4VA6DY0QGOH/anim_Option-C_Turnip_default_stretch+%280-00-01-00%29.png Thesis - Week 02 - Character Designs - Default - Stretching https://images.squarespace-cdn.com/content/v1/6797e73dcc7f53637938d525/1770600160706-4UWSR7V6DDP08NJK6B2A/anim_Option-C_Turnip_default_water+%280-00-02-00%29.png Thesis - Week 02 - Character Designs - Default - Hydrating https://images.squarespace-cdn.com/content/v1/6797e73dcc7f53637938d525/1770600161419-IAYVZCB31EFEON8GPNUR/anim_Option-C_Turnip_rain_idle+%280-00-03-24%29.png Thesis - Week 02 - Character Designs - Rainy - Idle https://images.squarespace-cdn.com/content/v1/6797e73dcc7f53637938d525/1770600161756-3734MNWCGBS2E7A8RDT6/anim_Option-C_Turnip_rain_pat+%280-00-01-12%29.png Thesis - Week 02 - Character Designs - Rainy - Patted https://images.squarespace-cdn.com/content/v1/6797e73dcc7f53637938d525/1770600162379-Z9ZTIMID36PV14OGZO0H/anim_Option-C_Turnip_rain_sleepy+%280-00-01-20%29.png Thesis - Week 02 - Character Designs - Rainy - Yawning https://images.squarespace-cdn.com/content/v1/6797e73dcc7f53637938d525/1770600162685-V6067NRB9I015I3YUS0V/anim_Option-C_Turnip_rain_sleepy+%280-00-04-11%29.png Thesis - Week 02 - Character Designs - Rainy - Sleeping https://images.squarespace-cdn.com/content/v1/6797e73dcc7f53637938d525/1770600163563-I1VISTBAKVBZK5CGX9UE/anim_Option-C_Turnip_rain_stretch+%280-00-01-00%29.png Thesis - Week 02 - Character Designs - Rainy - Stretching https://images.squarespace-cdn.com/content/v1/6797e73dcc7f53637938d525/1770600163656-3A0BP2CBHCWCEMYR1FHW/anim_Option-C_Turnip_rain_water+%280-00-02-00%29.png Thesis - Week 02 - Character Designs - Rainy - Hydrating https://images.squarespace-cdn.com/content/v1/6797e73dcc7f53637938d525/1770600488867-VVGJU80NE1RJ5EZYO3K7/anim_Option-C_Groovy_default_idle+%280-00-03-24%29.png Thesis - Week 02 - Character Designs - Default - Idle https://images.squarespace-cdn.com/content/v1/6797e73dcc7f53637938d525/1770600488883-MRBBGYH4D9EHUO8Q5LJ6/anim_Option-C_Groovy_default_pat+%280-00-01-12%29.png Thesis - Week 02 - Character Designs - Default - Patted https://images.squarespace-cdn.com/content/v1/6797e73dcc7f53637938d525/1770600489851-LY7IZJYURQUQWKLFOUCG/anim_Option-C_Groovy_default_sleepy+%280-00-01-20%29.png Thesis - Week 02 - Character Designs - Default - Yawning https://images.squarespace-cdn.com/content/v1/6797e73dcc7f53637938d525/1770600490943-K5E7CO7ZDSBMOK9X5JAK/anim_Option-C_Groovy_default_sleepy+%280-00-04-11%29.png Thesis - Week 02 - Character Designs - Default - Sleeping https://images.squarespace-cdn.com/content/v1/6797e73dcc7f53637938d525/1770600491188-1BSGX3A8SYUEKZZ5HDQV/anim_Option-C_Groovy_default_stretch+%280-00-01-00%29.png Thesis - Week 02 - Character Designs - Default - Stretching https://images.squarespace-cdn.com/content/v1/6797e73dcc7f53637938d525/1770600491917-28NPKFXIHPSLE9GVR6VO/anim_Option-C_Groovy_default_water+%280-00-02-00%29.png Thesis - Week 02 - Character Designs - Default - Hydrating https://images.squarespace-cdn.com/content/v1/6797e73dcc7f53637938d525/1770600492965-0C9X5WZMAEGRP67V485F/anim_Option-C_Groovy_rain_idle+%280-00-03-24%29.png Thesis - Week 02 - Character Designs - Rainy - Idle https://images.squarespace-cdn.com/content/v1/6797e73dcc7f53637938d525/1770600493502-10KFT9O8GGGZ4518Z2ZI/anim_Option-C_Groovy_rain_pat+%280-00-01-12%29.png Thesis - Week 02 - Character Designs - Rainy - Patted https://images.squarespace-cdn.com/content/v1/6797e73dcc7f53637938d525/1770600493955-T9PIDJHIUFTJSFEFSHBY/anim_Option-C_Groovy_rain_sleepy+%280-00-01-20%29.png Thesis - Week 02 - Character Designs - Rainy - Yawning https://images.squarespace-cdn.com/content/v1/6797e73dcc7f53637938d525/1770600494431-FZI1K4GSXI4EH7NMNEN9/anim_Option-C_Groovy_rain_sleepy+%280-00-04-11%29.png Thesis - Week 02 - Character Designs - Rainy - Sleeping https://images.squarespace-cdn.com/content/v1/6797e73dcc7f53637938d525/1770600494929-WJYGH7QQB4LRQUY8H1OK/anim_Option-C_Groovy_rain_stretch+%280-00-01-00%29.png Thesis - Week 02 - Character Designs - Rainy - Stretching https://images.squarespace-cdn.com/content/v1/6797e73dcc7f53637938d525/1770600495506-YNU9SO8GXCKLK0LWQA5I/anim_Option-C_Groovy_rain_water+%280-00-02-00%29.png Thesis - Week 02 - Character Designs - Rainy - Hydrating https://www.lauren-tsao-portfolio.com/thesis/week-01 monthly 0.5 2026-02-01 https://images.squarespace-cdn.com/content/v1/6797e73dcc7f53637938d525/1769730794403-X8DW7QGMS67I6K3TD6QS/figpal_follow.gif Thesis - Week 01 - Concept, Project Plan &amp; Wireframe - Taking a Figpal for a Walk https://images.squarespace-cdn.com/content/v1/6797e73dcc7f53637938d525/1769730797503-80KWAWD8J385NKLOFFCG/figpal_eat.gif Thesis - Week 01 - Concept, Project Plan &amp; Wireframe - Feeding FigPal https://images.squarespace-cdn.com/content/v1/6797e73dcc7f53637938d525/1769730799298-2LK9EH2ZNLR87MY6UDBS/figpal_options.gif Thesis - Week 01 - Concept, Project Plan &amp; Wireframe - Customizing FigPal https://images.squarespace-cdn.com/content/v1/6797e73dcc7f53637938d525/09c5c3da-44f5-446d-aea1-1a84eede6557/comparative_analysis.png Thesis - Week 01 - Concept, Project Plan &amp; Wireframe - Make it stand out Comparative analysis of the Figpals, Shimejis, ChatGPT showcasing their present / absent features. https://images.squarespace-cdn.com/content/v1/6797e73dcc7f53637938d525/c07d8a69-f124-4182-bd3b-120022445af5/FINAL+TIMELINE.jpg Thesis - Week 01 - Concept, Project Plan &amp; Wireframe - Make it stand out Timeline leading up to the end of the thesis project https://images.squarespace-cdn.com/content/v1/6797e73dcc7f53637938d525/fa8cef15-e009-4f88-a50a-7ed73ab4db31/StatCounter-os_combined-ww-monthly-202412-202512.png Thesis - Week 01 - Concept, Project Plan &amp; Wireframe - According to statcounter, Windows dominates over Mac in terms of the desktop operating system global market share. Shown in the image to the right, as of December 2025, Windows owns 59.32% of the share, this is followed by OS X at 14.15%. Based on this data, I have decided to develop MiniKin for Windows users. https://images.squarespace-cdn.com/content/v1/6797e73dcc7f53637938d525/0610d3f0-3069-4d47-b3c3-700de6bdf08c/923927MUEFK.png Thesis - Week 01 - Concept, Project Plan &amp; Wireframe - According to a survey on StatCrunch that gathered 251 responses, 46% of respondents indicated that they mainly used their computers for keeping in touch with friends and family such as email, social, and networking. The second most cited reason is work, at approximately 25% of responses. https://images.squarespace-cdn.com/content/v1/6797e73dcc7f53637938d525/7d6007af-3506-4dfe-8b95-3a4bcf812f6c/virtual-assistants_survey.jpg Thesis - Week 01 - Concept, Project Plan &amp; Wireframe - According to a survey by YouGov, digital assistants are usually used for simple tasks, the most common usage being checking the weather (59%). This is followed by playing music (51%), looking up quick answers online (47%), and setting timers or alarms (40%) respectively. Having this data greatly helps in determining what abilities my MiniKin would have, and tying them with how these abilities would benefit users that usually use their computers for work purposes. https://images.squarespace-cdn.com/content/v1/6797e73dcc7f53637938d525/1769899751112-DCXM60AD7XYQAV43QT4V/procreate_character-exploration_sketches.jpg Thesis - Week 01 - Concept, Project Plan &amp; Wireframe - Exploring character shapes https://images.squarespace-cdn.com/content/v1/6797e73dcc7f53637938d525/1769899752387-AYLH8WMUDUKRT7UKAVQI/sketchboook_character-exploration_states_01.jpg Thesis - Week 01 - Concept, Project Plan &amp; Wireframe - Exploring character states https://images.squarespace-cdn.com/content/v1/6797e73dcc7f53637938d525/1769899838075-409GEH79BMOLQRYEZ43Z/sketchboook_character-exploration_states_02.jpg Thesis - Week 01 - Concept, Project Plan &amp; Wireframe - exploring more character states https://images.squarespace-cdn.com/content/v1/6797e73dcc7f53637938d525/3b42b223-f7fb-46cc-81f8-2150f4dd8e22/figma_character_exploration.jpg Thesis - Week 01 - Concept, Project Plan &amp; Wireframe - Make it stand out Whatever it is, the way you tell your story online can make all the difference. https://images.squarespace-cdn.com/content/v1/6797e73dcc7f53637938d525/c7fbd8a9-479b-4503-a422-7251f467d3aa/Character-Design_Survey.png Thesis - Week 01 - Concept, Project Plan &amp; Wireframe - Make it stand out Whatever it is, the way you tell your story online can make all the difference. https://www.lauren-tsao-portfolio.com/home daily 1.0 2026-02-26