Danniel Hansel.

(03) — Blogs — Essay

Delivering a lean digital product during the pandemic

How I shipped online ordering for a Texas seafood restaurant during pandemic dine-in limits: a lean MVP, built solo with Gatsby, GloriaFood, Stripe and AWS.

Scroll ↓Fullstack Software Engineer — Dallas, TX
“Success is based on value delivered by the software.”
— Martin Fowler, Software Development Author and Thoughtworks Technologist
The Crab Station & Oyster Bar homepage: the restaurant's name over a close-up of a seafood boil, with a red Order Now button

Great product development demands a deep understanding of users' needs; that's why super early customer feedback is fundamental to my approach. The sooner the first iteration is in a customer's hands, the sooner we can start using their feedback to deliver the thing they actually want.

My first real project with Marianne - one of the owners of Crab Station & Oyster Bar in Odessa, Texas - perfectly illustrates the power of this lean-agile approach.

I put Marianne in charge of her own digital product development, ensuring she got what she needed to support her customers and built an operational MVP (minimum viable product) using a custom solution that worked for the business.

I still remember that moment when the restaurant staff heard the 'ding' sound made by the POS system. The first customer order appeared in GloriaFood’s app on the restaurant’s iPad. About 20 minutes later, the customer came to collect the food.

The website I had been building had become a practical way for Crab Station & Oyster Bar to serve a customer during pandemic dine-in restrictions.

The brief: creating a channel for customers to continue ordering

Marianne was urgently looking for another channel during the pandemic to make food ordering possible while eating inside was restricted due to laws and regulations.

With the pandemic giving out new rules on not allowing customers to dine in at many restaurants, Marianne needed a solution to enable her customers to order seafood from her new restaurant online.

Disheartened by the high transaction fees of using some of the big-name vendors (think blue chips), Marianne sought a product that would enable her business to continue to run online without cutting her margins.

The process opens up the brainstorming process to a wide range of vendors that normally would charge the high percentage fees per transactions.

Exploring the available technologies, I found that GloriaFood Online Order and POS System provide the most optimal solution while keeping the fees low, as it focuses mainly on specific layers of the business needs. This approach serves as a unique and powerful form of online-ordering and collaboration.

Marianne sought an online ordering tool that she could easily update with a series of seafood menu items which could then be continuously updated during market-price changes. For example, a lobster could cost $60 on a Sunday and $50 on the day after; she could then update the prices accordingly which gets reflected on the restaurant's website.

Before I could make useful technical decisions as the solo developer, I had to learn about the business, research the market, compare services and costs, and work through how the user experience should look and feel.

That meant wearing more hats than developer. I was learning customer needs, doing vendor research, designing the interface, connecting services, figuring out how to run the finished site and helping to onboard the staff on the new system before shipping to production.

The planning: making the website the doorway

I chose GatsbyJS as the React framework to build the static site generated pages with Tailwind CSS for the elegant UI/UX design.

GloriaFood provided an online ordering experience I could embed. I added its widget through a JavaScript <script> tag so the website could open GloriaFood’s menu when a customer clicked the ordering button.

The website became the doorway into online ordering. Reusing that part let me focus on the restaurant’s site and the connections needed to make the whole experience work. Cost was part of choosing the tools.

I compared third-party services to find a setup the owners could agree on, while learning what I would need to build and maintain myself.

The build: connecting the pieces together

A minimum-viable-product was rapidly designed, ensuring a visitor could browse the website, open the online ordering menu in a pop-up window, add menu items into the cart, and place an online order. Once the order lands on the restaurant's system and a staff member confirms it, the visitor gets redirected to a confirmation page displaying waiting time and order details.

With the MVP scope agreed within a few days, I prepared the upcoming iterations to be able to move swiftly and decisively, as I was the solo software engineer/tester, product designer, delivery lead, and customer success person.

With the laws and regulations during the pandemic preventing her customers from dining in for a period of time, I had to act quickly and deliberately. The speed element was what allowed me to absorb the brief, execute market research, synthesize complex ideas to begin building the product and deliver a customer-focused product.

For payments, I connected Stripe through GloriaFood’s payment integration and used Stripe’s payment API for checkout, which kept custom payment processing out of scope. That reduced the payment code and direct card handling I had to take on. I still needed to care about the security of the website and the third-party scripts it loaded.

To manage the website’s content, I used Contentful CMS. This let me make changes to the menu contents without touching the codebase and didn't require additional testing and deployments to AWS.

There were two menus to maintain. I updated the menu shown on the website through Contentful, while Marianne updated the menu customers ordered from in GloriaFood. Those updates were separate and manual. Keeping prices and items consistent across both became part of maintaining the product.

The delivery: a working product in customer hands

For hosting, I uploaded the generated site files in dedicated Amazon S3 buckets and used CloudFront to deliver them to visitors. Route 53 handled DNS, connecting the domain name to the website.

I also had to learn the operational side. I used CloudWatch for monitoring and alerts, AWS Budgets for spending alerts, and IAM for access roles and policies.

In February 2021, the developed product was in the hands of Marianne; and her staff members were onboarded seamlessly to start fulfilling online orders from customers. I continued maintaining it on AWS through February 2022, when the owners chose other vendors to meet their food delivery capability needs.

"I love the website! The design is beautiful and elegant, with a very natural flow and simple UX. Nobody will need an instruction manual to use it," Marianne's husband said. "This usability means my clients will be able to place an order without having to go inside the restaurant nor having to wait outside, so it has huge upside for the business, especially during this pandemic," Marianne followed.

Having delivered the core requirements, Marianne can now focus on the restaurant and continue to serve her customers.

“Danniel is quick to iterate on feedback. He has a knack for understanding the genre you expect in design.” Maggie said, Marianne and Wayne’s daughter and a co-owner.

For me, product delivery means building the product 0 -> 1 and owning what I shipped end-to-end.

The retrospective: what I learned

To understand SEO and user traffic, I used Google Analytics 4. The Search Console helped me monitor Google Search performance, PageSpeed Insights helped me optimize page performance, and Tag Manager managed the tracking tags.

Over a few weeks, the site reached top 10 ranking on Google, then the top three list shortly after. Those search rankings are my recollection from that time. They do not establish what every searcher saw or which change caused the improvement.

Business: The most useful result was architecting a practical solution to serve customers during dine-in restrictions, while keeping capacity and resources allocated as planned. I learned to judge the tools by the job and to consider every dimension (e.g., the tech stack, cloud agnostic, payment options, delivery costs, etc.)

Relationships: The two menus made responsibilities visible: I maintained the Contentful version, and Marianne maintained GloriaFood’s. I would make those shared tasks and tradeoffs clear early, because a feature can create ongoing work for both the builder and the owner.

Product development: Decoupling the systems allowed me to focus on building the core product and connecting the experience. This means testing the journey through to the restaurant, onboarding the staff members to the flow, maintaining the site after shipping, and using what I observed to assess the result.

That is what made this project a game changer for me and the client. I helped create a practical ordering channel during the pandemic in 2020, and I saw a real customer use it. 🤌

I went into the project to build a website. I came away with an experience and better understanding of how much useful engineering depends on understanding the core business, defining the scope clearly, and taking ownership in what I build.


Looking to build a digital product at practical speeds?

Regardless of how big, complex or unique your request is, or how challenging the problem, I know how to make serious headway.

Let's connect and you'll be surprised at what we can achieve together in a matter of weeks.

Why not drop me a line for an informal chat, and we'll begin breaking your problems down into bite-size pieces?

Next page — (03)Blogs