Gift Card Mall E-commerce Case Study
PROJECT OVERVIEW
Design for Gift Card Mall, a B2C and B2B online store for physical and digital gift cards.
PROJECT TYPE
E-commerce Design
ROLE
Creative Direction
TEAM
Jacob Johnstonbaugh - Design, UX/UI
Brief
A detailed brief was created with the client that aligned with business, strategic and branding goals to build an e-commerce and brand presense online leveraging existing brand awareness of Gift Card Mall kiosks and POS displays.
The primary goal of the site was to increase online sales to both retail and business customers, while building trust with the customer and establishing Gift Card Mall as the go-to source for all things gift cards.
The site also needed to clearly differentiate from other brands/SBUs in the Blackhawk Network, Gift Card Mall's parent company.
Other Business Goals
- Simplify the location of individual cards
- Streamline the experience for customers to purchase one or a bundle of cards
- Provide a revenue opportunity for bundling brands by occassion or category on one card
- Showcase the design-your-own card platform for customers to customize their card
User Research
User Personas
In the creative development process, 2 core user personas were created to identify unique, specific needs and pain points.
Katie
About
A young mother who cherishes community, relationships and remembering birthdays. She loves giving small tokens of appreciation to loved ones. She is creative, well organized and needs variety in her life.
Values
- Time management
- Simple yet sophisticated aesthetic
- Customization
- Product ideas
- Product reviews
- Good deals
Goal
Needs to save time, buy multiple cards ahead of time and a last minute e-Gift Card to someone who lives out of town and won't receive a physical gift in time.
Jalen
About
Young, employee incentives professional looking to streamline his rewards program buying process. He is outgoing, strives on efficiency and thrives on making sure credit is given where credit is due.
Values
- Time management
- Cost savings
- Customization
- Streamlined ordering
- Bulk buying
Goal
Needs to pre-order company branded cards for an awards banquet and also ship rewards cards to award recipients who will not be attending the event.
Information Architecture
Using research and analysis of competitor sites, we explored more fluid ways to categorize and present product filtering that aligned with the brand and business goals of simplifying and streamlining the product search and buying processes. With numerous card offerings, it was important to group cards effectively so that customers could find and purchase quickly.
By sorting and simplifying the filtering process into 3 key areas: category, brand and occasion, the customer could choose which filter to use based on what idea they may have already had. If they need inspiration they can search by occassion for curated ideas.
Site Map
Leveraging insight from both the competitive analysis and filter sorting exercises, we created a site map to define the overall structure of the site. We also wanted to visually show the differentiation in the brand experience evident in the simplified and more intuitive nature of the filtering process.
Development
Sketches
We began exploring design options that would leverage the differentiation and simplification of product searching insights from our research findings. Because the most important page for displaying this filtering product differentiation was the home page, we began exploring solutions to simplify the user experience and immediately provide options for what they may be looking for. We avoided using basic, check box filtering and opted for a more visual impact leveraging hero images and messaged to drive the exprience. We also provided several ways to get customers from point A to point B in the buying process.
Wireframing
Once the key components of the site were in place, we began refining our sketches into wireframes to begin showing the customer journey throughout the site. This started bringing the brand differentiation in user experience to life.
Prototyping
Once wireframes for all user flows and page levels were presented and approved, we began prototyping to begin the visual branding process and prepare for user testing focusing primarily on card types like Visa, e-Gift Card, Business, Brand, Category, Occasion, etc.
