Janarayson

eziPOD: a UI that runs on a laundry locker

Projects5 min read

I did the UI/UX, the front end and the website for eziPOD's laundry lockers, and the screens on the locker itself were built by a team in Thailand from what I sent over, which doesn't always come back looking the same.

eziPOD is laundry lockers. You drop your dirty clothes into a locker at your condo or office, we take them away, and two working days later they’re back in a locker for you to collect, any time of day. The lockers are Box24’s, from Bangkok, where they run the same thing, and ours went in around KL in November. It’s a Hermiso venture, and Intrack is a Hermiso investee company, so for me the two sit side by side… UI/UX and front end for both.

We already had eziPay, our e-wallet for the eziwash laundromat machines, so eziPOD went into the same app instead of getting one of its own. You tap start, scan the code on the locker, and the app knows which locker you’re standing at. Drop off gives you a QR code that opens a door, and when your clothes are ready you get a notification and a code for the door they’re in. I drew the flow in July, with one of Box24’s Bangkok lockers standing in for ours.

The eziPOD app flow on a grey board: the eziPay start screen with a RM53 balance, the locker screen with a QR code, then the Your Order screens with Drop Off and Pick Up buttons, a pick-up list of orders ready at the locker, and the QR code to scan at the locker terminal
The app flow, July 2017.

The brand guide is one page. Yellow and orange, the ezi speech bubble we share with eziPay, Cocogoose for the big headings, Roboto for the rest, and icons for drop off, pick up, notify and payment.

The eziPod brand guide, draft version 1.0: the logo on yellow, on black and on white, the colours #FAC527 primary, #FD8A10 accent, #525252 text, #F6F6F6 background and #14162F dark background, the fonts Cocogoose, Shanti and Roboto, and the pick up, notify, drop off and payment icons
The brand guide, November 2017.

The tricky part is the locker itself. It has a tall touch screen, 1080 by 1920, and the software on it is Box24’s, built by their team in Thailand. So I design the screens here… which door just opened, whether you’re dropping dirty clothes off after you pick up, what to do when a door doesn’t open… and send them over, and what shows up on the locker doesn’t always look like what I sent.

The locker main screen: the eziPOD logo on yellow, a blank QR code square, Scan the code above with your mobile device to start using eziPod, and a footer saying the eziPod locker service uses the eziPay mobile appLocker 2 is opened: a diagram of the locker doors with door 2 in orange, three numbered steps for collecting and dropping off, a Done button and a ten-minute countdownLocker Error: a red shield with an exclamation mark and three steps, go back to the main menu and repeat, take your items out of any locker that opened by mistake and close it, and contact support if it persists, with a Done button and a ten-minute countdownWill you drop off your dirty clothes after picking up your items? Two choices with locker pictograms, Yes, I will pick up the items and drop off dirty clothes immediately, and No, I will only pick up items and drop off dirty clothes later, and a Confirm button
The locker's screens, October 2017.

The idle screen is the one part of the locker I can build myself. When nobody is using it, the locker shows a web page… a QR code to get the app, the price guide, how to use it, how to top up eziPay, and a video on loop. It’s plain HTML and Sass at the same fixed size, on the Grunt setup I’ve used for websites since Nerd Attack, with buttons big enough for a thumb. I did it over Christmas.

The idle screen: a QR code, Scan the code to use eziPod, three orange buttons for Price Guide, How to use and How to top-up, and a How to Drop Off video frame on yellowThe Services page: Laundry & Iron, Dry Cleaning, Iron Only and Wash & LoadThe Clothes price guide: a table of dry cleaning, laundry and press, and iron only prices per piece, from RM2.00 for ironing a top to RM25 for dry cleaning a winter jacket, with a two working day turnaroundHow to top-up: a video frame of the eziPay balance history screen with a Select Top Up button
The idle screen, and its pages.

And the website, ezipod.my, which I did back in July: how it works, the services, the prices and where the lockers are.

The top of ezipod.my: the logo and menu over a yellow photo of a woman at a locker holding a bag, with the headline Convenient and hassle-free laundry lockers to tackle your dry cleaning and laundry needs
ezipod.my.

More lockers are going in.