Dragana Veselic, Product Designer

Overview

GRUBER Logistics challenged teams to automate the process of arranging transport with external suppliers when no in-house vehicles are available. The manual process involved dozens of daily calls, where employees had to consider supplier availability, location, pricing, and performance, often under tight time pressure and across language barriers.

Our DigitalCube team, myself as the sole UX/UI designer, one frontend developer, and one backend developer, created RouteBOT AI: an AI Price Tender Bot that acts as a virtual dispatcher, efficiently handling supplier communication and price tendering in the suppliers' native languages.

My Role

I was the sole UX/UI designer on the team, responsible for all UX decisions, interaction design, UI execution, the design system, the new logo, and the pitch presentation. All within a 24-hour hackathon timeframe, in constant collaboration with the frontend developer and the backend developer, providing Figma mockups and interaction flows throughout the event.

UX Design

User flows

Wireframes

Interaction design

UI Design

Design system

Hi-fi mockups

Logo design

Delivery

Dev handoff

Figma flows

Pitch deck

The Challenge

When GRUBER Logistics has transport orders but no available vehicles in a particular region, their employees must manually reach out to external suppliers, making dozens of phone calls every day to arrange transport.

During these agreements, the location of the supplier, their performance, and price are all taken into account. That work requires a lot of manpower and time. The company needed a faster, more efficient way to identify, evaluate, and contact reliable suppliers across Europe, minimising risk and human effort.

schedule

Time is critical

Sometimes timing plays a very important role, because the customer can charge penalties if the transport is not carried out on time. Any delay in organising transport can result in direct financial consequences for GRUBER.

translate

Language barriers add further complexity

As a multinational company that operates throughout Europe, GRUBER's teams often encounter language barriers that can complicate and slow down supplier communication. Automating the process would greatly improve supplier selection and speed up the purchase of transport.

tune

Design constraints I faced

I had to make fast, informed design decisions with only a limited understanding of the logistics process, which meant asking the right questions early and simplifying complex actions into intuitive user flows. With no time for in-depth user research or persona development, every choice was based on assumptions, logic, and a strong focus on usability. I also had to quickly understand the technical requirements, API structure, and business context, and translate all of that into a clear, usable interface.

Instead of building unnecessary features, I focused on the chatbot's core functionality that the developers could create in the short time available: input, language, suggestion, and conversation. The goal was to prove the concept worked and could provide real value.

Users

GRUBER Logistics employees responsible for arranging transport with external suppliers across Europe. They work under significant time pressure, dealing with supplier availability across multiple countries, language barriers, and the constant risk of customer penalties for late shipments.

These users need to move fast. They don't have time to navigate complicated tools, they need a system that reduces their workload, not one that adds to it.

Research & Discovery

Given the 24-hour format, traditional discovery was not possible. Instead, it was compressed into fast alignment with the business problem, the client's brief, and the technical team's capabilities.

Key questions I needed to answer quickly:

help

Core task

What is the core task the chatbot must accomplish?

help

Dispatcher needs

What information does a dispatcher need to evaluate a supplier?

help

Languages

What languages need to be supported, and how should the language selection work?

help

API limits

What does the developers' API structure actually allow within the timeframe?

help

Minimum flow

What does the minimum viable flow look like, from start to finish?

Understanding the challenge brief deeply was the first design tool I had. GRUBER's real-world problem was clear: the manual, phone-based process was too slow, too dependent on individual employees, and too vulnerable to language mismatches and time delays.

The focus was ruthlessly on the chatbot's core functionality: input, language selection, supplier suggestion, and conversation flow. Every feature idea that went beyond that was set aside.

Problem & Goal Statement

That compressed discovery sharpens into a precise statement and a clear goal to design against.

Problem Statement

personWho: A GRUBER Logistics dispatcher who needs transport arranged when there are no available vehicles in a region.

checklistNeeds: To identify, evaluate, and contact reliable suppliers across Europe fast, without dozens of manual calls and language barriers.

report_problemBecause: Time is critical, delays risk financial penalties, and multinational operations mean frequent language barriers.

Goal Statement

flagGoal: Prove, within a 24-hour hackathon, that an AI Price Tender Bot could replace the manual calling process.

task_altSuccess looks like: The chatbot’s core functionality, input, language, suggestion, conversation, working as a real, tested prototype in the time available.

Key Decisions

translate

Language-first interaction

The chatbot introduces itself in the supplier's preferred language from the very first message. This was not a nice-to-have, it was a core design requirement. GRUBER operates across Europe, and language mismatches slow down exactly the communication this tool was built to accelerate. Making language selection a first-class part of the interaction meant every supplier conversation could proceed smoothly regardless of country.

center_focus_strong

Minimal, focused UI

With only 24 hours, I resisted the temptation to add complexity. The interface has one clear job: dispatch a transport request through a natural, guided conversation. Every element had to earn its place. Features or UI elements that didn't serve the core task were cut without hesitation.

support_agent

