UX Case Study: Creating a Virtual Trick or Treat Experience

In 2020, the spread of COVID-19 resulted in the ban of Halloween events and trick-or-treat activities in several US cities and counties. The US Center for Disease Control and Prevention (CDC) also strongly advised individuals and families to stay home during Halloween.

Fearing that the ban might lead to a fall in candy sales, a famous candy company is looking to create a virtual trick-or-treat experience, in an effort to drive more traffic and sales to their existing online store during the Halloween period.

My Role

Role: UI/UX Designer
Duration: February 2022 — October 2022

Me getting into my role

The Process

1. Discovery

1.1 Requirements Gathering

A requirements-gathering workshop was first conducted by our project manager and was attended by key stakeholders. During the session, the client explained their goals and listed the business, user, and technical requirements they had for their product.

The purpose of requirements gathering is to help the team align and understand what the client wants exactly, which helps to scope the project. Gathering requirements early in the product development process prevents the team from spending unnecessary time and effort to develop something that is not useful to the user.

Do note that at this point, the requirements do not need to be perfect. They could be based on assumptions and be validated at a later time.

1.2 User Interview with End User

From the requirements gathering session, we’ve understood that our client is looking to create a virtual trick-or-treat experience. The next thing I did was to arrange for a user interview session with a few participants. The user interview session aims to:

• Understand the current trick-or-treat process.
• Validate any assumptions made during the first requirements-gathering workshop
• Double up as a second workshop to gather new requirements

I chose to conduct a user interview because it is great for identifying broad patterns and themes in a person’s experience, problems, and behaviour. They are also great for testing possible solutions, so I used it to find out what are my participant’s thoughts on a virtual trick-or-treat experience.

I conducted a total of five (3 adults and 2 children) user interviews, each with a different participant. The child participant must have participated in trick-or-treating in the last 4–5 years and the adult participant must be a parent who has taken their child to trick-or-treating in the last 4–5 years.

How the interview went with the children

Here are some of the questions asked during the session:

• Walk me through your typical trick-or-treat process
• What are some of the pain points experienced during trick-or-treating?
• What are your thoughts on a virtual trick-or-treat activity?

1.3 Capturing Requirements & Research Insights

After gathering all the requirements and research insights, we synthesised the raw data collected and represented the key findings with the following:

1.3.1 Proto-personas

Unlike Personas, Proto-personas are a lightweight form of personas that can be built without extensive research. They can be created within a few hours, using whatever information we have so far, and refined later as we gather more insights through more discovery work.

I chose to create proto-personas because it helps to create alignment within the team early. It makes sure that everyone is clear about the requirements and insights, which in turn helps us to better empathize with our users.

I’ve created proto-personas for the 2 user groups our client would like to target. These are adults (ages 18 to 60) as well as children (ages 5 to 12). I’ve included some basic information as well as some key user goals for each proto-persona.

1.3.2 Experience Map

Not to be confused with a user journey map, an experience map represents the experience of a “generic” person as he or she accomplishes their goal. Unlike user journey maps, there is no product or service tied to experience maps.

Since I am creating an online trick-or-treat experience. I thought it would be useful for me to first create a visualisation of the physical trick-or-treat process and list some of my research insights on the map.

On the experience map, I broke down the trick-or-treating process into smaller activities from left to right. You can see that there is a slight difference in the activities carried out by both users. At the bottom, I’ve created an emotions chart to represent what both users typically feel during trick-or-treating. I’ve also listed the plus points (mostly experienced by the child) and the pain points (mostly experienced by the adult) experienced during trick-or-treating.

2. Define

After gathering all the information in the discovery phase, we start narrowing down to create a focus. The define phase is where clearly define a problem (or problems) we want to solve and this will serve as the basis for ideation in the next phase.

Context: The spread of Covid 19 has led to the ban of Halloween activity in various US States and Counties.

The Problem: Children are unable to go out to socialise and collect candy during trick-or-treating.

Based on the problem listed, I generated a How-Might-We statement to help reframe the problem into opportunity areas.

How-Might-We allow children to socialise and receive candy without leaving the house?

3. Ideation

The Ideation phase is where we take our How-might-we statement and try to generate as many ideas/potential solutions to address the problem.

