Improving Grain's e-commerce experience
Product Design Lead
User Experience, User Interface, User Testing

Problems & opportunities

The Grain's e-commerce experience lags behind as compared to its competitors.

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:

  • Of all customers who add to cart only 17.12% drops off before going to checkout, meaning most customers are motivated to add to cart however 40.99% drops off at checkout
  • Group order (or multiple people ordering in the same cart) adoption rate is also low

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.

Target customers

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 .

Context & needs

Before diving into the solution space, here's some context of when and where our customers will order their meals:

  • Grain serves only during lunch (with dinner opens shortly)
  • Most customers order for lunch at work, for work meetings or takeaways 
  • The current menu experience requires customers to sign up or log in before they can add items to cart, the final price only shows after customers click on checkout
  • The current group ordering experience requires a logged-in customer to create a group order which opens a separate "group cart" from their "single cart" before being able to invite others to add items to their shared cart
  • For this project, we focus on the web and mobile web platforms and most popular browsers such as Safari and Chrome but also Microsoft Edge considering our customers access the Grain website via their work desktop

High-level initiatives

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:

  • Giving customers visibility on their ordering process with side cart
  • Merging group order with the single cart experience on menu

Sketches & flows

There are two groups of experiences we need to account for:

  • Non logged-in customer experience
  • Logged-in customer experience

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.

Initial job stories for side cart with customers' forces breakdown

Side cart then should allow customers to:

  • See live cart update (item, quantity, subtotal, service levels, total price amount)
  • Edit side cart (add items, remove items, switch delivery method)
  • See menu information on side cart (closed, out of stock, short on stock, etc...)
Ideal case task flow

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.

Initial sketches

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:

  • Group order owner: invite, cancel, edit order details, edit side cart and members' items, lock order, check out
  • Logged-in group order members: join, add items to cart, edit item quantity
  • Non logged-in group order members: join, add name, add items to cart, edit item quantity

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.

Wireframes, interfaces & final flows

With the scoped out stories, we moved on to the final stage.

Basic wireframes

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.

Staging view of side cart on mobile, a few more UI tweaks and we will be good to go

Usability test

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:

  • Customers expect live and instant updates upon performing an action so slow load time is a huge issue if the technical architecture is built in a way that requires a lot of checking (on stock level, etc...)
  • Customers are accustomed to the on-demand delivery ordering process therefore expect delivery time to be set to ASAP meaning the next available time slot upon landing on the menu, regardless of their intent (to order for now or pre-order for later)
  • Customers perceive that there's always only one menu with one cart therefore expect to land back into the same flow ('single' cart or group order) after having navigated elsewhere
Usability test for side cart and group order on different devices and browsers

Results and room for improvements

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↩︎, 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.