Rewards App Suite

A high-end convenience store chain was looking to launch a new loyalty program to increase repeat business across its 500+ stores. The client came to our team looking for a suite of apps that would reward frequent customers for visiting stores and help boost in-store sales by displaying coupons, promotions, and more.

Product: iOS/Android app, & web app
Industry: Retail
Agency: Punchkick Interactive
Roles: Concept strategy, Information Architecture, UX/Interaction Design, Interface Design


4.5 stars rating on the App Store

Top 50 Lifestyle App ranked by Apple

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
I chose to start 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. After synthesizing the information gathered during the kickoff and referencing the client's style guide, I began creating "style tiles." These sample designs help explain the look and feel of the product by showing sample color palettes, typographic style, and interface elements.

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

Validation Research
Next, I worked with the strategy team to go through the feature backlog. We used information learned during the customer journey mapping exercise to indicate potential problem areas to focus on when designing and user testing.

I began wireframing the home view for iOS and Android, investigating navigation paradigms and visual representations of various rewards data. I worked with the research team to test the navigation pattern by 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.

Artboard Copy 5 copyArtboard Copy 5 copy

Final UI Design
After taking into account all of our findings from the user research, I began creating user interface designs for iOS, Android, and web. I based all of the design elements on 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 8 copyArtboard Copy 8 copy
Artboard Copy 7 copyArtboard Copy 7 copy

Final Web Design
After several rounds of feedback from the client, I finalized the designs 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.