Tiff's Treats, a warm cookie delivery company headquartered in Austin, Texas, was at the beginning of a rapid growth spurt with new locations popping up across the country. Fresh off our redesign of their website (you can read more about that case study here), Tiff's Treats asked us to head the redesign of their online ordering experience.
Normally, when you consider an e-commerce site, it's a typical; "see a product, select your quantity, add it to cart" kind of approach. However, the business model of Tiff's Treats has logistical considerations that make this traditional approach a clunky experience. Before you can place an order, your location matters. Tiffs uses their brick and mortar stores as a home base (or bake as the case may be). You can pop in a store yourself for a cookie, but most importantly, these stores are hubs for cooks to bake and drivers to deliver their cookies fresh and warm straight out of the oven.
A zip code is important to know up front to determine if they deliver to the requested area. Many times customers ask them to deliver boxes of cookies to multiple addresses. Because of these logistical considerations, Tiff's traditionally kept this online ordering process separate from the main website. That way users could view their menu and other content on the main site without being required to enter any location information. Then, onve they're ready to order, they're more likely to provide a zip code up front (or codes as the case may be) and certify that a delivery is doable.
OUR APPROACH: CONSIDER THE INTERNAL REQUIREMENTS
Merrygood kept this separate online ordering process, and re-mapped the system to be visually similar to the new site design (the previous version was a complete disconnect). When you click "online ordering" on the main site, you still feel contained within the original experience.
We created a step by step indicator at the top of the page to set expectations with users on where they are in the process and what information we were going to need from them.
To highlight upsells, we created an overlay that greets the user on the product page with specials. We also organized the menu in category form, so it's easy for the user to scan the full page and dive deeper. Before, add ons like milks and ice cream were getting lost in the process.
CONSIDER BROWSING BEHAVIOR
Because of the low-cost and high volume of flavors in cookies, milks, ice cream, etc., the product offerings can get overwhelming. To help with this and to make items easier to find, we created a category-based hierarchy both in the content of the page and in the cart. The user can expand and collapse high level categories and focus on one categorized bucket of information. This kept the page and cart easy to scan and the page height reasonable.
For the selection of treats, we added images to what used to be a text-driven long format form. This way the customer is reminded of the visual end result - after all everyone tends to shop with their eyes. On the main site, you can dive into each individual flavor - but when an order is ready to be placed, it's really about scanning down a list of delicious images and quickly adding your favorites to your cart.
STREAMLINE THE PRODUCT SELECTION PROCESS
We were also able to make things like "special instructions" associated to an individual item. Before it was a general box that referred to the entire order, and the customer wasn't always clear as to what product their special instructions were referring to. In the end this was a time saver for employees who previously would have to call the customer for clarification.
CREATE SEAMLESS TOUCH POINTS
The order confirmation organizes information in a scalable way, and we also designed coordinating confirmation emails that are also responsive and easy to read on a mobile device.