Galena Payment and Loyalty Mobile Application Design Concept Challenge

Welcome to the Galena Payment and Loyalty Mobile Application Design Concept Challenge.

Consumers at the gas pump are in a hurry and are annoyed by unnecessary questions, complex or repetitive interactions and slow interfaces. They want their experience at the gas station to be painless. With the Galena Payment and Loyalty Mobile Application, consumers are able to have a seamless experience with their favourite brands and their gas station. Whether it's at the pump, or in the store, the Galena Payment and Loyalty mobile App makes the consumers life easier.

The goal of this challenge is to create some design concepts and user experience ideation for the  Galena Payment and Loyalty Mobile Application. We have provided a design direction document as a foundation and frame work for your user experience ideation and design concepts. Please use this as a starting point for your design and DO NOT copy exactly what the wireframes have in them, but use them to help you think about the APP and create your concept.

Round 1

Initial Design Screens of Galena Payment and Loyalty Mobile Application (You can submit some of these following screens)
1. Marketing Screen - An offer is presented to the user to get them to download application by supplying name and email addresses
2. Accept & Download - Download the loyalty application
3. Profile Screen - User profile and preferences
4. Wallet Screen - Screen to house multiple loyalty apps & cards
5. Main navigation - Main Navigation scheme for mobile app
6. Partner Brand Loyalty APP Landing Page - Show home page for partner brand loyalty APP
7. Pay at Pump Screen - Show Galena "pay at pump" flow
8. Payment Confirmation Screen - Show total sale and payment options with points redeemed

Round 2

Final Design Screens of Galena Payment and Loyalty Mobile Application + Provided feedback from Checkpoint Review
1. Marketing Screen - An offer is presented to the user to get them to download application by supplying name and email addresses
2. Accept & Download - Download the loyalty application
3. Profile Screen - User profile and preferences
4. Wallet Screen - Screen to house multiple loyalty apps & cards
5. Main navigation - Main Navigation scheme for mobile app
6. Partner Brand Loyalty APP Landing Page - Show home page for partner brand loyalty APP
7. Pay at Pump Screen - Show Galena "pay at pump" flow
8. Payment Confirmation Screen - Show total sale and payment options with points redeemed

 

Galena is a global manufacturer of gasoline pumps and convenience store POS systems, including pay at the pump. Galena sells their products to gas stations, like Sheetz, Wawa, Murphy USA and Friendly have their own mobile loyalty apps that their customers use to receive discounts and find store locations, etc. Galena's pumps can provide a lot more information to consumers while they are at the pump due to the fact that they can access services in their cloud as well as from the physical pump itself to improve the experience at the pump and provide additional avenues for advertisements and revenue opportunities.

You can view these links to get initial look of Galena Payment and Loyalty demo application: (We want you to use this as a reference to understand the user experience flow for paying at the pump, but want you to create a new design for the Loyalty and Payment application.)
http://www.youtube.com/watch?v=U1EliOeOCrQ
http://www.youtube.com/watch?v=1orKnog23OI&list=UUsA4oxBgenfuVRHlfdCmPAw

In this challenge, we need your ideas/solution to create storyboard design by showing us the click flow path and thinking how Galena Payment and Loyalty Mobile Application should work for a gas station customer. We would like you to think of an application that can be customizable for each user allowing them to add their brand loyalty programs to the application. Think of it as a smart phone wallet for customers to house all of their gas station payment options and favorite gas station products storage. A customer can pay for their gas and favourite products, redeem points, and have a one stop shop for their complete experience at the gas station. Consumers will be served up messages via the APP alerting them to specials and discounts at their local gas stations.

Design Problem
- Client has demo application screenshots (pump-flow.zip) and is looking for fresh design and user experience solutions for a new loyalty/payment framework application to house gas station and partner brand loyalty applications
- The application need offer seamless payment/loyalty, fueling preferences, and media advertising offers during prefueling and throughout fueling transaction
- Your submissions must create 2 different versions black and white them to accommodate different brands. Check this site for example.
- Research existing Loyalty Mobile Application and see what the latest design trends and features are. Here's some references:
https://econsultancy.com/blog/64185-the-five-most-interesting-mobile-loyalty-apps
http://www.hongkiat.com/blog/mobile-loyalty-platforms/

Submission Format
- PSD Source Files in iPhone 5 Retina Portrait Size: 640px x 1136px
- As part of the final fixes phase, winner need create 320px x 568px (Standard Portrait Size).

Design Concept Scenario
For this design concept challenge we would like you to show us how this flow works:
1. Customer goes to the gas station
2. Open Galena Payment and Loyalty Mobile Application on their mobile phone
3. Asked to join station loyalty pump for 3 cents coupon off their gas purchase per gallon
4. Accept and download the Pump Station related app
5. Show Profile page
6. Show Media Partner Advertising
7. Show Pump Progress
8. Customer Payment

Use Case Scenario
A user pulls into a gas station to fill up their car with gas. At the pump their smart phone receives a message that if the user uses his smart phone to pay for the purchase of their gasoline they will be eligible for a 3 Cent discount per gallon of gas that they purchase. All that is required from them is to “tap” the “payment” button with their phone and the Loyalty APP (PUMP & SAVE) that we are designing will be downloaded to their phone after they enter in their name and email address and agree to terms and conditions.

