CASE STUDY

Gift·d App

Challenged to reimagine a third-party gift-with-purchase tool, I architected a robust app for Shopify integration, that dramatically enhanced user experience, eliminated key pain points, and revolutionized promotion creation for merchants.

Design Process & Timeline

A non-linear, iterative design thinking process was implemented to deeply understand users, challenge existing assumptions, define problems, and craft innovative solutions for testing.

Empathize

UXR Workshop
Usability Interviews
Affinity Map
Research Findings

Define

Problem & Goal User Personas Empathy Map
Journey Map

Ideate

How Might We

Prototype

Design Iterations
Design System
Prototype

Test

HEART Workshop
SUS Survey
NPS Survey
Next Steps

UXR
Workshop
Usability
Interviews 1

WEEK 1

Affinity
Map
Research Findings

WEEK 2

Problem
& Goal
User
Personas
Empathy
Map
Journey
Map

WEEK 3

How
Might We

WEEK 4

Ideate
Design
Iterations
Design
System

WEEK 5

Prototype

WEEK 6

HEART
Workshop
SUS
Survey

WEEK 7

NPS
Survey

WEEK 8

Tools

Role

UX & UI Designer
UX Researcher

Duration

8 weeks

EMPATHIZE

Stakeholder UXR Workshop

Prior to initiating the research phase, I orchestrated a comprehensive remote stakeholder engagement workshop to cultivate buy-in and crystallize our research objectives. This strategic gathering convened a diverse array of key stakeholders, encompassing senior leadership, product owners, marketing professionals, and members of the UX team. Employing a meticulously crafted workshop template, I facilitated a collaborative and synergistic process:

  • Collaborative Objective Formulation: Through guided discussions, we articulated precise research objectives, delineated desired user and business outcomes, and systematically mapped our assumptions and inquiries.
  • Egalitarian Participation Framework: Leveraging Mural's incognito mode, we ensured anonymity, thereby fostering an environment conducive to candid and uninhibited contribution. I actively encouraged universal participation, emphasizing the potential of even seemingly unconventional ideas to catalyze valuable insights.
  • Transparent Prioritization Methodology: Employing affinity mapping techniques, we aggregated related concepts into cohesive clusters. Subsequently, we utilized a sophisticated prioritization matrix to categorize emergent themes based on two critical axes: potential risk (if left unaddressed) and degree of certainty (confidence in our current understanding). This process was guided by the collective wisdom and perspectives of all stakeholders, ensuring a holistic and balanced approach to prioritization.

This refined approach not only enhanced stakeholder alignment but also laid a robust foundation for our subsequent research endeavors, ensuring that our efforts were strategically focused and comprehensively informed.

EMPATHIZE

Usability Interviews

Pilot Research Objectives

Following our workshop, we established the following objectives for user research study:

  • Uncover user frustrations and challenges with the current interface through thorough research to guide major improvements and solve key problems in the redesigned app
  • Identify the most valued existing features and desired new functionalities through comprehensive user studies to prioritize high-impact additions to the Shopify app
  • Pinpoint areas needing improvement in the current interface based on user feedback, while also understanding expectations for how the Shopify app should seamlessly integrate with user workflows
  • Explore user preferences regarding the placement and visual presentation of promotions on websites

Methodology Selection

To determine the most appropriate user research methodologies, we conducted a thorough analysis of the high-risk and high-uncertainty assumptions and questions identified during our workshop brainstorming session. Our assessment revealed the necessity for collecting both quantitative and qualitative data, as well as the potential to encounter users unfamiliar with the system. Based on these considerations, we concluded that a task-based usability interview incorporating the Think Aloud protocol would be the optimal approach.

This primary methodology was designed to be augmented by open-ended, qualitative follow-up questions. These questions were strategically crafted to delve into core themes that emerged from the workshop, including:

  • User pain points: Frustrations and challenges with the current interface
  • Interface usability: Areas needing improvement in the existing design
  • Feature valuation: Most appreciated existing features
  • Functionality gaps: Desired new functionalities
  • Workflow integration: Expectations for app alignment with user processes
  • Promotion optimization: Preferences for placement and presentation of promotional content
  • Task efficiency: Ability to complete key tasks without obstacles
  • Intuitiveness: Ease of navigation and feature discovery
  • User satisfaction: Overall contentment with the app experience
  • Improvement prioritization: User perspectives on which changes would have the highest impact

Participant Recruitment

For the study, we carefully selected and recruited eight participants. This sample size was determined to be sufficient for capturing a diverse range of user perspectives while remaining manageable for in-depth qualitative analysis. It's worth noting that prior to the main study, we conducted a preliminary session with one subject matter expert. This initial engagement served a dual purpose: it allowed us to test the efficacy of our discussion guide and provided an opportunity to refine our approach based on expert feedback, thereby enhancing the overall quality and relevance of our research protocol.

EMPATHIZE

Affinity Map

We captured each interview via Google Meet recordings, distilling critical observations and transcripts into a Mural-based affinity diagram to uncover common patterns.

Our investigation uncovered several critical pain points - the interface's navigation proved particularly challenging, with participants struggling to locate and manage products effectively. Users found it difficult to identify items, and expressed frustration with limited search capabilities. The platform's organizational structure left much to be desired, causing confusion and impeding efficient task completion. Participants also noted the absence of bulk editing tools and the inability to easily view crucial product parameters.

