GIANT EAGLE'S PLANS TO INCREASE GIFT CARD SALES ONLINE, AND HOW WE HELPED THEM TO SUCCEED
OVERVIEW
Company name: Giant Eagle Gift Card Gallery
Duration of project: 10 months, 2017
Services we (MWG Dublin) provided: Product design, UX research, project management, development, testing, training.
The company: Giant Eagle is an American supermarket chain with 474 stores. The company was founded in 1918 in Pittsburgh, Pennsylvania. Giant Eagle is the 49th-largest retailer in the United States. Like many large US grocery retailers Giant Eagle have diversified. Loyalty cards and rewards are a big part of grocery shopping in the US. Giant Eagle's rewards offering is a service called 'Fuelperks'. For each purchase, customers accrue Fuelperks points which can then be redeemed for fuel at certain service station chains.
The project: We, MWG Dublin, were hired by Giant Eagle Supermarkets to deliver a responsive ecommerce solution for the gift card channel of their business.
ROLES
My role: Lead product designer.
Other designers who worked on this project: 1 other product designer from MWG Dublin. 3 in-house ecommerce designers from Giant Eagle Supermarkets. 1 branding designer from Giant Eagle Supermarkets.
Size of the overall team: The MWG Dublin team consisted of 1 product owner, 1 project manager, 1 business analyst, 2 designers, 3 R&D developers, 10 developers and 2 testers.
GOALS
Business goal: Increase revenue by increasing the purchase of own brand and third party gift cards online and in-store.
User goal: Quickly search, buy and download a large range of retail gift cards.
KEY OBJECTIVES
Key design objective: Create an easily browsable responsive shopping experience that offers quick checkout and payment options.
Key technical objective: Develop a fully responsive ecommerce offering that uses the latest technologies and best practice methods.
Key business objective: Deliver the product on time and on budget with all agreed features included. Build relationships with the client for possible future engagement.
CHALLENGES
Problem Statement: This large US retailer wanted to grow their revenue from the online gift card channel of their business. Gift cards are big business but the current website and methods in place to process orders were not capable of meeting increasing order traffic.
Scope & Constraints: The new gift card site we were providing had to be reachable via all existing Giant Eagle online stores (Giant Eagle, Market District, Curbside, Get-Go, Wet-Go).
PRODUCT RESEARCH
"The global gift card market is going nowhere but up, a new survey finds. Persistence Market Research predicts that the international market for gift cards is likely to grow to $506 billion by 2025 with a CAGR of 6% from $318 billion in 2017".
Source: Marketplace.com
PRIMARY COMPETITORS
US supermarket giants Walmart and Kroger are Giant Eagle's main competitors. However as we were creating a separate stand alone gift card site we needed to not only look at their main grocery competitors but also competitors in the online gift card market. The main competitors selling third party online gift cards were Gyft and giftcards.com
WHAT THE PRIMARY COMPETITORS DO WELL
Walmart
-
One of the largest retailers in the US, Walmart have invested heavily in their online sales channels.
-
They are keenly focused on user testing and user feedback and are constantly evolving their online shopping experience based on these.
-
Competitive pricing and special offers are key to the Walmart offering.
Gyft
-
Offers a large range of gift cards from over 200 retailers.
-
Shoppers can choose from e-gift or plastic card options.
-
E-gift cards can be redeemed instantly online after payment.
-
Website is responsive with strong focus on quality imagery and user experience.
HOW THIS IMPACTED OUR APPROACH
These two heavy-hitting online competitors have their focus firmly on customer choice and the quality of online shopping experience. We would need to make sure that our site redesign for Giant Eagle Gift Cards put customer experience and accessibility to the fore if our client was to compete in this market. We would also need to understand how we could make fulfilling the orders of plastic gift cards less manual and more streamlined to bring Giant Eagle Gift Card's delivery timelines in line with their competitors'.
DESIGN SPRINTS & STAKEHOLDER INPUT
After we conducted competitor research the next time we were on-site with the client in Pittsburgh I facilitated some design sprints with a mixture of product team members and stakeholders. This really proved to be a bonding exercise and helped us gain trust and buy in from the stakeholders. We followed the 5 step design process of: 1. Exploring 2. Sketching 3. Deciding 4. Prototyping 5. Testing.
CUSTOMER RESEARCH
Giant Eagle had conducted some pretty thorough customer research and mined their analytics to define their customer base. In addition I really felt that if the product was to resonate with the intended users it was vital that we on the product team got a sense of Giant Eagle's stores and grassroot customer base for ourselves. So during one of our on site visits in Pittsburgh I organised for us to walk a Giant Eagle Market District store and chat to customers. Below are some of their comments:
"We've always shopped at Giant Eagle. And we get the Fuelperks points as well. They add up pretty quickly."
Customer: Female, 55-64
"I knew they sold gift cards in-store but I didn't know you could buy them online. I don't shop much online, apart from at Amazon."
Customer: Female, 55-64
"I always get a gift card to pay for dinner. My girlfriend thinks I'm crazy, haha. I get Fuelperks points doing it that way".
Customer: Male, 25-34.
"I do use the online gift card site. I buy a prepaid grocery card for my daughter who's away at school."
Customer: Female, 45-54.
KEY USER DEMOGRAPHICS
User 1: Female. 18-24. Shopping online for instantly redeemable e-gift cards. Value is important. Rewards points are important.
User 2: Male. 18-24. Shopping online for instantly redeemable e-gift cards. Value is important. Rewards points are important.
User 3: 45-54. Shopping online for e-gift cards and prepaid grocery cards that can be topped up and sent to children who are away. Value is important. Speed of activation is important.
HOW THIS IMPACTED OUR APPROACH
Gaining Fuelperks rewards points was clearly important to users, so we would need to find a way of alerting them as to how many rewards points they could earn per transaction. We would also need to recommend creating advertising imagery for Fuelperks that could be used within content areas on the site.
Many people seemed unaware that they could purchase gift cards online at Giant Eagle, so we would also need to promote the online gift card channel in-store and on Giant Eagle's other online ecommerce sites (Giant Eagle, Market District, Curbside, Get-Go, Wet-Go). A new website launch would be a good opportunity for this.
STORY BOARDING
-
Us two MWG Dublin designers began storyboarding key screens.
-
We focused only on primary features and interactions.
-
We then reviewed these with the Giant Eagle designers to get their feedback and input.
-
When we had a simplified end to end user journey complete we collated the sketches and reviewed them with the rest of the project team.
-
We then walked the client team and stakeholders through our proposed user journey.
This shows how we plan to select card options for plastic gift cards
THE BIG PICTURE
This is the room that we took over in Giant Eagle's head office in Pittsburgh, Pennsylvania to physically map out our site. The coloured post-its indicate design, development or client tasks.
This is our sitemapping room in Giant Eagles headquarters in Pittsburgh, Pennsylvania.
TIME TO WIRE
We now began wireframing detailed screens. These would be used by our development team and project managers for internal scoping exercises. They would also be used to review our proposed approach in detail with Giant Eagle.
Wireframes of the homescreen showing image sizes and content types
BRANDING THE PRODUCT
-
The existing Giant Eagle Gift Card branding was due for a face lift.
-
The Giant Eagle Marketing Dept. created a new logo and also a new name for the gift card service. Giant Eagle Gift Cards was now to be called Giant Eagle Gift Card Gallery.
-
We used the colours from this new logo to form our primary colour palette for the UI of the new gift card site. We also introduced a secondary colour palette of supporting colours.
-
As website accessibility to AA standard is a legal requirement in the US we ran all our new colour palettes through 3 accessibility checkers (sometimes their readings can differ so it's always good not to just rely on one accessibility colour checking website).
UI DESIGN
Us two MWG Dublin designers applied the agreed upon branding to our screen flows, section by section. We then reviewed and iterated these with the three Giant Eagle in-house ecommerce designers to get their buy-in and to confirm that what we were proposing was sympathetic to their other online stores.
Top row from left: Homescreen, main menu, category menu, search results. Bottom row from left: Product details, mini cart, shopping cart, checkout.
WAS IT A SUCCESS
The new responsive Gift Card Gallery site was well received by the Giant Eagle leadership team.
Revenue increased, and due to the new order fulfillment processes we had put in place, delivery times for plastic gift cards were reduced. The number of gift cards sold online also increased.
WHAT WE LEARNED
Working with a client in another timezone can be tricky if expectations on both sides are not managed correctly. We had to adapt to a way of working when direct engagement was only possible for 5 hours of each working day.
We also learned that regular on-site visits and video conferencing were important to keep both sides of the project team aligned and to minimise any project friction.
WHAT CHANGED
Communicate at least daily, and if face to face communication is not an option always try to use a video call instead of a phone call. Try to regularly travel to be onsite with the client if possible.