Streamlining booking process by designing intuitive form fields
A collaborative approach to design a website inclusive of form fields, login, scheduling appointments.
The project involved creating a user-friendly website for a packaging company to streamline their delivery operations with third-party services. As the UX Designer, my task was to design and implement a system that allowed third-party drivers to easily log in, fill out load details, and schedule appointments for deliveries.
INTRODUCTION
MY ROLE
THE TEAM
TIMELINE
Responsible for design, creating form fields, login and check in-out page.
1 designer, 1 product manager and 2 front-end developers, 1 back end developer.
Aug 2023— Oct 2023

About the client

MSI Express is a national provider of contract manufacturing and contract packaging services to global consumer brands, primarily in the food and beverage industry. They offer a range of services such as dry food manufacturing and packaging, aseptic and bag-in-box beverage production, facility management, and integrated supply chain solutions.

About the product

They need a platform, which serves as a centralized hub for coordinating, tracking, and scheduling deliveries with third-party service providers. the platform provides a seamless experience for both company keeping it responsive fully. Platform should allow users to input and manage detailed information about each load, including load type, quantity, and special handling instructions. It should also help in enabling users to schedule delivery appointments online. With real-time tracking capabilities, both companies can monitor the status of deliveries from pickup to drop-off.

User Personas

By creating personas I've gained insights into the specific challenges and requirements of the packaging company's logistics managers and third-party delivery drivers. Alexis, a logistics manager, seeks a user-friendly platform like MSI Express to streamline scheduling, tracking, and compliance management for deliveries, catering to her need for real-time visibility and customization options. Wesley, a seasoned delivery driver, requires a mobile-friendly app offering clear instructions, GPS tracking, and offline access, aligning with his goal of efficient and safe delivery operations amidst logistical challenges.

Information Architecture

MSI Express features a streamlined information architecture with clear navigation paths, facilitating easy access to key features like delivery management, tracking, reporting, and settings, enhancing user efficiency and experience.

Style Guide

Created a style guide using Canva that is flexible enough to accommodate future updates and additions to the platform while maintaining visual coherence. Ensured consistency in design elements across the platform, such as buttons, forms, headers, and navigation, to create a cohesive user experience.

High Fidelity Prototypes

1. Visual Design Elements: Incorporate the company's branding elements, such as logo, colors, typography, and imagery, to ensure consistency with the brand identity.

2. Content Placement: Arrange content logically and hierarchically, ensuring that important information is prominently displayed and easily accessible to users.
3. Detailed UI Components: Design visually appealing user interface components, including buttons, forms, dropdowns, checkboxes, and navigation menus, with attention to detail and consistency.

4. Interactive Elements: Adding interactive elements such as hover effects, transitions, and micro interactions to enhance usability and engagement.
Tab 1
Tab 2
Tab 3
Tab 4

Time to retrospect!

Results

Thanks for Visiting!
We are just tuning up a few things.