Freight Trading Platform

Overview

Our client, a freight and derivatives broker, sought to digitise and automate the negotiation process between cargo owners and shipowners. Our task was to create an engaging proof-of-concept, showcasing the potential of the solution to secure investor buy-in. This concept would serve as a springboard for further design development, leading to the creation of a Minimum Viable Product (MVP).

I was the senior product designer on this project, working as part of a team consisting of myself, a junior designer and a project manager.

Role

Senior UX Product Designer

Client

Leading freight and derivatives broker

Duration

2 months

Challenge

We were challenged to discover, research and rapidly understand the subject matter, the users and design a user friendly product that empowered seamless negotiation between a ship owner and a cargo owner.

The Process

In this project, our goal expanded beyond a proof-of-concept as we embarked on creating a fully functional Minimum Viable Product (MVP). To ensure a successful outcome, we employed a meticulous approach, providing our client with comprehensive planning and strategy. Through detailed discussions, workshops, and user research, we defined the product's scope, target audience, and key features. We formulated a clear roadmap, outlining design iterations, development milestones, and user testing cycles. This level of planning and strategy empowered our client to understand the product's design and development process, fostering a strong collaborative partnership that paved the way for effectively translating their vision into a user-centric and functional MVP.

Understand

  • High-level User Flow
  • SME Interviews
  • Competitor Analysis

Define

  • Information Architecture

Ideate

  • Blockframing
  • High-fidelity Wireframing

Deliver

  • Visual Design
  • Vision Concept

Understand

High-Level User Flow

The client had provided us with contextual information about the industry and the product they were envisioning. We synthesised this information into a high-level user flow illustrating the process of negotiation between a shipowner and cargo owner to come to an agreement on the cost of freight. We then played back this user flow to our client for feedback to ensure we had a solid starting point to start ideating from.

Define

Information Architecture

In order to lay a solid foundation for the Minimum Viable Product (MVP), we meticulously mapped out the application's architecture. This involved close collaboration with both the client and the developer team to determine the feasibility and scope of the MVP. By working closely together, we ensured a comprehensive understanding of the project's requirements and constraints, enabling us to establish a clear vision of what could be accomplished within the MVP framework. This collaborative approach facilitated effective decision-making and alignment among all stakeholders, setting the stage for a successful development process.

Wireframe Development

Through a collaborative and iterative approach, we swiftly progressed from blockframes to high-fidelity wireframes, incorporating valuable client feedback along the way. This dynamic design process allowed us to refine and enhance the wireframes efficiently, ensuring they accurately captured the client's vision for the product. By actively iterating based on client input, we delivered high-quality wireframes that effectively represented their requirements and aspirations.

Visual Design

UI Personality Workshops

We closely collaborated with the client to develop a visually striking design that not only exuded modernity but also set their product apart in the market. Applying this captivating visual design to the high-fidelity wireframes, we crafted a clickable prototype that showcased our vision. This prototype played a crucial role in securing additional investments for the project.

Design System

After finalising the vision concept, we leveraged it to establish our design system. This step held great significance as we aimed to design the MVP product, taking into account user feedback and technical limitations. Building a robust foundation was crucial for this process as we needed to ensure scalability and consistency across the design as well as have everything correctly documented for the developers to build.

Colour System

We collaborated closely with the developers, who expressed the need for a tokenised colour system encompassing global colours and component-specific colours. By implementing the colour system in this manner, we not only met their requirements but also facilitated seamless theming. This approach proved advantageous, particularly since we anticipated the future design of a light-mode version beyond the MVP stage.

Foundations

Here's a glimpse of our foundational elements. We maintained close collaboration with the developers to ensure we provided them with the appropriate level of detail.

Components

Here's a glimpse of our component library, which is divided into two main groups: global components and patterns. The global components encompass elements such as buttons, input fields, badges, and more. On the other hand, the patterns include cards, modals, tables, and other components that incorporate nested global components within them. This organisational structure enables easy access and maintenance of our extensive collection of components.

Result

This project transcended the initial vision concept stage, evolving into the ongoing development of a Minimum Viable Product (MVP) that I am currently immersed in. The client's satisfaction with the work accomplished thus far has been exceptionally gratifying. The remarkable success of this project has not only solidified our partnership but has also opened doors to additional opportunities within the organisation. The positive outcome and impactful results of this endeavour have established our credibility as trusted UX partners, propelling us towards further exciting projects that contribute to the client's overarching goals. It is immensely rewarding to witness the ripple effect of our UX expertise, generating new avenues for collaboration and growth within the organisation.

Thanks for reading!

Want to check out more projects?

Drug Discovery Solution

Project Arrow Link

I took on the challenge of crafting a captivating and intuitive vision concept for a data-driven product, enabling scientists to uncover gene targets crucial for advancing pharmaceutical drug development.

Electric Fleet Management System

As the sole UX product designer I worked closely with developers, subject matter experts and solution architects to create a robust solution that optimises the management and efficiency of electric fleets.

Project Arrow Link
Coming Soon

Health Information Platform

I worked with a major International public health agency to deliver a platform that enables leaders from around the world to access reliable global health information.