USFoods | Rakesh - Portfolio

Buy Forward Request

Enhancing the Bulk Ordering Experience for Hospitality Businesses

UI design

Ux design

Case study

PROJECT OVERVIEW

Duration -

3 months

Role -

UI/UX Designer

Tool -

Figma, Miro

Client -

USFoods

User Group -

Super user, Approver,

Buyer, Viwer

ROLES & RESPONSIBILITIES

Scope of work -

User research, User interviews, Online surveys, Competitive analyses & Heuristic evaluation, Customer journey map, User persona, Information archite-cture, Wireframing, Prototyping.

Team -

Rakesh Roshan, PM, BA, 12 backend engineers and tester.

PROJECT BACKGROUND

US Foods, one of the largest food distributors in the U.S., needed an internal ordering system, Buy Forward, to help businesses like hotels and restaurants manage their bulk food orders efficiently. The platform aimed to streamline procurement, improve order tracking, and ensure timely fulfillment.

PROBLEM STATEMENT

US Foods needed a centralized internal ordering system to streamline bulk food orders for hotels, restaurants, and procurement teams. The existing process was fragmented and manual, resulting in approval delays, tracking issues, and a lack of transparency.

Key challenges included:

Disconnected workflows: Ordering and approval processes were time-consuming and inconsistent.
Data silos: Teams couldn't track or prioritize requests effectively.
Manual tracking: Reliance on spreadsheets increased risk of error.
Lack of visibility: Users couldn’t monitor order progress or fulfillment status.

GOAL

Design and build a centralized system that:

Enables seamless ordering workflows across multiple departments and user roles.
Delivers role-specific dashboards and controls to reduce confusion and increase efficiency.
Supports real-time tracking and communication between stakeholders.
Empowers administrative oversight and auditability, ensuring compliance and transparency throughout the request lifecycle.

PROBLEM STATEMENT

US Foods needed a new internal ordering system, Buy Forward, to help hotels, restaurants, and procurement teams efficiently manage bulk food orders. The lack of an existing dedicated system meant users relied on fragmented processes, leading to major inefficiencies. Key challenges included:

Inefficient ordering workflows: Users struggled with disconnected and time-consuming methods for placing and managing bulk food orders.

Data fragmentation: Without a centralized system, tracking and prioritizing orders was difficult, often leading to delays and mismanagement.

Manual tracking dependencies: Procurement teams relied on spreadsheets and manual record-keeping, increasing the risk of errors and inefficiencies.

Lack of order visibility: Users had no intuitive way to track order progress, fulfillment status, or expected delivery timelines, creating operational bottlenecks.

GOAL

The goal of the Buy Forward project was to design a new, intuitive, and efficient bulk ordering system for hotels, restaurants, and procurement teams. The platform aimed to streamline food procurement by addressing key pain points such as manual tracking, fragmented workflows, and lack of order visibility.

DESIGN PROCESS

User Interviews - Online

Understanding as-is process

Gather expectations/ requirements for the new application

Mapping the journey

Suggesting ways to enhance process

Set the visual language

Design Iterations

Discuss with Development team - feasibility

Approval calls with the SMEs

Design Hand-off for development

User Interviews - OnlineAnalysing and evaluating Developed design

Deliver a major feature / functionality

TARGET USERS

Marine Advisors & Managers (A&I)

Super User

Has full visibility and control over the entire ordering system. Can monitor all orders, track fulfillment, and manage system settings

Requestor

Initiates purchase requests, selects a Requestor and Approver from a predefined list, and has the ability to approve or reject requests.

Approver

Reviews and approves/rejects purchase requests.

Buyer

Finalizes the purchase request and places the order.

Viewer

Has read-only access to request history and details.

What they like ?

Flexibility - easy to trick the system.

Every user has a unique workaround to solve a problem - proud of that!

All necessary information pertaining to a particular request can be found in one place

What’s troublesome?

Takes too much time to load

Can’t keep track of the numerous tabs that open up with the opening of every request

A cluttered view of the requests lined up that also has requests that have been raised for a different team altogether

For an overview they created spreadsheets to keep track of the status

Over the time, a lot of information was added but the previous outdated data was never removed

If there’s any technical issue that has to be raised,team takes too long to respond or never responds - hence annoys the user since some activities in the application are time based - rework is required

Flexibility - easy to trick the systemAll necessary information pertaining to a particular request can be found in one place

HOW MIGHT WE....

How might we streamline the process flow, reduce manual interventions, and create an intuitive, visually engaging interface for users?

How might we design the inspection module to align with the overall system yet introduce unique features that cater specifically to inspection workflows?

How might we create a dashboard that effectively manages high volumes of inspection requests while ensuring complete transparency from initiation to completion?

JOURNEY MAPPING

The enhanced user flow for scheduling an assessment.

An Assessment Request is raised via Requestor Portal

It pops-up on the Marine Advisors / Managers dashboard as a task

MA / MM can either assign the task to themselves or to some other team member

After Assigning the assessment an introductory email is sent to the requestor

After sending out the introductory email, the assessment is scheduled.

As soon as they get access to any wifi network they log onto the application to upload their findings

The advisors visit the asset to be assessed and capture their findings via notes / images

After the assessment goes into the ‘In progress’ state, the elements previously selected will be autopopulated in the report editor for the advisor to answer

