Groupage TMS System
Client:
Logichainge
Role
Front-End Developer
UX Designer
Duration
5 months
Type
SaaS Platform
Tech
Overview
Logichainge's SaaS platform intends to automate and streamline
the order process for logistics service providers. The platform
addresses the increasing administrative burdens experienced by
logistic companies, allowing planners to add value for
customers. With a self-learning module, the system enables fast
order entry regardless of the customer's preferred method (email and/or any attachment).
As part of this platform, Logichanige entrusted me the task of designing and developing their Groupage Transport Management System (TMS) module. The project involved designing and developing various elements, such as front-end flow, wireframes, final designs, integration with back-end API endpoints, and delivering high-quality, scalable code.
Visit Logichainge's website

Challenge
The challenge of this project lies in automating and
streamlining the existing manual process of managing the
Groupage TMS.
By consolidating the various
processes and approaches currently used by different customers
into one generic process within the platform, Logichainge aims
to provide logistics professionals, such as consolidators or
forwarders, with a more automated and efficient solution.
Key
challenges:
- Understanding the current manual processes and approaches used by different logistics professionals.
- Balancing the need for automation with the flexibility to accommodate various order entry methods and formats.
- Designing a user-friendly interface that accommodates the multi-lingual capabilities of the AI models and provides a consistent experience across different screens.
- Coordinating with the ICT student responsible for delivering the back-end and API endpoints to ensure smooth integration and compatibility.
- Incorporating customer/stakeholders feedback and iterating on the designs to meet the specific needs and preferences of logistics professionals.
- Ensuring code quality, readability, and scalability for the long-term maintenance and future enhancements of the Groupage TMS System.
Process
The Groupage Transport Management System (TMS) project within Logichainge SaaS platform aims to automate and streamline the management of the groupage transport system for logistics professionals such as consolidators and forwarders. The existing problem identified by Logichainge is the lack of ICT support for simple tasks like shipment assignment and the inconsistency in processes and approaches to groupage management. As a UX designer and front-end developer, my role is to design and develop the front-end flow, wireframes, and final designs, as well as integrate the front-end with the back-end API endpoints.
Development Process
-
1 Research
Conduct a "MoSCoW" analysis to prioritize project elements based on their importance and feasibility. Perform analytics research to identify efficient user interactions and align the product with the overall Logichainge platform. Utilize secondary research to gain industry insights and understand client needs.
-
2 Empathize & Define
Conduct user interviews with the client to understand their requirements and pain points. Use the gathered information to define the scope, goals, and user stories for the project.
3 PrototypeCreate wireframes and design concepts in Figma, considering the existing Logichainge platform's overall design. Validate and fine-tune the designs based on feedback from customers and stakeholders. Iterate on the designs until a satisfactory solution is achieved.
4 DevelopmentBuild the front-end pages using Vue.js, adhering to good coding practices, readability, and scalability. Collaborate closely with the back-end developer who will deliver the back-end and API endpoints. Integrate the front-end with the provided API endpoints, ensuring seamless data flow and functionality.
5 TestingConduct usability testing to identify and address any design flaws, improve user interaction, and ensure the product meets the client's needs. Perform comprehensive testing of all front-end pages to ensure proper functionality across different devices and browsers.
6 CompletionDeliver a high-quality, well-documented product that meets the requirements outlined in the project scope. Ensure the codebase is maintainable and scalable, adhering to industry best practices.
7 ReflectionReflect on the project and identify areas for improvement. Document the lessons learned and apply them to future projects.
0Problem analysis
orientation1Research2Empathize & Define3Prototype4Development5Testing6Completion7Report
Evaluation
Goals
The goals for the Groupage TMS system within Logichainge SaaS platform have been set to address the identified problem of lacking ICT support for Groupage management and the need for automation and streamlining in the logistics industry. These goals directly impact the project by guiding its design and development.
They are aimed at revolutionizing the logistics industry by providing a unified and efficient process for managing Groupage transport. By automating manual tasks, streamlining user experience, and integrating advanced features, this project aims to simplify logistics professionals' workflow, reduce administrative burdens, and enhance operational efficiency. Through scalability, integration, analytics, continuous improvement, and comprehensive documentation, this project will establish a future-proof system that meets evolving industry needs and promotes knowledge sharing for sustained growth.
Short Term
Consolidation:
Create a unified and generic process for managing the groupage transport system within the Logichainge platform. This involves understanding the different existing processes used by clients and streamlining them into a single efficient workflow.
Automation:
Develop automated features that eliminate the need for manual tasks in the groupage transport system. This includes automating order processing, tracking, and documentation, reducing the reliance on manual labor.
Streamlined User Experience:
Design and implement a user-friendly interface specifically tailored to logistics professionals using the groupage transport system. The system should be intuitive, easy to navigate, and provide relevant information at each step of the process.
Efficient Order Entry:
Enhance the order entry process by integrating the self-learning module from the SaaS platform. Enable fast and accurate order entry regardless of the order source, such as email or attachments. This should minimize the time and effort required for logistics professionals to input order details.
Long Term
Scalability:
Ensure the developed Groupage TMS System can handle a growing number of clients and increased order volumes. The system should be scalable, capable of accommodating a large customer base without sacrificing performance.
Integration:
Enable seamless integration of the Groupage TMS System with other logistics systems and platforms used by clients. This includes integrating with third-party logistics providers, payment gateways, and other relevant systems to create a comprehensive logistics ecosystem.
Advanced Analytics and Reporting:
Implement advanced analytics capabilities within the Groupage TMS System to provide valuable insights and reporting functionalities. This allows logistics professionals to make data-driven decisions, optimize routes, analyze costs, and improve overall operational efficiency.
Continuous Improvement:
Establish a feedback loop with customers and actively incorporate their input to enhance the Groupage TMS System. Continuously refine and fine-tune the system based on customer feedback, evolving industry requirements, and emerging technologies.
Documentation and Knowledge Sharing:
Develop comprehensive documentation for the Groupage TMS System, including user guides, API documentation, and technical references. This promotes knowledge sharing, facilitates system maintenance, and ensures the system is well-documented for future updates and enhancements.
Research
Introduction
The research phase aims to gather valuable insights to inform the design and development of the project. It involves various research methods and techniques to ensure a successful outcome. In order to understand the industry, the transport system and the short-comings of this type of TMS, we conducted extensive research across the multiple elements that conceptualize this kind of project.
In the below sections you can find the research questions that rised during the our investigation and the methods and techniques used to gather the necessary information for the project. This questions helped us shape the base of not only our research, but also the design and development of the project, since encapsulating the needs, problems and solutions for this project into one sentence allowed us to be more productive and efficient in our work.
Main Research Question
How can Logichainge design and develop an efficient and automated Groupage Transport Management System (TMS) module within their SaaS platform?
Subquestions
- What are the key functionalities required for the Groupage TMS module?
- How can the front-end flow of the groupage functionality be designed to ensure a seamless user experience?
- How can customer feedback be collected and utilized to validate and fine-tune the designs of the Groupage TMS module?
- How much information does this page handle on a daily basis?
- How does the user imagine the ideal process of making a groupage order on a software application? Which part of the process is the most important for automation?
- What relevant and personalized information/data could be implemented in this module?
Research Methods
Here we see the different research methods utilized in order to achieve a better understanding of the different elements comprised in this endevour and what we could do with and for the Groupage Transport System, the logistics industry and Logichainge's SaaS platform. The methods used are:
- MoSCoW Analysis: Prioritizing project elements for efficiency.
- Competitive Analysis: Identifying competitors and analyzing their strengths and weaknesses.
- Analytics Research: Identifying optimal user interactions and time-efficiency.
- Secondary Research: Understanding the industry, client, and problem-solving needs.
- Usability Testing: Identifying design flaws and usability issues.
- User Interviews: Understanding the client's needs and gathering insights.

