Elsie Wang /
🛒
Fighting the irresistible urge to splurge
Fighting the irresistible urge to splurge
🛒

Fighting the irresistible urge to splurge

Role
Product Manager & Designer
Tags
UI/UX Design
Testing
Description
App prototype that helps curb online impulsive shopping.

Role

Product Lead, UX Researcher and Designer

Duration

10 weeks

Tools used

Figma, Miro, Marvel
 

Team

Sean Liu (Research)
Nicole Woo (Design)

What I did

Research: Designed, conducted, and analyzed user interviews, diary studies, intervention studies, and assumption tests. Conducted literature review.
Design: Brand identity. Lo-fi wireframes, conceptual development to mid-fi screens, refined features for the hi-fi prototype, and interaction design of the high-fi prototype.
 

Overview

Problem

Today, people buy things they don’t need or even really want, often on in impulse. One email survey of found that American women owned an average of $550 of unworn clothes. Not only is it terrible for our planet (~ 10.5 million tons of clothes end up in American landfills each year 😢), uncontrolled overconsumption is harmful to personal well-being:
  1. Shoppers end up spending in a way that’s not conducive to their long-term financial goal
  1. Online shoppers may end up on a hedonic treadmill in which the continuous pursuit of new stuff leaves them unhappy and unfulfilled.

Challenge

How might we help people struggling with unrestrained online shopping reclaim control over their digital consumerism?

Solution

💡
We designed Shift – your mindful shopping companion that intervenes your browsing session and encourages you to recognize what you’re trying to “quick fix” with online shopping. Then, it’ll recommend activities (that aren’t online shopping!) to help you meet your needs in a more fulfilling, wallet-friendly way.
 
Figure 1 – How “Shift” Works
Figure 1 – How “Shift” Works
Now, on to how we got here…

1/ Problem Exploration

Learnings from a Lit Review & Diary Study

We began by reviewing academic research about online shopping addiction, e-commerce design patterns, and self-control strategies to gain a deeper understanding of our opportunity space. Among other insights, one stood out the most:

Retail therapy is real.

“Shopping is a way that we search for ourselves and our place in the world. A lot of people conflate the search for self with the search for stuff. Shopping therefore becomes a quick fix for other problems.”
– April Lane Benson, psychologist and specialist in treating compulsive shopping
 
So we investigate: what problems are “Spencer the Spender” trying to quick-fix by online shopping? To identify factors that lead digital natives to make impulsive purchases (environment, emotions, motivation, ability), we also asked nine young adults to log their situational context, shopping motivations, and emotions whenever they felt an urge to browse. Our findings distilled the online shopping experience into 5 stages (Figure 3).
Figure 3 – Online shopping triggers and attempts at self-restraint across an online shopping session (from baseline study, interviews, literature review, and comparative analysis)
Figure 3 – Online shopping triggers and attempts at self-restraint across an online shopping session (from baseline study, interviews, literature review, and comparative analysis)

It’s more than for filling a void.

In addition, we observed that users typically began to browse because they hoped to:
  1. ❤️‍🩹Avoid negative emotions: “Sometimes I just want to numb or distract myself.”
  1. 🥲 Relieve Stress: “It’s a way to put my mind at ease after a stressful or tiring day.” – Kevin, 27 y/o tech professional
  1. 😑 Fill boredom: ““I’m in a Zoom class or maybe my Netflix show is getting boring” – Sang, 21 y/o college student

It’s a slippery slope.

Participants seemed to accumulate desire and mental fatigue when browsing, making it difficult to abandon their shopping cart at checkout. This suggested that intervening at the browsing stage may be more effective than deterring purchases at checkout, so we decided to hone in on the browsing stage in our following problem and solution space explorations.

2/ Solution Finding

Testing Intervention Strategies

Based on findings from our baseline study and comparative research (see the previous section), we decided to investigate two strategies for intervening at the browsing stage:
  1. Substitute online browsing with an alternative activity
  1. Use introspection to stop users from browsing

Intervention 1: Activity substitution

Each time the user feels an urge to browse, we show them a list of alternative activities instead. To avoid overloading users with choice paralysis, we offer only three activities (updated each day): one internet-based activity, one physical activity, and one social activity.
Figure 6 – (From top to bottom) sample of one internet-based activity, one physical activity, and one social activity
Figure 6 – (From top to bottom) sample of one internet-based activity, one physical activity, and one social activity
 