Once the report is completed, it is submitted to the manager for approval

Manager either approves the report directly or provides comments offline / via email.

Changes are made and resubmitted for approval

Upon approving a final report PDF will be generated which is shared with the requestor and the marine team for further use if any.

Based on the findings some action items might be created to follow up with the requestor

WIP

INFORMATION ARCHITECTURE

After analysing and detailed study of the user’s needs and prioritising the service, features required to them, the information architecture was built,

SCREEN BUILDING

Solutions provided to tackle each task in the process of an assessment

Detail Screen

One stop shop for viewing all the information related to an assessment.

Tabs were introduced to neatly organise the information and not overload the user.

CTA’s for quick actions originating from the information displayed on the screen

Action Tracking

For every category based findings identified by the assessor, an action item is created for a V&C team member (another user group) to investigate and follow up to close the observation made initially.

AIMS on caters to report creating and are responsible to mark action items as closed.

The tasks related to the action item are conducted by the V&C (Vetting and Clearance) separately offline, and upon completion the assessors are notified through offline communications.

Re-assignment of elements & assessors

With 2 assessors on the job, it’s frequent for User A to complete the assigned work whereas User B might take up more time than anticipated. At this point, User B should be allowed to delegate some more work to User A in order to stay within the desired timeline.

Replacing assessors

If an assessor can’t make it to the assessment due to a sickness or any emergency leave, users should have the ability to replace the original assessor with an available one.

DESIGN IDEATION

With the research and design direction in place, we moved on to low-fidelity wireframes to visualize the core structure and layout of the application. The goal was to create a visual framework that would address the following:

Simplify the User Interface: The interface needed to be less cluttered, with only the most relevant information visible at any time.

Intuitive Navigation: The navigation should be clear, with easily identifiable categories like inspection requests, inspector availability, and completed reports.

Task Focused: The design needed to prioritize the tasks users were performing most frequently, such as assigning inspectors, tracking request status, and viewing reports.

DASHBOARD

Creating a responsive & interactive design along with capability of handling large volumes of Inspection requests

Users are used to seeing this data in a tabular format, with a lot of unnecessary details, resulting in an overload of information.

What it initially used to look like

Handling multiple request with no clear distinction between different types of assessments & inspections.

Unorganised way of handling data

The re-designed Dashboard

Organised request to understand progress at each stage

Applicable filters based on the section of Dashboard the user is in

Visual clarity & differentiation among Inspections & assessments, combination requests etc.

MARINE CALENDER

A calendar that enables the user to look for available inspectors for an inspection along with the details of the inspectors segregated by the region.

This allows the user view the inspector’s schedule with respect to his assigned inspection request, log in holidays.

A lot of shortcut keys were used on this screen to log multiple things on the calendar. Colour coding eventually wasn’t relevance.

What it initially used to look like

Multiple filter and sorting options that hold no value at present.

Shortcuts like Ctrl+Double click to open a particular request.

'Booking colours' is no longer needed.

Shift+Double click to log unavailable time

Details of Inspector & Inspection Company not accurately presented.

The re-designed Marine Calendar

Organised request to understand progress at each stage

Applicable filters based on the section of Dashboard the user is in

Visual clarity & differentiation among Inspections & assessments, combination requests etc.

INSPECTORS

Adding a new inspector, activating/deactivating existing ones, updating their details, all in a single screen.

Multiple screens had to be visited to perform actions on an inspector.

What it initially used to look like

Outdated field inputs.

Insufficient user feedback.

Recognition of general user behaviour is lacking in the design language followed easier.

The re-designed Inspector Detail screen

Intuitive Active / Inactive states for Inspectors.

Concise and clear presentation of data, progressive cognitive load

Inspectors access via dashboard with immediate access to important details

USER TESTING & REFINEMENT

Usability Testing

Before finalizing the design, we conducted a round of usability testing with a small group of Marine Coordinators and Inspectors. They interacted with the high-fidelity prototype, and their feedback was used to refine the design.

Feedback from Testing

- Users appreciated the cleaner layout and the ability to see everything at a glance on the dashboard.

- The Marine Calendar received positive feedback for its intuitive design, as users found it easy to schedule and manage inspections.

- There was a suggestion to make the task completion confirmation more prominent to avoid accidental submissions.

Refinements Based on Testing

- Added a confirmation prompt for submitting completed inspections and reports.

- Tweaked button sizes and spacing for better click accuracy, especially for users on tablets or mobile devices.

- Enhanced the status indicators (e.g., progress bars, color-coded labels) to improve visibility of inspection progress.

FINAL DESIGN & HANDOFF TO DEVLOPMENT

Design Handoff

Once the final designs were approved, we prepared the handoff package for the development team, which included:

- High-fidelity mockups of all key screens.

- An interactive prototype to show the flow of user interactions.

- Design specifications (e.g., colors, typography, spacing) documented in Zeplin, ensuring that developers could implement the designs accurately.

- Detailed user flows to guide the development team through each step of the user interactions.

During the handoff, I worked closely with the developers to answer any questions, clarify design decisions, and ensure that the UI was implemented as envisioned.

User Feedback & Iteration

After launch, I continued to gather feedback from users to identify any areas that required further refinement. This included monitoring user behavior and collecting data on key performance indicators (KPIs)