Project Details

Company :

Gordon Food Services (Kin + Carta client)

Duration :

Jan. - March 2021

Role :

UX Designer

Tools :

Figma, Wire-framing, Prototypes, Research

Project Summary

Gordon Food Service began more than a century ago as a local butter and egg delivery service. Today, it's the largest family-operated broad-line food distribution company in North America, serving approximately 100,000 business customers. Gordon Food Service offers best-in-class products and menu design assistance to restaurants, schools, universities, and hospitals, helping them provide their own customers a satisfying and nutritious dining experience.

Our team is working on creating an industry-leading, scalable eCommerce platform to increase customer retention and revenue for GFS. The current Canadian GFS platform relies on third party application while the US platform has monolithic applications which require long testing cycles.

‍Our main goal is to have US and Canada on a common ordering platform and deliver functionality more frequently. GFS hired Kin + Carta to help simplify customer ordering, increase customer loyalty and satisfaction, and create a scalable digital platform. I was a part of a team tasked with creating a digital responsive eCommerce platform for North American users.

Understanding GFS Users

Before jumping into any design I needed to understand who are the GFS users. Leveraged existing GFS research on target users on the Ordering platform that I referred to throughout the design process. Our primary concern was how can we design for our user Nelson who needs workflows that can get him the results he needs the fastest so he can focus on running his business.

Design Process

Select a tab below to see the design process and solution for In-Store Pickup and Dropshipping

Problem

When a wholesale user does not have a large enough order to place a truck delivery they have to place an in-store pickup order.

When conducting a site audit we found that:
1. The old US platform does not have the functionality to allow the user to choose between In-Store Pickup and Express Delivery therefore has a lack of flexibility of choosing how and when to receive their order.
2. Confusing handling of order errors in Order Review leads to cart abandonment and lost revenue.

Goal

1.Building out the In-Store Pickup feature on the new Gordon Ordering platform needs to have a consistent experience for when users start migrating off of the old US platform.
2. There is a need to create transparency and loyalty with customers while increasing GFS's business revenue by adding features like a robust store information capability by implementing additional information about the stores address, hours of operations, phone number etc. and creating a better experience when splitting a pickup order for now vs later date.

Research

Site Audit

In order to understand how the old In-Store Pickup feature worked on US platform, I audited the site to understand the flow, problem areas and based on my findings recommend areas for improvement. Additionally, I researched top competitors with In-Store Pickup and Express Delivery features to understand any missing gaps, find inspiration and understand the scope of our project.

Interaction Flow

After initial research on In-Store pickup and outlining the scope of the project, I mapped out the old US platform flow as well as the new Order platform flow to further understand how a user would navigate from start to finish. Once we were able to narrow down some initial elements needed, we began to build out the flow of the experience itself. The unique user paths and personas needed for the In-Store Pickup experience required careful consideration of the architecture to be sure we weren’t missing any large stages of the flow as well as error and edge cases.

The Order Review page needed special care and overall re-work compared to what existed on the old platform. On the old US platform, once user gets to Order Review and they have invalid items they are bombarded with several modals, each one to address different error scenarios.

A user flow showing GFS in-store ordering experience

Low-Fidelity Iteration

Once the client approved our information architecture, we were able to begin wire-framing how the elements listed above would be composed on screen. This particular feature entailed first creating low fidelity designs that our developers could use to build a rudimentary testable version of the feature. I was able to adapt to this request and quickly deliver comps with only the bare essentials for what was needed to be tested.

Explorations

I explored various ways of addressing different edge cases that could happen with an In-store Pickup order. What happens if the items user selected for In-store Pickup are no longer valid? Does it make sense to split up an order and allow picking it up another day or time? Exploring these options and presenting it early on to stakeholders helped me understand limitations and fesability.

Final Solution

By the end of the project, stakeholders have chosen many new and improved flows for how the feature will behave on the new site as opposed to copying the existing flow. The modal became much more robust with inclusion of steppers so the user would always be aware of how much content they have to get through. In addition to more robust store information where after selecting a store user can collapse and expand on store hours, have the address and phone number at hand. Accounted for several error use cases and created solutions for each scenario.

Problem

Current Drop Shipping experience does not support expedited shipping or allow user to customize their shipping order.

When conducting a site audit we found that:
1. Users would like a choice for how to ship their Drop Ship items and items needing expedited shipping like fresh or frozen food are not currently supported.
2. Users often skip over sections that require selecting a date or new address and become frustrated with their deliveries.

Goal

1. Transferring the Dropshipping experience from the Old US platform to the new platform.
2. Creating a transparent process for users ordering drop ship items.
3. Reducing the number of steps it takes to complete a task in the experience (example: Adding items from Critical Items).

Research

I referenced the research findings done by the GFS research team and found that nearly every participant was unfamiliar with the term "Drop Ship". This was anticipated since the term stems from industry lingo. Interestingly, 3/6 participants assumed this was somehow "Special Order" related because of the unspecified lead time. To further understand the user flow of a customer ordering a drop ship product, I created an interaction flow to map out all the elements from shopping cart to order review experience. As well as revisited the current old Drop Ship flow on the US customer site recorded notes using InVision Whiteboard.

Interaction Flow

To understand how to solve for Drop Ship in the Order Review page, I detailed the interaction flow of every component from Shopping Cart page to the Order Review page, highlighting elements in blue that are interactive.

Challenging Scenarios

As I was working on the Drop Ship feature, my teammate Jeanne Han was working on a School Commodity feature at the same time. We realized that both features would have the same common error of a 'failed fulfillment' and error state when the backend cannot fulfill the selected items.

‍Previously we had different treatments of this error case but quickly realized it should be treated as a general error that impacts all product regardless what type they are. Previously on GFS there was no concept of separating out the "unfulfilled" products from the rest of the list, rather they were mixed in and it caused a lot of confusing to the user as they would have to manually scroll through their order list and see which products were not fulfilled.

The Final

Refreshed the Drop Ship experience for the unified US/CA customer platform and added in Coupon feature to the Order Summary element where users can add in promo codes for discounts. Solved for the various user cases (shown below), that helped clarify to the user what to expect when facing unexpected scenarios.