https://mengmingluo.com Mengming Luo Tue, 15 Jun 2021 18:48:32 +0000 https://mengmingluo.com en https://mengmingluo.com/index-html Sat, 05 Jun 2021 06:31:53 +0000 Mengming Luo https://mengmingluo.com/index-html html{ scroll-behavior: smooth; } h2 { font-family: "Work Sans" !important; font-size:4.2rem !important; } .audio_nav{ align-items: bottom; } hr{ padding-top:-10px; } iframe{ z-index:-1000px; overflow:hidden !important; } .case-study-title{ font-size: 150% !important; color: #7e7e7e !important; } /* .section-heading{ border-left: 4px solid black; padding-left:30px !important; } */ .work-sans{ font-family: "Work Sans", Icons /*!Google*/ !important; font-size: 150% !important; } .arrow1 { animation: slide1 1s ease-in-out infinite; margin-left: 9px; line-height: 0; font-size:2rem; } @keyframes slide1 { 0%, 100% { transform: translate(0, 0); } 50% { transform: translate(0px, 10px); } } Portfolio Notes About Meng Ming I’m Mengming: product designer and HCI student. 🤸‍ I love learning about the relationships we hold with our tools, others, and ourselves. In the meantime, I am enjoying explorations with the wonderful team at the Design Lab of UCSD. ︎Emailmengmingluo1@gmail.com ︎Resume Resume&nbsp; ︎ 1 • Product Design&nbsp; <img width="2095" height="1247" width_o="2095" height_o="1247" data-src="https://freight.cargo.site/t/original/i/382193d5146bd8ed0ba56da9beb1e4b0ef3c12054ab866ec0b750d7f9cc91ea2/Device---Macbook-Air.png" data-mid="120358706" border="0" data-scale="100" src="https://freight.cargo.site/w/1000/i/382193d5146bd8ed0ba56da9beb1e4b0ef3c12054ab866ec0b750d7f9cc91ea2/Device---Macbook-Air.png" /> Web Development + Interaction Design ChronoViz WebResearch Apprentice • Design Lab •&nbsp; Spring 2020 (Ongoing) A tool for “highlighting” and annotating ranges of time-based media, for ethnographic research. <img width="2041" height="890" width_o="2041" height_o="890" data-src="https://freight.cargo.site/t/original/i/580ab6b4ef6ee657ba805732132d61ebfa3f0f1d3e5361f6a42317bed16dd5c2/Frame-571.png" data-mid="111785984" border="0" data-scale="100" alt="Screenshots of our Squarespace redesign, framed by Macbooks. " data-caption="Screenshots of our Squarespace redesign, framed by Macbooks. " src="https://freight.cargo.site/w/1000/i/580ab6b4ef6ee657ba805732132d61ebfa3f0f1d3e5361f6a42317bed16dd5c2/Frame-571.png" /> Product Design Reimagining Squarespace for AccessibilityDesign Frontiers Designathon • First Place •&nbsp; Spring 2021&nbsp; Promoting accessibility through a well-known content management system ​(CMS).&nbsp; <img width="400" height="400" width_o="400" height_o="400" data-src="https://freight.cargo.site/t/original/i/e570644ae2b9902112f6903d5b340133d06f4bf5763435dafa4c9a7c535d5b01/G6-iphone-family_flat_archer_OUS_6.1_400x400.png" data-mid="110416701" border="0" data-scale="100" alt="Dexcom's Diabetes Management Applications" data-caption="Dexcom's Diabetes Management Applications" src="https://freight.cargo.site/w/400/i/e570644ae2b9902112f6903d5b340133d06f4bf5763435dafa4c9a7c535d5b01/G6-iphone-family_flat_archer_OUS_6.1_400x400.png" /> Product DesignDesigning for Diabetes ManagementIndustry • Dexcom Continuous Glucose Monitoring •&nbsp; Fall 2019Mobile experiences empowering users to request sensor replacements on their own terms.&nbsp; <img width="716" height="469" width_o="716" height_o="469" data-src="https://freight.cargo.site/t/original/i/a412241bbbbbfee7569ce307125c72f491615d3fbbbcbbec93321364d9121f58/ezgif.com-crop-1.gif" data-mid="110416721" border="0" alt="Screenshot of my browser extension." data-caption="Screenshot of my browser extension." src="https://freight.cargo.site/w/716/i/a412241bbbbbfee7569ce307125c72f491615d3fbbbcbbec93321364d9121f58/ezgif.com-crop-1.gif" /> Web Dev + Product Design Intentive Side Project •&nbsp; Ongoing A tiny browser extension to combat internet distraction. <img width="1154" height="925" width_o="1154" height_o="925" data-src="https://freight.cargo.site/t/original/i/265a9f8c322c7ca634de6c44798646686769e7c87040e3be77e7a89b8362c496/Frame-41.png" data-mid="110416718" border="0" data-scale="100" alt="Screenshot of the upper half of my poster design. " data-caption="Screenshot of the upper half of my poster design. " src="https://freight.cargo.site/w/1000/i/265a9f8c322c7ca634de6c44798646686769e7c87040e3be77e7a89b8362c496/Frame-41.png" /> Visual DesignLecture Series Poster Design October 16 - 18, 2020 Exploring information heirarchy through layout and typography. <img width="488" height="307" width_o="488" height_o="307" data-src="https://freight.cargo.site/t/original/i/e6df4553d757a644695c309322eef06803fe71b89b289ef3c68977260fcc956d/ezgif.com-crop.gif" data-mid="110416720" border="0" data-scale="83" alt="Gif of the conference design, featuring an interactive code sketch." data-caption="Gif of the conference design, featuring an interactive code sketch." src="https://freight.cargo.site/w/488/i/e6df4553d757a644695c309322eef06803fe71b89b289ef3c68977260fcc956d/ezgif.com-crop.gif" /> Leadership + UX DesignACM UCSD Conference 2021 Fall 2020 - Present Leading the Design team behind UCSD’s first major Association for Computing Machinery Conference. ︎ 2 • Experiments in ComputingArtifacts I create outside of design! Everything below is self-directed unless otherwise stated. <img width="450" height="253" width_o="450" height_o="253" data-src="https://freight.cargo.site/t/original/i/a1b117d78ef21c06aca1cf21c0afdd36dcff52f7b283d06afbeeee7b76e5f3e3/ezgif.com-crop.gif" data-mid="110416703" border="0" data-scale="100" alt="Girl dragging her finger on a wall, with code art graphics trailing behind her finger." data-caption="Girl dragging her finger on a wall, with code art graphics trailing behind her finger." src="https://freight.cargo.site/w/450/i/a1b117d78ef21c06aca1cf21c0afdd36dcff52f7b283d06afbeeee7b76e5f3e3/ezgif.com-crop.gif" /> Wizard-of-Oz Prototyping,&nbsp;Creative Computing (p5.js) Interactive ‘Smart’ Light&nbsp;Turning any surface into a tangible user interface. Note: this is a SIMULATION prototype, not the real thing.&nbsp; <img width="600" height="338" width_o="600" height_o="338" data-src="https://freight.cargo.site/t/original/i/b7eecaedf989c3cfbce81136b3598d3c6a2c6fb32d85ebd8c043cef4c2716542/ezgif.com-video-to-gif-5.gif" data-mid="110416704" border="0" data-scale="84" alt="Girl highlighting a book quote with her finger, light trailing behind her finger." data-caption="Girl highlighting a book quote with her finger, light trailing behind her finger." src="https://freight.cargo.site/w/600/i/b7eecaedf989c3cfbce81136b3598d3c6a2c6fb32d85ebd8c043cef4c2716542/ezgif.com-video-to-gif-5.gif" /> Wizard-of-Oz Prototyping ‘Smart’ Highlight Inspired by Berg Studios, using paper to prototype a digital highlight for physical books. Note: this too is a SIMULATION prototype. <img width="800" height="450" width_o="800" height_o="450" data-src="https://freight.cargo.site/t/original/i/2d5597b9693da1786e5f113adc4edeabd5f6d365e37b5e0db47b8b3b3c17719d/ezgif.com-video-to-gif-6.gif" data-mid="110416706" border="0" alt="A small mechanical toy with stop motion animations inside." data-caption="A small mechanical toy with stop motion animations inside." src="https://freight.cargo.site/w/800/i/2d5597b9693da1786e5f113adc4edeabd5f6d365e37b5e0db47b8b3b3c17719d/ezgif.com-video-to-gif-6.gif" /> Physical Computing, EducationShowbox: a Mechanical Theatre&nbsp;An educational toy for kids to fill with their own stop-motion animations. <img width="961" height="540" width_o="961" height_o="540" data-src="https://freight.cargo.site/t/original/i/75f06f022a95a7f6fd837bbf46e835fd6f727e19379c319e244662a6cc9b7181/pasted-image-0.png" data-mid="110416707" border="0" data-scale="85" alt="Screenshot of a slide from the &quot;playful computing&quot; workshop" data-caption="Screenshot of a slide from the &quot;playful computing&quot; workshop" src="https://freight.cargo.site/w/961/i/75f06f022a95a7f6fd837bbf46e835fd6f727e19379c319e244662a6cc9b7181/pasted-image-0.png" /> EducationPlayful Computing Workshop A workshop to introduce highschoolers to Human-Computer Interaction through the lens of creative computing. ︎ 3 • Other Odds and EndsArt + creative computing. Find more here.&nbsp; <img width="600" height="338" width_o="600" height_o="338" data-src="https://freight.cargo.site/t/original/i/4dafda4012f5736cc33360a2c8802d263ba7187fd0b02266cccbb5f80b16016a/ezgif.com-optimize-14.gif" data-mid="110416711" border="0" alt="A toy I made out of paper and paperclips. Looks like a small running box." data-caption="A toy I made out of paper and paperclips. Looks like a small running box." src="https://freight.cargo.site/w/600/i/4dafda4012f5736cc33360a2c8802d263ba7187fd0b02266cccbb5f80b16016a/ezgif.com-optimize-14.gif" /> PhysicalPaper Mechanica Prototyping expressive papercrafts with paperclips <img width="600" height="438" width_o="600" height_o="438" data-src="https://freight.cargo.site/t/original/i/f700dcc637059f09bc221892e35ee4ed8cb4c796bc7ee9ca07d9c700b487d316/ezgif.com-video-to-gif-11.gif" data-mid="110416712" border="0" data-scale="70" alt="A gif of one of my code arts: a dancing polyhedron." data-caption="A gif of one of my code arts: a dancing polyhedron." src="https://freight.cargo.site/w/600/i/f700dcc637059f09bc221892e35ee4ed8cb4c796bc7ee9ca07d9c700b487d316/ezgif.com-video-to-gif-11.gif" /> HTML/CSS, p5.jsHTML Letters Writings bundled in p5.js <img width="1851" height="856" width_o="1851" height_o="856" data-src="https://freight.cargo.site/t/original/i/64dbc176668f55080a2464a68b6a3a8a783ead5f51584a0aa90ce3e5a494a501/mengluo3-github.PNG" data-mid="110416708" border="0" data-scale="100" alt="A screenshot of my first html website, with a fish swimming in the middle." data-caption="A screenshot of my first html website, with a fish swimming in the middle." src="https://freight.cargo.site/w/1000/i/64dbc176668f55080a2464a68b6a3a8a783ead5f51584a0aa90ce3e5a494a501/mengluo3-github.PNG" /> HTML/CSSmengluo3.github.io&nbsp;My first site, for sentimental reasons. <img width="1999" height="1298" width_o="1999" height_o="1298" data-src="https://freight.cargo.site/t/original/i/a86ef0ee036576b6f9a47ee0e961741d6ad30abffde64c24465c3e39ea3a51e3/Final.JPG" data-mid="110416694" border="0" data-scale="85" alt="An illustration with a man sitting in a river full of letters." data-caption="An illustration with a man sitting in a river full of letters." src="https://freight.cargo.site/w/1000/i/a86ef0ee036576b6f9a47ee0e961741d6ad30abffde64c24465c3e39ea3a51e3/Final.JPG" />Illustration For a Moment Like a Lonely Island llustration for Hengtee Lim’s short story, “For a Moment Like a Lonely Island” <img width="1173" height="858" width_o="1173" height_o="858" data-src="https://freight.cargo.site/t/original/i/df3cc2680fb0b6a3be2c69fccf338bdc52073902981ac06f0705458d4cc57295/evolution_ss.PNG" data-mid="110416692" border="0" alt="An illustration with a gorilla lying in a couch, an ape stepping from a set of human jaws, and a man running in a suit and tie." data-caption="An illustration with a gorilla lying in a couch, an ape stepping from a set of human jaws, and a man running in a suit and tie." src="https://freight.cargo.site/w/1000/i/df3cc2680fb0b6a3be2c69fccf338bdc52073902981ac06f0705458d4cc57295/evolution_ss.PNG" /> IllustrationEvolved to Exercise Inspired by Scientific Article: “Evolved to Exercise” by Herman Pontzer <img width="494" height="494" width_o="494" height_o="494" data-src="https://freight.cargo.site/t/original/i/692967a55a713a3561b5924213fb2c3f4220fa25dc1a07f581ecd342633c405b/duplicitous.jpg" data-mid="110416709" border="0" data-scale="65" alt="A shadow sculpture of a man's face, looking somber." data-caption="A shadow sculpture of a man's face, looking somber." src="https://freight.cargo.site/w/494/i/692967a55a713a3561b5924213fb2c3f4220fa25dc1a07f581ecd342633c405b/duplicitous.jpg" />Shadow SculptureDuplicitous Playing around with shadows.&nbsp; https://mengmingluo.com/SS Tue, 15 Jun 2021 18:48:32 +0000 Mengming Luo https://mengmingluo.com/SS Portfolio Notes About ︎Back <img width="2041" height="890" width_o="2041" height_o="890" data-src="https://freight.cargo.site/t/original/i/580ab6b4ef6ee657ba805732132d61ebfa3f0f1d3e5361f6a42317bed16dd5c2/Frame-571.png" data-mid="111473821" border="0" data-scale="74" alt="Mockups of our Redesign Interface" data-caption="Mockups of our Redesign Interface" src="https://freight.cargo.site/w/1000/i/580ab6b4ef6ee657ba805732132d61ebfa3f0f1d3e5361f6a42317bed16dd5c2/Frame-571.png" /> Reimagining Squarespace for Accessibility Design Frontiers, 2021 First Place Team Mengming Luo: Product Design&nbsp; Tasha McFarland: Product Design Phoebe Yan: UX Research Sanskriti Negi: UX Research Timeline May 20 - May 26, 2021 6 days OVERVIEW 1,000,000,000+ Individuals with Disabilities Worldwide 1,000,000+ Squarespace Users 18,000+ Squarespace Online Stores PROBLEMThousands of small businesses use Squarespace...&nbsp; yet Squarespace sites lack accessibility support... alienating low-vision/blind users.&nbsp; SOLUTIONOur team explores features to transform Squarespace into not only a tool that creates accessible sites... but also strategically take advantage of its mass user base...to turn it into an entrypoint for accessibility awareness within the wider web ecosystem. WATCH OUR VIDEO SUMMARY CONTEXT 6&nbsp; days 4 teammates 1st place This project took place in&nbsp;Design Frontiers, an annual designathon run by UCSD Design Co. As a team of 4, we had a total of 6 days to rapidly: 🔎 Needfind → 💡 Ideate &amp; Validate → ✏️ Prototype → 💻 User Test → 🔄 Iterate → 🎤 Pitch our Project to Fjord Industry Judges RESULTAfter 6 days of rapid sprinting, we presented our project to industry judges from Fjord. To our surprise we won first place! We chalk our win up to a mix of strategy, design, and&nbsp; the individuals in the low-vision/blind communities whose insights carried us forward.&nbsp; INSPIRATION DIALOGUE WITH ACCESSIBILITY ADVOCATE PRIMARY USER RESEARCH: Jimmy As a part of a web accessibility project at UCSD, I (Mengming) had ties with Jimmy — the university disabilities specialist, and member of the low-vision/blind community. The project began in dialogue when he mentioned a major insight of his: thousands of websites are created with content management systems (CMS), yet navigating those websites with a screenreader is a major frustration.&nbsp; He cited his own experience with Squarespace and provided a demonstration with his screenreader, showcasing the many obstacles.&nbsp; PRIMARY USER RESEARCH: Jason For additional user research, we interviewed Jason, a system developer who had been blind since birth. During the primary user interview, he explained how he does his daily work through a screenreader, emphasizing that often he requires the aid of his sighted partner to navigate sites with accessibility issues.&nbsp; IDEATION We ideated 3 potential approaches:&nbsp; <img width="512" height="512" width_o="512" height_o="512" data-src="https://freight.cargo.site/t/original/i/eb2907e069b46bf051df7263324e62974186175a20a891045bb9a35aad792f31/plugin-512.png" data-mid="111454843" border="0" data-scale="41" src="https://freight.cargo.site/w/512/i/eb2907e069b46bf051df7263324e62974186175a20a891045bb9a35aad792f31/plugin-512.png" /> Browser Extension A browser extension to describe images and alt text, either with machine-generated text or crowdsourced captions, similar to plug-ins such as a11y and hypothes.is. Pro's: Can address issues across multiple sites, not just sites created with a specific CMS like Squarespace, etc. Con's: Without prior awareness of accessibility, users have little incentive to seek out a browser extension Difficult to address accessibility issues beyond alt text. Is a retroactive fix, rather than a part of the site design process itself. <img width="240" height="240" width_o="240" height_o="240" data-src="https://freight.cargo.site/t/original/i/a75ec8709aa85b665b738110f8fad6c8b82578d5dcca0a2c6199805db31f8d77/sparkles-microsoft.png" data-mid="111454998" border="0" data-scale="34" alt="Sparkles Emoji" data-caption="Sparkles Emoji" src="https://freight.cargo.site/w/240/i/a75ec8709aa85b665b738110f8fad6c8b82578d5dcca0a2c6199805db31f8d77/sparkles-microsoft.png" /> Design a New CMS from Scratch: Build from scratch a competitor CMS to Squarespace, Wix, Weebly, etc. Pro's: Presents the opportunity for accessibility improvement on the creator AND consumer side. Con's: Does not address the thousands of websites already created through Squarespace Squarespace already has gathered a mass user base <img width="543" height="452" width_o="543" height_o="452" data-src="https://freight.cargo.site/t/original/i/1d53bc06734054be094b3dfac63b421a6c652df1c586f582d6fdfe4b16f5ed22/squarespace-logo.jpg" data-mid="111454759" border="0" data-scale="47" alt="Squarespace Logo" data-caption="Squarespace Logo" src="https://freight.cargo.site/w/543/i/1d53bc06734054be094b3dfac63b421a6c652df1c586f582d6fdfe4b16f5ed22/squarespace-logo.jpg" /> Redesign Squarespace: Integrate accessibility awareness and checks into the already existing Squarespace interface. Pro's: Squarespace has a large pre-existing user base (over 1 million users). Thousands of pre-existing small business already employ Squarespace. Con's: Little opportunity for accessibility improvement on the creator-side. Ultimately, we chose to redesign Squarespace. Why?&nbsp; Though the browser extension and new CMS both have their advantages, neither options would be easily discoverable in competition with Squarespace’s mass user base, and neither address the thousands of sites already created with Squarespace. In addition, as a prominent CMS service, Squarespace sets an example for other CMS companies, modeling whether or not accessibility is worth prioritizing. Overall, with its massive user population, Squarespace’s popularity makes it a major leverage point for social change within the wider web ecosystem. GOALS 1. ACCESSIBILITY: Make SS (Squarespace) sites easier to navigate for screenreader users 2. LEARNING: Allow site creators to learn from accessibility mistakes, immediately.&nbsp; 3. EMPATHY: Make the low-vision/blind user’s experience more tangible for sighted users through videos of the actual screenreading experience.&nbsp; FEATURES We designed checks for undescriptive links, alt text, missing heading levels, contrast, and more. Features fell into three general categories: 1. Proactive Education Since many sighted users lack a mental model of how screenreaders work, to help build awareness and education, we baked in tips and videos throughout the interface. For example: “Heading Levels” checker Heading levels (h1, h2, h3, etc) are important because they allow screenreader users to “skim” through a page — the equivalent to a sighted user scrolling through a page to glance through its contents.&nbsp; In our example Heading Level checker, we include:1. A description of what heading levels are, 2. A description of why they are important, and 3. A video showing a screenreader user interacting with headings, So the user can identify and fix their mistakes. 2. Auto-Check Accessibility is easier to manage in bits throughout the design process, as opposed to one giant retro-active fix at the end. Auto-check automatically detects accessibility issues and prompts the user to make changes. For example: Contrast Checker Here the user is immediately notified of low contrast text. Then they are taken directly to the color picker to help correct it: Another example: Alt Text Check The user is notified of missing alt text and taken to Squarespace’s image settings:&nbsp; 3. Accessibility Panel Thirdly, we centralized all accessibility fixes in one convenient panel, in line with Squarespace’s pre-existing design patterns. For example: Final CheckIf the user tries to publish changes, they are notified of any unresolved accessibility issues. For example, here, the user still has remaining link issues on their “Travel” page. Another example: Grayscale Checker In the accessibility panel, the user may view their site in grayscale to check for colorblind acessibility: USER RESEARCH &amp; ITERATION METHODS:&nbsp; Due to limits on time, we tested our prototype on two users, walking them through a series of tasks and asking them to think aloud.&nbsp; Both participants were sighted, aged 23-24 years old, with experience with Wix, Wordpress, and Weebly. RESULTS: “I did not know anything about accessibility or even we have that integrated in our phones or computer! Today is the first time I am hearing about this. This brings a whole other perspective of how they can use these features or even how I can benefit from these features as well.” “I like how it provides error messages as a reminder to design my websites with accessibility. I have never encountered anyone with disability nor do I know how they access online services.” The main categories of critical feedback we received were:&nbsp; 1. Reduce Technical Jargon Since our participants did not have web development background, technical jargon such as “contrast ratio,” “heading level,” and “screenreader” were unclear without explanation. To address this, we simplified our explanations throughout the interface to be better understood by everyone. For example, in the contrast checker, rather than including numerical information on the contrast ratio, we provide only the minimum necessary feedback for corrections: <img width="949" height="855" width_o="949" height_o="855" data-src="https://freight.cargo.site/t/original/i/b3b000969b44737e90e922cccd3e65576653c7715c8845464de4e6f97cfa02e5/Frame-574_2.png" data-mid="111652967" border="0" data-scale="70" alt="Our design before and after simplifying explanations on contrast. " data-caption="Our design before and after simplifying explanations on contrast. " src="https://freight.cargo.site/w/949/i/b3b000969b44737e90e922cccd3e65576653c7715c8845464de4e6f97cfa02e5/Frame-574_2.png" /> &nbsp; 2. Spread Accessibility Awareness Despite prior experience with CMS, the participants had little knowledge about accessibility, due to lack of contact with screenreader users. To address this, we baked in videos showcasing how screenreader users would interact with site elements. For example, in the heading levels checker, we add videos with a screenshot from an actual screenreader heading list.&nbsp; <img width="949" height="673" width_o="949" height_o="673" data-src="https://freight.cargo.site/t/original/i/fddd17f5a95e850dcf2af6c871c5d9c2d4fcb67f4a8498ec5279ce84f7716aab/Frame-575.png" data-mid="111653908" border="0" data-scale="75" alt="Our design before and after adding video-mockups on the screenreading experience. " data-caption="Our design before and after adding video-mockups on the screenreading experience. " src="https://freight.cargo.site/w/949/i/fddd17f5a95e850dcf2af6c871c5d9c2d4fcb67f4a8498ec5279ce84f7716aab/Frame-575.png" /> NEXT STEPS 1. PRIORITIZE OTHER FEATURES There are other common accessibility features we have yet to address, such as aria labels, form labels, etc.&nbsp; 2. EMPHASIZE THE HUMAN ELEMENT BEHIND ACCESSIBILITY User research revealed that much of the public has never met someone who requires a screenreader, and therefore cannot visualize the struggles of a low-vision/blind user.&nbsp; With more time, I would love to further explore other methods (interactive explanations, videos, etc) featuring real low-vision/blind users navigating a site, thereby (1) decreasing text, and (2) emphasizing the human struggle behind accessibility. The aim is to showcase less of the technical HOW in accessibility, and more of the social WHY. 3. ACCESSIBILITY FOR CREATORSUltimately, to expand this project to a more powerful scope, we would step beyond accessibility for viewers only, redesigning the CMS entirely to allow screenreader users to build an online presence to market and express themselves. REFLECTIONS 1. IMPORTANCE OF DIALOGUE WITH TARGET COMMUNITY We did not want to walk in with a savior complex, believing that we sighted designers knew what was best for our main stakeholders in the low-vision/blind community.&nbsp; Our project was built on pre-existing relationships with members of our community, and their insights played a core part in establishing the foundations of our project. 3. SOCIAL LAYER Despite having participated in UCSD’s web accessibility project, I am wholly still learning (in fact I am certain my site still likely has accessibility issues despite having tried to fix most of them). This redesign was partially informed by my own experience (or inexperience) with web accessibility prior to joining UCSD’s web accessibility project. With a design background, I knew the accessibility basics (alt text, contrast, etc), but had never interacted with someone using a screenreader, and therefore could not even begin to visualize what a screenreader interaction would look like. Through the UCSD web accessibility project, Jimmy’s demonstrations made the “screenreader” a tangible concept, highlighting the barriers in navigating a web built for someone else (sighted users). Moral: I don’t think I was alone in my lack of awareness around accessibility. This experience emphasized the importance of not only providing tools to learn from accessibility mistakes, but also experiences (either in real life, video, etc) that make the struggles of screenreader users more tangible to sighted users. Ultimately it’s about building empathy (and we are all still learning!) (Also: Jimmy’s a champ.) For Funsies MORE ARTIFACTS More artifacts from behind-the-scenes!&nbsp; <img width="830" height="579" width_o="830" height_o="579" data-src="https://freight.cargo.site/t/original/i/103aa8131e3152b3a21a7c78fac4fa49ca3c9e079c78dd76de807b85dd7d87ca/image-30.png" data-mid="111661956" border="0" alt="Collaborating remotely with time zone differences, we made heavy use of asynchronous tools like Loom." data-caption="Collaborating remotely with time zone differences, we made heavy use of asynchronous tools like Loom." src="https://freight.cargo.site/w/830/i/103aa8131e3152b3a21a7c78fac4fa49ca3c9e079c78dd76de807b85dd7d87ca/image-30.png" /> <img width="384" height="342" width_o="384" height_o="342" data-src="https://freight.cargo.site/t/original/i/12a88e29acc08d4db5dda0c32bc2b25fa2bc325be3139b6bc4dc423444d97258/image-1.png" data-mid="111477070" border="0" alt="Battle cries upon finishing our presentation" data-caption="Battle cries upon finishing our presentation" src="https://freight.cargo.site/w/384/i/12a88e29acc08d4db5dda0c32bc2b25fa2bc325be3139b6bc4dc423444d97258/image-1.png" /> <img width="743" height="460" width_o="743" height_o="460" data-src="https://freight.cargo.site/t/original/i/72d3672fed1328fd1251cebbf9bcd21e3a16a9d6a41051ab291810636bac02f5/discord-1.png" data-mid="111476660" border="0" alt="Our Discord server, where we kept track of threads for design decisions, strategy, reflections, and more." data-caption="Our Discord server, where we kept track of threads for design decisions, strategy, reflections, and more." src="https://freight.cargo.site/w/743/i/72d3672fed1328fd1251cebbf9bcd21e3a16a9d6a41051ab291810636bac02f5/discord-1.png" /> <img width="902" height="541" width_o="902" height_o="541" data-src="https://freight.cargo.site/t/original/i/42f83749d40f979a109a0a93ccb622495dc048b52bb485422ad186ea3806f970/team-squarepants-photo-1-1.png" data-mid="111476770" border="0" alt="Team Squarepants" data-caption="Team Squarepants" src="https://freight.cargo.site/w/902/i/42f83749d40f979a109a0a93ccb622495dc048b52bb485422ad186ea3806f970/team-squarepants-photo-1-1.png" /> <img width="524" height="491" width_o="524" height_o="491" data-src="https://freight.cargo.site/t/original/i/6a7dcb74f2ce2354540bc2ea9386f6b4e41b82b8cb713be1309bc4a7d25719e5/prototype_figma-1.png" data-mid="111477069" border="0" alt="Our Figma screens, on their n-th iteration, organized by feature and stage in the user flow." data-caption="Our Figma screens, on their n-th iteration, organized by feature and stage in the user flow." src="https://freight.cargo.site/w/524/i/6a7dcb74f2ce2354540bc2ea9386f6b4e41b82b8cb713be1309bc4a7d25719e5/prototype_figma-1.png" /> THANK YOU TO JIMMYFor his major role and core insight to the low-vision/blind community TO OUR TEST PARTICIPANTSFor their time and invaluable feedbackTO DESIGN CO &amp; FJORDFor organization and sponsorship of Design Frontiers 2021TO MY AWESOME TEAMMATESFor an awesome experience :) https://mengmingluo.com/Browser-Extension Sat, 05 Jun 2021 06:31:56 +0000 Mengming Luo https://mengmingluo.com/Browser-Extension .quote{ border-left: 4px solid black; padding-left:30px; margin-left:-30px; } Portfolio Notes About ︎Back SkillsWeb DevelopmentUser ResearchUser TestingInteraction DesignVisual Design ToolsHTML/CSSJavaScript Personal Project The Team! Me: UX Design + Web Development Austin Roddick:&nbsp;User Research&nbsp; Duration STILL BUILDING Intentive: a Browser Extension When webpages are abundant with potential distractions, how can we regain control of our time and energy?&nbsp; [Excuse the clutter, page is under construction!] "People should be able to benefit from the abundance and availability of information, rather than suffer from a lack of ability to process and consume it." - Xiang 'Anthony' Chen 1.&nbsp;Problem Even when users navigate to a webpage with a specific goal in mind, they are often distracted by other page content, sometimes losing recall of the initial intent which brought them to the page in the first place. 2. Observations Users have “tasks” and “subtasks.” They often record tasks in other windows, and retain subtasks in cognitive storage, not recording them at all.&nbsp; Users are most likely to get distracted when stuck on a problem. After returning from distractions, they forget the specific sub-task they were working on.Users may pursue multiple tasks simultaneously. This results in an overwhelming number of 20+ tabs open.Landscape analysis reveals a lack of in-browser to-do lists in the market.&nbsp; <img width="2048" height="2048" width_o="2048" height_o="2048" data-src="https://freight.cargo.site/t/original/i/b93b0a31f5d064ea1938051895d16dd47da6ec804aa6a3c4e348c7d40b9a390d/ELxKdc1UEAA4BkR.jpg" data-mid="110416730" border="0" src="https://freight.cargo.site/w/1000/i/b93b0a31f5d064ea1938051895d16dd47da6ec804aa6a3c4e348c7d40b9a390d/ELxKdc1UEAA4BkR.jpg" /> 3. Goal Design a task-reminder that is: short-term (dedicated to “subtasks”), and in-browser.&nbsp; 4. Solution A browser extension, which prompts users for their initial motivations upon opening a window, and sticks their answer in a “sticky note” on the page. This page (and the extension itself) is under construction. More details in the slide deck here! https://mengmingluo.com/CV-Web Sat, 05 Jun 2021 06:31:58 +0000 Mengming Luo https://mengmingluo.com/CV-Web .quote{ border-left: 4px solid black; padding-left:30px; margin-left:-30px; } img{ border: solid; border-color: rgb(200, 200, 200); border-width:0.7px; } Portfolio Notes About ︎Back ChronoViz Web A software tool for annotating ranges of time-based media, for ethnographic research. DESIGN LAB Duration:&nbsp; &nbsp; &nbsp; Ongoing Early Prototype Stage Mentor:&nbsp; &nbsp; &nbsp; Steven Rick Skills:&nbsp; &nbsp;&nbsp; Web DevelopmentInteraction Design Tools:&nbsp; &nbsp; &nbsp; HTML/CSSJavaScriptFigma 01. INTRO <img width="600" height="398" width_o="600" height_o="398" data-src="https://freight.cargo.site/t/original/i/365ad1498960b36681219461329544fa6b1ee71220871f5069377221e7dc059d/ezgif.com-video-to-gif-15.gif" data-mid="110416742" border="0" data-scale="80" src="https://freight.cargo.site/w/600/i/365ad1498960b36681219461329544fa6b1ee71220871f5069377221e7dc059d/ezgif.com-video-to-gif-15.gif" /> Fig 0. Highlights from Rune Madsen’s“Geometric Composition” Highlighting and annotating — these are techniques for knowledge exploration. Through these techniques we clip information to later revisit, respond, or recombine.Ethnographers often record multiple sets of time-linked data (e.g. video and audio) on a subject’s interactions with the world around them. They draw insight from these recordings by annotating observations.&nbsp;ChronoViz is a software tool that streamlines that ethnographic annotation process. However, it currently exists only as an macOS app. My goal is to rethink and build ChronoViz for the web. Currently I am in the early prototype stage, learning development as I go. 02. BACKGROUND What data does ChronoViz analyze? <img width="600" height="489" width_o="600" height_o="489" data-src="https://freight.cargo.site/t/original/i/d47426a97beb2934402c9c99f843a88caa6ee6d5b7fb52ea7204e8c0874b39d1/ezgif.com-video-to-gif-17.gif" data-mid="110416743" border="0" data-scale="87" src="https://freight.cargo.site/w/600/i/d47426a97beb2934402c9c99f843a88caa6ee6d5b7fb52ea7204e8c0874b39d1/ezgif.com-video-to-gif-17.gif" />Fig 1. Screen recordings (video) are an example of temporal data. Note the brief pause between paragraphs. Why did the participant stop writing? <img width="600" height="336" width_o="600" height_o="336" data-src="https://freight.cargo.site/t/original/i/365b89d3306cce7194fa16a1d8c6bb9c8973769d15a17489277965d4f51ea028/ezgif.com-optimize-13.gif" data-mid="110416744" border="0" src="https://freight.cargo.site/w/600/i/365b89d3306cce7194fa16a1d8c6bb9c8973769d15a17489277965d4f51ea028/ezgif.com-optimize-13.gif" /> Fig 2. Offscreen view of participant typing. Without this second synced recording, the context around the pause in the first screen (Fig 1) would remain unknown.&nbsp; Ethnographers often record a single event from multiple angles. Doing so provides a rich dataset that captures not only their research subject, but the context the subject acts within. How are multiple events interlinked? Correlated? Reacting to one another? 03. PROBLEM SPACE What problem does ChronoViz solve? However, manually entering time-stamped annotations is a tedious process full of pain points for even a single stream of temporal data, let alone multiple. The process involves repetitive pausing, video-scrubbing, and typing to capture infinitesimal moments in time: <img width="534" height="178" width_o="534" height_o="178" data-src="https://freight.cargo.site/t/original/i/a9d4147606ae36391597d445c13340116936655add01288c14c3d8f927b3ab74/ezgif.com-video-to-gif-14.gif" data-mid="110416741" border="0" src="https://freight.cargo.site/w/534/i/a9d4147606ae36391597d445c13340116936655add01288c14c3d8f927b3ab74/ezgif.com-video-to-gif-14.gif" />Fig 3. Researcher pausing video, then tediously entering time stamp and annotation information into a spreadsheet. ChronoViz syncs multiple streams of temporal data together while providing more intuitive input methods for creating annotations.&nbsp; <img width="1379" height="954" width_o="1379" height_o="954" data-src="https://freight.cargo.site/t/original/i/2102378422f16b5b381686f94b97509e066e1de44052559d5f2a76c523f7e3c4/chronoonon.JPG" data-mid="110416745" border="0" data-scale="58" src="https://freight.cargo.site/w/1000/i/2102378422f16b5b381686f94b97509e066e1de44052559d5f2a76c523f7e3c4/chronoonon.JPG" /> Fig 4. The original macOS ChronoViz application, featuring a flight simulation study with multiple videos, a time series graph, audio waveform, and geographic data. 04. MY ROLE Due to compability issues with new macOS updates, the original ChronoViz application has fallen out of use. Thus, my goal is to build ChronoViz for the web, focusing upon video data, while exploring the wide space of possibility for additional features and interactions. The prototype is still under construction, so stay tuned! Currently building out client-facing UI and interaction.&nbsp; 05. ARTIFACTS Working on ChronoViz Web has meant that interactions with time have been heavy on my mind. In this section I share artifacts, sketches, and tangential thoughts amidst the ongoing building process.1.&nbsp;Spatially Visualizing Time There are two ways to spatially visualize change over the course of time: layering and appending. Fig 5. Some time-based media (i.e. video) to explore the topic of time-based media. 2.Fine-grained annotation is harder for video than textNote-taking on clippings is a pain point that generalizes across all kinds of time-based media (i.e. podcasts &amp; video). For example, say you’re taking notes on a Coursera video within a Notion document: once the note-taking process is over, unless you've noted time-stamps, there's no link to the original specific snippet of video you're referencing. The ties between the two artifacts are lost. Compare this to the ability to directly quote a piece of text within your edited document. It’s much harder to capture a specific idea from a podcast or video without a transcript.&nbsp; Text affords easier annotation. I’m reminded of the two levels of Medium.com comments: inline comments within a blog post, and overall comments available after the blog post. With time-based media, reactions to the whole piece are simple, but reactions to finer-grain snippets are not. 3.Time as a z-dimension In the process of thinking about ChronoViz, I have begun to think of videos as 3-dimensional objects, with video frames on a z-axis (time) passing through our computer screen.&nbsp; <img width="955" height="691" width_o="955" height_o="691" data-src="https://freight.cargo.site/t/original/i/f086dfa6813b8c3ef495655c9e71b5971e9d1394170783ebf08e89749b28e384/3dddd.JPG" data-mid="110416751" border="0" data-scale="58" src="https://freight.cargo.site/w/955/i/f086dfa6813b8c3ef495655c9e71b5971e9d1394170783ebf08e89749b28e384/3dddd.JPG" /> Fig 6. Doodle sketch of ChronoViz feature idea.&nbsp; 4.Process Sketches! In the process of designing the web-app, I sketched initial ideas onto paper: <img width="2448" height="3264" width_o="2448" height_o="3264" data-src="https://freight.cargo.site/t/original/i/36f1ee8c4f57f1b02acc805f1051d116691c48b9eb86a00987274dc4c4f0891f/Untitled1.png" data-mid="110416750" border="0" data-scale="100" src="https://freight.cargo.site/w/1000/i/36f1ee8c4f57f1b02acc805f1051d116691c48b9eb86a00987274dc4c4f0891f/Untitled1.png" /> <img width="2448" height="3264" width_o="2448" height_o="3264" data-src="https://freight.cargo.site/t/original/i/6f14a0a7f01451f6c7628a5fc25a142d3eff8c33ab9d2245d6fec01a95bd39e8/Untitled2.png" data-mid="110416749" border="0" data-scale="79" src="https://freight.cargo.site/w/1000/i/6f14a0a7f01451f6c7628a5fc25a142d3eff8c33ab9d2245d6fec01a95bd39e8/Untitled2.png" /> <img width="2448" height="3264" width_o="2448" height_o="3264" data-src="https://freight.cargo.site/t/original/i/a2242eb5105ba0f0a2530efa02d321438bf2ccb874a8370e21778720970dc118/Untitled3.png" data-mid="110416748" border="0" src="https://freight.cargo.site/w/1000/i/a2242eb5105ba0f0a2530efa02d321438bf2ccb874a8370e21778720970dc118/Untitled3.png" /> <img width="2448" height="3264" width_o="2448" height_o="3264" data-src="https://freight.cargo.site/t/original/i/35dddea941ae09772122376b3bf9f9d485f358dcee4381e033fe3b8ae276701e/Untitled4.png" data-mid="110416747" border="0" data-scale="79" src="https://freight.cargo.site/w/1000/i/35dddea941ae09772122376b3bf9f9d485f358dcee4381e033fe3b8ae276701e/Untitled4.png" /> <img width="2448" height="3264" width_o="2448" height_o="3264" data-src="https://freight.cargo.site/t/original/i/7c809421a0ff5668b28c6548d4e822337345efd023d568dc79fe9a4487c1dfab/Untitled5.png" data-mid="110416746" border="0" src="https://freight.cargo.site/w/1000/i/7c809421a0ff5668b28c6548d4e822337345efd023d568dc79fe9a4487c1dfab/Untitled5.png" /> https://mengmingluo.com/CV-Web-copy Sat, 05 Jun 2021 06:32:01 +0000 Mengming Luo https://mengmingluo.com/CV-Web-copy .quote{ border-left: 4px solid black; padding-left:30px; margin-left:-30px; } img{ border: solid; border-color: rgb(200, 200, 200); border-width:0.7px; } Portfolio Notes About ︎Back ChronoViz Web A software tool for “highlighting” and annotating ranges of time-based media, for ethnographic research. [Page Under Construction] DESIGN LAB Mentor Steven Rick Duration Ongoing Early Prototype Stage SkillsWeb DevelopmentInteraction Design ToolsHTML/CSSJavaScriptFigma Overview ChronoViz Web is a tool that augments a researcher’s ability to observe by allowing them to seamlessly annotate multiple videos at once. I am currently in the process of designing and developing an early prototype. INTRO&nbsp; <img width="201" height="135" width_o="201" height_o="135" data-src="https://freight.cargo.site/t/original/i/b4933a8844ee9e64cb273819098d5bb84b3448b9625c6a15d2ecd1d4d9ce341c/Frame-1.png" data-mid="110416773" border="0" data-scale="100" src="https://freight.cargo.site/w/201/i/b4933a8844ee9e64cb273819098d5bb84b3448b9625c6a15d2ecd1d4d9ce341c/Frame-1.png" /> Who am I designing for? Research ethnographers often record a single event from multiple angles. Doing so provides a rich dataset that captures not only their research subject, but the context the subject acts within. How are multiple events interlinked? Correlated? Reacting to one another?After a session of field work, their data often looks like this — multiple streams of video data: <img width="850" height="242" width_o="850" height_o="242" data-src="https://freight.cargo.site/t/original/i/745265338618f524b2c1bb5bd522f0c3026a7435d9015dbd8fcb0a48377f0e53/Frame-46.png" data-mid="110416775" border="0" data-scale="65" src="https://freight.cargo.site/w/850/i/745265338618f524b2c1bb5bd522f0c3026a7435d9015dbd8fcb0a48377f0e53/Frame-46.png" /> <img width="600" height="489" width_o="600" height_o="489" data-src="https://freight.cargo.site/t/original/i/d47426a97beb2934402c9c99f843a88caa6ee6d5b7fb52ea7204e8c0874b39d1/ezgif.com-video-to-gif-17.gif" data-mid="110416763" border="0" data-scale="71" src="https://freight.cargo.site/w/600/i/d47426a97beb2934402c9c99f843a88caa6ee6d5b7fb52ea7204e8c0874b39d1/ezgif.com-video-to-gif-17.gif" />Fig 1. Screen recordings (video) are an example of temporal data. Note the brief pause between paragraphs. Why did the participant stop writing? <img width="600" height="336" width_o="600" height_o="336" data-src="https://freight.cargo.site/t/original/i/365b89d3306cce7194fa16a1d8c6bb9c8973769d15a17489277965d4f51ea028/ezgif.com-optimize-13.gif" data-mid="110416764" border="0" data-scale="100" src="https://freight.cargo.site/w/600/i/365b89d3306cce7194fa16a1d8c6bb9c8973769d15a17489277965d4f51ea028/ezgif.com-optimize-13.gif" /> Fig 2. Offscreen view of participant typing, pausing to think. Without this second synced recording, the reason behind the paused typing in the first screen (Fig 1) would remain unknown. PROBLEM Annotating temporal data poses unique challenges. Therefore tools behavioral researchers have available for data analysis do not afford for easy annotation of multiple streams of temporal data, like audio and video. &nbsp; WHY I LOVE THIS PROJECT-- <img width="568" height="374" width_o="568" height_o="374" data-src="https://freight.cargo.site/t/original/i/da459e81ceb3b3cbd53a3deae993f7f5b14122a14195ec458fed44ec78341d0e/ezgif.com-gif-maker.gif" data-mid="110416776" border="0" src="https://freight.cargo.site/w/568/i/da459e81ceb3b3cbd53a3deae993f7f5b14122a14195ec458fed44ec78341d0e/ezgif.com-gif-maker.gif" /> GOALMy goal is to design and develop a web tool that allows researchers to: Play multiple videos at once,AND make annotations in the same window,AND visualize those annotations on a timeline,AND add descriptions and tags to annotations,Eliminating tedium for a more seamless video-analysis process. RESPONSIBILITIESAs the sole designer-developer, my role spans multiple domains: 💻 Building a v1 early prototype version of the application in JavaScript,&nbsp; ✒️ Designing the user flow and features in Figma,💬 And soliciting feedback from Design Lab ethnographers by designing and coordinating user testing.&nbsp; Problem Space 01. StakeholdersWho am I designing for? Our main stakeholders are research ethnographers. Take for example, Colleen Emmeneger, an ethnographer studying interactions between pedestrians and autonomous vehicles.&nbsp; Primary Stakeholders: Research EthnographersColleen Emmenneger• Ethnographer of 10+ years experience• Multiple cameras set up, facing driver and road, and stationary cameras set up at intersections <img width="797" height="605" width_o="797" height_o="605" data-src="https://freight.cargo.site/t/original/i/45abc310cda940f3f38424319f48e76b4735b35ed36224d36e4c25a45ec8a9d1/Group-2.png" data-mid="110416774" border="0" data-scale="71" src="https://freight.cargo.site/w/797/i/45abc310cda940f3f38424319f48e76b4735b35ed36224d36e4c25a45ec8a9d1/Group-2.png" /> Colleen ft. her three-camera set up Secondary Stakeholders: Research AssistantsOftentimes other individuals will also annotate the same set of videos to ensure inter-coder reliability. 02. Landscape Analysis What tools does Colleen have at her disposal? Post-study, Colleen wants to annotate these simultaneous video streams to note waves, nods, body language, etc.What tools does she have at her disposal? As you can see, a range of solutions exist, but either the lack of automation makes for a tedious experience, the software is not OS-agnostic, or the software has a learning curve too complex for lighter-weight use cases. 03. Goal Solution? <img width="568" height="374" width_o="568" height_o="374" data-src="https://freight.cargo.site/t/original/i/da459e81ceb3b3cbd53a3deae993f7f5b14122a14195ec458fed44ec78341d0e/ezgif.com-gif-maker.gif" data-mid="110416776" border="0" src="https://freight.cargo.site/w/568/i/da459e81ceb3b3cbd53a3deae993f7f5b14122a14195ec458fed44ec78341d0e/ezgif.com-gif-maker.gif" /> ChronoViz aims to fill the middle ground by:&nbsp; 1. Providing automated features such as multi-media playing and annotation.&nbsp; 2. Being OS-agnostic through development via web.&nbsp; 3. Reducing the learning curve with a relatively simple and intuitive workflow.&nbsp; Process 01. User Journey Feature identification I began by identifying a frame for the main user flow, allowing me to break down each stage into sub-features: &nbsp; <img width="1629" height="186" width_o="1629" height_o="186" data-src="https://freight.cargo.site/t/original/i/22729722901da33a7195990a088fbf420f690f78bf1a32561bf3ad84b62cca62/Group-37.png" data-mid="110416779" border="0" data-scale="75" src="https://freight.cargo.site/w/1000/i/22729722901da33a7195990a088fbf420f690f78bf1a32561bf3ad84b62cca62/Group-37.png" /> 02. Low-Fidelity Prototyping <img width="2448" height="3264" width_o="2448" height_o="3264" data-src="https://freight.cargo.site/t/original/i/36f1ee8c4f57f1b02acc805f1051d116691c48b9eb86a00987274dc4c4f0891f/Untitled1.png" data-mid="110416770" border="0" src="https://freight.cargo.site/w/1000/i/36f1ee8c4f57f1b02acc805f1051d116691c48b9eb86a00987274dc4c4f0891f/Untitled1.png" /> <img width="2448" height="3264" width_o="2448" height_o="3264" data-src="https://freight.cargo.site/t/original/i/35dddea941ae09772122376b3bf9f9d485f358dcee4381e033fe3b8ae276701e/Untitled4.png" data-mid="110416767" border="0" src="https://freight.cargo.site/w/1000/i/35dddea941ae09772122376b3bf9f9d485f358dcee4381e033fe3b8ae276701e/Untitled4.png" /> <img width="2448" height="3264" width_o="2448" height_o="3264" data-src="https://freight.cargo.site/t/original/i/a2242eb5105ba0f0a2530efa02d321438bf2ccb874a8370e21778720970dc118/Untitled3.png" data-mid="110416768" border="0" src="https://freight.cargo.site/w/1000/i/a2242eb5105ba0f0a2530efa02d321438bf2ccb874a8370e21778720970dc118/Untitled3.png" /> <img width="2448" height="3264" width_o="2448" height_o="3264" data-src="https://freight.cargo.site/t/original/i/35dddea941ae09772122376b3bf9f9d485f358dcee4381e033fe3b8ae276701e/Untitled4.png" data-mid="110416767" border="0" src="https://freight.cargo.site/w/1000/i/35dddea941ae09772122376b3bf9f9d485f358dcee4381e033fe3b8ae276701e/Untitled4.png" /> <img width="2448" height="3264" width_o="2448" height_o="3264" data-src="https://freight.cargo.site/t/original/i/7c809421a0ff5668b28c6548d4e822337345efd023d568dc79fe9a4487c1dfab/Untitled5.png" data-mid="110416766" border="0" src="https://freight.cargo.site/w/1000/i/7c809421a0ff5668b28c6548d4e822337345efd023d568dc79fe9a4487c1dfab/Untitled5.png" /> <img width="2448" height="3264" width_o="2448" height_o="3264" data-src="https://freight.cargo.site/t/original/i/6f14a0a7f01451f6c7628a5fc25a142d3eff8c33ab9d2245d6fec01a95bd39e8/Untitled2.png" data-mid="110416769" border="0" src="https://freight.cargo.site/w/1000/i/6f14a0a7f01451f6c7628a5fc25a142d3eff8c33ab9d2245d6fec01a95bd39e8/Untitled2.png" /> Afterwards came ideation time. I explored flows and layouts for each feature through sketches, drawing inspiration from analogous annotation or video tools, such as: Google Docs Comments Figma Comments Lightworks Video Editor Kindle Annotations 03.Building a V1 &amp; User Feedback Following ideation, it came time to test whether the basic functionality of the application was possible through implementation of a basic proof-of-concept prototype. This slide-deck demonstrates a few key features and their technical implementation: The application builds upon three basic objects, represented as JSON objects: Videos, Annotations, and Tags.As the codebase grew, documentation became critical for communication, managing complexity, and reference for my own future self. <img width="2020" height="1140" width_o="2020" height_o="1140" data-src="https://freight.cargo.site/t/original/i/625bae85720db623c0993a20ecac03302e927352933fabb004f56e6c890f2c0a/image-63.png" data-mid="110416784" border="0" src="https://freight.cargo.site/w/1000/i/625bae85720db623c0993a20ecac03302e927352933fabb004f56e6c890f2c0a/image-63.png" /> <img width="2038" height="1139" width_o="2038" height_o="1139" data-src="https://freight.cargo.site/t/original/i/0084f366b9609142c448734eb14444956f81624d60ab29a12d44f9baf5ee3065/image-64.png" data-mid="110416785" border="0" src="https://freight.cargo.site/w/1000/i/0084f366b9609142c448734eb14444956f81624d60ab29a12d44f9baf5ee3065/image-64.png" /> I tried to convey the underlying structure and function through a mix of diagrams, UI screenshots, text descriptions, and code snippets. 04.Design Considerations Talking to many of the ethnographers, it became clear that because the tool experienced repetitive use, small touches made a significant difference. Thus, I paid special attention to microinteractions throughout the application while building the v1 version.&nbsp; &nbsp; 1. MULTIWINDOW DISPLAYAllows users to "pop" out a video and drag it around on the screen, even to a second monitor Many tested users owned multiple monitors. Allowing for flexible arrangement bypasses the constraint of limited screen space when fitting many videos 2. KEYBOARD SHORTCUTSProvides users keyboard shortcuts for creating annotations, applying specific tags, navigating the timeline, etc. Because the users often encounter repetitive actions (e.g.: creating multiple point annotations of a specific tag), keyboard shortcuts cut down on mouse traveling time and enable the user to traverse the app with keyboard only. 3. DUAL ANNOTATION VIEWS Annotations are rendered as timeline-visualizations as well as in a text-based table. Similar to Google Doc and Notion comments,&nbsp; affords users in-context view (timeline-visualization) as well as list view (table) 4. OTHER MICROINTERACTIONS Other small touches. For example: clicking on an annotation on the timeline brings the video times to the annotation start time to avoid scrubbing through the timeline. These small interactions, though small, accumulate to a more convenient experience. 05.High-Fidelity Prototype After several rounds of user testing the v1 application, I ordered the feedback by priority and feasibility. A few key insights emerged: 1. SIGNIFIERS: While many of the users said the keyboard shortcuts and micro-interactions were helpful and intuitive, they were not easily discoverable on first use. To address this, I baked in more unintrusive signifiers throughout the application to help guide the user. 2. NOTEPAD: A feature which the original ChronoViz, as well as other video-coding software, lacked was essentially a notepad for tracking qualitative data within the application. 3. SEPARATE SETUP STAGE: Setting up videos can be confusing, as indicators of video start times can clash with the annotation visualizations 4. PLUG-IN’S: Many researchers analyze a variety of temporal data beyond video data (e.g.: gesture annotation, movement tracking across 3-dimensional space). While it may not be realistic for me to catch all these edge cases, an ability for users to extend the tool by plugging in their own Javascript add-ons could be immensely useful. Before moving on to more coding, I took the time to flesh out a more complete prototype in Figma, based on feedback, to communicate the vision and solicit further feedback. Reflections 04.Iteration &amp; Features Prioritization ContextOn-the-Go Learning I loved this project because ... https://mengmingluo.com/Dexcom-copy Sat, 05 Jun 2021 06:32:08 +0000 Mengming Luo https://mengmingluo.com/Dexcom-copy .headnum { font-size: 2em; font-family: "Work Sans"; font-weight: 700; line-height: 0; } .quote{ border-left: 4px solid black; padding-left:30px; margin-left:-30px; } Portfolio Notes About ︎Back <img width="1920" height="615" width_o="1920" height_o="615" data-src="https://freight.cargo.site/t/original/i/c128e73b316cae3cce7052121e819ce24253f85770cc1b5f7908eb19bb96f873/15.png" data-mid="110416824" border="0" data-scale="100" alt="Dexcom Applications" data-caption="Dexcom Applications" src="https://freight.cargo.site/w/1000/i/c128e73b316cae3cce7052121e819ce24253f85770cc1b5f7908eb19bb96f873/15.png" /> DEXCOM Empowering users to request diabetes sensor replacements on their own terms. *Currently unable to disclose exact details and implementation due to NDA. Always happy to speak about the process, key insights, and learning experience, however. Duration 7 weeks Dexcom CGM • Design Lab Skills User ResearchUser TestingInteraction Design Front End Development Tools HTML/CSSJavaScriptFigma Team Anmol Arora Isabella Zendejas Overview <img width="905" height="314" width_o="905" height_o="314" data-src="https://freight.cargo.site/t/original/i/ae808770e3a38bab1e843646140ee56c36accbc85cdd72f7286d758490ca4b5e/Group-36.png" data-mid="110416825" border="0" data-scale="40" alt="A fingerstick versus Dexcom's glucose monitor device." data-caption="A fingerstick versus Dexcom's glucose monitor device." src="https://freight.cargo.site/w/905/i/ae808770e3a38bab1e843646140ee56c36accbc85cdd72f7286d758490ca4b5e/Group-36.png" /> INTRO Dexcom CGM is a diabetes continuous glucose monitoring (CGM) system, used to monitor blood sugar levels. The system features a wearable sensor that: Eliminates the need for fingersticks While providing realtime blood glucose data PROBLEM When it comes to healthcare automation devices, certain errors are unavoidable. However, currently, in the event of a sensor error, a Dexcom user’s sole source of support is the customer phone line, resulting in inconvenience or emotional distress.&nbsp; GOAL As a part of the Diabetes Design Initiative, my team and I identified opportunity points for intervention that allow users to prevent and address common sensor errors on their own, mitigating stress and increasing peace of mind.&nbsp; “I feel anxious all the time about diabetes. Anything can happen and you can end up in a bad place.In the event that something bad would happen [...] it’s much less about customer service and about them understanding what this means to my life.” - Dexcom Customer RESULT We prototyped a workflow allowing users to make sensor replacement requests on their own, integrated into the Dexcom mobile app.&nbsp; The workflow won the approval of both customers and business partners, with a 40% increase in System Usability Score compared to Dexcom’s current replacement protocol. Customers said the solution fit better into their busy lifestyles, while business stakeholders appreciated the solution for addressing the business goal of alleviating of customer support traffic while increasing peace of mind for the user.&nbsp; RESPONSIBILITIES Within 7 weeks of extremely fast-paced user research and design, our responsiblities as a team jumped across three domains: 🔬User Research&nbsp; Secondary research to identify pain points and opportunity for intervention Five user research sessions with real Dexcom customers for concept validation and usability testing.&nbsp; 🖌️ Product DesignPrototyped multiple low fidelity possibilities to solicit feedback and discover the best solution Mapped user flow step by step Wireframing, prototyping, and endlessly iterating on our final solution to best suit user needs 📈 Stakeholder Communication Maintained an ongoing dialogue with Dexcom stakeholders through weekly presentations and standup meetings, to ensure we met and exceeded business needs.&nbsp; In addition to my tasks as user researcher and product designer, I implemented a proof-of-concept prototype of our final design in code to test microinteractions. I also took the initiative to code a solution which tied our design to other Diabetes Design Initiative team solutions, documenting my approaches along the way.&nbsp; “TESTIMONIALS "Mengming covered a lot of ground in the subject domain and was able to adapt changing needs to get the project done. I really appreciated the extra work on the code and working in a way that allowed people to follow along. Great job. The workflow she worked on was a meaningful one for Dexcom, if not the most important one, as it has a huge impact both on the bottom line as well as the user experience.” Ben West, Product Engineer, DDI Partner - Dexcom "It was a total pleasure collaborating with the Design Lab students. They were committed to understanding the challenges our customers face, and designed solutions that not only satisfied the business requirements but also offered an exceptional customer experience. I was impressed with their approach to our brand’s challenges, their thirst for knowledge and their confidence in presenting to a professional audience. I look forward to partnering with them again. Anne Santoro, Director of Customer Experience - Dexcom &nbsp; "With an extraordinary level of compassion and insight, the students were able to understand the service-related issues patients face and provide relevant, useful prototypes."Nolan Rey, Process Owner Global Technical Support - Dexcom ” Process 01. Problem Framing Before jumping into the solution, our team took care to frame the right problem.&nbsp; We developed a storyboard to keep the user’s emotional journey top of mind, accounting for the context the product operates in.We then gathered qualitative information from participant interviews and online forums, identifying opportunity points for intervention. <img width="1920" height="1080" width_o="1920" height_o="1080" data-src="https://freight.cargo.site/t/original/i/627a9f6c68eb16ad2a08478f5a6ea6aabc158aa2db6ae8b02d56d8ce0a4179ba/Frame-4.png" data-mid="110416812" border="0" alt="A slide on our problem framing process." data-caption="A slide on our problem framing process." src="https://freight.cargo.site/w/1000/i/627a9f6c68eb16ad2a08478f5a6ea6aabc158aa2db6ae8b02d56d8ce0a4179ba/Frame-4.png" /> <img width="1441" height="811" width_o="1441" height_o="811" data-src="https://freight.cargo.site/t/original/i/b7eedc69efc1b18cb60ad79a9bd38a4dd259c3f3a031462d7be22561a2e096d3/Frame-888.png" data-mid="110416823" border="0" alt="A slide on our storyboarding process." data-caption="A slide on our storyboarding process." src="https://freight.cargo.site/w/1000/i/b7eedc69efc1b18cb60ad79a9bd38a4dd259c3f3a031462d7be22561a2e096d3/Frame-888.png" /> <img width="1920" height="1080" width_o="1920" height_o="1080" data-src="https://freight.cargo.site/t/original/i/90ffd4e391c8e8fce72efed534fe8e4ba4a29c3d57e2a79e23494ec1ecaa8f43/Frame-5b.png" data-mid="110416818" border="0" alt="A slide on our secondary research process." data-caption="A slide on our secondary research process." src="https://freight.cargo.site/w/1000/i/90ffd4e391c8e8fce72efed534fe8e4ba4a29c3d57e2a79e23494ec1ecaa8f43/Frame-5b.png" /> 02. Ideation We ideated three solutions, considering the advantages and feasibility of each approach. <img width="1920" height="1080" width_o="1920" height_o="1080" data-src="https://freight.cargo.site/t/original/i/b714751eeabf9c89357281d4a46d67e916798b668d392f3fa451edf01a3d15a2/Frame-7.png" data-mid="110416813" border="0" alt="A slide on our ideation process, with three options: a support chatbot, an autoreplacement form, and coachable moments." data-caption="A slide on our ideation process, with three options: a support chatbot, an autoreplacement form, and coachable moments." src="https://freight.cargo.site/w/1000/i/b714751eeabf9c89357281d4a46d67e916798b668d392f3fa451edf01a3d15a2/Frame-7.png" /> 03. Result In the end, we decided upon the Autoreplacement Form, a mobile form that allows users to order replacements straight from the Dexcom app. <img width="1935" height="1110" width_o="1935" height_o="1110" data-src="https://freight.cargo.site/t/original/i/35c1316a466628bdd54b635e2e791c305a35a2995fb1cb3a8d963a972bde01d5/Frame-2b.png" data-mid="110416821" border="0" alt="A slide on why we chose the autoreplacement form option." data-caption="A slide on why we chose the autoreplacement form option." src="https://freight.cargo.site/w/1000/i/35c1316a466628bdd54b635e2e791c305a35a2995fb1cb3a8d963a972bde01d5/Frame-2b.png" /> 04. Low-Fidelity Paper Prototype: Testing We sketched out our ideas on paper to validate our concept with users.&nbsp; <img width="1920" height="1080" width_o="1920" height_o="1080" data-src="https://freight.cargo.site/t/original/i/ff30bc94f5c5719d43f5577425958771182b62316dad036b0d750fb0dec59b29/Frame-10.jpg" data-mid="110416814" border="0" alt="A slide on our low-fidelity prototyping process." data-caption="A slide on our low-fidelity prototyping process." src="https://freight.cargo.site/w/1000/i/ff30bc94f5c5719d43f5577425958771182b62316dad036b0d750fb0dec59b29/Frame-10.jpg" /> 05. Establishing Core User Stages After validating the concept, it was time to establish the core user stages, enabling us to flesh out each step. <img width="1920" height="1080" width_o="1920" height_o="1080" data-src="https://freight.cargo.site/t/original/i/5999b6f14c978ef1f71f01ec2a327ba422f08215137582ef0361e0fd37b4db03/Frame-11.png" data-mid="110416815" border="0" alt="A slide on the four core user stages: Access, Triage Questions, Shipping, and Appoval/Completion." data-caption="A slide on the four core user stages: Access, Triage Questions, Shipping, and Appoval/Completion." src="https://freight.cargo.site/w/1000/i/5999b6f14c978ef1f71f01ec2a327ba422f08215137582ef0361e0fd37b4db03/Frame-11.png" /> 06. Iterative High-Fidelity Prototypes: Testing From that point on, it was testing, testing, testing. We prototyped high-fidelity screens in Figma for semi-structured tests with users.&nbsp; <img width="961" height="543" width_o="961" height_o="543" data-src="https://freight.cargo.site/t/original/i/8de4822cc2944decc1379eb4ef9ba880d56acd913da00c2f429248f2a39042e5/Frame-12.jpg" data-mid="110416809" border="0" alt="A slide on our high-fidelity prototyping process." data-caption="A slide on our high-fidelity prototyping process." src="https://freight.cargo.site/w/961/i/8de4822cc2944decc1379eb4ef9ba880d56acd913da00c2f429248f2a39042e5/Frame-12.jpg" /> 07. Final Round of Testing For the final round of testing, I coded a clickable HTML/CSS/JS prototype and conducted more comprehensive testing on the target user base.&nbsp; <img width="961" height="543" width_o="961" height_o="543" data-src="https://freight.cargo.site/t/original/i/814fb9f6652e0663627031f6f2bfe5385451a73f65516ec1f693eee5af2c540c/Frame-13.jpg" data-mid="110416810" border="0" alt="A slide on our user testing process." data-caption="A slide on our user testing process." src="https://freight.cargo.site/w/961/i/814fb9f6652e0663627031f6f2bfe5385451a73f65516ec1f693eee5af2c540c/Frame-13.jpg" /> 08. User Feedback Finally, we presented the user feedback to stakeholders on the Dexcom executive board, a team of product managers, design leads, and engineers.&nbsp; Users appreciated our design for saving them time, offering greater flexibility in their busy lifestyles.&nbsp; <img width="1920" height="1080" width_o="1920" height_o="1080" data-src="https://freight.cargo.site/t/original/i/fb0fba2bd11d51325e7ac6239262ca54311ef853382bd5e92d76a2743197b64b/Frame-15.png" data-mid="110416820" border="0" alt="A slide on our user feedback, which was positive!" data-caption="A slide on our user feedback, which was positive!" src="https://freight.cargo.site/w/1000/i/fb0fba2bd11d51325e7ac6239262ca54311ef853382bd5e92d76a2743197b64b/Frame-15.png" /> 09. Future Steps How may we elaborate on this design? <img width="1920" height="1080" width_o="1920" height_o="1080" data-src="https://freight.cargo.site/t/original/i/eae3bb74739e8f833c689a3f4350968b8ddd47c4037e13d857792c4df4299588/Frame-16.png" data-mid="110416817" border="0" alt="A slide on our future steps." data-caption="A slide on our future steps." src="https://freight.cargo.site/w/1000/i/eae3bb74739e8f833c689a3f4350968b8ddd47c4037e13d857792c4df4299588/Frame-16.png" /> https://mengmingluo.com/Art Sat, 05 Jun 2021 06:32:11 +0000 Mengming Luo https://mengmingluo.com/Art Portfolio Notes About ︎Back function goBack() { window.history.back(); } Bits and Bobs and Doodles Art + Creative Computing https://mengmingluo.com/Paper-Mechanica Sat, 05 Jun 2021 06:32:11 +0000 Mengming Luo https://mengmingluo.com/Paper-Mechanica #centered_side_by_side{ display: flex; justify-content: center; align-items:center; } .subh1{ font-size: 2em !important; } Portfolio Notes About ︎Back function goBack() { window.history.back(); } #Fine Arts, Physical Paper MechanicaJune 17, 2020 — Expressive Papercrafts Small gifts for Baba and Roommate. Comprehensive videos: watch the mechanics &nbsp;Vimeo&nbsp; Process documentation: watch the making-of&nbsp;Futureland&nbsp; <img width="600" height="338" width_o="600" height_o="338" data-src="https://freight.cargo.site/t/original/i/4dafda4012f5736cc33360a2c8802d263ba7187fd0b02266cccbb5f80b16016a/ezgif.com-optimize-14.gif" data-mid="110416831" border="0" data-scale="100" src="https://freight.cargo.site/w/600/i/4dafda4012f5736cc33360a2c8802d263ba7187fd0b02266cccbb5f80b16016a/ezgif.com-optimize-14.gif" /> Run, Andy, Run! Paper, Paperclips, Tape Watching a Giant Bird on a Gentle Spring Morning Watching gargantuan birds, as we usually do on Sundays. Paper, Paperclips, Tape <img width="450" height="276" width_o="450" height_o="276" data-src="https://freight.cargo.site/t/original/i/589b1b6404cb7b3d39d845717a395bd35622ba8fcdc717dd7b8f92b207e2790e/ezgif.com-crop-6.gif" data-mid="110416832" border="0" data-scale="100" src="https://freight.cargo.site/w/450/i/589b1b6404cb7b3d39d845717a395bd35622ba8fcdc717dd7b8f92b207e2790e/ezgif.com-crop-6.gif" /> https://mengmingluo.com/mengluo3-github-io Sat, 05 Jun 2021 06:32:12 +0000 Mengming Luo https://mengmingluo.com/mengluo3-github-io Portfolio Notes About ︎Back function goBack() { window.history.back(); } My Old Site For sentimental reasons. The site that introduced me to HTML + CSS.&nbsp; Link here:&nbsp;https://mengluo3.github.io (Alert: there is music that plays automatically.) <img width="1851" height="856" width_o="1851" height_o="856" data-src="https://freight.cargo.site/t/original/i/64dbc176668f55080a2464a68b6a3a8a783ead5f51584a0aa90ce3e5a494a501/mengluo3-github.PNG" data-mid="110416833" border="0" src="https://freight.cargo.site/w/1000/i/64dbc176668f55080a2464a68b6a3a8a783ead5f51584a0aa90ce3e5a494a501/mengluo3-github.PNG" /> https://mengmingluo.com/Sketch-Gallery Sat, 05 Jun 2021 06:32:13 +0000 Mengming Luo https://mengmingluo.com/Sketch-Gallery Portfolio Notes About ︎Back function goBack() { window.history.back(); } Miscellaneous Collection A massive doodle dump. See ︎ for more up-to-date drawings and commentary. <img width="2884" height="1080" width_o="2884" height_o="1080" data-src="https://freight.cargo.site/t/original/i/ba5d26226e9244e0615facccb6c16cb53bd8b1f4d97ae9c76e835348653b1505/WeChat-Image_20190724004937.jpg" data-mid="110416856" border="0" src="https://freight.cargo.site/w/1000/i/ba5d26226e9244e0615facccb6c16cb53bd8b1f4d97ae9c76e835348653b1505/WeChat-Image_20190724004937.jpg" /> <img width="2112" height="1080" width_o="2112" height_o="1080" data-src="https://freight.cargo.site/t/original/i/70dc78e29862859e5c162475da4427c19b51debd569716b61da9667f78daf781/WeChat-Image_20190724004922.jpg" data-mid="110416857" border="0" src="https://freight.cargo.site/w/1000/i/70dc78e29862859e5c162475da4427c19b51debd569716b61da9667f78daf781/WeChat-Image_20190724004922.jpg" /> <img width="1815" height="873" width_o="1815" height_o="873" data-src="https://freight.cargo.site/t/original/i/0c09b48dd2a0cb10281d8bed18d1cefd4e2736ebc1e3ce9842c361f39f88dd2d/may_31_2019.PNG" data-mid="110416854" border="0" src="https://freight.cargo.site/w/1000/i/0c09b48dd2a0cb10281d8bed18d1cefd4e2736ebc1e3ce9842c361f39f88dd2d/may_31_2019.PNG" /> <img width="1276" height="1651" width_o="1276" height_o="1651" data-src="https://freight.cargo.site/t/original/i/88667ef151f0cbef6c6264ff73f2b2051caec86852a6da451adeef0d668e482e/debri23-04.png" data-mid="110416859" border="0" alt="Bursting Planet" data-caption="Bursting Planet" src="https://freight.cargo.site/w/1000/i/88667ef151f0cbef6c6264ff73f2b2051caec86852a6da451adeef0d668e482e/debri23-04.png" /> <img width="1118" height="734" width_o="1118" height_o="734" data-src="https://freight.cargo.site/t/original/i/a7c74683d8751e6daf6ab23c762204596ca238160cf945033a9f2d9d209cb159/july_3_2019.PNG" data-mid="110416858" border="0" src="https://freight.cargo.site/w/1000/i/a7c74683d8751e6daf6ab23c762204596ca238160cf945033a9f2d9d209cb159/july_3_2019.PNG" /> <img width="1113" height="868" width_o="1113" height_o="868" data-src="https://freight.cargo.site/t/original/i/c9fb0d7123aff3fc66d34245d2e4a9aba2666f0ad19d57ad8ea120e9eb788a26/shrimp.PNG" data-mid="110416855" border="0" alt="Oil Painting, May 31st" data-caption="Oil Painting, May 31st" src="https://freight.cargo.site/w/1000/i/c9fb0d7123aff3fc66d34245d2e4a9aba2666f0ad19d57ad8ea120e9eb788a26/shrimp.PNG" /> <img width="600" height="1067" width_o="600" height_o="1067" data-src="https://freight.cargo.site/t/original/i/78f17f359f7a06fdea2eeb308dffdc84441beb88f511d3aa444aa771b74e43af/ezgif.com-optimize-8.gif" data-mid="110416872" border="0" src="https://freight.cargo.site/w/600/i/78f17f359f7a06fdea2eeb308dffdc84441beb88f511d3aa444aa771b74e43af/ezgif.com-optimize-8.gif" /> <img width="1279" height="1654" width_o="1279" height_o="1654" data-src="https://freight.cargo.site/t/original/i/17d16db8bcfef6dd3e26b112d5d25c697c41a20b5212f59dda21a3cb29408efc/poster1b.png" data-mid="110416860" border="0" src="https://freight.cargo.site/w/1000/i/17d16db8bcfef6dd3e26b112d5d25c697c41a20b5212f59dda21a3cb29408efc/poster1b.png" /> <img width="2309" height="1731" width_o="2309" height_o="1731" data-src="https://freight.cargo.site/t/original/i/03a1a6d9a5004de3da0a05c8d40f6807195ef8db6049e3729e61d7ee71134958/headfirst.PNG" data-mid="110416834" border="0" src="https://freight.cargo.site/w/1000/i/03a1a6d9a5004de3da0a05c8d40f6807195ef8db6049e3729e61d7ee71134958/headfirst.PNG" /> <img width="2092" height="1485" width_o="2092" height_o="1485" data-src="https://freight.cargo.site/t/original/i/fd52c826f831ceefb6bb7a3e4e6b430f8aee3ad508ae0fedbf52ef4a9a26a835/FCD6ED2C-7EF7-4912-9090-6B633690E07B.jpeg" data-mid="110416868" border="0" src="https://freight.cargo.site/w/1000/i/fd52c826f831ceefb6bb7a3e4e6b430f8aee3ad508ae0fedbf52ef4a9a26a835/FCD6ED2C-7EF7-4912-9090-6B633690E07B.jpeg" /> <img width="1275" height="1650" width_o="1275" height_o="1650" data-src="https://freight.cargo.site/t/original/i/899eea7541e0e69d961de2da83fb098bf2aee0f644f95f901645a17fec218994/Poster2.png" data-mid="110416861" border="0" src="https://freight.cargo.site/w/1000/i/899eea7541e0e69d961de2da83fb098bf2aee0f644f95f901645a17fec218994/Poster2.png" /> <img width="3264" height="2448" width_o="3264" height_o="2448" data-src="https://freight.cargo.site/t/original/i/532019dc284808c1c286c247073b7ea8749ae32b814254561cf54dcbc2016276/IMG_3925.PNG" data-mid="110416870" border="0" src="https://freight.cargo.site/w/1000/i/532019dc284808c1c286c247073b7ea8749ae32b814254561cf54dcbc2016276/IMG_3925.PNG" /> <img width="2720" height="2215" width_o="2720" height_o="2215" data-src="https://freight.cargo.site/t/original/i/9666d6d39d4ed00af17d822ef5a8607fad87a3588314bf8deff9e469d3d77473/55CCC083-152A-47B9-9879-3775283F8D85.jpeg" data-mid="110416869" border="0" alt="Baba, deep in concentration. " data-caption="Baba, deep in concentration. " src="https://freight.cargo.site/w/1000/i/9666d6d39d4ed00af17d822ef5a8607fad87a3588314bf8deff9e469d3d77473/55CCC083-152A-47B9-9879-3775283F8D85.jpeg" /> <img width="3264" height="2448" width_o="3264" height_o="2448" data-src="https://freight.cargo.site/t/original/i/d7da5b622301cf137e8ae6ac227bba6db1608feeee4db80d0a3fca6c1fe99824/IMG_0792.JPG" data-mid="110416849" border="0" src="https://freight.cargo.site/w/1000/i/d7da5b622301cf137e8ae6ac227bba6db1608feeee4db80d0a3fca6c1fe99824/IMG_0792.JPG" /> <img width="2284" height="3072" width_o="2284" height_o="3072" data-src="https://freight.cargo.site/t/original/i/2c3c2026824ca8ff593142e4754ddfc0a7cebb44bc5a7f71f3a41ab9ce88d5ca/2019-11-18.jpeg" data-mid="110416871" border="0" src="https://freight.cargo.site/w/1000/i/2c3c2026824ca8ff593142e4754ddfc0a7cebb44bc5a7f71f3a41ab9ce88d5ca/2019-11-18.jpeg" /> <img width="2309" height="1731" width_o="2309" height_o="1731" data-src="https://freight.cargo.site/t/original/i/8e8f814c8d6b9495d40ce17aacd7f3d27e499c8d1e3361b29afbbbda94d3d225/sun.PNG" data-mid="110416842" border="0" src="https://freight.cargo.site/w/1000/i/8e8f814c8d6b9495d40ce17aacd7f3d27e499c8d1e3361b29afbbbda94d3d225/sun.PNG" /> <img width="1669" height="832" width_o="1669" height_o="832" data-src="https://freight.cargo.site/t/original/i/5f5b8503bf63a28915c812b2e766a6fb0c59d1b3444d4360daec7899eb5ad157/fish.PNG" data-mid="110416843" border="0" src="https://freight.cargo.site/w/1000/i/5f5b8503bf63a28915c812b2e766a6fb0c59d1b3444d4360daec7899eb5ad157/fish.PNG" /> <img width="1022" height="767" width_o="1022" height_o="767" data-src="https://freight.cargo.site/t/original/i/28eb14dc562f6ace47d0e241c67d962ab9132d541eaaec9320d1ad200b09e71d/po.PNG" data-mid="110416839" border="0" src="https://freight.cargo.site/w/1000/i/28eb14dc562f6ace47d0e241c67d962ab9132d541eaaec9320d1ad200b09e71d/po.PNG" /> <img width="5472" height="3648" width_o="5472" height_o="3648" data-src="https://freight.cargo.site/t/original/i/eaa538df8c151c7f7669da14ecf7beb2bceed1895ca77bcd9acf9eda61105c3c/DSC05080.JPG" data-mid="110416873" border="0" src="https://freight.cargo.site/w/1000/i/eaa538df8c151c7f7669da14ecf7beb2bceed1895ca77bcd9acf9eda61105c3c/DSC05080.JPG" /> <img width="1633" height="1224" width_o="1633" height_o="1224" data-src="https://freight.cargo.site/t/original/i/15a943f60314caf083be3a06daf3d257bb0c0c6396365839d1bfe83f604e7f0e/snow_small.PNG" data-mid="110416841" border="0" src="https://freight.cargo.site/w/1000/i/15a943f60314caf083be3a06daf3d257bb0c0c6396365839d1bfe83f604e7f0e/snow_small.PNG" /> <img width="777" height="774" width_o="777" height_o="774" data-src="https://freight.cargo.site/t/original/i/d94ccc9a716f995dc7a24d2901634edaa32422a3737ffa86c6d761fcc503a213/6.PNG" data-mid="110416835" border="0" src="https://freight.cargo.site/w/777/i/d94ccc9a716f995dc7a24d2901634edaa32422a3737ffa86c6d761fcc503a213/6.PNG" /> <img width="996" height="1500" width_o="996" height_o="1500" data-src="https://freight.cargo.site/t/original/i/48d01c0d4abbe786f8c20122fd093ace1c9425046ef546fb2aed88fb15054359/creatures.JPG" data-mid="110416845" border="0" src="https://freight.cargo.site/w/996/i/48d01c0d4abbe786f8c20122fd093ace1c9425046ef546fb2aed88fb15054359/creatures.JPG" /> <img width="1500" height="1125" width_o="1500" height_o="1125" data-src="https://freight.cargo.site/t/original/i/e3f3a73600791b0973c7844dd6eca5f6ce6de94a57cbb79f419ffd11ac3d5385/creatures1.JPG" data-mid="110416847" border="0" src="https://freight.cargo.site/w/1000/i/e3f3a73600791b0973c7844dd6eca5f6ce6de94a57cbb79f419ffd11ac3d5385/creatures1.JPG" /> <img width="2309" height="1731" width_o="2309" height_o="1731" data-src="https://freight.cargo.site/t/original/i/87cb8bc05d1c1dc868dee61a899dada34cde4aa78dfc06d1ef63ec396b37b86d/neo.png" data-mid="110416844" border="0" src="https://freight.cargo.site/w/1000/i/87cb8bc05d1c1dc868dee61a899dada34cde4aa78dfc06d1ef63ec396b37b86d/neo.png" /> <img width="1702" height="2048" width_o="1702" height_o="2048" data-src="https://freight.cargo.site/t/original/i/bc9bd7b786d83d6bb62b0e8d0585f8f44ccc8bbbc0a8216b31e7ca95515ec5e9/cello.png" data-mid="110416837" border="0" src="https://freight.cargo.site/w/1000/i/bc9bd7b786d83d6bb62b0e8d0585f8f44ccc8bbbc0a8216b31e7ca95515ec5e9/cello.png" /> <img width="918" height="1279" width_o="918" height_o="1279" data-src="https://freight.cargo.site/t/original/i/5496e44cea3f03879cea5dc382af532de3c3a7b3d2074e9f7799eaed8a50ce03/2.PNG" data-mid="110416836" border="0" src="https://freight.cargo.site/w/918/i/5496e44cea3f03879cea5dc382af532de3c3a7b3d2074e9f7799eaed8a50ce03/2.PNG" /> <img width="1705" height="2345" width_o="1705" height_o="2345" data-src="https://freight.cargo.site/t/original/i/dd2a74f4e16a1028fefc681071f8ef1db4355d20cece6dfc433237ead2423da3/self.PNG" data-mid="110416840" border="0" src="https://freight.cargo.site/w/1000/i/dd2a74f4e16a1028fefc681071f8ef1db4355d20cece6dfc433237ead2423da3/self.PNG" /> <img width="1581" height="1073" width_o="1581" height_o="1073" data-src="https://freight.cargo.site/t/original/i/7fbbb5bd0d8801b14ef1df1af1a3534502a3fffd780ef8e6948f02c41776fa9e/edge.PNG" data-mid="110416838" border="0" src="https://freight.cargo.site/w/1000/i/7fbbb5bd0d8801b14ef1df1af1a3534502a3fffd780ef8e6948f02c41776fa9e/edge.PNG" /> <img width="2751" height="2227" width_o="2751" height_o="2227" data-src="https://freight.cargo.site/t/original/i/98b70bb3f7c10ba925a034a0af8efcb4e1b1a64c902fb68181c092f3b3148976/IMG_0810.JPG" data-mid="110416851" border="0" src="https://freight.cargo.site/w/1000/i/98b70bb3f7c10ba925a034a0af8efcb4e1b1a64c902fb68181c092f3b3148976/IMG_0810.JPG" /> <img width="1060" height="1500" width_o="1060" height_o="1500" data-src="https://freight.cargo.site/t/original/i/102df18002e42d831f1c1864a2d3e6212c2d370e7b5b15b4f9d8fe3289360601/creatures2.JPG" data-mid="110416848" border="0" src="https://freight.cargo.site/w/1000/i/102df18002e42d831f1c1864a2d3e6212c2d370e7b5b15b4f9d8fe3289360601/creatures2.JPG" /> <img width="3120" height="2340" width_o="3120" height_o="2340" data-src="https://freight.cargo.site/t/original/i/1abfb12982f5196133e3f17849fb6544c544a88588cf9ce61590ee733a43820f/IMG_0806.JPG" data-mid="110416850" border="0" src="https://freight.cargo.site/w/1000/i/1abfb12982f5196133e3f17849fb6544c544a88588cf9ce61590ee733a43820f/IMG_0806.JPG" /> <img width="2766" height="2234" width_o="2766" height_o="2234" data-src="https://freight.cargo.site/t/original/i/c3f4a5447fce29a7071864efdbb7ad11040b0aa1260a08a52fd221f7e6a4c099/IMG_0811.JPG" data-mid="110416852" border="0" src="https://freight.cargo.site/w/1000/i/c3f4a5447fce29a7071864efdbb7ad11040b0aa1260a08a52fd221f7e6a4c099/IMG_0811.JPG" /> <img width="2399" height="1922" width_o="2399" height_o="1922" data-src="https://freight.cargo.site/t/original/i/ffa84fda393bf1e7b87de0c3e3b099fb5d3c2cd45b475a4785963d660db30472/IMG_0812.JPG" data-mid="110416853" border="0" src="https://freight.cargo.site/w/1000/i/ffa84fda393bf1e7b87de0c3e3b099fb5d3c2cd45b475a4785963d660db30472/IMG_0812.JPG" /> <img width="2193" height="2263" width_o="2193" height_o="2263" data-src="https://freight.cargo.site/t/original/i/20b4828872318ec1492eb769e11a372fe8d2595b4fa635899b14482c3b60b20e/bowl-front.jpg" data-mid="110416866" border="0" src="https://freight.cargo.site/w/1000/i/20b4828872318ec1492eb769e11a372fe8d2595b4fa635899b14482c3b60b20e/bowl-front.jpg" /> <img width="2428" height="2494" width_o="2428" height_o="2494" data-src="https://freight.cargo.site/t/original/i/073181bd813c8bfb1789505d6bca209f2cd3b073536bd5b34ede4c51f55a0cc2/bowl-back.jpg" data-mid="110416865" border="0" src="https://freight.cargo.site/w/1000/i/073181bd813c8bfb1789505d6bca209f2cd3b073536bd5b34ede4c51f55a0cc2/bowl-back.jpg" /> <img width="3895" height="2391" width_o="3895" height_o="2391" data-src="https://freight.cargo.site/t/original/i/e5441bbb8f10f76d8a0306598b734ce92567f87550db871b32ea8e5637aaca6b/bowl-side.jpg" data-mid="110416867" border="0" src="https://freight.cargo.site/w/1000/i/e5441bbb8f10f76d8a0306598b734ce92567f87550db871b32ea8e5637aaca6b/bowl-side.jpg" /> <img width="568" height="757" width_o="568" height_o="757" data-src="https://freight.cargo.site/t/original/i/8c8131578bf300a08114eb615c44b41a5c25e24b40983adc9848229cefd55eeb/kitchen.PNG" data-mid="110416863" border="0" src="https://freight.cargo.site/w/568/i/8c8131578bf300a08114eb615c44b41a5c25e24b40983adc9848229cefd55eeb/kitchen.PNG" /> <img width="567" height="755" width_o="567" height_o="755" data-src="https://freight.cargo.site/t/original/i/9a55bceb3b6369b41eb0af32e528b1e646b8532974cd7cb94dc52cd6049c7eef/kitchen2.PNG" data-mid="110416864" border="0" src="https://freight.cargo.site/w/567/i/9a55bceb3b6369b41eb0af32e528b1e646b8532974cd7cb94dc52cd6049c7eef/kitchen2.PNG" />