Anonymous - Nov 2023 to Apr 2024
NDA BOUND
Redesigning Logistics Portal for 500k+ users.
Redesigning Logistics Portal for 500k+ users.
Redesigning Logistics Portal for 500k+ users.
COMPANY
NDA Bound
NDA Bound
MY ROLE
Visual/UI Designer
Visual/UI Designer
TIMELINE
6 Months
6 Months
RESPONSIBILITIES
UI & interaction Design
UI & interaction Design
Design System
Design System
OVERVIEW
Enhancing the digital experience of the Logistics Portal by improving its User Interface and aligning it with the new UX design to create a seamless and enjoyable experience for the users.
Enhancing the digital experience of the Logistics Portal by improving its User Interface and aligning it with the new UX design to create a seamless and enjoyable experience for the users.
This project also involved building a robust Design System from the ground up, especially ensuring the components were compatible with the IDE used by developers for this WebApp and other client’s portals. This upgrade was designed to boost efficiency and to create a scalable system adaptable for the future enhancements and development affecting over 500k+ users.
This project also involved building a robust Design System from the ground up, especially ensuring the components were compatible with the IDE used by developers for this WebApp and other client’s portals. This upgrade was designed to boost efficiency and to create a scalable system adaptable for the future enhancements and development affecting over 500k+ users.
The restrictive development environment made it even more challenging yet exciting. Striking the right balance between the needs of the development and the design team was a fun and valuable learning experience.
The restrictive development environment made it even more challenging yet exciting. Striking the right balance between the needs of the development and the design team was a fun and valuable learning experience.
Problems found during UX Audit
Problems found during UX Audit
Logistics Portal is a platform which facilitate the buyer - supplier collaboration business processes, though feature-packed, but it fails to deliver a smooth experience for the users.
Logistics Portal is a platform which facilitate the buyer - supplier collaboration business processes, though feature-packed, but it fails to deliver a smooth experience for the users.
Few of the issues were –
Few of the issues were –
Poor information hierarchy, confusing task flows
Cluttered, data-heavy interface
Key features hard to access
Poor information hierarchy, confusing task flows
Cluttered, data-heavy interface
Key features hard to access
Users encounter difficulty navigating the platform
Lacking a simplified UI
Lacking a consistent design system
Users encounter difficulty navigating the platform
Lacking a simplified UI
Lacking a consistent design system
Portal’s User Experience & User Interface before redesign
Portal’s User Experience & User Interface before redesign
UX foundation for the UI
UX foundation for the UI
The UX team and I established a strong foundation for the UI design. Although the dedicated UX team conducted the research, interviews, and analysis, I was involved from day one, contributing to the overall user experience. For the UI phase, the following were the key deliverables –
The UX team and I established a strong foundation for the UI design. Although the dedicated UX team conducted the research, interviews, and analysis, I was involved from day one, contributing to the overall user experience. For the UI phase, the following were the key deliverables –
Research
Competitive Analysis
Competitive Analysis
Competitive Analysis
User Personas
User Journey
Mind Map
Information Architecture
Navigation System
Navigation System
Navigation System
Wireframes
What was My approach
What was My approach
Now I have all the research from the UX team, but now what?
Now I have all the research from the UX team, but now what?
So, I began by understanding the needs of both the client and users. I created a mood board and went through multiple design iterations, particularly for the side navigation and top bar. This back-and-forth process lasted about a week, as we refined the design to align with business requirements. Ultimately, we had to settle on a solution that balanced functionality and visual appeal, even if it wasn’t the ideal choice but had to go with it due to specific business constraints.
So, I began by understanding the needs of both the client and users. I created a mood board and went through multiple design iterations, particularly for the side navigation and top bar. This back-and-forth process lasted about a week, as we refined the design to align with business requirements. Ultimately, we had to settle on a solution that balanced functionality and visual appeal, even if it wasn’t the ideal choice but had to go with it due to specific business constraints.
Here’s the final mood board along with the side nav and top bar –
Here’s the final mood board along with the side nav and top bar –
Okay but now you might be thinking that I just mentioned that I had to work on multiple options, so where are they?
Okay but now you might be thinking that I just mentioned that I had to work on multiple options, so where are they?
Discarded side and top bar iterations
Discarded side and top bar iterations
Key Use Case & IA
Key Use Case & IA
Key Use Case – Supplier Portal
Key Use Case – Supplier Portal
Information Architecture – Supplier Portal
Information Architecture – Supplier Portal
Fixing the design system
Fixing the design system
Challenges –
Challenges –
The portal’s existing design was heavily reliant on the outdated OutSystems Design System, which presented several obstacles:
The portal’s existing design was heavily reliant on the outdated OutSystems Design System, which presented several obstacles:
Outdated Design System
Inconsistent User Interface
Complexity in Developer Handoff
Outdated Design System
Inconsistent User Interface
Complexity in Developer Handoff
Accessibility Gaps
Brand Alignment
Stakeholder Alignment
Accessibility Gaps
Brand Alignment
Stakeholder Alignment
Research and Benchmarking –
Research and Benchmarking –
The goal was to identify gaps in the existing OutSystems Design System and adopt best practices to create a contemporary, user-friendly solution.
The goal was to identify gaps in the existing OutSystems Design System and adopt best practices to create a contemporary, user-friendly solution.
Assessing the OutSystems Design System
Competitor Analysis and Benchmarking
Assessing the OutSystems Design System
Competitor Analysis and Benchmarking
User-Centric Research
Setting the Foundations
User-Centric Research
Setting the Foundations
Approach –
Approach –
I adopted a structured approach centered around canonical modelling.
I adopted a structured approach centered around canonical modelling.
Leveraging the Canonical Model
Collaboration Across Teams
Modernizing Components
Leveraging the Canonical Model
Collaboration Across Teams
Modernizing Components
Building for Scalability
User-Centered Iteration
Alignment with Brand and Accessibility Standards
Building for Scalability
User-Centered Iteration
Alignment with Brand and Accessibility Standards
What was the result
What was the result
Apart from the Logistics Portal, we were able to implement the new design system into a new product that was under development, that targeted over 100k internal users. This Design System also allowed the client to implement it into multiple existing company’s portals with user base of over 1m.
Apart from the Logistics Portal, we were able to implement the new design system into a new product that was under development, that targeted over 100k internal users. This Design System also allowed the client to implement it into multiple existing company’s portals with user base of over 1m.
Total Users
Total Users
500k+
500k+
Future Users
Future Users
1m+
1m+
Boost
Boost
40%
40%
Final Design
Final Design
Conclusion and takeaways
Collaborating on the redesign of intricate supplier portals broadened my problem-solving abilities. By creating a comprehensive design system, I demonstrated leadership, guiding clients through UI strategies and implementation.
Collaborating on the redesign of intricate supplier portals broadened my problem-solving abilities. By creating a comprehensive design system, I demonstrated leadership, guiding clients through UI strategies and implementation.
Navigating the complexities of a large-scale enterprise environment taught me to balance user needs with organizational goals, ensuring consistency and scalability. This project reinforced my belief in the power of design systems to drive impactful user experiences while meeting tight deadlines and delivering measurable results across diverse teams.
Navigating the complexities of a large-scale enterprise environment taught me to balance user needs with organizational goals, ensuring consistency and scalability. This project reinforced my belief in the power of design systems to drive impactful user experiences while meeting tight deadlines and delivering measurable results across diverse teams.
🔒 Confidentiality Note
Due to confidentiality, product names, metrics, and internal details have been intentionally abstracted. The work shown focuses on structure, decisions, and outcomes without exposing sensitive information.
🔒 Confidentiality Note
Due to confidentiality, product names, metrics, and internal details have been intentionally abstracted. The work shown focuses on structure, decisions, and outcomes without exposing sensitive information.
🔒 Confidentiality Note
Due to confidentiality, product names, metrics, and internal details have been intentionally abstracted. The work shown focuses on structure, decisions, and outcomes without exposing sensitive information.