3.1 SCAMPER Technique

The SCAMPER technique is a popular technique that helps to generate new ideas by forcing us to look at the existing solution from a different “lens”. The seven lenses in the SCAMPER method are as follows:

1. Substitute
2. Combine
3. Adapt
4. Modify (Also Magnify and Minify)
5. Put to another use
6. Eliminate
7. Rearrange

This technique is especially useful when coming up with a new product based on an existing product, service, or situation. Since I am recreating the trick-or-treating process, I thought it will be good to apply the SCAMPER technique to the physical trick-or-treat process.

To find out more about the SCAMPER technique, please check out this article by Interaction Design Foundation.

3.2 MoSCoW Prioritisation Technique

After coming up with a few ideas for our proposed design solution, we had a discussion with key stakeholders to see which features and functions they would like to prioritise and include in our MVP (Minimum Viable Product). We took the points listed from the SCAMPER technique and sort them into 1 of the 4 categories:

1. Must Have
2. Should Have
3. Could Have
4. Won’t Have

During the sort, we had to consider the business value and technical complexity of a feature or function, on top of how useful they would be to a user.

Here are some of the reasons behind the sort:

• The Map API is a must-have feature because it simulates the experience of going door to door to collect candy.
• The credit system is also a must-have feature because it will be the main form of currency in the app and it allows for online transactions between 2 users.
• I placed the Mini-games in the won’t have category because designing and developing mini-games would take up too much time and exceed the timeline discussed with our client.

To find out more about the MoSCoW Prioritisation Technique, please check out this article by Interaction Design Foundation.

3.3 Proposed Solution

Next, I came up with a proposed solution based on the features and functions that were prioritised previously.

“Our team will be creating a virtual trick-or-treat experience on our client’s existing online store app. The goal is to allow users (Child + Adult) to experience trick-or-treat online despite government restrictions on the physical trick-or-treat. On the app, users will be able to explore their neighbourhood on a map API and set up a video call to interact with other users on the app.

I will also introduce in-app credits that users (mostly adults) can purchase. Similar to how candy is given to children during trick-or-treat, in-app credits can be transferred from one user to another during a video call session. Users can use the credits to exchange for physical candy in the online store. The physical candy will then be delivered to the user after check-out.”

4. Design

4.1 User Flow & Wireframes

I created 2 user flows and their respective wireframes to summarise the details of the proposed solutions. A user flow represents the actions which users are expected to take when interacting with your product. These flows will then be translated into wireframe screens.

4.2 Summary of key features — In-app credits

In-app credits are one of the main components for this virtual trick-or-treat experience. It is a form of currency used for transactions between two users on our app. Users can purchase in-app credits and transfer them to other users during the virtual trick-or-treat. This resembles the act of giving out candy when someone visits your house during a physical trick-or-treat. Do note that the purchase of in-app credits will be the main source of revenue for our client.

Typically after trick-or-treating, a parent will sort the candy collected together with their child. This is done to prevent the child from consuming candy that is expired or triggers his or her allergy. Sorting can be difficult because we will need to go through a large number of candies from different brands and manufacturers. Not to mention that some of these candies may be extra difficult to sort because the ingredients list might be in a foreign language or the manufacturer did not include an ingredients list on the candy.

The concept of exchanging in-app credits for physical candy can address these issues by allowing users to choose the candy they wish to exchange with their credits. Users are in direct control of what candy they would like to receive, thus eliminating the need for candy sorting.

The amount of credits collected after 1 night of virtual trick-or-treat

5. What’s Next

I will create a hi-fi prototype based on the wireframes and our client’s brand guidelines. After coming up with the prototype, we will pass the screens on to the developer who will begin developing the MVP. We will then run a usability test on the MVP to see how well the product performs. The feedback gathered during the usability test will be included in the backlog for future iterations.

Wrap Up

This case study is an internal design challenge, which is part of the onboarding for new hires. Through this project, I better understood the design thinking process and the agile framework. It gave me the chance to try out new ideation and prioritisation techniques. The constant feedback sessions with my team also helped to improve my soft skills such as communication skills and problem-solving skills.

I am thankful to be given the opportunity to undertake this assignment and hope to take on other interesting design challenges in the future.