Angie Kang
Digital Product Designer
Real California Milk
Bringing three children’s books to life with a “scrollytelling” experience.
Read more ︎︎︎
© 2023 Angie Kang
︎ hello@angiekang.com
How It Started...
My name is Angie Kang, and I’m a product designer based in Los Angeles. I was born and raised outside of Detroit.
When I was 11, I ran a Sailor Moon email newsletter on AOL with around 150 active members. This sparked an interest in graphic design and learning basic HTML. I used Napster to download a pirated copy of Photoshop.
Fine Arts and Entrepreneurship
I studied Film, Video and New Media at The School of the Art Institute of Chicago. I was interested in combining digital video, sound and installation. Before graduating in 2009, I designed and launched an online store on Shopify to sell repurposed vintage clothing.
Music
I’ve played in various music projects since I was a teenager, going on tour to a majority of the states in America. We often scraped by with little money and broken down vans, but it taught me so much about self-sufficiency, dedication and independence.
In 2013, I moved to Austin, Texas. My work as the singer/songwriter of a band called Future Death garnered some critical success and was featured in publications such as Pitchfork, Rolling Stone, and Vice.
Ecommerce
From 2013-2016, I launched and managed a Texas-based online boutique: KickPleat.com. I combined my experience in fashion, retail, and online marketing to help increase revenue to 682% in 3 years.UX Design
Since moving to Los Angeles in 2016, I’ve pursued a career in Product/UX Design. I’ve worked with brands like Taco Bell, Walmart, Esurance, 7-11, Canada Dry, Mott’s, VW, Honda and Pair of Thieves.
I think my diverse background provides me with a unique perspective and the ability to design products with a creative and empathetic mindset.
My goal is to launch projects that are fun, engaging and easy to use. But more importantly, I’m interested in creating emotional connections with design + technology.
Behr.com Refresh
Role
Lead 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
NOTE: Click/tap on image thumbnails to expand.
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:
- Navigation
- Product Category Page
- Brand Category Page (Parent PDP)
- Product Detail Page (Child PDP, or variant of Parent PDP)
- ColorSmart
- The Visualiser
- Cart
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.
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.
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.
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.
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.
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.
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.
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.
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 & 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) 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 & 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).
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) 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 & 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).
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 tester’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/findability.
Key Observations for Future Enhancements
- Multiple 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 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.
- Having the ability to apply the total recommended in the Coverage Calculator to the shopping module was something some users asked for.
Camp by Walmart
Role
UX Designer
UX Designer
Year
2020
2020
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. 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 Today
- Best of Behance
Research & 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. With the need for families to have new content during quarantine, we worked long hours and late nights to get the project out the door.
While browsing news articles, I discovered Miro. Miro is a virtual whiteboard where users can remotely collaborate. I brought the idea of using Miro to the team. 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.
Bird’s Eye View of Miro Board with Comments
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 home
- Camp home screen
- Interactive video
- Products in video
We explored additional features to go the extra mile for Walmart, working in Adobe XD to create wireframes.
Some early high-fidelity mock ups for each MVP feature
“Future State” or Non-MVP features: CHAT, LIVE ZOOM EVENT
Prototyping
After a few iterations of wireframes and alignment from all stakeholders, we handed the wireframes over to our UI designer for polish. Once the designs were in a good place, I took the XD file and transferred it to Principle. I used Principle because of its capability to prototype with video and robust interaction features.
The biggest challenge was prototyping the standard vertical app view to rotate into a full screen view, because Principle is unable to control your device’s orientation so there are some additional steps one must take to see the prototype in its intended state.
User Testing
Sometimes there’s just no time or budget to recruit external user testers. We recruited internally at Deutsch, targeting parents of young children.
This proved to be very helpful in providing “early and often” feedback so that we could quickly iterate and improve.
Example of User Testing ScriptProcess 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
We conducted 3 rounds of testing. We learned of the struggles parents and children faced in the early months of COVID-19. What the parents needed were activities that children could do independently, with a strong desire for those activities to be more than just entertainment. They liked the idea of being able to order supplies for activities in one platform, and the incredible inventory and accessibility that Walmart has access to would allow them to do so at an affordable price.
Usability-wise, our biggest hurdle was the structure of “Activities” within each “Episode”. Clicking on each “Activity” would deeplink the user into a specific section of the interactive video. Because of the non-linear nature of interactive videos, it is difficult to jump around the Episode to different Activities. However, an activity has multiple different configurations. For instance, an episode would be “Making sock puppets”. An example of an activity was “Sock Puppet with Green Eyes” and “Sock Puppet with Red Eyes”.
Ultimately, “Activities” was removed from the interface and the term “Activity” replaced the nomenclature of “Episode”. This was significant in defining the architecture of Camp; “Activity” was unique to the Camp experience, as “Recipe” was unique to the Cookshop experience (see Cookshop below).
Additional Challenges
Camp by Walmart launched within the Walmart app, so we faced some challenges in adapting the platform across devices. Camp could not be fully integrated into the Walmart app due to LOE, which posed some challenges when rotating the device for a full screen view. Interactive video works best on mobile when in full screen. This was exceptionally challenging when user testing over Zoom, as Principle does not adapt to device rotation, so we had to fake it by prompting the users the tap a button. This proved to mislead the true experience. However, more users accessed Camp by browser, and the incredible development team was able to build a seamless experience.
Camp by Walmart
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
The taco-gifting service you didn’t know you needed.
Highlights
- Highest E-commerce Sales Day Ever
- Over 10,000 Tacos Gifted In 1st Hour
- One Show (Shortlist)
- Campaign US BIG Awards (Finalist)
It started in 2018...
Taco Gifter started ideating in 2018 as a broad concept and brief around gifting tacos.
I started research to illustrate how we would ensure gifting tacos would make a big impact, and came across 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:
- Trigger
- Action
- Reward
- Investment
Source
The hook model would eventually set the baseline for Taco Gifter’s success. It’s a really simple concept that will ensure that you’ve designed an experience that reaches your client’s KPI goals.
Competitive/Comparative 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 & 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
1. 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.
2. 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.
Taco Gifter continues to be an evergreen feature in the Taco Bell app today.