Customer
Customers can create profiles, find local shops, get personal QR codes, and purchase products and services in-advance at discounted prices.
LoyalRate
A loyalty app that offers users discounts by paying up front for regular local purchases
About the project
LoyalRate is a platform where users can buy products and services up front to get discounts on their regular local purchases. Our client, Mai, identified the problem to solve based on her own experience and while talking to local business owners. She decided to create a marketplace to maximize rewards for customer loyalty and support local businesses who care about their loyal customers.
Solution
We helped LoyalRate create a website that allows customers to buy everyday products and services in bulk (and in advance) from local providers in exchange for a discount.
User roles
Shop employee
Shop owners can create shops, post deals, and check financial data.
Results
Duration:
5 months
Team:
Backend - 1 Frontend - 1 PM - 1 BA - 1 Design - 1 QA - 1
Design
For LoyalRate, we created the design concept, UI kit, and UI/UX. We took inspiration from our client’s brand book when it came to colors, the logo, fonts, and the app’s general identity. We did our best to improve the existing design while keeping a clean, light, refreshing, and energetic vibe thanks to colorful shapes and graphics.
We chose white, midnight blue, and violet blue as the main colors for the LoyalRate website, which created a bold and daring look.
Web app
We developed the LoyalRate web app using Python/Django. To maintain high code quality, we used the pylint, pyflakes, and black libraries.
To be able to charge shops a service fee and charge customers for purchases, we integrated the Stripe payment system and the Stripe Connect SDK.
Another interesting integration was WiserNotify, which is a notification tool that allows websites to increase their conversion rates using a comprehensive social proof and FOMO marketing strategy. Because we integrated LoyalRate with WiserNotify, users can see newly added shops in real time while browsing the LoyalRate website.
We developed the front end using React, which is one of the most powerful and popular JavaScript frameworks. The Next.js framework, which runs on top of React, is used to make the site SEO-friendly and to optimize the website’s speed.
To make the app’s state management easier and to make the architecture maintainable, we used Redux. This JavaScript library organizes the data flow in the app and provides a transparent and flexible method for its debugging.
Also, the individually designed page rendering architecture allows for the use of incremental static regeneration for most public pages. With incremental static regeneration, we can retain all the benefits of static pregenerated pages while developing a dynamic single page application (SPA). With react-query, users won’t see a lot of content loaders because server responses are cached and can be revalidated on demand.
Integration with Google Maps and Google Places provides a best-in-class map experience.
We also implemented a QR code generator and chat widget.
Implemented features
Users can type their postcode and see local deals. From coffee shops to dry cleaners, LoyalRate has many places that users know and love.
Users can get discounts by paying up front for things they already regularly buy. For example, they can get a 20% discount if they pay for 10 coffees right away. Or they can buy £100 in dry cleaning credit for £80.
Users can bring their unique QR code to stores and scan them to redeem them for goods and services. This allows users to make regular purchases with great discounts.
Technology stack
