top of page

Fins Car Wash

Loyalty Mobile Application

March 2019 - October 2021

Fins_Mobile_App_Hero_Image.jpg

Challenge

​

Create a multi-functional loyalty app for Fins Car Wash to enhance brand recognition, increase car wash sales, and cross-sell AAA Memberships to Fins Customers

​Company

​

Fins Car Wash is a car wash chain created by AAA to complement their automotive offerings.

​

Users

​

  • Casual Fins Customers

  • Fins Loyalty Members

  • AAA Members

​

Blockers & Constraints

​

  • Limited existing UX buy-in within the organization

  • Limited project budget due to previously invested up-front business costs

  • Limited development resources available for project

  • Future Fins locations may be in areas with unreliable web service, meaning the app needed to be natively coded for maximum reliability 

  • First time our company had attempted a UX challenge this large, setting the expectations for future UX endeavors

  • Technology integration needs limited solution options and often trumped user experience

  • The sole operating Fins location at the time was in Greenville, SC, which was 2.5 hours away from our company headquarters in Charlotte, NC, complicating testing logistics

​

Solutions

​

​Phase 1

​

  • Developed MVP application using native code base

​

  • Integrated application with ICS, Clutch, and Salesforce databases

​

  • Linked user activity to a loyalty membership barcode for points tracking

​​

  • Implemented barcode scanning compatibility at car wash kiosks

​​

  • Offered membership-linked discounts to AAA Members

​

​

Phase 2

​

  • Improved accessibility of user interface by simplifying graphics and following WCAG 2.0 web standards

​

  • Improved visual hierarchy using varying typographical weight and changing the app's original typeface to Roboto

​

  • Expanded loyalty barcode display for better scan-ability at Point Of Sales (POS) kiosks

​

​

Phase 3

​

  • Introduced dark mode UI​​ 

​

​

Phase 4

​

  • Introduced new functionality allowing users to associate their license-plates with their Fins loyalty accounts, presenting a customized pricing menu based on membership status upon arrival to a car wash sales kiosk

​

  • Added notification banner and CTA in app to raise program awareness and encourage user enrollment

 

Results​

​

1000+ App Downloads leading to increased customer engagement

​

What I'd Do Differently

​

1. Conduct discovery research before product development

​

2. Account for time needed to adapt to new AGILE methodology in project delivery timeline

​

3. Prioritize user testing at physical stores

Featured In:

Key Skills Used

User  Acceptance Testing

User Experience Design

User Interface Design

Accessibility Design

Design Thinking Workshops

Competitive Analysis

User Flows

Cross-Depatmental Collaboration

Accessibility Analysis

Artifact Creation

Agile Methodology

Industries Served

Automotive Services

Membership Services

Loyalty Programs

Business to Consumer Sales

Tools Used

Adobe XD

Microsoft Office

Slack

Microsoft DevOps

Clutch Loyalty

ICS Kiosk System

Wash Connect

Salesforce

My Role & Team Composition

I created all UI artifacts for Phases 1-3, supporting my manager as she lead all information architecture exercises, research activities, design thinking workshops during the initial stages of the application's rollout

 

Upon my manager's departure from the company in March 2021, I assumed the lead designer role and continued to handle all UX and UI requests from the Fins Mobile App team in Phase 4 until my departure in October 2021.

Team Members

UX Manager

UX Copywriter

Lead Architect

Senior App Developer

Project Manager

SCRUM Master

Product Owner

Marketing Manager

Fins Vice President

Senior AAA Leadership

My Design Process
Continuous Discovery & Dual-Track Agile

The key to any good design is to collaborate early and often. Developing UX maturity within an organization requires building a bedrock of trust with your team members first.

 

By proactively leveraging the unique knowledge of each team member through design workshops and brainstorming sessions, the team can anticipate road blocks and course-correct early on instead of after a product has been built. I've found working this way can reduce implementation rework and strengthen team camaraderie as everyone feels their voice and perspective matters.

Case Study Presentation-4.png

Phase 1
Minimum Viable Product Release

AAA stakeholders tasked our new agile team to develop a new loyalty app from scratch

The new app would need to be capable of tracking customer wash purchases at Fins locations and rewarding customers with a free wash after accumulating 100 points.

 

It also needed to include marketing promotions and digital coupons, as well as exclusive discounts for verified AAA members. Integration with existing systems like Salesforce, Clutch, ICS, and Wash Connect was also essential for project success.

Design Thinking Workshop

User Personas

To start the team off with shared understanding, my manager, the product owner, and I collaborated to identify what users we would be designing for, and landed on three main persona types.

pexels-sergeymakashin-5444907_edited.jpg

Shelby O'Connor

Casual Fins Customer

pexels-tr-n-long-3093985-14349373.jpg

Jacob Nguyen 

Fins Loyalty Member

pexels-tim-samuel-5835016.jpg

Raja Patel

AAA Member

Design Thinking Workshop
MVP User Flow

With finalized user personas in hand, the product owner and I supported my manager as she took charge of creating a user flow chart that corresponded with the businesses' acceptance criteria for MVP release.

Fins_App_User_Flow.jpg.webp

Low-Fidelity Wireframing
Drafting The App's Layout

My manager created low-fidelity wireframes we later presented to the agile team where we negotiated on what functionality could be feasibly completed before our stakeholder deadline.

 

With that feedback now incorporated into the designs, we presented to leadership for further review. After we received final approval, it was time for me to flesh out the app's user interface, ensuring it matched existing branding.

