Fins Car Wash
Loyalty Mobile Application
March 2019 - October 2021

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:
Best Android & iOS App Designs of 2024
by Design Rush
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.

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.

Shelby O'Connor
Casual Fins Customer

Jacob Nguyen
Fins Loyalty Member

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.

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.

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.

Phase 1
App Store Collateral

​
​
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.
​

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.


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.

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.
