As a part of our company's Q1 strategy of building the best customer experience, we decided to tackle one of the most important touch points in the customer journey: the e-commerce experience, particularly the checkout and group ordering experience.
Here are some issues we identified:
We hypothesized that this is due to a lack of visibility on service levels (delivery fees and order surcharges) as this information is only visible to customers when they go to checkout:
"According to Visual Website Optimizer’s eCommerce 2014 study, '28% of shoppers will abandon their shopping cart if presented with unexpected shipping costs', while 23% will abandon their cart if they have to create a new user account." – Trade Gecko↩︎
Speaking to our customers and closely monitoring their feedback surfaces that delivery fees and order surcharges have indeed been a barrier to purchasing as customers are caught by surprise at checkout. The current display of this information on the landing page does not suffice as customers make their purchase decision by looking at the total amount after adding items to cart.
Decreasing the abandonment rate is an effective way to immediately increase revenue while increasing the group order adoption rate will increase average order value which in turn lowers last mile delivery cost. Additionally, a smooth and intuitive checkout experience provides the customers with the emotional value that, in the long run, strengthens brand loyalty e.g. the sense of trust and confidence in the product.
Grain’s target customers are young professionals with spending power, digital natives with existing e-commerce expectations as they are familiar with the abundant food delivery services in Singapore from Domino’s to UberEats.
A key differentiator of this group is that they are attracted to Grain’s unique selling point of being 'healthyish' with a personable and thoughtful customer services .
Before diving into the solution space, here's some context of when and where our customers will order their meals:
To arrive at our solutions, we sampled some of the e-commerce best practices, given how familiar our customers are to online shopping and food delivery services. One particular best practice stands out to us as an obvious solution i.e. providing the shopping experience with instant feedback by showing the prices in a "side cart" next to the food items.
"Mechanisms that allow instant positive feedback as items are added to your cart, and pop-ups that encourage visitors to continue shopping, are a must-have. Ensuring that your customers receive positive and instant feedback as they shop is likely to increase both their trust and confidence in your company." – Trade Gecko↩︎
Additionally, in order to encourage customers to engage more with group ordering, we aimed to simplify the experience by reducing friction to create a group order, making the function more user-friendly, familiar and playful.
Our initiatives for this project therefore include:
There are two groups of experiences we need to account for:
As we are focusing on improving the conversion metrics for existing customers (own an account, able to add to cart and check out), we decided to de-prioritize the friction encountered by non logged-in customers.
With the initiatives and priorities in mind, we started with drafting some customer job stories.
Side cart then should allow customers to:
As visibility on side cart update was initially built for group order, we took this opportunity to also sync up the design of the old group order with that of the new 'single' side cart. Furthermore, the idea of creating a group order that's entirely different from your 'single' order presented us with some challenges such as what happens when a customer creates a group order, invites their friends and leaves the page to wait for the orders to be added to cart. When they revisit the main menu, they will need to rejoin their group order from the main menu in order to view the updated cart and continue the process.
We toyed with the idea of having only one cart that a customer can either make a purchase for themselves or for others. Inviting friends to add items to your cart which you will check out and pay for is a much simpler metaphor to understand than that of creating a group order.
The core functions of the group order remain the same:
However, with this small change in concept we needed to rebuild the entire feature. Instead of creating a new group cart, a customer's cart now has 2 states: single and group. Customers can simply share an URL to invite their friends to add orders to their cart. The trade-off of simplification and reduced future maintenance cost justified the redesign effort.
With the scoped out stories, we moved on to the final stage.
The new side cart design features an 'Invite friends' button at the top with clear service levels shown at the bottom, an input field to update quantity or remove items and an option to use pickup or delivery service with information on extra charges.
Customers can now make purchase decisions faster with the visibility and instant feedback provided by the side cart.
Simply sharing URL to other people who aren't already Grain's customers give easy access to the group order without having to sign up for an account.
As we iterated on our 'Invite friends' modal, an interesting UI problem surfaced. Initially we designed the modal with a 'Done' primary action button (resembles the sharing link function on Google Drive) but the group order owner needs to actually click on 'Done' in order for their 'single' cart to change its state into group order. The button copy was therefore not a strong enough call to action.
Additionally, group order owner needs to be able to 'delete' his cart to change its state back to 'single' cart while group order members need to be able to leave the order.
We ran an in-house testing session and reported bugs for the next phase of development (bug fixing, yay) to commence. The tests also brought about some learnings on user expectations:
We were at the last phase of the development process (at the time of writing), more real world testing will need to be done post-release.
There are still a lot to be done for the Grain's e-commerce experience to have a more competitive edge against its competitors in the market, starting with syncing the mobile apps with the added features on the web. Focusing on improving technical infrastructure that can support the complex operational requirements of checking different stock pools for different time slots and that does not affect page load time could significantly reduce menu, cart and checkout abandonment rates.
"According to surveys done by Akamai and Gomez.com↩︎, nearly half of web users expect a site to load in 2 seconds or less, and they tend to abandon a site that isn’t loaded within 3 seconds." – Sprout24↩︎
Guest checkout might not be a worthy development investment due to the food delivery customers' need to track their orders real-time but the non logged-in experience should help customers accomplish their jobs of getting instant gratification out of adding items to cart, keeping track of their items and how much they are spending. Assisting customers in reaching a purchase decision even before signup helps manage their expectations and could potentially make the checkout to signup experience feel more intuitive i.e. customers are asked to invest later when they are willing to invest and fill out their particulars.
We also ran a few quantitative interviews concurrently with this project on our existing group order and found that setting order limit by dollar values may not work for one of its core users: the corporate teams. Because the items on the menu are priced somewhere from $9.95 to $15.95, what would make more sense is to limit each group order member to a type of item or combo instead, e.g. a main or a main and a side dish.
Last but not least, micro interactions do play a significant role in adding elegance and delight to the system feedback and the product. They help inform customers of what happens now and what happens next, they're much like the interface design or product copy, the essential details that gel fragmented sentences of a story together. Having a micro interaction library for all the use cases handy could certainly add fluidity to the Grain's e-commerce experience as a whole.
