Background
As a Product Designer at Gordon Food Service, I led the design of the "Order Method" feature for our native mobile app. This feature is a critical part of the e-commerce flow, allowing users to select their preferred way to receive orders—Truck Delivery, Express Van Delivery, or In-Store Pickup. The goal was to create a seamless experience where users could easily switch between these options, view product availability, select delivery or pickup dates, and confirm their address or store location.
The existing process presented several challenges. Users found it difficult to change their order method and were often unaware of which products were available for their chosen option. The lack of visibility into delivery dates and store locations caused frustration, leading to an increased drop-off rate during checkout. My objective was to design a more intuitive and flexible solution that provided users with clarity and control over their orders.
Research + User Insights
Our internal research team provided valuable data on user pain points, which informed the direction of the "Order Method" feature. The key findings from their research included:
Need for flexibility: Users often change their order method based on time and product availability.
Clarity around dates: Users wanted an easy way to select or change the delivery/pickup date without redoing the entire order.
Transparency on availability: Users found it frustrating when they selected products only to realize they weren’t available for their preferred delivery method.
Address validation: Users preferred to double-check or edit their delivery addresses for accuracy.
In addition to the research provided, I created a user flow to better understand the overall experience and identify potential areas of friction or improvement. This helped clarify the ideal customer journey from method selection through checkout. I also conducted competitive research to gain insights into design patterns and benchmark the user experience against other leading e-commerce platforms. This competitive analysis allowed me to identify best practices that could be applied to our app while ensuring the design was aligned with user expectations.
Wireframes
I started with wireframes to outline the core interactions, ensuring the user experience was intuitive and efficient.
Order Method Selection
Users needed a straightforward way to toggle between Truck Delivery, Express Van Delivery, and In-Store Pickup without disrupting their shopping flow. I explored various UI patterns, including segmented controls and dropdown selectors, to determine the most efficient interaction model. The goal was to minimize cognitive load while providing a smooth transition between order methods.
Date Selection
Delivery and pickup windows varied depending on location, order volume, and method. To make scheduling seamless, I designed a date picker that dynamically adjusted based on the selected order method. If certain days were unavailable, they would be disabled, and users would see an estimated delivery timeframe before finalizing their order.
Store Locator
Users wanted the ability to confirm, edit, or change their delivery address or pickup location within the same flow. I designed a dedicated section where users could quickly verify their details, select a different store if needed, and even access an interactive map for better visibility. This reduced errors and ensured that users had confidence in their order details before proceeding.
Cross-Functional Collaboration
I worked closely with developers, business stakeholders, and fellow designers to refine the Order Method feature.
Developers – I reviewed wireframes in weekly standups to assess technical feasibility and constraints.
Business Stakeholders – Provided insights on various use cases to ensure the design accommodated all operational needs.
Design Team – Offered feedback on UX and visual direction to enhance usability and brand consistency.
I iterated based on this feedback, refining the flow until we had an optimal solution. Once finalized, I annotated designs for a smooth developer handoff.
Areas for Improvement
While the Order Method feature successfully enhanced the ordering experience, there were opportunities for improvement:
Lack of User Testing – Due to budget and time constraints, we couldn't validate our designs with real users. Even unmoderated user testing could have provided early feedback to refine the experience before development.
Timing Misalignment with Development – I often finalized designs before developers were ready to implement them, which led to disengagement during handoff calls. Aligning design timelines more closely with development priorities could improve collaboration and ensure a smoother transition from design to build.
These learnings will help refine future processes, ensuring stronger validation and better cross-team alignment.
Next Steps
We recently released an alpha version of the app to a limited group of users and are awaiting feedback. This will provide valuable insights into how the Order Method feature performs in real-world scenarios, helping us refine the experience further based on actual user behavior.