showcase_

Lobster & Tap

tools used

umbraco, react, typescript, html5, css3, sass, ai, psd, sketch

year

2022

front-end, ui/ux

View project ↓

available for freelance work

social_

twitter / instagram / facebook
Lobster & Tap

Project Overview

At Lobster & Tap, I was responsible for building the interactive kiosk experience used across all their stores in New Zealand.
The goal was to create a seamless, visually rich, and responsive interface that allowed customers to easily order food and pay directly from the kiosk.

What I Did

  • Built the HTML and CSS layout using vh-based scaling to dynamically adjust to kiosks of various screen sizes and resolutions.
  • Developed a fully responsive, touchscreen-friendly UI that maintained perfect proportions on every device.
  • Integrated the payment flow between the frontend and backend, ensuring smooth and secure transactions.
  • Implemented the user journey, from choosing menu items (lobster sandwiches, lobster, fries, drinks, etc.) to checkout.
  • Collaborated with backend developers and designers to translate static designs (PSD, Sketch, AI) into a polished production-ready interface.
  • Delivered an intuitive experience that enhanced order speed, accuracy, and customer satisfaction in all Lobster & Tap locations.

Outcome

The result was a modern self-service kiosk that streamlined in-store operations and gave customers an enjoyable, effortless ordering experience.
Its adaptive design meant that the same build could be deployed across multiple kiosk models without rework.


Final Product

Final product

Final product


Contact | Lobster & Tap Website

work

Case study incoming

Cimerat project image, click to view more details.

Cimerat

react native, typescript, mongo, tailwind, express

Cimerat is a flatmate finder app, built with React Native and TypeScript.

Case study incoming

Flatmately project image, click to view more details.

Flatmately

js, html, tailwind, figma

Flatmately is a flatmate finder app, built for New Zealand and Australian market. I was tasked to design and develop their website, and also helped with branding and marketing.

Case study incoming

NxtStep project image, click to view more details.

NxtStep

js, html, bootstrap, sketch, ai, psd

NxtStep is a job board for students and graduates. I was tasked to design and develop their website, and also helped with branding and marketing.

Case study incoming

Yoga With Kassandra project image, click to view more details.

Yoga With Kassandra

js, html, sass, wordpress, ai, psd

Yoga With Kassandra is a yoga teacher and content creator. I was tasked to design and develop her website and courses platform while I was working at VidApp.

Case study incoming

Tourism New Zealand project image, click to view more details.

Tourism New Zealand

js, html5, css3, sass, bootstrap, sketch

Tourism New Zealand is a website I've built to showcase my skills utilising JavaScript, HTML5, CSS3, SASS, Bootstrap, Sketch. I was tasked to design and develop their website.

Case study incoming

Renkon project image, click to view more details.

Renkon

js, html5, css3, sass, bootstrap, handlebars, sketch

Renkon is a Japanese restaurant, I've pitched the new website and design for the ordering app. I used JavaScript, HTML5, CSS3, SASS, Handlebars and Bootstrap to build the website.

Case study incoming

DotaPopQuiz project image, click to view more details.

DotaPopQuiz

js, html5, css3, sass, php, bootstrap, sketch

DotaPopQuiz is a quiz app built with JavaScript, HTML5, SASS, PHP. It was built as a fun project to make a game to increase brand awareness and to learn more about JavaScript and PHP.

Case study incoming

VidApp project image, click to view more details.

VidApp

wordpress, js, html, sass, ai, psd

VidApp is a video streaming platform. I was tasked to design and develop their website and the platform where users would publish their customised app for iOS and Android.