Despite these hurdles, our study also highlighted exciting avenues for growth and improvement. Participants showed enthusiasm for expanded capabilities, particularly in areas of data visualization and inventory management. They expressed a strong desire for advanced sorting and filtering options, as well as features to monitor stock availability. Users also emphasized the need for a more intuitive layout that would streamline their workflow and enhance overall usability.

One unanticipated discovery stood out: users placed high value on customization options for promotional campaigns and expressed keen interest in preview functionalities. This insight opens up new possibilities for enhancing user engagement and satisfaction. Participants also voiced interest in more sophisticated tools such as split testing capabilities, advanced analytics, and automated inventory management features.

EMPATHIZE

Key Themes from Research

Following a comprehensive analysis, I synthesized the research data into key thematic clusters. This process of consolidation revealed several pivotal insights that emerged consistently across user feedback.

Dashboard user needs

#1 DIFFICULTY IDENTIFYING PRODUCTS BY ID AND LIMITED SEARCH

“It's such a hassle to seek out the products that I want to add to my promotion-searching by Shopify product ID number is clumsy and unintuitive… the search is almost useless”

#2 NO MASS EDIT/DELETE/DUPLICATE FUNCTIONS

“I mean, I just feel like I'm losing so much time for all these repetitive tasks … If I want to change the requirements in several offers at one time, I need to enter each offer and do the same action again and again and again”

#3 LACK OF PARAMETER VISIBILITY

“I am having a hard time keeping track of all of the different rules … I'm having to dig through the backend of each offer trying to piece together what the parameters are. It would be so much easier if I could view all of those details in one place”

#4 UNCLEAR AND CONFUSING TAXONOMY

“I catch myself all the time having to translate 'Promotion Speak' into regular English. Why in the world they use the term 'slug' for gift codes, I have no idea. That's just strange and confusing. And 'title'? For what would otherwise be called the headline, or name, of the offer?“

#5 NON-USABLE INTERFACE ELEMENTS

“'filter by slug' option is entirely useless to me… give me ways to sort, based on details, that actually pertain to me, like the promotion name, start and end dates, redemption counts, that kind of stuff”

#6 ADD FILTERS AND TABLE SORT OPTIONS

“Adding in some basic filtering and sorting functionality would go a really long way toward making this app actually usable for my needs”

Offer creation user needs

#1 DIFFICULTY IDENTIFYING PRODUCTS

“I'll never be able to scroll this ridiculously long dropdown to find what I want to add. It's just names - that's really not enough to let me know which item it is… maybe some actual images would help.”

#2 NEED TO VIEW STOCK AVAILABILITY

“I don't have any way of telling if we have enough of a product in stock to feature it in an offer, so I've had times when I've set an offer up and then found out we didn't have enough in stock.”

#3 HARD TO FIND AND SELECT PRODUCTS

“And with thousands of products in the catalog, it turns into this endless chore of scrolling and scanning line after line….search field would be total no-brainer”

#4 UNCLEAR AND CONFUSING TAXONOMY

"Terminology just confuses me…this space calls countdown timers 'flags'… it's a never-ending guessing game of what all the vague terms mean”

#5 NON-FUNCTIONAL INTERFACE ELEMENTS

“Banner needs to be visible, that kind of is the whole point! Having an option to turn it off completely seems rather silly.”

#6 PRIORITIZE REDEMPTIONS PLACEMENT

“I mean, I don't know who it is who thought it was a great idea to shove one of the biggest metrics to the bottom of the page...“

#7 LIMITED TIMER FUNCTIONALITY

Features requested:

  • Countdown to timeframe (ex. 1 hr)
  • No countdown option
  • Add expire in/reserved options

“The timer is pretty inflexible. there have been times where I wanted the countdown to act like a 1-hour flash sale or where I don't actually want one at all”

#8 COMBINE SECTIONS LOGICALLY

Sections to revise:

  • Combine Conditions and Significant Dates
  • Combine Flags and Pop-up
  • Detach Conditions and Expiration

“Why are the conditions separated from the actual dates when those things go hand and hand? It would make way more sense to combine those“

#9 LACKS REDEMPTION CUSTOMIZATION

Features requested:

  • Custom photos
  • Customer eligibility controls
  • Apply to specific products/collections/etc.
  • Limit offer redemptions
  • Cart redemptions terms

“I need more flexibility… we have beautiful lifestyle photography I would prefer to use, but right now it pulls in whatever the default product shot is and it isn't all that enticing”

#10 ADD POP-UP PREVIEW

Features requested:

  • Copy/images preview
  • Allow variant selection
  • Accurate preview appearance
  • Communicate offer activation
  • Collapsible design

“One of the biggest issues is that there's no preview whatsoever for how the pop-up is really going to look in reality … it feels like I'm building these offers blind”

Other user needs

#1 OFFER A/B TESTING

“We're just kind of crossing our fingers that the arbitrary settings we picked will resonate. Or we have to run promotions sequentially to try and gauge which ones moved the needle more… that's not an effective as A/B testing”

#2 ADD ADVANCED ANALYTICS

“Don't get me wrong, having basic redemption counts is helpful but numbers alone don't really tell how well a promotion performed... I need much more robust data and analytics”

#3 LOW STOCK PRODUCT LINE-UP

“It would help me if I could line a few different gift options up in order of preference, so if the first one sells out, it automatically switches to the next one.”

