The Process
The Problem:
As a UX Designer, I play a crucial role in this project. My responsibility is to design and create a seamless user experience for Shippage. By conducting user research, analysing user behaviour, and collaborating with the development team, I will develop a deep understanding of the users' needs and translate them into intuitive and visually appealing design solutions. Through wire-framing, prototyping, and iterative testing, I will ensure the final product meets the objectives and provides a delightful user experience.
Problem statement:
- Freight forwarders struggle with the manual and time-consuming process of obtaining and comparing rates from different shipping providers.
- Forwarders lack visibility into the best available options and find it challenging to make data-driven choices.
- The absence of centralized data and analytics hinders forwarders' ability to optimize operational costs and increase sales.
User Persona:
Alex Thompson
38 yrs old | San Diego, California | Freight Forwarder
Bio
Alex has been working as a freight forwarder for over 10 years. He is experienced in managing international shipments and dealing with various shipping providers. Alex often struggles with the time-consuming process of obtaining rates from different providers and comparing them efficiently. He values platforms that provide transparency, cost-saving opportunities, and a seamless client experience.
Goal
- Streamline rate comparison process for time efficiency.
- Access real-time information and transparent cost breakdowns.
- Find cost-saving opportunities.
- Improve client experience with a user-friendly platform.
Pain Points
- Time-consuming rate comparison.
- Lack of transparency in the freight forwarding process.
- Limited cost-saving opportunities.
- Inefficient client experience.
Product Design:
As I have applied design thinking to the product design, a comprehensive 5-step design process that I follow to deliver exceptional user experiences. This proven methodology allows me to approach projects systematically, ensuring thorough research, effective problem-solving, and seamless execution.
Early Sketches:
User Flow:
The Shippage app prioritises a clean and intuitive interface, making it easy for users to navigate between screens and access key features effortlessly. The user flow is designed to minimise friction and provide a smooth and efficient experience, empowering users to manage their shipments with confidence and convenience.
Wireframe:
The UX design process for the Shippage app involved extensive discussions with stakeholders to exchange ideas and gather insights. These concepts were then translated into digital wireframes, allowing us to effectively organize and manage large volumes of complex data.During the UX phase, we focused on streamlining and reorganizing the five key stages for a freight forwarder: Search, Quote, Book, Track, and Manage. Through careful wireframe design, we ensured that each stage seamlessly flowed into the next, providing a cohesive and intuitive user experience.
Typography and Colour:
Typography
The choice of Helvetica as the primary typography for Shippage brings a timeless and versatile aesthetic to the brand. Known for its clean lines and legibility, Helvetica exudes a sense of clarity, simplicity, and modernity. Its neutral appearance allows for easy readability and consistency throughout the app, enhancing the overall user experience.
Colour
The colour palette for Shippage revolves around #065C7A, a deep blue shade representing trust, reliability, and stability. This colour instills confidence and creates a sense of security as users navigate the app. Complemented by the light aqua tone of #E6F4F1, the palette adds vibrancy and tranquility, contributing to a visually engaging and harmonious user interface. The colour combination helps highlight important elements and calls to action, ensuring a visually captivating and efficient user experience.
Iconography:
The Shippage app utilises simple and direct icons inspired by real-life objects. These icons are designed to be easily recognisable and relatable to users, enhancing the app's usability. By incorporating familiar references, the icons communicate their intended actions or features in a clear and intuitive manner. The simplicity of the icons ensures legibility, even at small sizes, providing a clean and uncluttered visual representation for seamless navigation and interaction within the app.
High Fidelity Prototype:
The high fidelity prototype for Shippage, created using Figma, showcases the visually refined and interactive experience of the app. With attention to detail in typography, colour, and iconography, the prototype accurately represents features like rate searching, quote generation, shipment booking, tracking, and logistics management.