MoSCoW - User Research
In this document we have identified the different features that are required for the Groupage TMS system. We did this by utilizing both Persona and User Story to create a proper project plan. We categorized the features into two groups: Must Have & Should Have. This categorization is based on the MoSCoW analysis technique, which is used to prioritize project elements for efficiency. The Must Have features are essential for the system to function properly and are therefore the highest priority. The Should Have features are important but not critical, while the Could Have features are desirable but not necessary. The Won't Have features are not included in the project scope and will not be implemented.

Competitors Research
This was done by analysing the competitors websites and applications, and then comparing them to each other. We did this in order to establish what the best and worst elements of the competitors were, and then to use this information to improve the design of the Groupage TMS system.

Groupage Research
This research was aimed at identifying optimal user interactions and time-efficiency. We did this by conducting an interview to gather information about the user's experience with the Groupage TMS system. The results of the interview were then analyzed to identify the optimal user interactions and time-efficiency.

Groupage Research
With this research we aimed to get a better understanding of the industry at hand as well as the specifics of what involves a Groupage transport system process. Understanding the key points of what makes Groupage transport a viable option for many companies was a key element in the research process. Logistics industry is a vast array of terms, methodologies and processes that are constantly evolving and changing, hence, understanding its flaws and strenghts helped us determine the best route of action to start our project.