#4 AUTOMATIC OVERSELL PREVENTION

“We have an issue with overselling GWPs, so we have to reach out to customers who think we’re bait and switching… it should automatically stop offering a gift when  it goes out of stock“

#5 CUSTOMER SEGMENTATION

“We know from data that different audiences react differently to messages and incentives... being able to segment would allow us to convert easier”

#6 CUSTOM BRANDING

“There's no brand connection, no sense of exclusivity... a popup that's on-brand is more likely to appear authentic and less like spam"

Identified Value

#1 INCREASED SALES/AOV/CLV

“The ROI is off the charts. It's increased our sales, AOV, and customer lifetime value. This app is easily one of our best investments.”

#2 SUBSCRIPTION CONVERSIONS BOOST

“It works really well in our subscription acquisition ads… our data showed a lot of first-time customers - they are so much more likely to subscribe with the extra incentive.”

#3 DRIVE NEW CUSTOMER ACQUISITION

“With the availability of a free gift, it has been easier to entice a new audience, getting them through the door to try products is much easier”

#4 BOOSTED OFF-PEAK SALES

“We would have huge drop-offs in traffic when we weren't running sales, but with a free gift during those times, we've kept the cash flow consistent.”

#5 GAINED COMPETITIVE ADVANTAGE

“In a crowded marketplace, you win by making customers feel special, we can do something special for the customers and give people a reason to prefer us over others”

#6 REDUCED CART ABANDONMENT

“Abandoned carts were significantly reduced, especially by the use of the countdown timer, it is a little nudge to remind them of the value being given”

#7 IMPROVED PROFIT MARGINS/CAC

“Our margins improved because we were able to cut back on blanket discounts. Free gift offers perform better in click-through than discounts”

#8 INCREASED LEAD GENERATION

“It's low-friction way to capture lead information, people are willingly offering up their email to unlock whatever incentive we're advertising”

#9 TESTING NEW PRODUCTS

“It's a testing ground for new product lines and collections, help us gauge customer interest before committing to a full-scale launch”

#10 INVENTORY CLEARANCE

“These offers have become a savvy inventory management solution that helped us cut overhead costs”

Hypothesis Validation

The study's focused nature necessitated reliance on user interviews for validation. As a result, hypothesis statements were qualitative, omitting quantitative success indicators or metrics.

Users effectively leverage the tool

User interface is user-friendly

The app delivers significant user and/or business value

The taxonomy and labeling of elements are clear and meaningful

Users find the placement and accessibility of key elements intuitive

The interface provides users with necessary information and flexibility

Interface elements are functional and beneficial

The platform offers sufficient customization options

The app seamlessly integrates with Shopify stores

The menu and navigation facilitate quick and easy product discovery

Users find it easy to identify and manage products and promotions

The timer feature is valuable and flexible across various offer types

DEFINE

Problem & Goal Statements

After presenting the findings to stakeholders, I synthesized the core insights into problem and goal statements that reflect the critical user pain points and objectives identified during the research.

Problem Statement

E-commerce managers seek an efficient and intuitive solution to create, manage, and optimize promotional campaigns for their online stores. They desire a streamlined interface that simplifies product selection, automates inventory tracking, and provides clear performance insights, ensuring a smooth and productive experience for both campaign managers and their customers. The current process, marked by manual tasks and limited visibility, hinders their ability to craft effective, timely, and profitable promotions.

Goal Statement

Develop an intuitive, comprehensive promotional management system that streamlines product selection, automates inventory tracking, and provides real-time performance metrics. The solution should enable swift offer setup and updates, incorporate visual previews, and facilitate customer segmentation. Key objectives include minimizing manual tasks, enhancing campaign performance visibility, preventing overselling, and dramatically improving the efficiency of offer creation and modification processes. Success will be measured through user adoption rates, campaign performance improvements, and qualitative user feedback on workflow efficiency.

DEFINE

User Personas

Gallery Left Navigation ArrowGallery Right Navigation Arrow

Research insights validated our target demographic, resulting in the development of two representative user personas that encapsulate our customer base's core needs.

Persona user photo

Constantly tracking inventory manually is a nightmare, integration with shopify data would be a huge win

Jared

MARKETING MANAGER

AGE

28

STATUS

SINGLE

LOCATION

SEATTLE, WA

EDUCATION

ASSOCIATES

BIO

Jared, a veteran marketing manager with 10+ years at major retailers/e-commerce, adopts new tech & data-driven methods. He runs A/B testing, craving agility to make analytical yet beautiful promos. Top priorities: quickly find hot promos, track inventory/metrics, update offers easily. Values efficiency, flexibility, transparency, automation.

PAIN POINTS

• Manual inventory tracking • Managing shifting timelines and changes based on A/B data • Tracking and updating codes • Difficulty in distinguishing between products

GOALS

• Efficiently find and select promotional offer products • Easily track inventory • Effectively monitor performance metrics • Swiftly update and set up offers

GOALS

Introvert
Extrovert
Introvert vs Extrovented Bar
Analytical
Creative
Analytical vs Creative bar
Loyal
Fickle
Loyal vs Fickle Bar
Passive
Active
Passive vs Active bar

FAVORITE BRANDS

Favorite brands bar
Persona user photo

Launching promos feels like a guessing game without preview, I'd love to see how the offer looks before pushing it live

Hannah