After successfully downloading the APP...the user will be taken to their profile page on the APP. Here they will see the other loyalty programs that they are part of in a “wallet” view. A user can launch a partner loyalty APP from w/in the container APP and be served media and advertising that is catered to that user. A user can track and use loyalty points as well as receive sales messaging and updates from their loyalty APPs.

When the user starts to fuel their car....the container APP will take over their screen and show the user directed advertising messages based off of their preferences. The user will also see a running total of the gasoline purchase and their accumulating savings on that purchase. At the end of the purchase the user will be shown the total amount of their gas purchase and hit the "Pay" button and complete the transaction right from their phone.  This completes the purchase and the user is shown the amount of that purchase plus any rewards points that were achieved from that purchase.

The user then walks into the gas station to redeem loyalty points on their APP and uses the new APP to manage and purchase store items right from their smart phone. The user smiles to him or herself and is glad that their experience at the pump today was quick and easy because of the Pump & Save APP.

We have supplied a generic brand for you to use for this challenge. Ultimately we’ll need to “white label” your design and apply it to many different brands. It is important that you keep this in mind as we need your design to be flexible. Consider designing a “lite” and “dark” version of your concept to demonstrate the flexibility of your design solution.

Design Concept Consideration

1. Existing Demo Application Flow
screenshot: pump-flow/flow-1.png
- When customer approaches gas station, the Galena framework takes over phone, but works in conjunction with store’s app, if available.
- The framework grabs the phone ID (Apple ID or other on Android), tokenizes that value and contacts GVR cloud. It asks first permission to do that in order to access the framework.
- Upon acceptance, the app shows "welcome to this gas station, pump number xx", and asks to preset preferences for future usage, and also prompts for any promo that the retailer may have pushed to the cloud for his station.
- There should show option to download customer app, that will give customer 3 cents coupon off their gas purchase per gallon
- Create screen flow of how download process works.

screenshot: pump-flow/flow-2.png, flow-3.png
- To initiate the transaction I can either scan the QR code on the screen
- Opening up the camera on my phone, bringing it into close proximity of the 2D bar code

screenshot: pump-flow/flow-5.png
- Or I can enter in a unique dispenser or fueling position code or number.

screenshot: pump-flow/flow-4.png & flow-6.png
- Once entered, the dispenser welcomes me by name, gives me an updated loyalty points balance, and prompts me to enter in a pin on phone for added security.
- We need improve welcome screen that give quick option for user to set preferences. Check screenshot: pump-flow/improved-screenshot.png

screenshot: pump-flow/flow-7.png
- Once the number is confirmed, the dispenser prompts me to lift the handle to begin the transaction as I always would.

screenshot: pump-flow/flow-8.png
- We roll into our Applause TV or Applause Media System content which is a mix of entertainment, national and local advertising designed to attract customers' eyes and drive them inside the store to buy more items from the convenience store.

screenshot: pump-flow/flow-9.png
- You can see that on the screen we have a advertisement running and that advertisement is also running on my phone.

screenshot: pump-flow/flow-10.png
- If I touch me phone you can see it check marks and that coupon is now in my phone.

screenshot: pump-flow/flow-11.png
- Along the top of the phone you can see a rolling money volume amount confirming for the consumer how much fuel is going into the vehicle and it matches the dollar amount shown on the dispenser. This will be used at the end of the transaction for receipts and record keeping purposes.

screenshot: pump-flow/flow-12.png, flow-13.png
- At the end of the transaction I hang up the nozzle as I always would and I can set my preferences to either print out a receipt at the dispenser or simply store the receipt electronically on the phone.

screenshot: pump-flow/flow-14.png, flow-15.png
- I can also go into the coupon that we just downloaded and bring it inside the store where I scan it at the point of sale to claim the offer.

2. Profile Page
- How should the user profile page look?
- Sections considered need to show on Profile pages are:
-- User Profile
-- Payment Method information
-- Nearest Pump on Map
-- Coupon list
-- Any other features should displayed here? Any suggestions?

3. Customer Payment
- Customer will show user preferred payment method
- Payment options (PayPal, MC, Visa, other) while at the pump
- Need ability to save payment preferences
- How you design this page?

4. Social Media Integration
- Gamify the first time use of the app for freebies and discounts (cool ideas around social ideas during refueling)
- Social log in to get more data for loyalty integration and social sharing

5 Wallet Screen
- Show how partner brand loyalty APPs will fit withing the Galena Payment /Loyalty APP

6. Partner Loyalty App Home screen
- Can be opened from the wallet screen
- Show a sample partner brand loyalty APP and points and offers associated with that brand

Target Audience
- Galena Customers

Judging Criteria
- How well you create screen flow that demonstrate new look and features.
- User Experience of the application.
- Click flow make sense?

Submission & Source Files
Preview Image
Please create your preview image as one (1) 1024x1024px JPG or PNG file in RGB color mode at 72dpi and place a screenshot of your submission within it.

Submission File
- Submit JPG/PNG images for our review.

Source Files
- Files should be created in Adobe Photoshop and saved as layered PSD file or any source graphics you created in Adobe Illustrator and saved as AI file.

Final Fixes
As part of the final fixes phase, winner need create 320px x 568px (Standard Portrait Size).