Improving Admin workflows with The First Refresh

At Otterdev, our mission is straightforward: deliver honest work and create performant web solutions that offer exceptional user experiences—both for end-users and the businesses that manage them. This commitment applies not just to front-end usability but also to the behind-the-scenes workflows that keep a business running smoothly. Through our years of experience with website rebuilds and Shopify maintenance for ecommerce ventures, we’ve encountered businesses at many different stages. Our strength lies in understanding each unique operation and crafting solutions that align with specific business goals.

In this case study, we spotlight our engagement with The First Refresh, a beauty industry startup revolutionizing at-home beauty services. Our work for them exemplifies our commitment to fully customized solutions—in this instance, a custom SaaS booking app integrated into their Shopify store, complete with features like subscription bookings, timeslot management, and surge pricing.

The First Refresh is a beauty services startup that connects clients with professional beauticians who come directly to the client’s home. When they approached us, they were already on Shopify, but their existing setup couldn’t accommodate the range of custom booking and management features they needed. Much of their scheduling was handled manually—often through phone calls, WhatsApp, and spreadsheets—which became inefficient and prone to errors as their clientele grew.

thefirstrefresh.com

Why a Shopify-Based Custom Dashboard?

Our agency provides four core offerings—UX/UI Design Services, ecommerce store setup and maintenance, web application development, and landing page development. For The First Refresh, it made sense to leverage Shopify for its robust ecommerce capabilities while building a custom dashboard on top of it to handle unique operational needs. By combining custom code with an existing ecommerce infrastructure, we aimed to rebuild their site in a way that not only improved the user experience (for both administrators and end-users) but also scaled seamlessly with their expanding business.

Key Objectives & Requirements

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

Design & Development Approach

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.

Challenges & Solutions

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:

The team at Otterdev has been absolutely incredible - Overall, the delivery of the final product was managed smoothly and efficiently

Rachael Kam

Founder, The First Refresh

They have an excellent team that can take a brief and give you website design strategy that truly reflects your brand. They’re able to produce code that performs extremely well, even with complicated designs.

Nicolas Chan

Chief Strategist & Head of Digital, APAC Hoffman Agency

Having spent two decades in the digital advertising industry, I’ve seen a wide range of web development projects, but the work done by Otterdev on our e-commerce website stands out distinctly. What impressed me the most was not just their speed but their thoroughness and thoughtfulness throughout the development process.

Pat Law

Founder, GOODSTUPH

Conclusion

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.

Like What You See?

Become a client.

Case Study

The First Refresh