MARKETING DIRECTOR

AGE

40

STATUS

MARRIED

LOCATION

MIAMI, FL

EDUCATION

BACHELORS

BIO

Hannah is marketing director with an economics background, she prioritizes data-driven strategies, segmentation, and profit maximization. She favors dynamic, visually-rich offers that are easily updatable and scalable, her frustrations stem from under performing campaigns, and missed opportunities with high-demand products.

PAIN POINTS

• Lack of promo preview • Product overselling leading to missed profit opportunities • Underperforming campaigns • Difficulty in duplicating and editing content

GOALS

• Eliminate the need to spend budget on creative • Accurately preview offers visually • Segment customer base by offer types • Efficiently update offers quickly

GOALS

Introvert
Extrovert
Introvert vs Extrovented Bar
Analytical
Creative
Analytical vs Creative bar
Loyal
Fickle
Loyal vs Fickle Bar
Passive
Active
Passive vs Active bar

FAVORITE BRANDS

Favorite brands bar

DEFINE

Empathy Map

User research and analysis revealed key attitudes and behaviors, providing crucial insights into user needs and motivations.

Says

• Product IDs aren't useful, can't we use names?
• These dropdowns are infinite. I can't find my stuff
• Man, I wish we could batch edit promotions. I hate updating them one at a time
• These filters are crap
• Is there a bulk edit for these promotions? Updating them individually is killing me
• Why can't I see how much stock a product has before adding as gift?
• Option to select variation from popup is missing

Thinks

• Provide countdown timer with approximation of time frame
• Would love to be able to cap the amount of times a customer can redeem the same offer
• Better search would save so much time
• If the names were more clear this would be easier
• If the interface of the app was easier to work through this could be saving us so much time
• Concerned the promotions are not converting because of the difficulty of setting them up
• Mass edit/deletion capabilities are a must

Does

• I waste ages trying to find a product
• Inventory checking is always a headache during promotions
• We must use third-party tools for A/B testing of offer content; this app does not support that
• Integrating this app with our gamification platform is a huge plus
• It is impossible to create a sense of urgency with the timer
• Copy and paste promotion details from prior campaigns to save time

Feels

• Every time I am trying to set up a new promotion, it annoys me so much
• These unclear labels make me feel like I am constantly making mistakes
• I really have a sheer belief that, considering the limitations this app has, we're losing potential sales
• Too many limitations
• This app is driving frustration into my workday
• This app is killing me; it's supposed to be a time-saver, not a waster
• Not frustrating at all — this is really clunky to use

DEFINE

Journey Map

Gallery Left Navigation ArrowGallery Right Navigation Arrow

A visual representation of the user journey was created, mapping key touchpoints and interactions to identify opportunities for enhancing the overall user experience.

JARED
Goal: Use tech and data to create efficient, compelling promotions while tracking metrics and inventory
JARED
Goal: Use tech and data to create efficient, compelling promotions while tracking metrics and inventory
ACTION
DETERMINE OFFER, GOALS, & TARGETS
DESIGN MARKETING CAMPAIGNS
SET-UP GWP PROMO
MANAGE GWP PROMO
ANALYZES PERFORMANCE
TASK LIST

• Checks metrics: redemptions, AOV, sales, etc. • Creates reports

• Monitors inventory • Updates creative, copy, rules, etc. • Deactivates low performing A/B

• Sets campaign goals, timelines • Checks inventory • Prepares copy/images

• Installs App • Selects product • Creates promo with rules and requirements

• Sets up A/B tests • Creates redemption codes • Sets up social, web, print, campaigns

PAIN POINTS

• Looking up inventory manually • Shifting timelines

• Integrating GWP app • Manually tracking/updating custom codes

• Difficulty finding/ distinguishing product with same collection name • Learning curve

• Lack of real-time inventory data • Campaign set-up errors

• Multiple data collection sources • Time consuming report-making

FEELINGS

😖

Frustrated

😩

Burdened

😑

Hindered

😖

Irritated

😓

Strained
OPPORTUNITIES

• Performance data/export • Analytics

• Error checks for common issues • Inventory monitoring sync

• Add product images • Flexible search/ filter functionality • Helpful guides

• Easy custom code preview and modification • Seamless integration

• Easy mass editing and flexibility • Inventory data sync

HANNAH
Goal: Employ data-driven strategies to scale offers, maximize profit and minimize missed opportunities
HANNAH
Goal: Employ data-driven strategies to scale offers, maximize profit and minimize missed opportunities
ACTION
DETERMINE OFFER, GOALS, & TARGETS
DESIGN MARKETING CAMPAIGNS
SET-UP GWP PROMO
MANAGE GWP PROMO
ANALYZES PERFORMANCE
TASK LIST

• Checks performance data • Refines future campaigns

• Tracks inventory • Updates offer dates/ details • Monitors feedback and performance

• Chooses gift based on value, margins, impact, inventory • Partners to prep creative/content

• Duplicates existing promotion • Modifies rules/requirements

• Sets up campaigns: ads, emails, SMS, social • Preps gamified microsite

PAIN POINTS

• Lack of design skills for creative • Determining metrics

• Email/SMS segmentation • Creative for different platforms

• No promo preview • No mass duplicate/ editing ability

• Overselling • Low GWP interest

• Poor performing campaigns, profit loss • Identifying winning elements

FEELINGS

🤯

Overloaded

