User Interface Design

Defining the style guide

I have crafted a style guide defines visual elements, from colours to layouts, ensuring consistency and cohesiveness, serving as a crucial reference for designers.

Final Website Design

Information Architecture

Features to add on

Jointly creating low-fidelity wireframes. The advantage was a direct buy-in of the approximate structure.

Information Architecture

This IA aims to create a logical and intuitive structure for users to find information efficiently, fostering a positive user experience.

Sitemap

Creating the sitemap entailed aligning proto-personas' defined solutions, motivations, and business objectives to effectively address identified problems.

Building the Site Structure

Crafting low-fidelity wireframes resulted in obtaining immediate approval for the proposed structure.

🗒️ Step 3: Define user's journey

Prior to delineating the user's journey, a comprehensive understanding of Cogoport's key users is imperative. The platform serves two primary user groups:

Logistics Partners:
- Who: Freight Forwarders, Transporters, and Custom Agents.
- Activities: Logistics partners play a vital role by uploading rates onto Cogoport's marketplace platform.

Cargo Owners:
- Who: Primarily comprising importers and exporters.
- Activities: End users engage with the platform for tasks such as searching, booking, and managing shipments.

Segmenting information for logistics partners and end users ensures a user-friendly platform, enhancing engagement and satisfaction.

Streamlined navigation for company key offers

Clear categorisation of company capabilities and key offers in dropdown menu

Showcasing digital platform functionality on homepage

To have demonstrative visuals of how their digital platform works for different users

Enhancing transparency with pricing Page

Provide pricing page allows for pricing transparency, which is important to clients

Key Learning #2

The insights gathered from analysing competitors' website – shaping the approach to the redesign.

🗒️ Step 2: Analyse competitor's website

I analyse competitors' website in order to benchmark against industry standards, learning from mistakes, inspiring innovation, and aligning designs with user expectations, ultimately enhancing overall user experience.

Key Learning #1

Analyzing Cogoport's site through Google Analytics provided valuable insights, guiding improvements for an enhanced user experience on their platform.

The Framework: How we get there?

UX Research

🗒️ Step 1: Qualitative Research using Google Analytics

One of the most important tools I use throughout my UX research phase is using Google Analytics. It allows me to have deep understanding of Cogoport's users, find out what pages and elements are working well, and where there may be room for improvement.

Google Analytics allows me to:

Investigate hypotheses about design or technical issues
Monitor the user journey at key moments like activation
Quantify the user experience
Target users at specific moments in their journey for user research
Persuade data-oriented stakeholders

Design Outcome 🚀

A successful commercial launch of the revamp website that gathered 180 inquiries from over 30 new clients within the first 3 months of the website's launch introducing their Global Trade Platform™.

180

enquiries in the first 3 months

new clients in the first 3 months

Implementing Solutions

Introducing the revamp website

To address the identified challenges and improve the user experience on Cogoport's website, comprehensive solutions were implemented during the revamp.

Homepage

🌟 Banner Design
Banner design with imagery indicating the platform as a search hub for freight rates

🌟 Content Strategy

Content on homepage as followed:

Brief platform introduction
The use of cutting-edge technology
Solutions offered
Global Trade Platform™ target audiences and functionality

Menu Navigation

Reworking category titles for enhanced intuitiveness.
Incorporating icons to represent each offer.

Shipping Price Rate

🌟 Trade Management Page

Introducing a dedicated category on pricing matters.

🌟 How it works section

Providing users with information on how the platform works before prompting them to sign up.

Attracting Logistics Partners

🌟 Global Partner Network Page
Creating a separate main page to introduce the Global Partner Network.

The Issues

Unveiling UX Challenges

I leveraged Google Analytics for UX research and analysed competitor sites to uncover insights for improving their existing website.

Key findings:

Homepage

High exit page rate due to unclear offerings.
Failure to convey itself as a search and booking platform for shipments.
Lack of clarity that the platform caters to both cargo owners and logistics providers.

Menu Navigation

Non-intuitive category titles.
Misplaced content, making it challenging for users to find relevant information.
Users were unaware of new offerings such as Financial Services, Advisory, and Marketplace.

Shipping Price Rates

Inadequate information on shipping rates without direct access.
Immediate redirection to customer support was not user-friendly, as users prefer accessing sufficient information firsthand.

Partnership Program

Low attraction for logistics providers due to unclear visibility of benefits.
Information placed under the wrong page (company page), making it less accessible for interested parties.

Problem Statement

How can we optimise the user experience on Cogoport's website to reinforce its position as the preferred trade support partner and leader in the Global Trade Platform's new services and category?

The Approach

Cogoport's Integrated Solutions

To address these challenges, Cogoport introduced the Global Trade Platform™ incorporating new offerings such as Trade & Logistics, Financial services, and Advisory & Marketplace. This unified approach simplifies complexity, enhances efficiency, and optimizes the trade journey for global businesses.

The Challenge

Navigating Global Trade Challenges

Exporters grapple with multifaceted issues when engaging in overseas transactions, including complexities in obtaining crucial details and managing parallel processes in the destination country.

In addition, Cogoport has identified three critical challenges faced by its target users in the realm of global trade:

Background

Established in 2016, Cogoport is an Indian-based online international freight platform recognised as the Global Trade Platform™ serving importers, exporters, and freight forwarders. It integrates advisory, logistics, and financing to optimise shipping, logistics costs, and cash management.

With cutting-edge technology and real-time pricing algorithms, the platform aspires to be a trusted, reliable marketplace with value-added services, simplifying global goods movement.

The project involves rebranding Cogoport to position themselves as a leading trade support partner, encompassing a refreshed brand identity and revamped website design.

Before rebranding

After rebranding

I have crafted the communications with a Friendly, Helpful & Caring personality, using a yellow and red palette and a smiling Cogoport 'g' wordmark. The visual identity is based on a ‘portal’ concept.

My Deliverables:

UX Strategy, UX Research: Google Analytics, User Journey, Information Architecture, Content Strategy, Wireframes, UI Design: Website design

Roles:

UXUI Designer, Briefed web developer on website build

Industry:

Digital freight platform

Duration:

Sep - Oct'22 (4 weeks)

Website launched Dec 2022:

Visit website

Project Summary

Sole designer to revamp Cogoport's website design, positioning it as a leading trade support partner with their Global Trade Platform™. The new website has gathered 180 inquiries from over 30 new clients within the first 3 months of the website's launch introducing their Global Trade Platform™.