Vanderlande
Project Case Study at frog
CONTEXT
Vanderlande is a leader in logistic process automation, focused on warehousing, airports and parcel sectors.
They partnered with frog to design and deliver the best in class warehousing experience. Their warehousing solutions are the first choice for many of the largest global
e-commerce players and retailers in food, fashion and general merchandise across the globe.
ROLES
Visual Design
Design Systems
Illustrations & Iconography
Prototyping
TEAM
Program Manager
Design Lead
Interaction Designers
Visual Designers
DURATION
12 Months
THE ASK
Design an end-to-end solution warehouse management system with a special focus on production managers and inventory planners.
APP 1
Monitor and Control
Provides valuable insights for the users to initiate an action and monitoring the chores.
APP 2
Planning
Enables distinct system visualization through transparency of tasks and progress.
APP 3
Workstations
Delivers seamless experience in performances and helps to identify and report issues.
MY ROLE
I came aboard the project halfway through, six months into its development, contributing as part of the visual design track. Our process involved receiving wireframes from the UX team and handing off high-fidelity designs to the Dev team.
Visual Design
screens each Sprint
-
Consistent look and feel across screens
-
Data Visualization and conceptualizing components
-
Manage Backlog
Illustrations & Iconography
-
Set of 28 Customized Icon
-
Set of 32 Touch Screen Illustrations
-
Error State Illustrations
-
User Testing with Vanderlande staff
Prototyping
-
Rapid prototyping to show flows and loader states
Building the
Design System
-
DLS Alignment and Scope of Expansion
-
Governance of 2 Design Systems: Universal & Product specific
-
Creating Guidelines
Challenges
Faced
CHALLENGES FACED BY THE VISUAL DESIGN TEAM
Library Discrepancies
​Governance of 2 Design Language Systems - one global for Vanderlande and one internal for this project, spanning across the 3 apps.
Equipping the entire team to leverage the Design System
The visual design track created detailed guidelines to empower the entire team (frog + Vanderlande designers) to start leveraging DLS components.
Domain
Knowledge
Understanding key concepts from the screens that were handed over to us for Visual Design was essential for us to visualize screens.
Designing for Touch Screen
For the Workstation Application, the we had to modify the Design System, keeping in mind varying touch targets for employees in warehouses.
Approach
PROCESS
Design & development process
The team followed a proven process to move from research to continuous delivery.
KEY INSIGHTS
Micro-moments matter
Even a minor improvement on the physical/digital touchpoint that can increase the shipping speed will add immense value to the overall efficiency of the warehouse.
Learning curve
Operators perform jobs in various workstations. Adapting to new workstations and their tools will be critical for maintaining efficiency and completing tasks promptly.
Work fatigue
Information overload, and lack of emotional connection to the tools and systems lead to burnout and a high retention rate.
Complex situation
Warehouse configuration itself is a complex setup that works cohesively with machines and humans. We have seen multiple screens with various functionalities and information in the control room, and clear visual guidance seems missing in this complex situation.
Variable conditions
The users have various digital touch-points placed under varying conditions such as lighting, temperate, and orientation. We also noticed that some operators use screens more intensely than others.
Duality of control
Currently, the UI is an extension of the machine and the operator an extension of the UI. Operators end up in a situation where they are almost forced not to think. On the other hand, the operator has to coordinate clear actions based on information from the machines.
DEFINING SUCCESS
Success for Vanderlande means to gain a competitive edge as they shift from traditional enterprise applications into a consumer-grade experience.
Scalability matters
Scalability and cohesiveness across its suite of products were critical. Leveraging and expanding Gravity unified the experience across Vanderlande’s applications.
Time to Market
Delivering the MVP to end customers within the committed time frame was considered a success.
VISUAL DESIGN APPROACH
Detail Design
Quick iterations combined with potential users as well as stakeholder validation sessions helped the team move faster. Alignment with the development team and backend team enabled us to design the product by keeping feasibility in check. One of the critical aspects of detail design was to inculcate the culture of leveraging the Design System and looking for a scalable solution rather than just focusing at a specific page or a module.
DETAIL DESIGN
Creating a holistic Design System to deliver cohesive and scalable product experiences
BEFORE
We quickly recognized that Vanderlande’s fragmented design system was in no shape ready for anyone to use. We developed a foundation design language in Adobe XD. Once they acquired a Figma licence, we spearheaded the migration process and continued to develop a robust design system that was scalable and ready to use for development and other product teams at Vanderlande.
AFTER
BUILDING COMPONENTS & VARIABLES
Creating simple and complex components to ensure uniformity across screens and to efficiently track changes.
GUIDELINES
Creating comprehensive guidelines to use and edit components
-
Our objective was to enable fellow designers within the team to incorporate components while making initial concept sketches and wireframes that they would handover to the visual design team.
-
We aimed for a seamless transition during the end of our project, ensuring the Vanderlande design team could take over and continue desiging the product while maintaining the established quality of work.
DATA VISUALIZATION
ILLUSTRATION STYLE
A combination of isometric & 2D flat illustrations.
ILLUSTRATION SET
ICON STYLE
A combination of isometric & 2D flat icons.
The icon set comprised generic icons adapted from the Material Icons library, with modifications.
Additionally, we designed icons tailored specifically to the warehouse environment from scratch. These icons went through multiple iterations based on user testing and feedback from Vanderlande staff.
PRODUCT DELIVERABLES / APP 1
Monitor
and Control
Provides valuable insights for the users to initiate an action and monitoring the chores.
APP 1 / MONITOR AND CONTROL
ALERTING / ISSUES
Proactive alerting system to keep users up to date
The issues feature is a logical grouping of proactive alerts made available for the users. It is supported by quick filters and sortation techniques.
PRODUCT DELIVERABLES / APP 2
Planning
Enables distinct system visualization through transparency of tasks and progress.
APP 2 / PLANNING
STORAGE AND BUFFERS
Provides a bird eye view of the entire warehouse storage area
The storage and buffer dashboard visualises both available and occupied spaces for the entire warehouse area.
PRODUCT DELIVERABLES / APP 3
Workstation
Touch screen
Delivers seamless experience in performances and helps to identify and report issues.
App 3 / WORKSTATION TOUCH SCREEN
CLEARING
Helps to eliminate hazards and improves building quality
This housekeeping protocol is designed to improve the overall quality of the actual building by eliminating hazards and maintaining a clean and safe environment.
Outcomes
IMPACT
Program Outcomes
3
PRODUCT DELIVERABLES
12 months of program we delivered the best in class digital warehouse platform experiences for 3 distinct products.
4
INCREMENTAL RELEASES
Within the program, our initiatives were distributed across different releases which we successfully completed over the span of 1 year.
2
DESIGN SYSTEM + RECIPE SETUP
We helped Vanderlande create and maintain a global design library to ensure a unified experience across all products.
