Timeless Cards Website

E-Commerce · Case Study · UX Design · Visual Design

An e-commerce website that streamlines gift cards with greeting cards to create closeness, unity, and lasting relationships through thoughtful yet easy gift giving.

Project Overview

The Product

An e-commerce website that streamlines gift cards with greeting cards. Each physical greeting card has a QR code that recipients can scan to redeem the gift card that was purchased alongside the greeting card. This intersects both the personal and physical aspect of greeting cards with digital and efficient gifting.

Product Duration

May 2022

The Problem

Purchasing gift cards and personalized written greeting cards are always two separate tasks that often go hand in hand. Time, efficiency, and redeeming of gift cards are a common issues noted by most users.


The Goal

Create a new website to help users streamline the process of buying both a gift card and a stationary card to send as a gift. The goal is to bring more time efficiency to users, offer a greater range of gift cards and stationary cards to users, and partnership between businesses to consumer relations.

My Role

UX/UI designer for an online web design for Timeless Cards from conception to delivery.

Responsibilities

Conducting surveys, paper and digital wire-framing, low and high fidelity prototyping, accounting for accessibility, and iterating on designs.

  1. Survey


User Research


I surveyed a range of people, ages 20-65 years old, about their experience purchasing physical greeting cards and e-gift cards using a Google Form. I asked what type of greeting card they would prefer to purchase and what challenges they face when buying both greeting cards and e-gift cards.



Key Findings

  • 100% of surveyed responses listed they would prefer to gift “physical” greeting cards over a digital greeting card.

  • A high number of surveyed responses said they "always" pair a note with either a physical gift card or e-gift card.

  • Common challenges of purchasing e-gift cards is the confusion of when it gets redeemed electronically, usually via email.

  • Purchasing greeting cards is viewed as a common hassle due to time, physically going to a store for purchase, and limited design options.



2. Competitive Analysis

Overview


I completed an in-depth analysis of two commonly sited sources that offer greeting cards and e-gift cards.

I looked for ways the sources contributed to or eased users’ frustrations. This analysis helps me gauge the industry standard and uncover trends.


Key Findings


  • Emotive text and imagery bring a more personable element to gift giving and purchasing of cards.


  • Easy navigation such as a "favorites" page and cart bring users to a landing page much faster.


  • Online sources do not offer a physical element in receiving either a greeting card or gift card.

Annotated screenshots of competitor’s pages.

3. Strategy

Concept & Information Architecture


The idea for Timeless Cards formed as I read several survey responses on the preferred preference of gifting. The concept illustrates how physical greeting cards can be integrated with digital gift giving through QR codes.


I created an information architecture of the two main website pages "shop" and "cart" which demonstrate the process of purchasing this product. It also illustrates the organization of the website.

4. Wireframes

User Flow


I wireframed the three main pages of the website- "Gift Card Selection", "Customize your Gift", and "Your Cart".


The inclusion of a wider variety of greeting cards and gift cards are important as this keeps the gifting personalized. The QR code that gets printed on the greeting card for redeeming purposes is prominent in the design as well because it avoids users from trying to find their digital gift card in their email and allows them to have a physical copy of the digital gift.

5. Visual Design

Overview


In my mock up, the process of shopping for gift cards and greeting cards are separated in categories to keep the pages organized.


Each item within the cart shows clear thumbnails of both the gift card and greeting card selections to clarify how the users customized their order.