TMS-T&T Research
With this document we wanted to showcase what were the key elements involving TMS systems, what makes it work, what are their flaws and how can we improve from them.

User Research
With this interview we wanted to understand the client's needs, their necessities within this system. We did this by asking questions about their experience with the Groupage TMS system, what works for them and what needs/can be improved.

Design Phase
Introduction
The design phase of the Groupage Transport Management System (TMS) module aimed to create a streamlined and automated solution for logistics professionals. This phase involved various key elements, including sketches, wireframe design, and an interactive prototype. Approaching the design phase after our research was completed was imperative in order to start working on the main ideas we had in mind. We wanted to create a system that was easy to use, that was intuitive and that could be used by anyone, we were aware of our target audience and realised the short-comings of trying to integrate a new techonology into such a manually labored process within the logistics industry.
Creating a user-friendly, easy to use and built for skilled professionals was the goal of our design, which meant integrating both a professional look and conservative design with a modern and intuitive interface. By automating the administrative process of the Groupage TMS system, we are aiming to increase productivity for our users as well as standarize a more cohesive management of the Groupage Transport System.
Sketches
Sketches were created as a foundation for the design phase. They served as initial representations of the module's layout and functionality. Take a look at the sketches below to get an idea of the early design concepts:
Wireframes
Detailed wireframes were created using Figma to showcase the main features and functionalities of the Groupage TMS module. These wireframes underwent iterative improvements based on feedback from stakeholders. Take a look at the wireframes below:
Interactive Prototype
Try it!An interactive prototype was developed to showcase the design and user flow within the module. The prototype underwent rigorous evaluation and refinement based on stakeholder feedback. Explore the evolution of the prototype below:
User Flow & Feedback
As the prototype was growing, so did the user flow for it. As stated before, our idea was to creat a and easy to use module that allowed our users to easily complete their tasks with minimal effort. Making it intuitive meant that the user flow needed to be cohesive and have a clear learning curve. We needed the user to feel that the system was built solely for them, that A to B was the path they were following, even if that meant going through C and D. The user is in control and that is how they should feel while using our system.
Feedback was received after user testing with stakeholders within Logichainge. The prototype underwent numeruous changes due to this and industry research. Many of the changes integrated in the final prototype were implemented into the PoC in development.
Development Phase
Introduction
Vuejs
Python
Django
Vuetify
The development phase focuses on implementing and building the project using various technologies, including Vue.js, Vuetify, Python and Django. This section outlines the different sprints and tasks completed during the development phase.
Throughout the project, the team utilized technologies such as Vue.js/Vuetify for the front-end, Python for the back-end, and initially FastAPI for the API portals, later transitioning to Django. Collaboration with a back-end developer was essential for the successful integration of front-end and back-end components, as such, we decided to Follow an Agile UX approach, embracing iterative and collaborative methods to work both efficiently and steadily.
Agile Board
Sprints
For this phase of the project we divided the workflow into different Sprints and worked on them using the Agile UX method which alloed us to collaborate closelywith my colleague from the backend. Here we can see some of the tasks we worked on each Sprint and an image showcasing the progress.
Sprint 1
- Set up the Vue project base.
- Create a hard-coded version of the base project.
- Implement elements from the main Vue/Vuetify project.
- Debug the project.

Sprint 2
- Create the sidebar.
- Create a simple table in the main view.
- Create the groupage view.
- Add a button to the main page table to link to the groupage view.
- Add hardcoded mock data to the linehauls in the groupage view.

Sprint 3
- Add a donut chart to each linehaul.
- Link the donut chart to the mock data.
- Debug the donut chart.
- Make design and style changes to the groupage view.

