Overview
Background Information: Gift Card Giant, was looking to re-create their site and brand, to bolster more engagement, minimize the amount of time employees spent taking troubleshooting calls, and boost their overall ROI. Their goal was to place themselves as the top of the food chain in the gift card marketplace space, similar to competitors like CardCash , Raise, etc.
Problem Statement: How might we enhance the user experience, to ensue confidence and ease of use for the customer?
Outcome: To address the challenges faced by Gift Card Giant, we devised a comprehensive solution centered around designing a user-centric marketplace experience. This solution focuses on implementing secure transaction protocols, streamlining the checkout flow for seamless transactions, the addition of various payout methods (Venmo, Paypal, direct deposit, etc. ) , giving the user more control via an intuitive dashboard, refreshing the branding for a modern and inviting look, and establishing a self-sustaining ecosystem to ensure long-term viability and growth.
Team:
2 UX Designers
Tech Lead
Project Manager
2 Developers
Tools:
Figma
Miro
Asana
My Contribution:
Wireframing
User Personas & User Journey Map
Competitive Analysis
Meeting / Collaboration with the Stakeholders
Presentation/ Explanation of Design Decisions to Team/Stakeholders
User Testing
Lofi and Hifi Designs
Style Guide
Handoff to Developers and UX Review
UX Process
Before we dive in, I'd like to share an outline of the UX Process taken in this project , as well as the roadmap / timeline
Roadmap
A Timeline/Roadmap was constructed to estimate the design journey, deliverables, presentations, and to keep us on track / accountable
Define / Research
We first sat down and had an in-detail discussion with the team at Gift Card Giant . We wanted to understand goals, expectations, competitors, pain points, and their target audience.
I then began by initiating a competitive audit, in which I found the top 4 contenders in the gift card marketplace, and analyzed the sites based on user flow, how easily users were able to make a sale/purchase , design, their dashboard functionality, integrated payout methods, and navigation.
Why The Research?
Creating an interface / experience without understanding what the market standard is , is like going snorkeling without knowing how to swim. We need to be able to understand the market and what is working (or not working) for our competitors to be able to craft more delightful experience that doesn't frustrate or create obstacles for our users.
The Competitors:
Website Reviews
As part of the competitive analysis , I scoured the web in order to find both positive and negative user reviews of the most popular gift card marketplaces online. By noting the negative reviews, we can learn more about common user pain points, and direct our efforts to solving them / making sure we do not create the same obstacles for our users.
After analyzing the competitors , I created a compilation of notes taken on the individual pages, mapping out highlights of innovative / user-centered features , as well as the areas in which there was room for improvement. I then collected a list of MVPs, that aligned with user needs, stakeholder needs, and innovation.
Ideate
Starting out , we developed several personas grounded in the demographic data supplied by GCG, focusing on the general age range of their clients. By creating a diverse set of personas, we aimed to capture a wide spectrum of users, ensuring that we thoroughly understood and addressed the unique needs and pain points of different user segments. This approach allowed us to empathize with various user groups and design solutions that cater to a broad audience, enhancing the overall user experience.
Using the requirements given by the stakeholder and findings from the competitive audit, I then drafted out a sitemap / the user flow. This would help the team visualize the journey the user would take, and any potential roadblocks our users could potentially encounter.
Sitemap
Wireframes
After the userflow/sitemap was approved , we began sketching out the wireframes, to visualize our ideas and create the skeleton of the user experience.
Once we came to a consensus, and walked through the experience various times, we moved onto the digital wireframes. We had to keep in mind restrictions such as the layout of the integrations (shown below) we would be using, the main objective (ease of use buying and selling gift cards) , an easy to use dashboard, and creating a double door portal that allowed members to switch between their member account, and a wholesale seller account. We then employed lofi prototypes, to validate the designs and make sure that the interactions and navigations synced up with the site map created.
Due to the budget, We tested the wireframe designs internally to make sure it flowed correctly and was easy to use, & then presented the concept to the stakeholders.
Wireframes
Integrations
Key Features
Advanced Search and Filtering: Enabled users to search and filter gift cards by price range, discount percentage, and retailer name.
User-Friendly Indicators: Implemented fixed top indication bars and shortcut features for enhanced user navigation and dashboard access.
Streamlined Checkout Process: Reduced steps in the checkout process to minimize user drop-off rates.
Interactive Sales Dashboard: Integrated a dynamic calculator tool, empowering users to estimate earnings from their gift cards effortlessly.
Informative How-it-Works Section: Detailed a straightforward three-step process for both buying and selling gift cards.
Enhanced Navigation: Incorporated breadcrumbs for intuitive navigation throughout the platform.
Real-Time Cart Editing: Enabled users to edit their carts seamlessly without leaving their current screen.
Retailer Database Integration: Ensured accuracy and relevancy of listings through integration with multiple retailer databases.
Personalized Recommendations: Leveraged user search history and preferences to offer tailored gift card recommendations.
Dynamic Content Strategy: Maintained platform relevance with a regularly updated blog featuring the latest technological and gift card trends.
Branding / High Fidelity Designs
After greenlighting the Lo-fi prototypes, we dove headfirst into crafting the Hi-fi designs. Staying true to their brand guidelines, I curated a color palette (based on their previous website) that not only screamed 'us' but also ticked all the boxes for Web Content Accessibility Guidelines (WCAG) compliance. We combined their colors , logos, and fonts into a reusable design kit that we would eventually hand off to their team.
Our aim?
We wanted our users to feel like they stumbled upon a digital oasis—somewhere vibrant, inviting, and trustworthy. So, we sprinkled the design with lively elements to catch their eye and foster a sense of connection and reliability.
Brand Kit
Components
User Testing / Handoff to Dev
After we had created a prototype, and internally reviewed the high-fidelity designs, we then went onto rounds of testing. We gathered 6 participants to use the website, giving them tasks to accomplish, and then had them review the entire process based on ease of use, accessibility, clarity , and the checkout experience. We then gathered the insights , and made iterations based on the feedback.
Insights From User Test
Once our team , stakeholders, and users were satisfied with the product , I was then responsible for exporting key elements of the design kit, as well as any other assets, for developer usage. I worked hand-in-hand with the dev team to ensure that spacing, interactions, sizing, and the overall experience, was accurate to our plan. If any hurdles would arise, we would work together meticulously to make sure that the user experience nor the business goals were compromised due to any technical restraints
…Aaaaand Voila!!
Results
My team played a pivotal role in Gift Card Giant’s success, contributing expertise in branding, logo design, content writing, UX/UI design, website design, and website development. The collaboration resulted in a robust platform that revolutionized the gift card trading landscape.
By combining strategic thinking, creative branding, seamless UX/UI design, and robust development, Blennd and Gift Card Giant created a powerful synergy that transformed a simple idea into a thriving membership-based e-commerce platform.