High-Fidelity Wireframing
Incorporating Existing Fins Brand Elements

Now that the base layout was finalized, I set off to create a user interface that was cohesive with existing Fins collateral

​

Once designs were finalized within the team, we presented our solutions to leadership. Upon approval, we began preparing materials needed for conducting in-person user acceptance testing sessions.

Fins_Initial_Hi_Fi_Designs.png

Usability Acceptance Testing

Ten 1-Hour, In-Person, Moderated Testing Sessions

Due to budgetary constraints, our team opted to do in-person acceptance testing with select AAA employees who did not have much experience with the Fins brand. While this approach was not ideal, we were still able to make the following discoveries.

Problem #1

Header Logo Didn't Link to Home Screen

Several users found it difficult to navigate back to the app's home screen after they had completed a task as they expected the logo mark in the app's header to redirect them like in other apps. Moderators often had to guide users during this portion of the test.

Problem #3

Barcode Was Difficult to Scan Successfully

Users who did remember to scan the digital loyalty card at the beginning of the wash purchase found the wash kiosk machine wasn't great at reading said code, resulting in users asking our team for further assistance during testing. Users tried moving further and closer to the machine to no avail, but increasing screen brightness did help. Due to how the app was coded, it was not possible to resize the barcode for better visibility at this time. 

Problem #2

Difficulty Remembering to Scan Loyalty Card

Due to the way Wash Connect, Clutch and ICS were set up, users had to scan a digital bar code displayed in app at the beginning of the car wash purchase to earn loyalty points. Many users did not realize this action was required, missing it altogether.

Problem #4

Process for Redeeming Rewards Was Unclear

In order to avoid incurring business fees from Apple's App Store, we chose to have users select coupons they wanted to redeem, then once they redeemed the coupon, they had 60 days to use it before it expired. Users stumbled through the redemption flow and were very confused as to why there was so many steps required to use earned reward coupons in the first place.

Phase 1
Finalized Designs

To address issues found during user testing, we linked the top logo to the home page and added instructions for scanning loyalty barcodes in a tutorial sequence that displayed upon initial download. 

We also added both on-screen and printed messaging at each kiosk to further clarify the barcode scanning process, and increased device screen brightness when using the app to improve barcode readability. Once our final iteration of the app had been completed, our team successfully published to both Google Play and the App Store.

Fins_Phase_1_Screenshots.png

Phase 1
App Store Collateral

Fins_App_Store_Collateral.png

​

​

In the app screenshots, I decided to incorporate a few main brand elements to improve Fins' overall brand recognition, mainly the brand mascot, color scheme, and brand logo. 

​

I also wanted to emphasize the free top wash coupon users receive when downloading the app for the first time and did so by dedicating a slide to the promotion.

 

Once completed, our team successfully released the app to both the App store and the Google Play store.

After we revised the app to solve the problems that arose in testing, I created the app store promotional materials needed for public release.

Phase 2
User Interface Design Refresh

Now that our MVP application was available to the general public, leadership challenged our team to make the app feel more sophisticated. 

 

As the team's UI designer, I set out to create a stronger visual hierarchy within the app by establishing a better typographical style and reducing the amount of copy on each page to increase negative space for visual relief. I swapped out the chunkier, more playful icons with sleeker alternatives, and used a logo tab to nest extended menu options in so as to not overcrowd the main navigation at the bottom of the app.

​

Fins_Phase_2_UI_Improvements_Screen.png

General UI Improvements

  • Created stronger visual hierarchy by adjusting typographical style and changing typeface to Roboto
     

  • Reduced the amount of copy on each page to increase negative space
     

  • Swapped out the chunkier, more playful icons with sleeker alternatives

​

  • Adjusted form fields to be shorter, reducing scrolling

Barcode Enhancements

After initial release, we received more feedback on the barcode functionality within the app, with users still citing scanning issues at wash kiosks. I tackled this issue by moving the scannable barcode to a page of its own, and made the barcode itself much larger, making it easier for the wash kiosks to read the barcode from a distance of up to 3 feet.

Fins_Phase_2_Barcode_Screen.png
Fins_Phase_2_Home_Screen.png

Home Screen Changes

Using a tab navigation drawer, I was able to free up precious real estate on the app’s home page, making room for a “favorite locations” section, and a section for event and promotion information, leading the users to the Fins website and increasing site traffic as a result.

Phase 3
Dark Mode Release

Recognizing the rising popularity of dark mode thanks to releases from iOS and Android, leadership requested we update the Fins Car Wash App to support the new setting.

Given AAA was the parent company for Fins, there was mutual interest and benefit in improving driver safety, making the feature a win-win for all parties involved. As UI designer, I  was tasked with leading this initiative while my manager provided feedback and supported me in presenting these designs to the team.  I opted to reference Google’s material design library for guidance, selecting high-contrast colors to optimize legibility.

Fins_Phase_3_Screenshots.png

Phase 4
License-Plate Recognition

Fins implemented new license-plate reading capabilities at car wash locations to track loyalty purchases and wash club member activity while displaying customized menus and promotions for registered users.

For this iteration of the app, our team’s goal was to add a sign-up flow for Fin’s new Loyalty License Plate Auto-Recognition feature. For this release, I was the lead UX designer for the team during this phase and supported the team from the user flow stage through the feature's final release.

Fins_Phase_4_Screens.png

Fins Car Wash

Website Redesign

Bridging the branding gap between the Fins mobile app and other Fins digital properties

Fins_Site_CTA.png

Based in Colorado Springs,

Colorful Colorado, USA

bottom of page