😵‍💫

Swamped

😐

Limited

🫣

Anxious

😌

Relieved
OPPORTUNITIES

• Alerts for low performing campaign • Back-up campaign selection

• Alternative campaign selection upon running out of stock • Redemption metrics

• Mass editing/duplication • Promo visual preview

• Offer customer segmentation

• Customizable design - eliminate need for design help

IDEATE

How Might We

Research findings were reframed as aspirational "How Might We" questions, transforming identified design challenges into opportunities for innovative solution exploration.

HOW MIGHT WE

enhance product discovery for users?

HOW MIGHT WE

streamline the promotion creation and editing process?

HOW MIGHT WE

optimize interface usability?

HOW MIGHT WE

maximize user efficiency and time-saving?

HOW MIGHT WE

restructure the app for intuitive navigation?

HOW MIGHT WE

provide users with their desired level of customization?

HOW MIGHT WE

refine taxonomy for self-explanatory labeling?

PROTOTYPE

Design Iteration  |  Desktop

Post-analysis, design iterations were developed and reviewed with the product team and developers. This collaborative process ensured feasibility and facilitated the prioritization of features, aligning implementation strategies with project goals and resources.

Dashboard improvements

#1 IMPROVED PRODUCT IDENTIFICATION

Implemented customizable view with option to toggle between product ID and title for easier product identification. Expanded search capabilities beyond promo code.

#2 MASS EDIT FUNCTIONALITIES ADDED

Added functionality for mass editing, deleting, and duplicating, including ability to bulk modify expiration and effective dates.

#3 ENABLED PARAMETER VISIBILITY

Created customizable view feature allowing users to enable additional parameters they wish to see.

#4 UPDATED TAXONOMY

Updated terminology: "slugs" to gift code, "title" to headline, "count usage" to redemptions, "requirements" to offer details, and "conditions" to requirements.

#5 REMOVED UNUSABLE INTERFACE ELEMENTS

Removed right-hand filter panel and hidden actions dropdown. Moved these actions to activate upon item selection.

#6 INTRODUCED FILTERS AND TABLE SORTING

Incorporated requested filters - active, expired. Added sort up/down functionality to each column.

Create offer improvements

#1 OPTIMIZED PRODUCT IDENTIFICATION

Integrated product imagery into gift and product search results.

#2 INTEGRATED STOCK AVAILABILITY PREVIEW

Incorporated product stock data synchronized from Shopify.

#3 SIMPLIFIED SEARCH AND SELECTION

Implemented ability to search by product name and select multiple products for a promotional offer, replacing long scrolling.

#4 REFINED TAXONOMY

Updated terminology - "significant dates" to active dates, "flags" to countdown timer. Removed "allow variant selection" and "display banner" options.

#5 ELIMINATED NON-FUNCTIONAL ELEMENTS

Removed non-functional interface components including banner visibility controls and allow variant selection

#6 PRIORITIZED REDEMPTION PLACEMENT

Relocated redemptions information higher on the page for improved visibility without scrolling.

#7 ENHANCED TIMER FUNCTIONALITY

Upgraded countdown options: timeframe selection, no-countdown option, and added expire in/reserved for features.

#8 UNIFIED SECTIONS FOR COHERENCE

Combined Conditions with Significant Dates, Countdown with Expires. Separated Conditions from Expiration.

#9 INFUSED REDEMPTION CUSTOMIZATION

Added custom photo upload/management, customer eligibility controls, specific product/collection application, and offer/cart redemption limit settings.

#10 IMPLEMENTED POP-UP PREVIEW FEATURE

Integrated accurate offer preview with copy/image display, offer activation communication, and collapsible variant selection design.

PROTOTYPE

Design Iteration  |  Mobile

Mobile-responsive prototypes were developed alongside desktop versions to ensure compliance with Shopify app requirements and provide a seamless cross-device experience.

Dashboard

The dashboard interface was optimized for mobile, featuring a compact menu that consolidates multi-select controls, view customization options, and filter settings. This streamlined approach maintains desktop functionality while simplifying the mobile interface. A quick promo creation button was strategically placed in the bottom right corner, adhering to the Gutenberg Principle for optimal scanning and usability. All interactive elements were sized to ensure touch-friendly targets.

Dashboard on scroll

An adaptive column width system was implemented, automatically adjusting on scroll to a narrower, semi-transparent format. This design choice maintains row and gift code visibility while optimizing the overall table view on smaller screens.

Offer creation

A readily accessible promo preview button was incorporated, also following the Gutenberg Principle for ideal placement. The product search bar was enhanced with high contrast design, emphasizing its importance and guiding user action. A floating save/delete bar appears on scroll, allowing users to quickly preserve progress or abandon tasks without navigating to the page bottom.

Countdown settings

Intuitive quick links were introduced to facilitate rapid date and time selection. The calendar interface was refined to allow efficient month and year selection without excessive navigation. Advanced timer functionality was added, enabling countdown to expiration and time window-based timing options, enhancing promotional flexibility.

PROTOTYPE

Prototypes

Following the identification of features requiring further validation, the prototype was refined to clearly communicate the intended design and final product behavior. This refinement process included the addition of interactive elements to facilitate a more comprehensive user testing experience.

Mobile Prototypes

Tap/click once on the screen to view clickable, interactive elements.

PROTOTYPE

Design System

