Food & Fuel Rewards

The Problem
A premium convenience store/gas station chain was looking to launch a new loyalty program to increase repeat business across its 500+ stores. The brand came to our team unsure of what product would best suit their needs.

The Solution
Our team produced a suite of applications for mobile and desktop that sync up with the newly launched rewards program. The apps use scanning technology that allows frequent customers to collect points for viting stores and buying certain products. After hitting 1 million users in the first 6 months, the apps have helped drive revenue for the brand by boosting in-store sales and increasing trips from returning customers. The iOS app currently holds a 4.5 rating in the App store and has consistantly been ranked as a 'Top 50 Lifestyle App' for several months.

Product: iOS, Android & web app
Industry: Retail
Agency: Punchkick Interactive

Roles
Innovation Session
Concept strategy
Information Architecture
User Experience
​​​​​​​User Research
Interface Design

Artboard Copy copyArtboard Copy copy

Strategic Kickoff
In order to better understand client expectations of the final product, I facilitated a strategic design workshop with the client's main stakeholders. Through various interactive exercises, our team worked with the client to discover essential pieces of information that would in the end help us deliver a best-in-class product. By asking the client to think of their brand in abstract ways, such as comparing their brand to a vacation spot or an animal, we were able to get a more raw understanding of visual style, brand essence, key personas, the customer journey, and client KPIs. 

Artboard Copy 2 copyArtboard Copy 2 copy

Visual Style Exploration
After synthesizing the information gathered during the kickoff, we began the design phase with a strong visual reference for the client. Considering that they probably had never seen wireframes before, this gave them a stronger confidence in the design team. While reviewing the client's current style guide, "style tiles" were created. These sample designs help explain the look and feel of the product by showing sample color palettes, typographic style, and interface elements.

SitemapSitemap

App Architecture
Using information learned during the customer journey mapping exercise, I went through the feature backlog to start identifying how different parts of the app would be connected. With a general site map created, the team was able to indicate potential problem areas to focus on during user testing.

Artboard Copy 3 copyArtboard Copy 3 copy
Artboard Copy 4 copyArtboard Copy 4 copy

User Research & Validation
In order to investigate navigation paradigms and visual representations of various rewards data, I began wireframing the home view for iOS and Android. Worked with the research team, we put together a discussion guide to test the navigation pattern, producing several prototypes to be A/B tested. I also created a card sorting study where the app's main features were listed on note cards and the participants were asked to order them by importance.

Once we knew which home view structure had the most successful outcome and which features were the most popular, I was able to create additional prototypes to test other functions of the app. We conducted 3 rounds of tests with 7 participants each.

kwik trip wireskwik trip wires

App Interface Design
After taking into account all of our findings from the user research, I began creating user interface designs for iOS, Android, and web. All of the design elements were derived from the visual direction chosen by the client during the style tiles phase. Taking into account best practices from Apple's Human Interface Guidelines and Google's Material Design, I designed three unique experiences that each accounted for the ideal features.

During our research, we discovered that our primary user base owned Android devices. During initial prototyping, we tested several navigation structures for iOS and Android, including the tab bar. Formerly considered an iPhone-only paradigm, the tab bar was recently added to the Material Design library. When the research showed that the tab bar was actually favorable to Android users, I chose to use this paradigm as the main navigation pattern for both native devices.

Artboard Copy 5 copyArtboard Copy 5 copy
Artboard Copy 8 copyArtboard Copy 8 copy

Web Design
After several rounds of feedback from the client, designs were finalized for development. This sampling of desktop and mobile web designs shows how many of the same features were adjusted per device. Selected as the most important feature by users, the "Visit Rewards" data visualization was designed to give users a seamless experience between platforms.

Upon client approval of designs, I worked closely with the native and web development teams to ensure the final product properly reflected the designs. Through an intensive QA phase, I made sure that the UI was brought to life with interactions and animations that served to enhance the experience.

Artboard Copy 7 copyArtboard Copy 7 copy