Empathize Define Ideate Prototype DS Marketing Reflection
Preshop
Date: Spring 2022, Time: 3 Months,
Role: User Research, Interaction Design, Visual Design,
Team: Personal Project.
Empathize
WHAT IS PRESHOP USED FOR?
Preshop is an extension that can be added to the browser to find deals all over the web and provide the best deal combo for online shoppers to spend less money shopping.
BACKGROUND STORY
According to the research in January 2022, 69% of Americans have shopped online, and 93% of U.S. shoppers cite discounts and offers as important factors when deciding whether or not to purchase.
However, people find that it costs them so much time to get the valid coupon codes, they usually miss the sales, and they feel tired about looking for the cheapest price about the specific product.
Therefore, I have a simple solution to provide combo plans about coupon codes and cash backs to help save people's money when shop online.
PROJECT GOAL
  • Save Money. Provide cheapest combo plans for saving people's money.
  • Save time. Preshop automates the entire coupon searching process and does the work for customers at the backend..
  • Smart purchases. Users can maximize their savings by receiving prompts and notifications that provide additional saving opportunities like free shipping.
    • BUSINESS GOAL
  • Improve traffic on multiple brand websites.
  • Improve the brand familiarity of multiple brands.
  • Improve the sales and revenue of multiple brands.
    • PROCESS OVERVIEW
    Define
    TARGET AUDIENCE
    Honey and Rakuten provide similar service like Preshop and their audience demographics are similar and largest age group of users are 25-34 years old.
    Honey's audience is 58.62% male and 41.38% female. The largest age group of users are 25-34 years old (27.51%). The 2nd largest age group of users are 18-24 years old (25.77%). The 3rd largest age group of users are 35-44 years old (19.48%). Reference
    Rakuten's audience is 52.92% male and 47.08% female. The largest age group of users are 25-34 years old (26.62%). The 2nd largest age group of users are 35-44 years old (22.38%). The 3rd largest age group of users are 18-24 years old (16.56%). Reference
    According to the audience demographics of Honey and Rakuten, I determine that the target audiences of Preshop are Millennials (26-41) and Gen Z (10-25). The Millennials are the main target audience because they hold the most purchasing power.
    LEARNING GOALS
  • Shopping Behavior
  • Price Preferences
  • Thoughts about Discounts
    • INTERVIEWS
  • What category do you spend the most money on when you shop online?
  • How do you solve the problem when a coupon code is invalid?
  • What would be considered expensive for you?
  • What kind of discounts do you generally get when you shop online?
  • What kind of discounts will give you the idea to buy right away?
  • How do you find the highest discount when you shop online?
    • USER QUOTES
  • "The hardest part during online shopping is comparing discounts among different websites and trying to find the cheapest one."
  • "It costs me so much time to find the most money saving plan for a specific product and I feel tired about it."
  • "I hate seeing the invalid coupon still showing on the website."
    • SURVEY
    I conducted 12 user interviews and 15 surveys then received constructive feedbacks from them. I learnt a lot about their general insights, behaviors, frustrations, and wishes about online shopping.
    SYNTHESIS CLUSTERING
    LEARNINGS & FINDINGS
  • It costs people so much time and effort finding valid coupons when shop online.
  • People find it hard to save as much as possible money.
  • People don't have that much time to shop and usually miss the sales.
    • EMPATHY MAP
    PERSONAS
    PROBLEMS
  • Cost so much time and effort finding the valid coupons.
  • Frequently miss the sales.
  • Usually see the same product with cheaper price.
    • PROBLEM STATEMENTS
    I am Eric E-Commerce.
    I am trying to buy some clothes with the cheapest price.
    But I can't or I stuggle because it costs me so much time and effort finding the valid coupons.
    Only if I had a calculator showing the combination combo plan about scrolling valid coupons and cash backs for different brands to save my time and money.
    SOLUTION STATEMENTS
    PRESHOP is a broswer extension that provides combo plans for online shoppers to spend less money shopping. Preshop provides a collection of the all valid cash back websites, discount codes, official brand website sale, and gift cards earning apps to save as much money as possible.
    STORYBOARD
    DESIGN REQUIREMENTS
  • Savings Finder
  • Preshop Offers
  • Preshop Branded Coupons
    • Ideate
    With the design requirements in mind, I started working on designing and conducting user testing including contextual inquiry (in-person and remote) and A/B Testing. Small distractions can have big consequences, so I worked on 5 design iterations in total.
    WHAT DID I LEARN FROM THE TESTING?
  • Strike the balance between aesthetics and functionality.
  • Understand user behavior and user needs.
  • Treat UX writing seriously.
  • Start with the essential need-to-knows.
    • USER TESTING & ITERATION
    Prototype
    After 5 design iterations, I decided to move forward on the 5th iteration and made the prototypes for 6 user flows (Flow 3 and 5 are the highlighted user flow).
    USER FLOW
    Task 1: Add PRESHOP Extension to Browser.
    Task 2: Remove the 10% off coupon code.
    Task 3 (Highlight Flow): Apply all codes to save 25% off.
    Task 4: Copy the 10% off coupon code.
    Task 5 (Highlight Flow): Apply coupon code "WELCOME20OFF" at the cart, and share the code with PRESHOP community.
    Task 6: Remove the 10% off cash back from Rakuten.
    Design System
    I made a design system of Preshop including spacing system, grid, font, headlines, button, link, and color system.
    Marketing
    SOUL
    Provide the best deal combo for online shoppers to spend less money shopping.
    MISSION
  • We are straightforward. We provide cheapest combo plans for saving your money.
  • We are clear. We have money character hero and well-designed user interface to guide you what you need to do next.
  • We are convenient. With one click, you can run the PRESHOP browser extension to find the available working coupons.
    • BRAND KEYWORDS
    Straightforward, clear, convenient, interactive, consistent, creative, engaging, aesthetic.
    BUSINESS EXTENSION
    Provide reward program to give customers points that can be transformed into gift cards.
    MARKETING VIDEO
    I also made an one-minute motion graphics animation to promote PreShop. (Click to view)
    Reflection
    In terms of this project, I realized that simple UI embellishment can only produce surface delight. The deep delight can only be achieved based on the fundamentals of the product right like functional, usable, useful, desirable and reliable interfaces. Delight is about the users. Delight consists of pleasure, flow and meaning. I want to achieve delight in product design since it is missing for most of the products. I will focus more on the needs of users and help users become better at the thing they are trying to achieve.