Intervention 2: Introspection prompts

Each time the user feels an urge to browse, we’d nudge them into System 2 Thinking via situational, financial, and motivational prompts:
  • Situation: How did I get here?
  • Financial Goals: How much have you spent this month?
  • Motivation: Is there something, in particular, I need to buy?
 

What we learned

Browsing sessions fell into two distinct categories: functional browsing, driven by a genuine, functional need, and undirected browsing, where users had no target item to buy in mind.
  • 📉 Both interventions slightly decreased the urge to begin undirected browsing.
  • 🎯 Neither intervention affected the urge to begin functional browsing.
  • Participants rarely did the suggested alternative activities. Possible reasons include 1) the activities may not satisfy what participants need emotionally, and 2) they may not match participants’ personal goals and interests.
Figure 7 – Effectiveness of substitution and introspection interventions in undirected and functional shopping scenarios
Figure 7 – Effectiveness of substitution and introspection interventions in undirected and functional shopping scenarios
 
Figure 8 – Intervention-Outcome System. Line thickness represents # of participants that took the given path; colors delineate distinct participant pathways through the system.
Figure 8 – Intervention-Outcome System. Line thickness represents # of participants that took the given path; colors delineate distinct participant pathways through the system.

Future study design

If we could do the intervention study again, we would make the following improvements:
  • Personalize the alternative activity suggestions. Currently, it’s hard to tell if substitutions didn’t work because the activities weren’t a great fit or because substitution is an ineffective strategy.
  • Reduce friction in the intervention. We asked participants to fill out a spreadsheet each time they felt an urge to browse; however, in some cases, the thought of filling out the spreadsheet was enough to deter online browsing. We can remove this factor by using less intrusive ways to test the intervention.
  • Focus on undirected browsing groups. Because our target user persona, Spencer, frequently makes unnecessary purchases, we can focus on undirected browsing and exclude functional browsing sessions.

Putting it together: a solution

We realized users might not be aware of their underlying motivation behind their urge to browse from the intervention study. While alternative activities may fill up the time the same way as browsing, it may not fulfill the user’s deeper emotional needs (e.g., relieving stress, avoiding negative emotions).
Our solution is to combine our two intervention strategies. The solution works as follows:

Step 1: Recognize

Step 2: Replace

We’ll encouraging people to recognize the emotional needs that led them to online shop in a given moment…
By shopping, I’m trying to…
  • Avoid negative emotions
  • Relieve stress
  • Fill boredom
Then we’ll replace shopping with alternate — and more wallet — coping mechanisms, stress relievers, and support.
Instead, I can…
→ Call friend or family to talk it out
→ Journal, color, or take a stroll
→ Rewatch of a comfort TV show
By driving users to become self-aware of their needs and how they can satisfy them in an alternative way, our system may redirect users more effectively.
 

Testing our assumptions

Figure 12 – Assumption Map; WBT = We believe that
Figure 12 – Assumption Map; WBT = We believe that
From assumption mapping, we found that our most critical assumption was (in top-right):
  • If users introspect on the emotional needs underlying their urge to browse,
  • then they will be more likely to attempt a substitute activity,
  • because they’re more aware of their needs and how they can be satisfied alternatively.
 
If this assumption were false, then our solution (combining the two intervention strategies) would not be effective. Hence, we created two conditions to test this assumption (also serving as our hypothesis):
 

Assumption Test Design

We asked 4 participants to fill in a quick Typeform whenever they were about to pursue undirected online shopping. Each instance of shopping desire constituted one trial, and each participant experienced both the control and experimental conditions.
🔧
Experimental: we asked the participant to identify a word (or two) on an emotion wheel that captures how they feel in that moment, then identify their emotional needs based on that feeling. Then, they’d list two alternative activities to online shopping that may satisfy those needs and report whether they continue to online shop.
🔧
Control : we asked the participant to list two alternative activities to online shopping, then self-report whether they would continue to online-shop or abandon the session.
 
notion image
 

Results