Sprint 4
- Transfer relevant code from the old project to the new project.
- Debug any issues that arise during the transfer.
- Add ID number for linehauls into db and show in front end.
- Confirmation page design improvements

Sprint 5
- Linehauls View.
- Add Linehaul Button.
- Exceptions handling.
- Edit linehaul functionality.

Sprint 6
- Refractor Edit Linehauls page.
- Automatically filter linehauls by country.
- Improve overall designs.
- Change order status in dashboard.

Results and Impact
Logichainge's Groupage TMS module has the potential to bring significant advancements to the logistics service provider industry, revolutionize the groupage transport system, and have a positive impact on the company's future to grow in the Logistics Industry. Let's explore the impact in more detail:
Impact on the Logistics Service Provider Industry
The development of Logichainge's Groupage TMS module has the potential to bring significant advancements to the logistics service provider industry. By reducing substancially manual labor in the order process, the module aims to enable logistics companies to enhance their operational efficiency and reduce costs. This automation empowers planners to add more value to their customers by focusing on critical tasks rather than administrative burdens. As a result, logistics service providers can improve their service quality, increase customer satisfaction, and gain a competitive edge in the industry.
Impact on the Groupage Transport System
The Groupage TMS module has the potential to revolutionize the groupage transport system by introducing automation and streamlining processes. Currently, simple tasks that take cost-efficient time are manual processes, leading to inefficiencies and potential errors. Logichainge's module aims to automate these tasks, resulting in improved accuracy, reduced turnaround time, and enhanced overall operational efficiency.
Impact on Logichainge as a Company
The successful development and implementation of the Groupage TMS module can have several positive impacts on Logichainge as a company. Firstly, it allows Logichainge to position itself as an innovative and technology-driven logistics service provider. By introducing automation and leveraging AI models, Logichainge demonstrates its commitment to providing cutting-edge solutions to its clients. This enhances the company's reputation and opens doors to new business opportunities and partnerships.
Conclusion
Here I present the final thoughts on the project, lessons learned, and personal growth as a front-end developer/UX designer. Working on this project has been an insightful and increasing learning experience for me.
The Groupage TMS system project undertaken by Logichainge aims to address the lack of IT support for tasks related to shipment assignment and management within the Groupage transport system. The goal is to consolidate the various processes and approaches to Groupage management into one generic process, ultimately automating and streamlining the management of the system. This analysis will provide a comprehensive review of the project, highlighting its strengths and weaknesses based on the provided information..
Each phase of this project presented me an opportunity to grow, to evolve past my student mentality and my own mental burdens to achieve a level of understanding and professional growth that helped me deliver a product that I am proud of.
Project Reflection
Firstly, the project demonstrates a clear understanding of the problem faced by Logichainge's clients. By identifying the need for automation and standardization in Groupage transport management, the project targets logistics professionals, such as consolidators and forwarders, who seek an intuitive and efficient solution. This user-centric approach shows a strong understanding of the target audience's needs and aligns with the overarching goal of reducing manual labor and administrative burdens.
In terms of research methods, the project utilized various techniques. The "MoSCoW" analysis allowed for prioritizing the essential elements of the project effectively. Analytics research and secondary research were conducted to ensure a satisfactory user interaction and to understand the industry and client needs. Usability testing and user interviews were employed to gather feedback, identify design flaws, and validate the effectiveness of the solution. These research methods demonstrate a comprehensive and systematic approach to problem-solving, ensuring that the end product meets the requirements and expectations of the users..
The development process employed for the Groupage TMS system project follows an Agile UX methodology, which is suitable for collaborative work with the back-end developer. This iterative approach promotes continuous improvement and adaptation to changing requirements throughout the development lifecycle. The use of Vue.js for the front-end, Python for the back-end, and Django for the API portals indicates a thoughtful selection of technologies that align with industry standards and allow for scalability and maintainability.
The project timeline outlines clear stages, including research, empathizing and defining the problem, prototyping, development, testing, completion, and report/evaluation. This structured timeline ensures a well-organized workflow and provides a roadmap for project progression. Each phase corresponds to a specific set of activities, enabling effective management of resources and deliverables.
Strengths of the Project
- Thorough Research: The project employed various research methods, including MoSCoW analysis, analytics research, secondary research, and user interviews. This comprehensive approach helped to gather insights and understand the industry, client needs, and problem-solving requirements.
- Collaborative Development Process: The utilization of Agile UX methodology and close collaboration between the front-end developer and the back-end developer facilitated efficient communication, adaptability, and iterative development. This approach ensured that the project remained flexible and responsive to changes throughout the development cycle.
- Clear Design Process: The project involved designing the front-end flow, wireframes, and final designs in Figma. By validating and fine-tuning designs based on customer feedback, the project team ensured a user-centric approach to interface design and usability.
- Technology Stack: The choice of Vue.js for the front-end, Python for the back-end, and Django for API portals provided a robust and scalable foundation for the development of the Groupage TMS module.
Challenges of the Project
- Project Scope Confusion: The project encountered challenges at the beginning due to confusion regarding the project scope. This confusion could have led to delays and difficulties in delivering the expected functionalities within the given timeline.
- Client Changes: The change of the initial client added complexity to the project and may have required additional adjustments to align with the new client's specific requirements. This change could have caused disruptions and affected project continuity.
- Extensive Research Requirements: The industry's complexity and the need to understand the Groupage transport system necessitated extensive research. The abundance of components and terms to be studied may have posed challenges in achieving a deep understanding of the system within the project timeline.
- Limited Access to Similar Platforms: The project team faced limitations in researching similar tools and platforms due to paywalls. This restriction may have hindered the collection of valuable information and best practices from existing solutions in the market.
- Lack of Testing Users: The project faced limitations in testing the prototype with users outside of the Logichainge team. This limitation could have impacted the ability to gather diverse feedback and ensure the product's usability for the intended target users.
- Lack of Extensive UX Design Base: The Logichainge platform's existing UX design lacked comprehensive development, which may have posed challenges in integrating the Groupage TMS module seamlessly and consistently with the rest of the platform.
- Code Complexity: The complexity of the base code for the SaaS platform affected the development process. Improved communication from my part could have helped address this challenge, ensuring a clearer understanding of the code structure and facilitating smoother development.
- Imposter Syndrome: I experienced moments of self-doubt and imposter syndrome due to poor mental health. However, with the help of teammates and colleagues, these challenges were overcome and did not significantly impact the project's progress.
Personal Goals-Reflection
As a front-end developer and UX designer, I have learned extensively from this project. Firstly, I have gained a better understanding of the logistics industry and the challenges faced by logistics service providers. This knowledge will help me in future projects related to the logistics industry and other industries. Secondly, I have learned how to work with a back-end developer and how to communicate effectively to ensure that the front-end and back-end are aligned. Thirdly, I have improved my skills using first Figma and then Vue.js to develop a web application. This knowledge will be useful in future projects that require the use of these technologies.
At the start of the project, I set several personal goals, and a majority of them were achieved successfully. The goals to improve JavaScript skills, work further on Vue.js, and enhance Figma skills were met, contributing to my professional growth and aligning with the project's requirements.
However, the goal to understand and motivate myself better in the workflow of a project was not fully achieved. Despite seeking project management positions as a personal long-term goal, I still struggled with self-motivation and complacency during the semester. This presents an opportunity for further personal development and self-reflection to enhance motivation and work ethics.
Additionally, the project provided an opportunity to improve time management skills, implement a routine, and develop effective professional iterations. These goals were successfully accomplished, leading to improved productivity and the ability to manage tasks more efficiently.
Final Thoughts
This project aimed to address the challenges faced by logistics service providers using the Groupage transport system. Through thorough research, a collaborative development process, and a clear design process, the project demonstrated several strengths. However,several challenges were encountered, which did not hinder the overall development of the product, what is more, in spite of this challenges is that the project flourished and allowed us to grow with it.
The insights gained from this project extend beyond technical skills, encompassing the importance of effective communication, adaptability, and collaboration in achieving project success. Furthermore, personal reflection on areas such as motivation and work ethics provides a valuable opportunity for continued self-improvement and growth.
Overall, the Groupage TMS system project served as a valuable learning experience, highlighting the intricacies of software development within the logistics industry. The project's outcomes and personal achievements lay a foundation for future endeavors, ensuring continued professional development and a greater understanding of project management principles.