︎
Angie Kang
Digital Product DesigneR
︎ WORK          ︎ BIO            ︎ CONTACT          ︎ LINKEDIN         ︎ RESUMÉ

Angie Kang

Digital Product Designer




Hello

Camp by Walmart


Role
UX Designer
Year
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




    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:
    1. App tout for home
    2. Camp home screen
    3. Interactive video
    4. 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.

    Camp Prototype for User Testing


    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 Script


    Process For User Testing


    1. Define and recruit target audience, whether with informal “cafe test subjects” or with a moderator/recruiting service.
    2. Create a dynamic, clickable prototype that is as close to the final product as possible. This includes copy and images.
    3. Write a user testing script beforehand, but improvise when needed.
    4. Record both the user’s face and prototype so that you can observe how they feel and what they are interacting with.
    5. 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.”
    6. Don’t be flustered if the prototype is broken. The more the user knows it’s broken, the more frustrated they get.
    7. 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