Simulating a human dispatcher

The conversation flow was carefully structured to mirror what a real GRUBER dispatcher would say and ask: introducing the request, checking availability, discussing pricing, and confirming the arrangement, all in the supplier's language, all without a human having to place a call.

widgets

Core functionality scope

The four pillars of the interface were: input (the transport request details), language (the supplier's preferred language), suggestion (which suppliers to contact based on location and performance), and conversation (the actual chatbot exchange). Staying inside this scope made the product coherent and completable within the timeframe.

palette

Design system and brand alignment

Creating a lightweight design system, even under extreme time pressure, was a deliberate choice. It ensured consistency across every screen, made developer handoff faster, and gave the product a visual identity that felt credible when presented to the judges. The logo and pitch presentation were designed as part of the same effort.

The Solution

Our solution, RouteBOT, was designed to transform a slow, manual logistics process into an automated, intelligent system. The goal was to help GRUBER Logistics respond faster and more efficiently when they receive transport orders in locations where they don't have available vehicles.

The flow, start to finish

The dispatcher enters the shipment: loading and unloading locations, dates, and a maximum price.

RouteBOT turns it into a structured tender and opens the conversation with the best-matched suppliers.

It negotiates on price in the supplier’s own language, and explains why it chose them, here a Belgrade supplier with a performance score of 8.

forum

Chatbot conversation design

A key feature of the RouteBOT AI Price Tender Bot was its ability to facilitate a natural, efficient conversation between the chatbot and suppliers. This conversation was designed to simulate the role of a human dispatcher, gathering and exchanging vital information in real time.

language

Language-first communication

The chatbot's conversation with the supplier begins by introducing itself in the supplier's preferred language. This was essential to overcome language barriers, especially since the company operates in multiple countries across Europe. The bot's language capability was flexible and adaptive, ensuring smooth communication regardless of location.

handshake

Tight developer collaboration

Throughout the process, I worked closely with the developers to ensure the design could be implemented quickly and accurately. I provided them with Figma mockups and interaction flows with constant support. The developers implemented the designs directly into a working interface, with real-time updates pushed to GitHub, which allowed us to test and refine the working build during the event, not just static mockups.

design_services

Design system under time pressure

Even within the tight constraints, I managed to create a minimal, modern, and lightweight design system, along with a new logo and pitch presentation. The visual style aligned with GRUBER's brand identity, giving the entire product a professional and trustworthy appearance.

The entire design and implementation cycle, from first wireframe to working prototype, happened in a single overnight session.

Outcome

Working closely with the development team, I designed the core functionality of the interface within the 24-hour hackathon timeframe.

The developers implemented the designs directly into a working interface, with real-time updates pushed to GitHub, allowing us to test and refine the actual product during the event. This included the key feature: an AI Price Tender Bot that simulated conversations with suppliers, checking vehicle availability, negotiating prices, and overcoming language barriers.

What's shown here is the negotiation working as scripted for the demo. A supplier who declines, misunderstands, or replies off-script is a real scenario the 24-hour build didn't get to design for, see Learnings below.

RouteBOT AI team working at the GRUBER Logistics Challenge, NOI Hackathon 2024

RouteBOT AI team at the GRUBER Logistics Challenge, NOI Hackathon 2024

Despite the time pressure and sleepless nights, the result was a solution that solved a real problem for GRUBER Logistics and won first place in the GRUBER Logistics Challenge. It showed real potential to save time and reduce operational stress for GRUBER's logistics teams.

RouteBOT minimises delays, reduces the risk of penalties from late shipments, and significantly cuts down the manual workload for GRUBER's teams.

emoji_events

1st

Place at NOI Hackathon

bolt

Full design + build time

group

Person team, one designer

What I Learned

Pressure sharpens decisions. This experience significantly contributed to my growth as a designer, specifically my ability to solve challenges and problems rapidly, manage time effectively, make the right decisions under pressure, and collaborate closely with developers to transform a concept into a functional product.

Problem framing matters most when the clock is running. The biggest lesson was about the value of fast, focused problem framing. When time is limited, the most important thing a designer can do is deeply understand the core problem and resist everything that doesn't serve it. Clear problem framing is the most valuable thing a designer can offer when the clock is running.

Design is communication, not just visual output. Working in a hackathon environment, with real client requirements, real judges, real developer constraints, and a hard deadline, also reinforced how much design is about communication and prioritisation, not just visual output. The design system, the logo, the Figma flows, and the pitch presentation all had to work together as a cohesive whole. That only happens when the designer is deeply embedded in the team and the process, not working in isolation.

What I'd do differently

RouteBOT was designed and built in 24 hours, so decisions were based on logic and quick assumptions rather than real user research. With more time, I'd validate the AI Price Tender Bot flow with real dispatchers and suppliers, design for the messy edge cases a live negotiation creates (a supplier who declines, misunderstands, or replies off-script), and pressure-test how the system communicates trust and control when an AI is negotiating on the company's behalf.