Zócalo - How We Built a Better Loyalty System

The Business Case

Last year, we began talking with a major payment processing company. They had a number of ideas about how to bring their platform to the cutting edge. One important way included working with third-party developers to create a product ecosystem around their payment process.

Whole Punk was asked a simple question - what would our ideal loyalty system look like if we could tie it into the their platform? How could we create the best loyalty experience for small merchants?

Armed with that question, we went to work.

A short note:

We're showing you an internal project because it's our policy to avoid showing other projects in public. Only one company gets credit for an app, and that's the client. If you're interested in seeing some projects that we've done for other companies, contact us for a demo.

Investigating the Domain

We started by asking some questions. Why do merchants set up loyalty programs? How are loyalty programs being done right now? What's frustrating about loyalty today? And, at it's very core, what is a loyalty program?

Here's what we found: though large chains may use their loyalty programs as a way to track customer behaviour, small merchants simply want to incentivize customers to become regular customers. Smaller merchants tended to go simple - they'd have printed loyalty cards that they would initial or stamp when a customer made the correct purchase. That meant that cards could get lost, or people would forget to stamp them, or customers would get in the habit of answering 'no' when asked if they had a loyalty card.

At the core, a loyalty program is just keeping track of when a customer buys an item repeatably, and then letting them know when they were eligible for a discounted or free item.

So we asked ourselves - could we design a better way to keep track?

We started at the whiteboard.

Creating the Process

We spent a day throwing around ideas. Other loyalty apps relied on scanning a code with each purchase or rewarding the customer for simply entering the shop. Neither of these felt right - we wanted to make it effortless for the customer to participate, while still allowing the merchant to give out rewards for specific purchases.

Of course, because we're working with a payment processor, we had options that other loyalty apps didn't have. We realized that between the POS and the payment terminal, we had enough information to link purchased items to the card that purchased them. By putting together a small layer to register that information, we could gather loyalty data whenever a customer made a purchase with a debit or credit card.

By removing the loyalty card from the system, we could eliminate lost cards and unstamped purchases. And since the customer would automatically collect points, they would start getting points at their first purchase, incentivizing them to participate in the loyalty program.

Designing the App

Our process was elegant, but we still needed an app for users to view and claim their rewards. Since this was a skunkworks project, it was important that we have a tangible deliverable to sell the payment processor on our loyalty system. We took our process as a guide and began to design an app that would compliment it.

In short order, we had a v1 design that would help communicate how our loyalty process worked.

Next we created a simple prototype that would demonstrate the app. Though a full app takes time to build, it may take just a few days to put together a prototype that demonstrates the interactions within the app. Being able to touch an interactive prototype made it a lot easier to show off our loyalty process and get feedback on it.

Android + iOS

For Zócalo to succeed, it needed to be available on both major platforms. Once we used our prototype to get all the stakeholders on board, we developed full versions of the app for Android and iOS.

Both platforms bring different challenges. With Android, it can be difficult to achieve a UI that looks great, works well, and performs in accordance with the platform conventions. We're thrilled to have pulled that off with Zócalo for Android. iOS is more opinionated, so system restrictions can sometimes cause more work. By keeping those restrictions in mind during the design phase, we can minimize their impact.

Changes Over Time

Of course, no first design is perfect. We took our v1.0 and put it in front of users, merchants, and channel partners. We submitted it for App Store review. We gathered feedback, weighed it through the lens of our business requirements, and made changes.

We decided that having a manual login to associate your card with the app was too annoying, so we turned it into a simple code scanner. Now when you go to use Zócalo the first time, you just scan a receipt and you're ready to go. We also removed a couple of sections, since they were making the app more complicated to use, but weren't adding any value for the customer.


No app is totally bug free. After years of developing apps, we recognize the importance of checking your app over thoroughly before releasing it to reduce the risk of major bugs. We built PreFlight to help us with that task.

PreFlight, with a little help from us, goes through every state of the app and takes screenshots on every size of iOS device. It also notes down any crashes it finds along the way. PreFlight is only available from Whole Punk, and helps to catch errors before they impact your users.

We ran Zócalo for iOS through PreFlight and caught several layout errors that had made it past us, our testers, and Apple's review team. In particular, the new iPhone 6 and 6+ phones with their wider screens caused us to make some fixes.

Launch 2015

It takes a lot to make an app. Design, development, and testing all played critical roles in getting Zócalo ready for market. In the end, we couldn't be happier.

Zócalo will be launching to select merchants in early 2015.