Ship first, iterate later.
--
2016 was a crazy year for Moustache Milk & Cookie Bar. They closed down their original store in January due to an unjust rent spike, but against all odds, came back with more style:
Since her closure, we built a milk & cookie bar in a 1978 Bedford bus and road tripped down to Wellington to open the first Moustache outside of Auckland.
Since her closure, we have hand-built a cute little Moustache in Auckland University Campus.
Since her closure, we will be rehomed into our new little flagship store on K Road in Auckland City.
– Deanna Yang — Moustache II: Reincarnating the store we shut down.
To appropriately capture how badass they came on top, in my head their 2016 can be summarised by the following gif:
In the midst of if all, Deanna mentioned to me there’s still one thing on her never-ending todo list. She wanted to re-launch the Moustache Ecommerce site. The site had been closed behind a “We’ll be opening soon” landing page ever since the closure.
Knowing how much she had on her plate, I thought to myself “cookie-as-a-service” seemed like a rad idea, and volunteered to take care of it. I probably looked like the guy below without knowing what I even signed up for.
Before jumping straight into design, I had a look at the old site to scope out what would be the fastest way for delivering it. There were a few flags that stood out:
- It was not mobile friendly
- It had a lot of outdated information
- It had a lot of unnecessary marketing clutter.
My designer ego wanted to set it on fire and start over. I wanted to spend a good chunk of time on designing and prototyping. I wanted to test out 20 different layouts and grids. I wanted to finesse the line heights of each paragraph. I wanted to adjust the letter spacing for each label. I wanted to test every colour combinations. I wanted to test all the variations one could possibly come up with before picking a best solution. I wanted that money shot for Dribbble. So I fired up Sketch and dived into pushing pixels, until Deanna says:
“I just need a functional site to start selling some products with… it’s probably doable to get it up and running by next week, eh?”
See, I think that’s the mindset of someone that’s here to get shit done.
While I’m still deciding back and forth what font I should be using, she’s already prepping the kitchen & her staff to be in full throttle mode for online orders.
I sort of felt like this for the next 5 seconds.
As much as I loathe skipping design, she’s right, I figured it might just be okay if I skip it this time; The more time I spend on design, the less time I have for research & development, and putting it out in front of customers. I knew I had to ignore the perfectionist in me and just launch an MVP. I need to be more like her, I needed to get shit done.
🛴 Whatever gets the job done
I started with defining the minimum business objectives that Moustache needed:
- All orders falls into two categories: Delivery or Pickup.
- Delivery dates must not include:
- Weekends.
- Today (Same day delivery isn’t possible.)
- Certain public holidays. - Pickup dates must not include:
- Mondays (Store closed)
- Certain public holidays. - Pickup Time is required, so staff can prepare and ensure each order has the freshest batch of cookies:
- 11am — 2pm
- 2pm — 6pm
- 6pm — 9pm - Some products, such as the Giant Cookie, allows customised messages on the cookie & the delivery box.
My initial plan was to see if I could get away with using Jekyll and combine it with Shopify Buy Button, that way Deanna could stay on the Lite Plan ($9/month). Unfortunately I was told by their support agent that building a custom cart page with attributes (required for the aforementioned delivery & pickup dates) is not possible on a Lite plan. The only way to go around it is to create a sale via their Checkout API. Learning how to do that would take too much time, so that was a no go.
Knowing these limits, I bootstrapped the site with Timber, modified some styles so it’s slightly on brand, added some really basic forms at the cart page to capture delivery and pickup dates, then shipped it on the following Monday.
🐛 Bugs, bugs, bugs.
The site was far from perfect. It was functional at best, with lots of room for improvement. The most critical piece of feedback I got from Deanna was that some orders coming through had glitchy attributes:
- Some orders included both pickup & delivery attributes.
- Some orders were clearly for delivery (they paid for shipping costs), but didn’t have delivery dates attached.
- Some orders have neither pickup nor delivery attributes attached.
I couldn’t figure out why these orders kept coming in, until I learnt that HTML5 form validations don’t work on iOS Safari. The lack of proper form validation on the cart page meant that the users could bypass the date inputs and proceed to checkout. These glitchy orders meant that staff had to chase up the customers and confirm the details of each order.
At the time, roughly only 5% of the orders coming through had that problem. The time spent on chasing up customers about their orders were minimal, but I knew that would be disastrous during Christmas season. It would be a costly operation if this bug persists.
In addition to the date inputs, another requirement was the ability to add custom messages on orders. I also made them cart attributes and placed below the delivery methods section.
Although this works, it only works when each order had one product with customisation. It breaks when a customer has two Giant Cookies in the cart and wants different custom message for each one. This resulted in some orders coming through with the following notes:
Can I have ABC on one giant cookie, and 123 on the other?
This isn’t a deal breaker, but it was messy. I hated it. So with a bit more research, I learnt that Shopify already got it covered by their line item attributes! 🙌🏽
Each piece of feedback from the users were like tiny golden nuggets of insights, which eventually turned into the building blocks for the rebuild.
Using Themekit, Timber and their extensive documentation, the rebuild took about 2 weeks. Fortunately I’m already familiar with Liquid templates, so that helped to speed things up.
🛎 Customer facing design notes
Cart Page — The first thing I tackled was the cart page. The interactions here were the root cause of the glitchy orders, so this felt like a critical piece of customer touchpoint to get right. There are two sections to this page:
- Cart summary — For displaying a summary of all products added to cart.
- Delivery method — For the user to choose between delivery and pickup.
For the cart summary, I tried two different ways for displaying the line items.
Cart summary option 1— Table rows
Cart summary option 2 — Cards
Both options have their respective strengths but I went for option 2 because it was more responsive-friendly. Additionally, stacking elements vertically gave room for product customisation information. I struggled with fitting this user-generated content with the table row design.
Enforced Delivery Method — Since all orders fall into either delivery or pickup, I made that the main call to action by default. This enforces the user to choose a delivery method before proceeding to checkout.
Product Customisations — Each product now supports their own customisation. This is a nice service, but it’s something that Moustache isn’t charging extra for, so I made it hidden by default. This made no impact on the amount orders with customisation. To date, almost all Giant Cookie orders includes a customised message attached.
Landing Page — The landing page displays all the products moustache currently sells online. Something to note would be the lack of marketing content. Since Moustache has a massive following on their Facebook & Instagram pages, they use those channels for the majority of their marketing. I made a gamble that most users would have come from those channels, thus keeping the marketing materials on the landing page to an absolute minimum. I could be totally wrong on this, so don’t quote me on this yet.
⚙️ Admin design notes
Keeping maintainability in mind, some handy features were built so changes to the site can be done through Shopify’s theme editor instead of digging into the code base.
Customizable homepage sections — Since the product catalogue is still quite small, I allocated up to three collection sections on the homepage.
Featured Product Banner — Some products deserve more attention for promotional purposes. For those products, I allocated a collection called featured this week and each product in this collection will be featured at the top.
Additionally, I used Metafields Editor to give each product more meta fields to use in the theme. For instance, one of the products we promoted during Christmas had two other attributes attached to it:
Those attributes are optional, and will fall back to a default product’s main image if they’re not added.
Form Validation — A mistake I made previously was not implementing a proper form validation. Some customers were able to submit orders without the required information (e.g Delivery / Pickup dates). As previously mentioned, HTML5 form validations don’t work on iOS Safari, so I built another validation with javascript with the hopes that this catches all the errors.
Another preventative measure I took was to clear all the form input values if the user toggles between Delivery and Pickup tabs. This has eliminated the ambiguous orders with both attributes attached.
📈 Results
The site at its current state still has its quirks, but is performing much better than the first launch; The first launch in early October was good enough for selling and testing the process for fulfilling orders. Over the following weeks leading up to Christmas, incremental improvements were iterated. Those iterations became the building blocks for the rebuild, and it has proven to be an affective one. While sales increased over six fold in December (due to Christmas), the number of buggy orders dropped. On the very rare occasion that it happens, I suspect it’s coming from old IE browsers that I haven’t got around to testing (I should really do something about that).
My biggest take away from this was: Sometimes it’s fine to ship okay-looking things. As designers, makers, tinkerers, we’re constantly evaluating what we can deliver on a given deadline. Sometimes you just have to prioritise business goals before spending time on design polish, because no amount of whimsical portfolio shots on Dribbble will give you the same kind of feedback you get from real users. I have come to appreciate the process of shipping something minimal and learn from real user feedback.
The process of iterating from feedback can be messy & hectic at times, but it has given me a great learning opportunity to solve impactful problems for the business and its customers. It’s been really rewarding working on this project. Thanks Moustache for letting me run with it and being patient with each bug that screwed up their orders. The site will continue to be a work in progress while I moonlight as the Moustache IT guy. If you’re from Auckland, New Zealand, feel free to order yourself a cookie from Moustache Milk & Cookie Store. Give it a spin and let me know what you think. Help me help you get your cookie fix!
🤙🏼 🍪 ❤️