A comprehensive design system was developed, encompassing visual guidelines for color, typography, icons, spacing, grid, shadows, and components. This system was supported by primitive, semantic, and composite tokens to ensure consistency and scalability.

Typography

A typography system was established, featuring a hierarchy of headings and body text styles. This system was designed to enhance readability, establish clear information hierarchy, and contribute to the overall visual impact of the interface.A color scale scheme was implemented to create an attractive and engaging interface. This scheme was crafted to effectively communicate meaning, create contrast and hierarchy, evoke appropriate emotions, and reinforce brand identity.

Inter Semi Bold
24px  |  32px
Inter Semi Bold
20px  |  30px
Inter Bold
16px  |  24px
Inter Bold
14px  |  17.5px
Inter Regular
14px  |  17.5px
Inter Regular Underline
14px  |  17.5px
Inter Medium Underline
14px  |  17.5px
Inter Semi Bold
14px  |  17.5px
Inter Regular
13px  |  16px
Inter Semi Bold
13px  |  16px
Inter Regular
13px  |  16px
Primitive
Value
font-family
font-family-sans
Inter
font-weight
font-weight-regular
Regular
font-weight-semibold
Semi Bold
font-weight-bold
Bold
font-spacing
font-spacing-densest
-0.3px
font-spacing-denser
-0.25px
font-spacing-dense
-0.2px
font-spacing-normal
0px
font-size
font-size-300
12px
Primitive
Value
font-size (cont.)
font-size-325
13px
font-size-350
14px
font-size-400
16px
font-size-500
20px
font-size-600
24px
font-line-height
font-line-height-375
15px
font-line-height-400
16px
font-line-height-437
17.5px
font-line-height-600
24px
font-line-height-750
30px
font-line-height-800
32px
Composite
heading-xl
Semantic token
Value
font-heading-xl-family
font-family-sans
font-heading-xl-size
font-size-600
font-heading-xl-weight
font-weight-semibold
font-heading-xl-line-height
font-line-height-800
font-heading-xl-spacing
font-spacing-densest
heading-lg
font-heading-lg-family
font-family-sans
font-heading-lg-size
font-size-500
font-heading-lg-weight
font-weight-semibold
font-heading-lg-line-height
font-line-height-750
font-heading-lg-spacing
font-spacing-densest

The complete typography token set and comprehensive design system can be viewed in the Figma project file.

Colors

A color scale scheme was implemented to create an attractive and engaging interface. This scheme was crafted to effectively communicate meaning, create contrast and hierarchy, evoke appropriate emotions, and reinforce brand identity.

01
01
02
01
03
01
04
01
05
01
06
01
07
01
08
01
09
01
10
01
11
01
12
01
13
01
14
01
15
01
16
01
Grey
Disabled
Neutral
Base
01
01
02
01
03
01
04
01
05
01
06
01
07
01
08
01
09
01
10
01
11
01
12
01
13
01
14
01
15
01
16
01
Red
Critical
Error
Negative
Blocking
01
01
02
01
03
01
04
01
05
01
06
01
07
01
08
01
09
01
10
01
11
01
12
01
13
01
14
01
15
01
16
01
Orange
Pending
In-progress
Non-blocking
01
01
02
01
03
01
04
01
05
01
06
01
07
01
08
01
09
01
10
01
11
01
12
01
13
01
14
01
15
01
16
01
Green
Success
Positive
01
01
02
01
03
01
04
01
05
01
06
01
07
01
08
01
09
01
10
01
11
01
12
01
13
01
14
01
15
01
16
01
Teal
Secondary
Accents
01
01
02
02
03
03
04
04
05
05
06
06
07
07
08
08
09
09
10
10
11
11
12
12
13
13
14
14
15
15
16
16
Blue
Emphasis
Interactive
Focus
Links
Primitive
gray-1
#FFFFFF
gray-2
#FDFDFD
gray-3
#FAFAFA
gray-4
#F7F7F7
gray-5
#F3F3F3
gray-6
#F1F1F1
gray-7
#EBEBEB
gray-8
#E3E3E3
gray-9
#D4D4D4
gray-10
#CCCCCC
gray-11
#B5B5B5
gray-12
#8A8A8A
gray-13
#616161
gray-14
#4A4A4A
gray-15
#303030
gray-16
#1A1A1A
orange-1
#FFFDFA
orange-2
#FFF7EE
orange-3
#FFF1E3
orange-4
#FFEBD5
orange-5
#FFE4C6
orange-6
#FFDDB6
orange-7
#FFD6A4
orange-8
#FFC879
orange-9
#FFB800
orange-10
#E5A500
orange-11
#B28400
orange-12
#956F00
orange-13
#7C5800
orange-14
#5E4200
orange-15
#412D00
orange-16
#251A00
teal-1
#F8FFFE
teal-2
#E8FCFA
teal-3
#D7FAF7
teal-4
#C3F7F2
teal-5
#AAF6EF
teal-6
#89F5EC
teal-7
#70F0E5
teal-8
#5AE6DB
teal-9
#2CE0D4
teal-10
#1EC7BC
teal-11
#00A198
teal-12
#12837C
teal-13
#0C6A64
teal-14
#0C534F
teal-15
#033C39
teal-16
#062C29

A comprehensive token lists is available for examination in the Figma file.

