The First Refresh

1. Automated Booking System
   The first and most critical requirement was an automated booking system that could assign timeslots to the right beautician based on proximity, scheduling gaps, and other factors. This was essential for reducing manual work—one of the main success metrics set at the start.
   
2. Subscription Bookings & Recurring Appointments
   The beauty industry often thrives on repeat clientele. Using a third-party Shopify app called Loop, we integrated subscription capabilities so clients could schedule recurring beauty services. This made the process smoother for both regular customers and the business owner.
   
3. Surge Pricing & Commission Payments
   With a fleet of beauticians and freelancers across multiple locations, The First Refresh wanted a system that could auto-calculate surge pricing based on proximity and beautician availability. Additionally, the system needed to handle commission payments to staff, factoring in rates, location, and timeslot complexities.
   
4. Custom Timeslot & Roster Management
   Custom timeslot generation, staff roster management, and the ability to track availability in real-time were must-haves. The business needed a single source of truth for operational oversight instead of juggling scattered spreadsheets or manual processes.
   
5. Scalability & Long-Term Viability
   Given that The First Refresh was already operational, new features had to be rolled out without disrupting day-to-day business. This required a robust architecture that could grow alongside the company’s needs.

This project spanned roughly 1.2 years, reflecting the complexity of creating a custom SaaS booking app layered over a live Shopify store. From the start, we embraced the principle of “Measure twice, cut once,” which meant prototyping and thorough planning before any major code was written or deployed.

Wireframing & Brand Alignment

In collaboration with The First Refresh’s existing brand guidelines, we developed initial wireframes and mockups. This stage served as a crucial touchpoint for client feedback. The brand has a specific “vibe” and aesthetic that we integrated into the design, ensuring the user interface aligned seamlessly with their established style.

Tech Stack

• Shopify for core ecommerce functionality and product listing.
• NestJS for the backend, enabling us to build a structured, scalable server-side application.
• Next.js for both admin and beautician frontends, providing fast, interactive, and SEO-friendly user experiences.
• Loop for managing subscription services within Shopify.
• Custom Code for all booking-related features, including timeslot generation, surge pricing, and staff commission calculations.
  

The Iterative Prototyping Process

We believe that designing twice—or repeatedly validating our assumptions—is crucial, especially for complex operational workflows. Before finalizing each feature (such as subscription booking, timeslot management, or surge pricing), we built rough prototypes. These prototypes were vetted by The First Refresh’s internal team, ensuring our solution matched the real-world flow of their business before any large-scale coding.

Rolling Out Updates in a Live Environment

Challenge: With The First Refresh already serving customers, rolling out large-scale updates risked interrupting day-to-day bookings.

Solution: We adopted a phased deployment strategy. New features were deployed in stages, with heavy emphasis on testing in a sandbox environment first. Once stable, we integrated them into the live site, minimizing downtime and operational disruptions.

Handling Complex Booking Logic

Challenge: The system had to account for multiple variables—like beautician proximity, availability, surge pricing triggers, and staff commission rates.

Solution: Our NestJS backend included an advanced logic layer to handle real-time data updates. We set up microservices to calculate beautician availability and costs instantaneously, ensuring the right beautician was assigned to the right timeslot.

Ensuring a User-Friendly Admin Experience

Challenge: Administrators needed a dashboard that was intuitive, comprehensive, and far simpler than juggling multiple spreadsheets or WhatsApp threads.

Solution: By leveraging Next.js, we built an admin portal that consolidated staff rosters, appointment scheduling, subscription management, and payment reporting. Careful UX/UI design ensured that everything from creating new staff accounts to processing commissions was straightforward and required minimal training.

Results & Impact

The custom solution we delivered yielded several notable results:

With Shopify as the foundation and custom development solutions in NestJS and Next.js, The First Refresh project exemplifies how a beauty industry startup with specific needs can scale efficiently and effectively. The result was a tailored platform that grew revenue potential, saved admin time, and significantly improved the overall user experience.

We believe that every business has unique operational hurdles—whether it’s automating back-end processes, creating subscription models, or improving day-to-day administrative workflows. If you’re an SME looking for a partner to shape your ecommerce vision, from UX/UI design to web application development and beyond, we’re here to help.

Key Takeaway

Strategic planning is crucial for success in any ecommerce website rebuild or custom SaaS booking app implementation—particularly one as feature-rich as The First Refresh’s. Taking the time to prototype, iterate, and “measure twice, cut once” allowed us to roll out robust features without compromising an already operational business.