https://angiekang.com Angie Kang Tue, 02 Jan 2024 03:07:53 +0000 https://angiekang.com en https://angiekang.com/Home-1 Tue, 02 Jan 2024 03:07:52 +0000 Angie Kang https://angiekang.com/Home-1 https://angiekang.com/Mobile-nav Tue, 02 Jan 2024 03:07:53 +0000 Angie Kang https://angiekang.com/Mobile-nav LunavistaTaco Bell Delivery Behr Walmart Almonds.com Cosmos Modern Family Style Real California MilkTaco Bell - Gifter AboutContactLinkedIn&nbsp;︎︎︎Resumé (PDF ︎︎︎) © 2024 Angie Kang https://angiekang.com/Behr Mon, 28 Mar 2022 07:30:47 +0000 Angie Kang https://angiekang.com/Behr Behr.com RoleLead UX Designer The Ask We were tasked with modernizing Behr.com’s website and reimagining how people shop for paint online. Note: this is an unfinished case study video. Process To ensure we were maximizing on time, we had a brand designer take a look at typography styles and color to create a web style guide in parallel with exploring ways to improve the overall usability of the website. Without changing too much of the core website, we narrowed down the core areas to focus on. With the new style guide, Behr would be equipped with tools to further evolve their website by standardizing their design system. Most importantly, we were optimizing the mobile responsive layout. The core areas we redesigned: NavigationProduct Category PageBrand Category Page (Parent PDP)Product Detail Page (Child PDP, or variant of Parent PDP)ColorSmartThe VisualiserCart ColorSmart ColorSmart allows users to browse all of the available Behr colors in a grid format, traditionally grouped by curated collections or search. In our new version, we provided users multiple ways to browse. While Behr has over 1,400 colors to choose from, they are all created by experts based on trends so finding the right one can be a challenge. 1. Browse with a color dropper This was for the advanced interior expert who wants to pinpoint a specific color. We took a look at how design tools provided the ability for users to pick a hue. We simplified it with a color wheel and a saturation/brightness slider that functioned much like a search tool. The “paint chip” data updates in real time as the user searches for their color, which was prototyped in a live build by our developer. In tapping the ‘View Detail’ link, the user can save the color and preview it in Visualiser or add it to their cart. In tapping the ‘See All Close Matches’ button, they can see similar colors. <img width="375" height="857" width_o="375" height_o="857" data-src="https://freight.cargo.site/t/original/i/a3bd101d8a83cff67081472a89c131b7fb20e1d2dc78d8d98d920265591f89ff/Mobile_ColorSmart_Browse-By-Color-Family--1.png" data-mid="139787313" border="0" data-scale="78" src="https://freight.cargo.site/w/375/i/a3bd101d8a83cff67081472a89c131b7fb20e1d2dc78d8d98d920265591f89ff/Mobile_ColorSmart_Browse-By-Color-Family--1.png" /> <img width="375" height="812" width_o="375" height_o="812" data-src="https://freight.cargo.site/t/original/i/e973c9e2bc72a928acc523d8265ff7b979802da170cfc632d3e2397119f56887/Mobile_ColorSmart_Browse-By-Color-Family.png" data-mid="139787324" border="0" data-scale="36" data-icon-mode src="https://freight.cargo.site/w/375/i/e973c9e2bc72a928acc523d8265ff7b979802da170cfc632d3e2397119f56887/Mobile_ColorSmart_Browse-By-Color-Family.png" /> 2. Browse by color families This was what a majority of our user testers looked for. When they are looking for a color, they want to narrow it down to the base or primary color that is closest to the one they have in mind, and then diplay all of their chosen hue in a grid. While most of our testers searched colors this way, our hypothesis is that the new generation of Behr customers are becoming more and more familiar with advanced design tools like this. We left it up to Behr to decide whether they would like to invest in the advanced tool, or stick to something simpler like Color Family collections. Visualizer This tool allows the user to see paint colors on a photo of a real room. Users can tap on walls to preview the colors. Our main goal with redesigning this tool was not to restructure it entirely, but to improve its usability for both web and mobile, and bring the UI up to date with our new style guide. Our user test subjects really liked this feature, so we invested a lot of time in building out a robust prototype for testing in order to improve on pain points. <img width="375" height="1574" width_o="375" height_o="1574" data-src="https://freight.cargo.site/t/original/i/6599853f1c53e40bc447bdda825320f89d1d4af8f92af07fe0c27e6452b8ed16/Mobile_Visualizer_Default.png" data-mid="139787807" border="0" data-scale="31" data-icon-mode src="https://freight.cargo.site/w/375/i/6599853f1c53e40bc447bdda825320f89d1d4af8f92af07fe0c27e6452b8ed16/Mobile_Visualizer_Default.png" /> Other Notable Features 1. My Order Behr is sold exclusively at Home Depot. My Order functions much like a traditional ecommerce cart, but calling it a “cart” would set the user up with a false expectation. From here, the user taps the “Checkout at Home Depot” button to send the order to HomeDepot.com. There the products will show up in the cart and can be purchased either online or in store. In some cases, users may just use this list and show it to a Home Depot paint specialist to quickly get what they need. <img width="375" height="812" width_o="375" height_o="812" data-src="https://freight.cargo.site/t/original/i/167b0e02555941086627eeaa334b3fb5914dbd778bc4d1f31768f1f3a07ea7fd/Mobile_My-Order--1.png" data-mid="139788046" border="0" data-scale="31" data-icon-mode src="https://freight.cargo.site/w/375/i/167b0e02555941086627eeaa334b3fb5914dbd778bc4d1f31768f1f3a07ea7fd/Mobile_My-Order--1.png" /> <img width="375" height="1414" width_o="375" height_o="1414" data-src="https://freight.cargo.site/t/original/i/b3fc260964dee4407dea5df898f9f6b0dc2de72298043cf6f4babd913b1f4549/My-Colors---Primary--Expanded.png" data-mid="139788019" border="0" data-scale="34" data-icon-mode src="https://freight.cargo.site/w/375/i/b3fc260964dee4407dea5df898f9f6b0dc2de72298043cf6f4babd913b1f4549/My-Colors---Primary--Expanded.png" /> 2. My Colors Saving colors is huge for users to be able to browse and marinate on what they really want. We updated the colors to display as mini paint chip components that expand to display more detailed information. 3. Color Detail Drawer &amp; The Shop Drawer Colors are products in the Behr world. We maintained all the existing components and applied the new style guide with some light reorganization. Each Color Detail Drawer(left thumbnail)&nbsp;contains unique images of the color in situ, ability to share, similar colors, coordinating colors, social posts, and an area where the user can customize their color to paint type, sheen, size, etc. The Shop Drawer is just another way that users can access customizations for their selected color. This format is necessary when the user is accessing it from the explicit “Buy Samples &amp; Gallons” CTA that appears across the website, because the user is most likely ready to purchase at this point (this decision was based on data from Behr). <img width="375" height="3469" width_o="375" height_o="3469" data-src="https://freight.cargo.site/t/original/i/3907e3220626d5f6d0160956dabea1da83362488136b52a67e79ca32bfc71776/ColorDetail-Drawer_Tahitian--E.png" data-mid="139788020" border="0" data-scale="100" data-icon-mode src="https://freight.cargo.site/w/375/i/3907e3220626d5f6d0160956dabea1da83362488136b52a67e79ca32bfc71776/ColorDetail-Drawer_Tahitian--E.png" />&nbsp;&nbsp; <img width="375" height="1704" width_o="375" height_o="1704" data-src="https://freight.cargo.site/t/original/i/de59e207250092ffea9ac361849a197044f08e7bec76c83e492ccd22c12c21bd/Mobile_Shop_Drawer_Tahitian.png" data-mid="139788023" border="0" data-scale="29" data-icon-mode src="https://freight.cargo.site/w/375/i/de59e207250092ffea9ac361849a197044f08e7bec76c83e492ccd22c12c21bd/Mobile_Shop_Drawer_Tahitian.png" /> User Testing We conducted 4 total days of user testing, split into 2 rounds. We tested with about 20 people over Zoom with clickable prototypes. In these interviews, we were able to peek into the customer’s mindset when it comes to buying paint. 100% of our testers liked the enhancements and explorations we presented them, with most of the challenges being centered around the commerce aspect and wayfinding. Key Observations for Future Enhancements Most users expressed that they would like to be able to reorder the paint colors within the “My Colors” list.Some users expressed a desire to be able to organize their colors by “room” or “projects” that they could define themselves.Some&nbsp;users wanted to be able to organize the photos they uploaded to Visualizer into project groupings.Some users wanted the ability to compare colors they had saved next to one another.Some users asked for the ability to apply the total recommended in the Coverage Calculator to the shopping module.<img width="1280" height="720" width_o="1280" height_o="720" data-src="https://freight.cargo.site/t/original/i/c73a0df37e8fa4a3260e3f915a90863587e297bb3ae14f0e925cb0df10f53423/1280x720_Behr.png" data-mid="137758141" border="0" src="https://freight.cargo.site/w/1000/i/c73a0df37e8fa4a3260e3f915a90863587e297bb3ae14f0e925cb0df10f53423/1280x720_Behr.png" /> https://angiekang.com/Walmart Mon, 28 Mar 2022 05:44:58 +0000 Angie Kang https://angiekang.com/Walmart Camp by Walmart Role UX Designer Year2020 <img width="1280" height="720" width_o="1280" height_o="720" data-src="https://freight.cargo.site/t/original/i/1bfc3618049ab6c87ba410df6bf1f064270a270f2960560d73d89ee66267678b/1280x720_Walmart_Camp.png" data-mid="137763255" border="0" src="https://freight.cargo.site/w/1000/i/1bfc3618049ab6c87ba410df6bf1f064270a270f2960560d73d89ee66267678b/1280x720_Walmart_Camp.png" /> Overview Camp by Walmart is an experience designed for the Internet. The free virtual camp, where celebrities are the counselors, is powered by the interactive video platform Eko, in which Walmart Inc. is an investor.&nbsp;With 100 interactive episodes that lead to 150 activities families can do at home, Walmart sees this as a content hub and the only place that you can access Camp seamlessly integrated play moments with products.Walmart partnered with interactive video content platform Eko and family experience company Camp to create a shoppable summer camp experience in the Walmart app. Press “Camp Is In Session After All, Only It’s Virtual, At Camp By Walmart” — Forbes“Amazon, Apple, Walmart are offering virtual summer camp programs for kids”— USA TodayBest of Behance Research &amp; Development We began ideating for Camp by Walmart in March 2020, right when the pandemic hit the country. In just 3 months, Camp by Walmart was developed and delivered in the “new reality” of families needing new ways to entertain and educate their children at home.&nbsp; While browsing news articles, I discovered Miro, a virtual whiteboard where users can remotely collaborate. In conjunction with Zoom, our team was able to work closely together. This process really evolved our workstream, and was the catalyst for improving collaboration company-wide. Eventually, we invited external teams and clients to check out our Miro boards (anyone can view them in a browser) and become involved in the development. It allowed us to receive feedback in real-time, which was crucial to the success of this project. <img width="2500" height="1491" width_o="2500" height_o="1491" data-src="https://freight.cargo.site/t/original/i/8db1582f2f3fbe803d53a2f94c76c5089aa65780d02651aaf810b59c93e2fd88/Miro_WMT.png" data-mid="137877101" border="0" src="https://freight.cargo.site/w/1000/i/8db1582f2f3fbe803d53a2f94c76c5089aa65780d02651aaf810b59c93e2fd88/Miro_WMT.png" /> Work in progress High-Fidelity Wireframes Every project has its hurdles; time is often one of them. Since Eko already had the interactive video product, our job was the integrate Eko into the Walmart app/website, integrate e-commerce, and define necessary features. We started with high-fidelity wireframes to quickly telegraph the MVP elements. MVP Features: App tout for the home screen (to introduce the platform to Walmart app users)Camp home screenInteractive videoProducts in video to purchase We explored additional features to go the extra mile for Walmart, working in Adobe XD to create wireframes. <img width="1742" height="646" width_o="1742" height_o="646" data-src="https://freight.cargo.site/t/original/i/bad6f16b30267695bc5df1249b51c2b393ac79d6933b2ea7db1660f14eb2b7fe/camp_1.png" data-mid="137877099" border="0" src="https://freight.cargo.site/w/1000/i/bad6f16b30267695bc5df1249b51c2b393ac79d6933b2ea7db1660f14eb2b7fe/camp_1.png" />Some early high-fidelity mock ups for each MVP feature <img width="1768" height="584" width_o="1768" height_o="584" data-src="https://freight.cargo.site/t/original/i/63575c28ea026fb098f97631f869cf7b37414edcb2953d95bd71522867a5a800/camp_2.png" data-mid="137877100" border="0" src="https://freight.cargo.site/w/1000/i/63575c28ea026fb098f97631f869cf7b37414edcb2953d95bd71522867a5a800/camp_2.png" />“NICE TO HAVE” features: CHAT, LIVE ZOOM EVENT Prototyping I used Principle for prototyping this project because of its robust capability to prototype with interactive video. The main obstacle we faced was creating a prototype that could seamlessly transition from the standard vertical app view to a full screen view. This was particularly challenging due to the limitations of Principle, which cannot manipulate the orientation of your device. As a result, there were additional steps that needed to be taken in order to properly view the prototype in its intended state. Camp Prototype for User Testing User Testing Due to constraints in time and budget, we opted to recruit internally at Deutsch, specifically targeting parents with young children. This approach proved to be beneficial as it allowed us to receive frequent and timely feedback, enabling us to iterate and enhance our work efficiently. <img width="1000" height="1051" width_o="1000" height_o="1051" data-src="https://freight.cargo.site/t/original/i/c6d8a13e2b2e5db14dc483b3344fc028b0214f8f98bae0c15deee81f3c690f83/usertesting-script.png" data-mid="137877687" border="0" data-scale="100" src="https://freight.cargo.site/w/1000/i/c6d8a13e2b2e5db14dc483b3344fc028b0214f8f98bae0c15deee81f3c690f83/usertesting-script.png" /> Example of User Testing Script Process For User Testing Define and recruit target audience, whether with informal “cafe test subjects” or with a moderator/recruiting service.Create a dynamic, clickable prototype that is as close to the final product as possible. This includes copy and images.Write a user testing script beforehand, but improvise when needed.Record both the user’s face and prototype so that you can observe how they feel and what they are interacting with.Take notes on the fly and use a conversational approach. Most users are nervous about doing the “wrong” thing, so it’s always great to support them by saying “whatever you’re doing is the right thing!” or “if it seems broken, it’s our fault” and if the user seems frustrated, to prompt with “tell me how you’re feeling.”Don’t be flustered if the prototype is broken. The more the user knows it’s broken, the more frustrated they get.Adobe XD was the preferred prototyping software as you could make live updates to the prototype in between test sessions, and this allows you to troubleshoot any prototyping errors. I believe that it is more important to get the most realistic prototype out there than to worry about mistakes. Each test is precious, and when you start to get repetitive feedback, you’re not really capitalizing on the time you have with each tester. That being said, some things are better left tested as-is, and should be considered case-by-case.User Testing Feedback Three rounds of testing were conducted, unveiling the difficulties parents and children faced in the early stages of COVID-19. Parents required activities that children could independently engage in, surpassing mere entertainment. The notion of conveniently ordering supplies for such activities on a single platform appealed to them, with Walmart's vast inventory and accessibility at an affordable price. The primary usability issue encountered was the format of "Activities" within each "Episode". Users were directed to a specific section of the interactive video when clicking on each "Activity", making it arduous to navigate around the Episode to various activities due to the non-linear nature of interactive videos. However, each activity had multiple configurations, such as "Making sock puppets", with examples including "Sock Puppet with Green Eyes" and "Sock Puppet with Red Eyes". Eventually, "Activities" was removed from the interface, and "Activity" replaced the "Episode" nomenclature. This change was critical in defining the Camp's architecture, as "Activity" was unique to the Camp experience and "Recipe" was exclusive to the Cookshop experience (refer to Cookshop below). Camp by Walmart <img width="2500" height="1774" width_o="2500" height_o="1774" data-src="https://freight.cargo.site/t/original/i/21d91c518f123237cae0e0783e050fa6028b7167bfcc4c4055816393716382b1/Screen-Shot-2021-04-28-at-6.15.15-PM.png" data-mid="137879049" border="0" src="https://freight.cargo.site/w/1000/i/21d91c518f123237cae0e0783e050fa6028b7167bfcc4c4055816393716382b1/Screen-Shot-2021-04-28-at-6.15.15-PM.png" /> Cookshop by Walmart Desktop Site Cookshop Due to the success of Camp, we were able to launch a cooking-themed version of Camp. With learnings and data from Camp, Cookshop was the new and improved version of the platform. In future iterations and rounds of testing, our challenge was to improve the usability of the ecommerce capabilities. Luckily, Walmart had updated the grocery section of their website to allow API access of their products. This was important as products differ by location, so a user must select a Walmart store in order to view the available products. We used a “drawer” component to provide users access to features like sharing, exploring more episodes, and exploring series. The drawer design was a great way to provide access to shoppable products. Live Product Demos Cookshop by Walmart - Casa Vergara Cookshop by Walmart - Over the Top with Patti LaBelle https://angiekang.com/Almonds-com-1 Tue, 15 Aug 2023 00:14:19 +0000 Angie Kang https://angiekang.com/Almonds-com-1 Almonds.com Client The Almond Board of California Years2019 - 2020 “A world-class website that delivers on all fronts – content, searchability and an overall aesthetic and design that invites visitors to stick around and return frequently.”— Jenny Nicolau, Sr. Manager of Industry Relations &amp; Communications In 2019, Deutsch LA was tasked with redesigning Almonds.com for The Almond Board of California.We started by conducting in-depth research to understand the almond industry and interviews with stakeholders. The Almond Board of California represents a large community of almond growers, vendors, and researchers across the world. Content StrategyThe challenge for Almonds.com was simplifying a legacy website with over 200 pages. We took a look at all of the current content, cleaned it up, and translate it over to the new platform while bringing everything up to date. We worked closely with an SEO partner to determine key pages to keep. New audience segments were necessary to eliminate redundancy and optimize information flow. I adopted a hands-on strategy by employing an online extraction tool to print each page of the website. Similar pages were then grouped together based on common topics, and sticky notes were utilized to label them. <img width="750" height="563" width_o="750" height_o="563" data-src="https://freight.cargo.site/t/original/i/175be603bcf93a5a064a718a47d199d6110036e366bfce363065e127c0bce03e/content-research.jpeg" data-mid="187947001" border="0" src="https://freight.cargo.site/w/750/i/175be603bcf93a5a064a718a47d199d6110036e366bfce363065e127c0bce03e/content-research.jpeg" /> CONTENT RE-ORG PROCESS This process allowed us to narrow down the main categories that became the new site architecture. While rewriting all of the existing site content was not realistic, we were able to combine sections and clean up the copy to make Almonds.com a critical source of information for almonds.Our core users were characterized by: Almond Consumers consist of those who buy almonds or want to know more about their nutritional value and environmental impact. Almond Professionals consist of those who worked in the industry, including farmers and nutritionists. In order to improve wayfinding and searchability, we combined content into broader sections so that anyone could navigate the website with ease. A modular design systemWe developed an atomic design system that transformed almonds.com into a world-class publishing platform. The purpose was to provide an effortless method for content writers to publish on the website with design assistance to keep content fresh and up-to-date. <img width="1200" height="708" width_o="1200" height_o="708" data-src="https://freight.cargo.site/t/original/i/0d61a9d07c4363f82df7faf45026fe158ddf1845c5c139d7bc0e1eb6379a8887/atomic-design-product.jpeg" data-mid="187946999" border="0" src="https://freight.cargo.site/w/1000/i/0d61a9d07c4363f82df7faf45026fe158ddf1845c5c139d7bc0e1eb6379a8887/atomic-design-product.jpeg" /> ATOMIC DESIGN BY BRAD FROST <img width="1280" height="720" width_o="1280" height_o="720" data-src="https://freight.cargo.site/t/original/i/d5a27fa485e1c2d2cfaa0c6fb9b3cdacabbf7626bf36b15731a193cf3dbadd3b/1280x720_Almonds--1.png" data-mid="187947000" border="0" src="https://freight.cargo.site/w/1000/i/d5a27fa485e1c2d2cfaa0c6fb9b3cdacabbf7626bf36b15731a193cf3dbadd3b/1280x720_Almonds--1.png" /> User TestingWe conducted remote user testing over the course of 2 weeks with about 20 individuals by sharing a prototype link and having the users share their screens. For Almond Professionals, we asked questions about their profession to understand how they use the website and what information was most important to them so that we could create a website that would become a useful tool for their work. For Almond Consumers, we probed to understand what kind of content they would like to see and how they felt about the overall look/brand of the new website. https://angiekang.com/Cosmos-Modern Sat, 14 Jan 2023 00:08:29 +0000 Angie Kang https://angiekang.com/Cosmos-Modern <img width="2688" height="1628" width_o="2688" height_o="1628" data-src="https://freight.cargo.site/t/original/i/060759fe35649c224eb9e71aa622d987d1ad25615c53289afa45cff8f5965b6d/CosmosModernLogo.png" data-mid="200541362" border="0" src="https://freight.cargo.site/w/1000/i/060759fe35649c224eb9e71aa622d987d1ad25615c53289afa45cff8f5965b6d/CosmosModernLogo.png" /> I started my own online jewelry shop because I struggled to find hypoallergenic jewelry that was both modern and affordable.Through this project, I designed the branding, took photos and ventured into jewelry design by designing a daisy pendant and earring set. All other products are curated pieces.<img width="6240" height="4160" width_o="6240" height_o="4160" data-src="https://freight.cargo.site/t/original/i/5640eec0dcf36225b642f581b824d4e18b5337d4373aca87236206c147dede4c/DSCF8912-2.jpeg" data-mid="179313869" border="0" src="https://freight.cargo.site/w/1000/i/5640eec0dcf36225b642f581b824d4e18b5337d4373aca87236206c147dede4c/DSCF8912-2.jpeg" /> I’m learning how to become a marketer through the process of building this website, which also means becoming a content creator. In 2023, I decided to pivot my company’s focus to reducing fashion waste. I wanted to revisit my past passion for vintage and upcycling. I rebranded my company from Cream to Cosmos Modern to reflect the the future and a love for our planet— it was also much better for SEO. In addition to vintage, I source zero waste products from women-owned businesses in effort to support other small businesses and begin to create an economy and culture that actively reduces waste.Website: www.cosmosmodern.com Instagram: @cosmosmodern TikTok: @cosmosmodern https://angiekang.com/Family-Style Mon, 28 Mar 2022 00:25:26 +0000 Angie Kang https://angiekang.com/Family-Style <img width="1500" height="434" width_o="1500" height_o="434" data-src="https://freight.cargo.site/t/original/i/1fddc6a8f58e3af44c68fe3937e61dd14f5285d2f659b8f234be927586dc94e0/familystyle-logo2x.png" data-mid="138247440" border="0" data-scale="24" src="https://freight.cargo.site/w/1000/i/1fddc6a8f58e3af44c68fe3937e61dd14f5285d2f659b8f234be927586dc94e0/familystyle-logo2x.png" /> <img width="700" height="394" width_o="700" height_o="394" data-src="https://freight.cargo.site/t/original/i/024d598babd16ac93e875ab94ee2c59afc0f569cf6f28ff6b82166ea2c63187b/sailormoongif-angiekang_compressed.gif" data-mid="138247880" border="0" src="https://freight.cargo.site/w/700/i/024d598babd16ac93e875ab94ee2c59afc0f569cf6f28ff6b82166ea2c63187b/sailormoongif-angiekang_compressed.gif" /> NFT Collection Against Asian HateYear 2021 RoleProject Manager, Director, Contributing Artist Press This Deceptively Cute NFT Collection Is A Jab At Asian Hate — AdAge'Against Asian Hate' NFT Collection Calls for Change, Set to Benefit Stop AAPI Hate — Cheddar TVAgainst Asian Hate: Protest Art Goes Digital in Bold New Collection — AsAmNews Overview Deutsch LA established its first-ever employee resource group, Family Style, that focuses on Asian American Pacific Islander (AAPI) matters. As a co-lead, I began working in 2021 and launched numerous initiatives aimed at creating awareness about anti-Asian violence and uplifting our nearby AAPI community, including the sponsorship of the Asian Youth Center.We launched an NFT collection on Rarible titled, “Against Asian Hate” to fight back against the rise of anti-asian violence. If people were willing to spend money on digital things, our hope is they will also be willing to help drive societal change and donations to stop anti-Asian hate and violence. We were able to launch 7 NFTs from 7 AAPI artists across the country. In the wake of the 2021 Atlanta spa shootings, the anger and sadness felt in the AAPI community was palpable. I was personally deeply affected by that incident, so I found much solace in channeling those emotions into this project. And what better way to portray the voices of our community than through art? View the collection on Rarible The press we garnered for the project gave me the opportunity to shine a light on anti-asian violence, and to put our voices out there even if it was in a non-fungible GIF form. ADAGE Creativity Top 5: April 16th, 2021 https://angiekang.com/Taco-Bell-Taco-Gifter Mon, 28 Mar 2022 05:45:31 +0000 Angie Kang https://angiekang.com/Taco-Bell-Taco-Gifter <img width="1280" height="720" width_o="1280" height_o="720" data-src="https://freight.cargo.site/t/original/i/531c31fff5c82c3b5851cb80d572bb1972079d23e35539b02d0703340eeee48b/1280x720_TacoBell_Gifter.png" data-mid="137763724" border="0" src="https://freight.cargo.site/w/1000/i/531c31fff5c82c3b5851cb80d572bb1972079d23e35539b02d0703340eeee48b/1280x720_TacoBell_Gifter.png" /> Taco Gifter The taco-gifting service you didn’t know you needed. Years 2018 - 2019 RoleLead UX Designer HighlightsHighest E-commerce Sales Day EverOver 10,000 Tacos Gifted In 1st HourOne Show (Shortlist)Campaign US BIG Awards (Finalist) PressFood &amp; Wine Yahoo TimeOut USA Today Marketing Dive <img width="1094" height="210" width_o="1094" height_o="210" data-src="https://freight.cargo.site/t/original/i/08157b7b04581e361d85a3c5c8cf507a956875ef58893f078c9e203820696338/yt-comment-gifter.png" data-mid="137879710" border="0" src="https://freight.cargo.site/w/1000/i/08157b7b04581e361d85a3c5c8cf507a956875ef58893f078c9e203820696338/yt-comment-gifter.png" /> Taco Gifter started ideating in 2018 as a broad concept and brief around gifting tacos To illustrate to our internal team how we would ensure that gifting tacos would make a big impact, I referenced Nir Eyal's book "Hooked: How To Build Habit-Forming Products." Nir Eyal theorized that users came back to an app or product because of four core concepts: TriggerActionRewardInvestment <img width="1024" height="574" width_o="1024" height_o="574" data-src="https://freight.cargo.site/t/original/i/a460292531bb5ba7f66b88c0f39735d56c0aa3e39ad4896dd2981ddc4e1e348d/pasted-image-0-1-1024x574.png" data-mid="137880429" border="0" src="https://freight.cargo.site/w/1000/i/a460292531bb5ba7f66b88c0f39735d56c0aa3e39ad4896dd2981ddc4e1e348d/pasted-image-0-1-1024x574.png" />Source The hook model would eventually set the baseline for Taco Gifter’s success. It’s a really simple framework that can help your team align creativity to reaching your client’s KPI goals. Competitive Audit I took a look at how other companies were allowing their customers to “gift” through a digital platform.Here’s what stood out: Starbucks has integrated a gift card service through iMessage. This only works if the user has the Starbucks app installed, but they are able to choose from a set of digital gift card designs to quickly send their desired amount through iMessage/SMS. They are able to pay using Apple Pay, and the recipient can add it to their Starbucks app to earn rewards. It’s easy to use, which makes casual ‘thank yous’ convenient and puts a smile on your recipient’s face. In fact, Starbucks Korea created a different e-gift service that allowed the user to fully customize a drink or foot item and gift it to their friends.Large retailers like Uniqlo and Target use a plug-in service called GIFTNOW on their website. This plugin-style button typically appears on the PDP (product detail page) so that users can select an item to digitally gift it to their friends. This makes gifting more personal than sending a gift card, because you’ve picked out the style, color, and size, just as you would if you walked into a store. The added benefit? Users can easily swap the item for a different color or item. Personas &amp; User Stories I came up with rough personas based off of assumptions just to be able to put myself in the user’s shoes and develop proper use cases. I think this also helped our creative teams to understand how to make Taco Gifter’s social media assets into a compelling story. The Core Users THE SENDER This would ideally be your friend, sibling, or a parent. Sending a taco is super casual, because it’s not only cheap but it’s digital. Your friend might send you a thank you for spotting them at Taco Bell, your sibling might say thank you for watching their dog, and your parent might send you a taco after they’ve dropped you off for college. THE RECEIVER Since the audience for eating at Taco Bell skews younger, the Receiver is more likely a friend, sibling, or child. Perhaps you’ve been away at college and your long distance boyfriend sends you a taco? The excitement of digitally unwrapping beats the excitement of receiving an e-gift card. Going back to the hook model, I took a look at the rough wireframe user flows and realized both the sending and receiving experience should be fun and exciting.Trigger: This part was well handled by our creative and social media strategists by launching compelling Instagram story ads that draw the user’s attention and pique interest.Action: The action goes both ways. The Sender starts the process of customizing their gift, so we want to make it fun for them so that they do it over and over again (and they did). The Sender is our best marketing plan. Once someone receives a gift, we need to make sure it lives up to the IRL hype.Reward: The Sender was rewarded at launch with free tacos to gift, but their true reward was making someone they care about happy. A bonus reward was the potential for someone to send a taco back to them. The Receiver is the one who really wins here, with a kind message, a custom picked GIF AND a free taco.Investment: If the Sender and Receiver love the experience, they will make sure to spread the word organically. Learnings What I learned from this project is the power of peer-to-peer interaction. It’s easy to track conversions by sales and engagement on social media, but it’s difficult to fully track traffic coming from SMS or Email. With over 10k tacos being gifted in the first hour of launch, I think that people will love and embrace any fun way to engage with their inner circle. https://angiekang.com/Real-California-Milk Fri, 01 Apr 2022 19:30:22 +0000 Angie Kang https://angiekang.com/Real-California-Milk <img width="1280" height="720" width_o="1280" height_o="720" data-src="https://freight.cargo.site/t/original/i/05f96db6aa6dc431ecdf001770e5f6e010239390d948421c10e2e1a512645419/cmab_mario.png" data-mid="200600785" border="0" src="https://freight.cargo.site/w/1000/i/05f96db6aa6dc431ecdf001770e5f6e010239390d948421c10e2e1a512645419/cmab_mario.png" /> Breakfast Time Stories CLIENTReal California Milk LINK Breakfast Time Stories︎︎︎ ROLEUX Designer YEAR2021 Overview The Real California Milk creative team at Deutsch LA came forward with the idea to write a series of tales to be shared over breakfast. My task was to create a landing page that would provide digital versions of the three stories, so that families could read them together on a tablet or smartphone at breakfast. Scrollytelling Concept In order to bring these stories to life a bit further, I pitched a few different concepts that provided Real California Milk the option to choose from two lower level of effort (LOE) concepts to one higher level of effort concept. They signed on to my recommendation of build the “scrollytelling” format for all three books, which was the higher LOE concept. Scrollytelling is a term that simply describes the triggering of events on a page by scrolling in order to provide a more compelling an interactive experience, specifically for long-form content/copy. It typically integrates a parallax effect to further enhance the illusion of depth, and with the rich illustrations our artists provided, parallax brought the traditional 2D look of our breakfast books to life in a beautiful way. To illustrate how scrollytelling works, I used Principle to prototype the idea using placeholder copy and illustrations. “Scrollytelling” Principle Prototype (desktop version) Finished Product These webpages were built to be fully mobile responsive. Here were the three books, brought to life by our amazing creative and development team. I absolutely loved the nostalgic illustration style! Shelly Shellbert, Loner Turtle Burt the Busiest Bear The Chipmunk Who Was Raised by Wolves Press Dairyfoods.comPRnewswire.com