Semantic  |   Fill
brand
#303030
fill-brand
gray-15
#303030
fill-brand-hover
gray-16
#1A1A1A
fill-brand-active
gray-16
#1A1A1A
fill-brand-selected
gray-15
#303030
fill-brand-disabled
gray-9
#D4D4D4
fill-brand-secondary
gray-6
#F1F1F1
fill-brand-secondary-hover
gray-7
#EBEBEB
fill-brand-secondary-active
gray-8
#E3E3E3
neutral
#F7F7F7
fill-neutral-bg
gray-6
#F1F1F1
fill-neutral
gray-1
#FFFFFF
fill-neutral-hover
gray-3
#FAFAFA
fill-brand
gray-8
#E3E3E3
fill-brand
gray-8
#E3E3E3
Semantic  |   Border
brand
#303030
border-brand
gray-8
#E3E3E3
border-brand-on-bg
gray-1
#FFFFFF
border-brand-hover
gray-10
#CCCCCC
border-brand-disabled
gray-7
#EBEBEB
border-brand-secondary
gray-7
#EBEBEB
border-brand-inverse
gray-13
#616161
accent
#005BD3
border-accent
blue-13
#005BD3
border-accent-focus
blue-13
#005BD3
success
#29845A
border-success
green-5
#92FEC2
critical
#E51C00
border-critical
red-8
#FEC3C1
border-critical-secondary
red-14
#8E1F0B

A comprehensive token lists is available for examination in the Figma file.

Grid

Grid systems were developed for various device types, providing a structured framework for the placement of UI elements. This approach ensures visually harmonious and balanced layouts across different screen sizes.

GRID SCALE
4x4px grid scale
4x4
DESKTOP
769px - 1440px   |   12 auto columns  |   32px gutter/margin
TABLET
480px - 768px   |   8 auto columns   |   20px gutter/margin
MOBILE
320px - 479px   |   8 auto columns   |   16px gutter/margin
Primitive
Value
grid-columns
grid-columns-200
size-200
grid-columns-300
size-300
grid-margin
grid-margin-400
size-400
grid-margin-500
size-500
grid-margin-800
size-800
grid-gutter
grid-gutter-400
size-400
grid-gutter-500
size-500
grid-gutter-800
size-800
Composite
grid-desktop
Primitive
Value
grid-desktop-columns
grid-columns-300
grid-desktop-margin
grid-margin-800
grid-desktop-gutter
grid-gutter-800
grid-tablet
grid-tablet-columns
grid-columns-200
grid-tablet-margin
grid-margin-500
grid-tablet-gutter
grid-gutter-500
grid-mobile
grid-mobile-columns
grid-columns-200
grid-mobile-margin
grid-margin-400
grid-mobile-gutter
grid-gutter-400
Spacing

A standardized spacing system was created to maintain consistent spacing between UI elements. This system contributes to a visually balanced layout and improves overall user experience.

Primitive
Value
space-0
0px
space-025
1px
space-050
2px
space-100
4px
space-150
6px
space-200
8px
space-300
12px
space-400
16px
space-500
20px
space-600
24px
space-800
32px
space-1000
40px
space-1200
48px
space-1600
64px
space-2000
80px
space-2400
96px
space-3200
128px
Semantic
Primitive
padding-0
space-0
padding-050
space-050
padding-100
space-100
padding-200
space-200
padding-250
space-250
padding-300
space-300
padding-400
space-400
padding-500
space-500
padding-600
space-600
padding-800
space-800
Semantic
Primitive
gap-0
space-0
gap-050
space-050
gap-100
space-100
gap-150
space-150
gap-200
space-200
gap-300
space-300
gap-400
space-400
gap-500
space-500
gap-600
space-600
gap-800
space-800
Borders

Consistent border radius and width standards were established for UI elements. These standards help define boundaries, establish visual prominence, enhance readability, and improve the overall structure and clarity of the interface.

Primitive
Value
border-radius-0
0px
border-radius-050
2px
border-radius-100
4px
border-radius-150
6px
border-radius-200
8px
border-radius-300
12px
border-radius-400
16px
border-radius-500
20px
border-radius-800
32px
border-radius-full
Max
Semantic
Primitive
border-radius-100
border-radius-100
border-radius-200
border-radius-200
border-radius-300
border-radius-300
border-radius-full
border-radius-full
Primitive
Value
border-width-0165
0.66px
border-width-025
1px
border-width-075
3px
Semantic
Primitive
border-width-min
border-width-0165
border-width
border-width-025
border-width-focus
border-width-075
Shadows

A shadow library was designed to create a sense of depth and dimensionality within the interface. This library helps distinguish elements and create a layered visual hierarchy.

