Tubular Kiosk Design

See related projects:

• Find more out about - Tubular Systems Ltd.
• Tubular Donation UI
• Smart Donation Hub

Cardboard Prototype

Our design and prototyping journey began with a humble cardboard letterbox sourced from Hobbycraft.

The machine consisted of three main sections: the lightbox, the countertop and the stand. Each part was securely screwed together.

The photograph above shows the cardboard “countertop” module, which was constructed from cardboard. This cardboard cutout was purely cosmetic and did not contain any functional hardware. To demonstrate the concept, we installed an Android touchscreen that played Three UK’s advertisements. We also included a slot for the Nayax card reader, with a Three SIM card protruding from the bottom. I even spray-painted the cardboard a silver, metallic colour.

The photograph above shows a full-size 2D representation of the Tubular Kiosk, constructed from A4 sheets of paper. We created this mock-up to gauge the width and height, helping us determine the best placement for the touchscreen, card reader, and dispenser slot and to ensure accessibility for a range of users.

3D Models

I played a key role in creating 3D mock-ups of the Tubular kiosks to support the engineering and manufacturing processes for the final product. I produced the models in Autodesk Maya and used them to create bespoke renders for our clients, tailored to their branding.

3D Designs of the SIM dispenser system.

3D Designs of the charity systems.

I created leaflets, posters and anything visual that was needed!

Tubular SIM Dispenser - Touchscreen UI Screens

The SIM card dispenser screen used static JPG files.

I created all the JPG screens using Photoshop and Adobe XD. As this was a new concept, I aimed to keep the screens highly simple. I also paid close attention to designing intuitive icons, ensuring that users could easily understand how to operate the card reader positioned beneath the touchscreen.

The user journey:

1. The screen remains in idle mode, displaying various advertisements to encourage the purchase of a SIM card.
2. The user touches "Touch to Start" to initiate the process.
3. The user selects the desired language.
4. A screen appears, providing information about the SIM card and instructions on activating the card reader.
5. After pressing the green "Start" button on the card reader, another screen displays instructions on how to tap, insert, or swipe the payment card.
6. Upon successful payment, the customer receives a "Tubular" thank you message.

Tubular Donation Kiosk - Touchscreen UI Screens

The Tubular Donation Kiosk V1 uses static JPG images, but includes touch inputs on the screen to increase or decrease the donation amount. The machine operator can change the images and donation values to anything they wish using a USB memory stick.

I later redesigned this flow as a web-based user interface using HTML, CSS, and JavaScript, enabling animations and a significantly improved user experience. See Tubular Donation UI.

The user journey:

1. The screen remains in idle mode, with the donation values flickering.
2. When the screen is touched, users can increase or decrease the donation amount.
3. A "Learn more" button displays further information about the charity or cause to which they are donating.
4. After pressing the green "Start" button on the card reader, another screen appears, providing instructions on how to tap, insert, or swipe the payment card.
5. Following a successful payment, the customer receives a thank you message.
6. The user could also enter their Gift Aid information at the end, if the machine had that setting enabled.

Light Box

The lightbox is another module that screws onto the top of the countertop unit, serving as the primary signage and focal point to make the Tubular units stand out.

The lightbox is constructed from thin Perspex plastic with a vinyl-cut wrap applied on top. Opting for vinyl proved superior in contrast compared to print. Keeping the signage design simple resulted in a clearer understanding of the machine’s function.

To create each lightbox, we used a vinyl cutter and assembled them by hand. I designed each lightbox using Photoshop.

Lollipop Sign

There were often situations where the Tubular machines required a height booster or additional signage in high-footfall areas, such as airports or large retail shops.

Wraps and branding

Wraps and branding could completely transform the appearance of the machine. I would create designs for clients or provide them with an Illustrator template file so they could produce their own.

The photograph above showcases a Tubular Donation Kiosk featuring purple branding. We collaborated with PurplePot, a supplier of handheld donation equipment, and named the project "Purple Tube".

We aimed to raise funds for "In Your Corner", a charity dedicated to supporting children and adults at risk of being referred to mental health services. I designed all aspects of the branding, including the lightbox, wraps, touchscreen interface, and poster designs.

The "Purple Tube" was situated next to an arcade punch bag machine. We took turns keeping track of the scores and people’s donations using the machine. There was a chance to win a bottle of champagne and Jabra headphones.

Tubular Donation Kiosk - UI and Hardware update

In 2019, I developed a new user interface for the system and sourced improved hardware, enabling us to condense and eliminate redundant electronics. I introduced a Chromium-based web frontend, which allowed for the incorporation of engaging animations and effects, making the touchscreen interface more intuitive.

You can find out more about the new Tubular Donation UI.

Junior Fundraiser

The Junior Fundraiser was a clever design in which the front door of the Tubular System could be removed and fitted onto the metal frame of the Junior Fundraiser, thanks to the new hardware updates I was able to source.

Exhibition Shows

We also took part in several expo shows. The last one we attended was the CRE (Christian Resources Exhibition) in 2019. This was the first time I was able to showcase the new touchscreen UI I had developed. It was great to receive feedback, and we attracted a lot of interest. One of our main target areas was "Places of Worship".

Tubular 2019 Design Update

Just before the Covid-19 pandemic, we were working closely with a large vending machine organisation that was able to resource the manufacturing of a new, improved range of systems.

There were three new designs in the photograph above:

1. Tubular Donation Kiosk – Featuring an enhanced freestanding design with sleeker curves. The touchscreen was also enlarged for improved usability.
2. Tabletop Touch – A compact and portable contactless donation unit, ideal for charity events or for securing to a table. It was designed to include a battery.
3. Tubular Donation Wall Mount – Allowed the top half of the kiosk to be securely mounted on walls.

These systems were intended to work with an online front-end web dashboard. You can find out more about the Smart Donation Hub.

Sadly, the pandemic made the business unviable, as we simply could not compete with other providers. Charities did not have the extra funds to invest, due to a lack of fundraising events and a shift towards online donations. Nevertheless, it was certainly an experience!

The new Freestanding Donation Kiosk was on display at the United Nations COP26 Ice Hub – Innovation for the Circular Economy. These models also featured hand sanitiser dispensers.