Our hypothesis mainly was validated ✅: Users in the experimental condition had a slightly higher rate of doing an alternative activity than the control condition (Figure 13, Chart 1). However, we couldn’t conclude any statistical significance due to the small sample size.
Figure 14 – Assumption Test Results
Figure 14 – Assumption Test Results
Unfortunately, most participants continued to shop rather than do an alternative activity (Figure 13, Chart 2). So looking ahead, it would be interesting to test with a larger sample size to determine the efficacy of our assumption. It would also be good to exclude users who browse for functional needs for more targeted testing of undirected browsing scenarios.
We also learned two critical lessons about we mere humans 🧬🫀:
  • First, we are not the best activity recommenders for ourselves. It takes plenty of cognitive energy to develop a creative, fun activity we’ll enjoy beyond the basics (watch TV, go outside, go on my phone) but that also fits our current mood, energy levels, and schedule.
  • We need coach marks and options  to unearth our true feelings and needs.
 
Therefore, we:
  1. Came up with a list of needs of emotions to include in the “needs identification” portion of our activity recommendation flow
  1. Brainstormed and cataloged a library of activities that mapped to users’ potential needs, moods, and timeframes
  1. Embedded coach marks into our activity recommendation UI to help users identify the best activity for their unique situation
 

3/ Bringing Shift to life

Beginning with wireflows

Building the visual architecture for Shift began with detailed wire flows of our core three task flows: introspection, browsing activities, and completing an activity. The tasks are summarized as follows:
  1. Interception and introspection: Shift notifies Spencer once they’ve begun a browsing session and prompts them to complete a short introspection module that uncovers their emotional needs at that moment
  1. Browse and choose: beyond the initial recommendations, Spencer can explore and select an alternative activity from a categorized page based on needs.
  1. Complete and reminisce: Spencer completes an activity via an intermediary in-progress screen and is rewarded with leveling up in their corresponding chosen goal
This exercise helped us concretize specific intended features and the exact steps that each flow would need for completion. Transforming our system diagrams into mobile UI challenged us to think intentionally about how we were to employ our digital real estate.
 
Figure 15 – Wireflow sample (for task 2)
Figure 15 – Wireflow sample (for task 2)

An aside on Brand Personality & Visual Identity

Nailing the Shift brand was central to our solution execution, as it rests on the idea that this app is a user’s closest, non-judgemental friend they can turn to when on the brink of caving to impulses. Our brand would be playful, optimistic, supportive, and welcoming. We selected warm, saturated oranges, balanced with their split complementary soothing purplish-blue hues. Rounded components and typography added a casual, flexible flow. A minimalist UI focuses on activity asset photography, which centers on feelings of aspiration and inspiration. Finally, we synthesized these decisions into a design system to help us create reproducible, consistent screen designs. Shift’s best friends Airbnb and Hinge project similar energy.
 
Figure 16 – Moodboard
Figure 16 – Moodboard
Figure 17 – Style Tile
Figure 17 – Style Tile

Initial Prototype

We’ve included gifs of each of our three core tasks described above. A deeper dive into our layout choices can be found here.
Figure 18A – Pulse Check
Figure 18A – Pulse Check
Figure 18B – Find an Activity
Figure 18B – Find an Activity
Figure 18C – Compete Activity
Figure 18C – Compete Activity
 

Usability Testing and Refined Prototype

We put Shift to the test and asked participants to complete each of the three core tasks. TLDR, there were some significant usability issues, though we addressed them as follows.
⚠️
Colors aren’t universally nor intuitively related to emotions
🔧
We replaced color families with character illustrations to directly capture emotion groups.
Figure 19A – Pulse Check, Redesigned
Figure 19A – Pulse Check, Redesigned
 
Figure 19B – Find an Activity, Redesigned
Figure 19B – Find an Activity, Redesigned
 
⚠️
Editing needs and best-for-you functionalities are unnoticed 
🔧
We used coaching to call out the capability to edit needs and vertical scrolling for best-for-you to avoid immediately scrolling past.
 
 
 
 
 
 
 
 
⚠️
The purpose of the intermediary screen is unclear, and level indicators are interpreted as progress for specific activities
🔧
We refined in-progress and congratulatory flow to separate levels from activity completion.
Figure 19C – Complete Activity, Redesigned
Figure 19C – Complete Activity, Redesigned
You can find our complete clickable prototype here (including onboarding)!
 
Built with Potion.so