Primitive
Value
shadow-fill
shadow-fill-4
color-alpha-black-4
shadow-fill-5
color-alpha-black-5
shadow-fill-7
color-alpha-black-7
shadow-fill-8
color-alpha-black-8
shadow-fill-10
color-alpha-black-10
shadow-fill-11
color-alpha-black-11
shadow-fill-12
color-alpha-black-12
shadow-spread
shadow-spread-n300
size-n300
shadow-spread-n125
size-n125
shadow-spread-n075
size-n075
shadow-spread-n050
size-n050
shadow-spread-n025
size-n025
shadow-spread-0
size-0
shadow-blur
shadow-blur-050
size-050
Primitive
Value
shadow-blur (cont.)
shadow-blur-075
size-075
shadow-blur-100
size-100
shadow-blur-150
size-150
shadow-blur-250
size-250
shadow-blur-375
size-375
shadow-blur-625
size-625
shadow-blur-1250
size-1250
shadow-axis-x
shadow-axis-x
size-0
shadow-axis-y
shadow-axis-y-025
size-025
shadow-axis-y-050
size-050
shadow-axis-y-100
size-100
shadow-axis-y-250
size-250
shadow-axis-y-500
size-500
shadow-axis-y-625
size-625
Composite
shadow-2xl
Semantic
Primitive
shadow-2xl-bottom-blur
shadow-blur-1250
shadow-2xl-bottom-xaxis
shadow-axis-x-0
shadow-2xl-bottom-axis
shadow-axis-y-625
shadow-2xl-bottom-spread
shadow-spread-n300
shadow-2xl-bottom-fill
shadow-fill-8
Effect
shadow-xl
shadow-xl-top-blur
shadow-blur-250
shadow-2xl-top-xaxis
shadow-axis-x-0
shadow-xl-top-axis
shadow-axis-y-250
shadow-xl-top-spread
shadow-spread-0
shadow-xl-top-fill
shadow-fill-4

A comprehensive token lists is available for examination in the Figma file.

Iconography

An icon library was developed to facilitate quick and efficient communication of information. These icons contribute to a recognizable and memorable interface design.

TOUCH TARGET
Icons are surrounded by adequate space, using a touch target of 48dp for optimal legibility and touch accuracy
DENSE TOUCH TARGET
For mouse and keyboard input methods, a condensed spacing with a touch target of 42dp is used.
ACTIONS
Icons representing common actions like edit, delete, save, add, etc.
NAVIGATION
Icons for navigating interfaces like arrows, back buttons, menus, etc.
STATUSES
Icons indicating different states like error, metrics, loading, etc.
THINGS
Icons representing objects or concepts like profiles, settings, etc.
SOCIAL
Icons representing branded social platforms
Components

A set of reusable low-level components was created as a foundation for the larger component library. These components and their variants ensure design cohesion while accelerating workflow. Components were developed using Master components and Auto Layout for cross-device responsiveness, allowing for effortless updates and automatic realignment. All buttons were designed above 48px to enhance user-friendly navigation and improve accuracy.

BUTTONS

FORMS

SELECTORS

RESOURCE LIST

The full range of components and the entire design system are accessible for review within the Figma project.

TEST

Google HEART Workshop

Having redesigned the app, we need a way to measure success of the redesign, to do that I facilitated Google HEART Workshop that helped the stakeholders map to prioritize outcomes, brainstorm goals, signals ans assign metrics and tools to measure them.

TEST

SUS Survey Build

Following the Google HEART workshop, we determined to implement the System Usability Scale (SUS) to quantify product usability, learnability, and user satisfaction. This validated metric provides valuable insights even with smaller sample sizes, making it ideal for ongoing user experience optimization.

We established a dual-channel SUS data collection strategy. Primarily, we integrated in-app SUS surveys using Pendo. Secondarily, we developed a Qualtrics-based SUS survey with an optional qualitative feedback component, distributed via email. This multi-touchpoint approach aims to maximize response rates and capture diverse user perspectives.

SUS Email

To ensure precise targeting, we leveraged Qualtrics' survey embed functionality. This method registers user ratings instantly upon interaction and seamlessly progresses respondents through the questionnaire.

TEST

NPS Survey Build

To assess customer loyalty and satisfaction comprehensively, we implemented Net Promoter Score (NPS) surveys. This streamlined metric effectively gauges customers' likelihood to recommend our products or services, providing a clear indicator of overall sentiment.

The NPS methodology allows for strategic categorization of respondents into promoters, passives, and detractors. This segmentation facilitates rapid identification of brand advocates, potential churn risks, and areas requiring improvement. Following the initial NPS question, we incorporated a qualitative follow-up question to gather additional context and insights behind the given score. This approach enriches our understanding of user sentiment and provides valuable, actionable feedback.

The NPS survey's simplicity, combined with the added qualitative component, ensures high response rates while yielding deeper insights. This data drives targeted customer experience enhancements, fosters loyalty, and ultimately boosts growth and retention. Longitudinal NPS tracking, along with analysis of the qualitative responses, will enable us to monitor the impact of our initiatives and maintain a customer-centric focus in business decisions.

NPS Email

Our survey distribution strategy utilizes Qualtrics' embed functionality, instantly registering user ratings and progressing them through the questionnaire. By clearly communicating the expected survey duration, we aim to set accurate user expectations and maximize response rates.

Next Steps

Design Validation: Prior to development, we will focus on validating and refining new and updated features through comprehensive prototype testing, ensuring alignment with user needs and expectations.

Metrics Tracking Implementation: We will establish tracking mechanisms for the success metrics identified during the Google HEART workshop, enabling data-driven performance monitoring and optimization.

Future Research Planning: We will conduct a UXR planning workshop to define objectives for the next phase of research, including exploration of advanced feature requests such as A/B testing capabilities, sophisticated customer segmentation tools, and enhanced analytics functionalities.

Mobile Prototypes

Let's be friends

Sign-up to be the first to know of new releases, subscriber exclusives, and insider scoop!

It's official, you're in!
Oops! Something went wrong, please try again!
Instagram Social IconLinked Social IconPinterest Social IconFacebook Social Icon