Neto Scariot
Product & UX/UI Designer
Expanding and qualifying sales for one of the largest logistics player in Latin America, with revenue exceeding USD 500 million.
Industry: Logistics
Client: Multilog
Project: Design a logistics app and the new website
Addressing financial losses and optimizing sales for a logistics company with revenue exceeding $500 million USD.
Multilog is one of the leaders in logistics in Latin America, with strategic warehouses and specialized fleets that move the main sectors of the continent, from imported cars to delicate chemical materials.
The investment in ads is massive, but we have no results.
83% of users directed to our website remain less than 60 seconds.
This reveals a serious problem about money loss, besides wasting the value of 5 digits invested in ads; the negative website experience damages the company's image and reliability, making us lose business and potential clients.
Furthermore, Multilog has an application called Genius, which brings real-time information about the logistics of cargo for clients and agents. This application currently has low usability, despite being a tool of high competitive potential, seeing that our competitors do not possess this technology in the logistics market.
Click to read more about Multilog
POSITION
Product Design Lead
MARKET
Logistics
B2B
Class A-B
MARKET
Multilog operates in Latin America, serving over 10,000 clients with revenue exceeding USD 500 millions.
TOOLS
Figma
Miro
Google Analytics
Hot Jar
Adobe After Effects
Adobe Premiere
Dovetail
v0 AI
Marvel
TestFairy
GPT-4
Midjourney
Spline 3D
Salesforce
RESPONSABILITY
Lead the entire design process, from research to hand-off.
Conduct user interviews, manage and validate design decisions with stakeholders.
Create wireframes, high-fidelity prototypes, and a functional, responsive and comprehensive design system.
Collaborate with developers to ensure the design is implemented correctly.
Conduct usability tests and iterate based on feedback.
We invest five-digits monthly in ads that direct traffic to the website.
83% of visitors leave in less than 60 seconds.
This means we are losing business opportunities; the money invested in ads is being wasted, and the negative experience is also damaging the company's image and reliability.
83%
HIGH BOUNCE RATE
83% of visitors left in less than 60 seconds, indicating they did not engage with the content or services.
83%
LOW LEAD CONVERSION
Less than 2% of users visiting the site contact us and become leads. Only 0.04% of leads are qualified.
<99.8%
MISSED REVENUE OPPORTUNITIES
Failure to effectively present Multilog's logistics solutions, resulting in 99.8% of lost business.
74
POOR MOBILE EXPERIENCE
74% of visitors used mobile devices, but the site was slow and difficult to use on smaller screens.
Redesign the entire user experience and its respective interfaces with a consistent design system that serves both the website and Genius, our logistics app.
This will improve business scalability, ensure qualified leads, and solve our money loss problem.
After redefining our digital experience, leads now reach pages that correspond to the services they are looking for.
We developed and tested four segmented experiences of our new website: Health Hub, Distribution Center, Chemical Warehouse, and Special Transport.
-55%
BOUNCE RATE REDUCED
We reduced the number of users leaving the website in less than 60 seconds from 83% to 28%.
+7x
MUCH MORE LEADS
We increased lead capture from 2% to 14%, with 9 times more clients filling out the contact form.
12%
MORE QUALIFIED LEADS
Qualified sales leads increased dramatically, rising from 0.04% to 12%.
1.4s
SEO AND LOAD-TIME OPTIMIZED
Loading time decreased from 5.2s to 1.4s, enhancing website performance and ranking.
TIME
4 months to complete the redesign.
BUDGET
Limited resources for usability testing and developers.
technical
The final delivery must align with Genius, our logistics app, and integrate seamlessly with Multilog's existing systems for freight quotes and tracking within Salesforce.
month 01
DISCOVER
month 02
DEFINE
month 03
ideate
month 04
DELIVER
Research, discovery, and data analysis to understand and define the main problems and opportunities.
Create the new website structure, information architecture, wireframes, and design system.
Build high-fidelity prototypes based on the prioritization strategy and test them with users.
Make the necessary improvements and iterations based on feedback, conduct A/B tests, and organize the hand-off to developers.
After analyzing our data, we collected some bad metrics that clearly explain the lack of results in our ads and digital experiences.
Click to read more about Multilog
SESSION DURATION
Visitors spent an average of 47 seconds on the site.
PAGE VIEWS
Only 8% of visitors viewed more than one page.
LOAD TIME
The site took an average of 5.2 seconds to load, and 7 seconds on mobile.
NAVIGATION ISSUES
Key services were buried in the navigation. 04+ clicks to access.
CALL TO ACTION
The calls-to-action were unclear and didn’t stand out.
BOUNCE RATE
83% of visitors left within 60 seconds.
Reduce the bounce rate to less than 40%.
Improve SEO and reduce load time to less than 2.5s.
user goals
Make it easy for visitors to find key services, complete tasks quickly, and have a better overall experience.
technical goals
Ensure the website and app are fast, scalable, highly converting, SEO optimized, and accessible to everyone.
Increase the lead conversion rate to more than 5%.
At least 10% of collected leads should be qualified.
-40%
>2.5s
+5%
10%
ACHIEVED
ACHIEVED
ACHIEVED
ACHIEVED
We initiated the research phase by visiting the main units of Multilog, analyzing internal data, comparing competitor strategies, mapping key journeys, and interviewing stakeholders
BENCHMARKING
Reviewed a total of 80 companies (50 domestic, 30 international), consisting of 27 within the logistics market and 53 in related sectors.
STAKEHOLDER DYNAMICS
Prioritization dynamics led us to understand the main points of the journey from the stakeholders' perspective. Using card-sorting techniques, we defined the prioritization matrix by listing the tasks that represent the greatest impact on business objectives and results.
DATA ANALYSIS
We utilized metrics from Salesforce and campaigns from Google and Meta Ads, combining artificial intelligence tools like Snowflake, BigQuery, TestFairy, and Hotjar to collect and analyze internal data and that of our competitors.
The prototypes and heatmaps generated by v0 were the basis for defining the strategy for new campaigns and optimizing the information architecture.
USER INTERVIEWS
We interviewed 9 users and 4 potential clients from the logistics market, gathering insights and the main pain points based on the experiences of our competitors and our current website.
Later in the ideation phase, a small group of these users also participated in the iteration process on the high-fidelity prototypes.
Pain Points
User can't find what they need
To obtain the necessary information from a specific service, users had to perform more than 04 actions, yet they were still directed to an incomplete page.
CLUTTERED LAYOUT AND INFORMATION
The lack of a design system results in a cluttered layout that is not aligned with Multilog's brand guidelines, delivering a poor experience that negatively impacts the company's positioning and scalability.
PERFORMANCE ISSUES
Users perceive our website as an untrustworthy, outdated experience, with unoptimized digital elements that struggle to load, poor interactions, and counterintuitive navigation.
LACK OF TRUST
74% of users affirm that they would not close a deal with Multilog after researching our company through the current website.
Opportunities
INFORMATION ARCHITECTURE
A new information architecture with a structured sitemap will optimize usability, ensuring that tasks are completed in less time.
This way, users get what they want quickly and intuitively, and we iterate on solutions more efficiently.
DESIGN SYSTEM
Developing a consistent and comprehensive design system that can also support our logistics app will resolve our main design and interface issues, ensuring product scalability.
We are using Atomic Design to later absorb and optimize components within the system.
LOTTIEFILES AND MICRO-INTERACTIONS
Performance and SEO issues will be optimized for hand-off, using dev-friendly elements and microinteractions in Lottiefiles, bringing life to the interface in a light and dynamic way.
The integration of the ScrollReveal JavaScript library provides motion to elements without overwhelming the user with our excess information.
MAP, chatbot, big data AND VIDEO CONTENT
Multilog's impressive numbers appear animated near the first fold.
Our video collection showcases the company's dimensions, includi ng warehouses, special fleets, and border operations.
The units are visualized with an interactive map displaying key information.
Support appears in a chatbot fixed to the navigation, while interactive components compress and highlight important elements like feedback and the company's timeline.
Based on the prioritization matrix defined in the dynamics with stakeholders, and the insights obtained through data tools, we selected some journeys to map and restructure on our website.
Would you like to receive a
customized quote
for your logistics operation?
Fill out the form and wait for one of our consultants to get in touch.
Full name
Corporate email
CNPJ
Proceed
Request a quote
Fill in the details and we will contact you.
Sector
Sector
Cargo Origin
Cargo Origin
Cargo Destination
Cargo Destination
Cargo Details
Cargo Details
Mode
Air Import
Have you ever conducted import or export operations?
Yes
How would you like to receive our contact?
Back
Next
1
2
STEP #01
homepage
STEP #02
HOVER SECTION
step #03
MENU ACCESS
STEP #01
homepage
SOLVED WITH MULTI-STEP FORMS
The user enters the homepage and searches for services.
Views the section that mixes services with Genius and other info.
Finds the same cards from the homepage with shallow information.
Tries to contact to gather information but quits on the form section.
Requesting a cargo quote
STEP #01
homepage
STEP #02
ABOUT
step #03
POOR Breadcrumb
STEP #04
GOOGLE MAPS
SOLVED WITH AR MAP COMPONENT
The user enters the homepage and searches for brand information.
Enters the institutional section but cannot find the region.
Accesses units and ends up in a confusing breadcrumb.
Views the unit page with a pixelated screenshot and Google link.
Viewing Multilog's units
Contact us and get a quote.
Contact
STEP #01
homepage
STEP #02
CONTACT
step #03
EXTENSIVE form
STEP #04
NO CONFIRMATION
SOLVED WITH AR MAP COMPONENT
User enters the homepage and searches for pricing.
Accesses the contact page to request a quote.
Falls into an extensive form and fills it out partially.
Does not receive any confirmation automation.
Contacting support and the sales team
Fernando Augusto
Cargo Manager
CONTEXT
Works at a logistics company that handles the entire process for various clients and industries.
EMPATHIZE
Prioritizes fast deadlines, reduced costs, and a straightforward foreign trade process.
Patrícia Almeida
Business Owner
CONTEXT
Owns a company that imports international products from specific segments and resells them to the end customer.
EMPATHIZE
Seeks services according to the cargo, aiming for a personalized logistics operation.
José Alencar
Investor
CONTEXT
Partial owner or associate of the main clients and stakeholders that feeds Multilog.
EMPATHIZE
Builds loyalty through market differentiators that directly impact revenue.
Mariana Gil
Logistics Consultant
CONTEXT
Provides legal advice on cargo movement for clients with logistical needs.
EMPATHIZE
Desires a simplified and real-time view of the logistics process.
Business-oriented approach:
Clarifying actions and defining priorities
unique value proposition
Simplify complex logistical processes for high-value industries by offering customized solutions through a fast and objective digital experience.
UNFAIR ADVANTAGE
Promote our 360° logistics management with the Genius app and its integration with SISCOMEX. 87% of competitors do not have this technology.
key metrics
Identify critical revenue KPIs such as Cost per Lead, Quote to Close Rate, and losses due to customs delays.
Segment campaigns with high-value industries to maximize profitability. These metrics should guide our design decisions, serving as a basis for solving money loss issues.
agile and LEAN DESIGN
Define the most impactful features to design, using execution cost analysis and feasibility scorecards.
Co-creation workshops and meetings with stakeholders to ensure alignment, revealing important business points that imply reducing rework and correcting strategies even before creating wireframes.
Based on our KPIs, we defined some important directions using HMW questions and assumptions.
HOW MIGHT WE
reduce bounce rate?
The website's bounce rate is rooted in the first section of the website. We prototyped 04 hero options and validated them with stakeholders and clients before developing the entire homepage.
HOW MIGHT WE
INCREASE AND QUALIFY LEADS?
Our personas have different pains and desires, respectively related to our key services. We structured specific pages for each service/persona with step-by-step quote forms. We collaborated with the growth team to define the best questions for each type of lead.
HOW MIGHT WE
display our unfair advantage?
The biggest challenge is demonstrating our app's function in a short period of time for users to understand how this advantage works. We created a wildcard component that showcases the app interface in motion, validating its functionality in action.
HOW MIGHT WE
INCREASE AWARENESS OF OUR SERVICES?
We enhanced the service cards and reduced the journey to two steps, directing users straight to the service page related to the card, integrating all necessary information. These pages are targets of our campaigns.
Solved our information overload problem by creating a sitemap with a simplified flow and condensing less important pages into an interactive menu.
We reduced the number of actions to request quotes, contact us, view units, and explore services.
-4x
TASK EXECUTION TIME
We created a rule of a maximum of 03 actions for the main journeys.
Through new flows and optimized components, we reduced action time by more than 04 times.
-24
NUMBER OF PAGES ON THE SITE
We eliminated 24 unnecessary pages from the website.
We optimized the menu to keep this information in our experience without overwhelming the user with an extensive sitemap.
Homepage
About Us
Services
Blog
Inspections
Careers
Contact
Genius Portal
Multilog
Locations
Commitment
Culture & Innovation
Sustainability
Certifications
Integrated Logistics
Distribution Centers
Bonded Warehouses
Transportation
Border Dry Ports
Port Operations
News
Articles
Featured Stories
Inspection Services
Documentation
Our Culture
Diversity
Job Openings
Apprentice Program
Education Platform
Login
Register
Dashboard
Tracking
Digital Certificate
Shipment Status
Reports
Account Settings
Footer
Company Info
Quick Links
Newsletter
We designed 04 Hero options.
Based on the selected hero section design agreed upon with stakeholders, we developed the Homepage wireframe.
After three rounds of iteration, we defined the new structure and functionality of the main components.
Following the branding guidelines of Multilog, we created a new design system, keeping in mind that part of it would also serve Genius, our logistics app.
The goal is for it to be simple and accessible, to ensure evangelization within the internal product, development, and marketing sectors, which will continuously use this new system.
We deployed a web app with all Foundations, Figma Tokens, Guidelines, and Components, ready for use.
Users
DEVELOPERS
Structured guidelines with their respective tokens, code-ready components for easy integration, and foundation elements like effects, padding, and icons, are copied as code or SVG with just one click.
INTERNAL DESIGN TEAM
The design system is also fully integrated with Figma, and has all its elements translated into tokens and variables that are displayed on the website, along with a usage guide that instructs the best practices for layout and composition.
marketing partners
To boost lead generation, we extended the design system to campaigns. Adobe libraries standardized ad foundations, improving asset consistency and efficiency while elevating brand perception
THIRD-PARTY USERS
Our extensive chain of partners needed a reference to obtain the brand attributes to create their actions, events, and graphic pieces, without violating Multilog's guidelines. The online system allowed quick access to the design guidelines for those involved.
Composition
BRAND GUIDELINES
Multilog's branding and visual identity standards became Figma Tokens and copyable code, displayed in various sections ranging from typography to shadow effects.
UI LIBRARY
The resource library enhances the interface with cards, buttons, forms, and navigation features. Complex components like maps for cargo tracking and logistics dashboards are optimized and ready for use.
UX WRITING
The typographic hierarchy was organized into variables that have respective guidelines for each headline and body-tag created. Writing standards are being defined by the copywriting team to integrate with the system's tone of voice.
SYSTEM DOCUMENTATION
In addition to the system application being online on the web, we also created a PDF documentation that explains the importance and the decision rationale for each design system choice; this document was fundamental in the hand-off process.
Benefits
increased roi
By extending the system to all of Multilog's brand actions, we guaranteed workforce optimization, as well as the brand objectives. Events, social media, integrations, internal marketing, everything was executed with reduced time and consequently reduced cost.
BRAND STANDARDS
User reliability was one of the most important pain points; with the new design system, we positioned Multilog as the major logistics player that it is, bringing its quality standard in a creative and strategic way, enhancing every pixel related to the brand.
scalability
The standards defined in guides contained in the documentation, along with the guidelines and components, facilitate the scalability of the brand and the digital product, projecting a promising future for our competitive differentials.
REDUCED DELIVERY TIME
The task execution time was drastically reduced; we analyzed the creation period of components, landing pages, and ad campaigns. The data reveals that we take about 4 times less time to complete the designs.
Typography
Heading 01
38px / 700 / 1.1
Used for main page headings
typography.h1
Heading 02
32px / 700 / 1.2
Used for section headings
typography.h2
Heading 03
26px / 600 / 1.2
Used for subsection headings
typography.h3
Heading 04
21px / 600 / 1.3
Used for card titles and small sections
typography.h4
Heading 05
16px / 600 / 1.4
Used for small headings and labels
typography.h5
Heading 06
14px / 600 / 1.4
Used for small labels and captions
typography.h6
Body 01
18px / 400 / 1.5
Used for primary content
typography.b1
Body 02
16px / 400 / 1.5
Used for standard content
typography.b2
Body 03
14px / 400 / 1.5
Used for secondary content
typography.b3
Body 04
12px / 400 / 1.5
Used for small text and captions
typography.b4
Color Styles
OXFORD BLUE
#11294B
seal
#00FFFF
light sky
#EAF6FE
berkeley
#002F67
CADET
#8F9BA6
SEASALT
#F1F1F1
AZURE
#3682EB
FRENCH GREY
#CED4D9
PURE WHITE
#FFFFFF
Iconography
Home
Settings
User
Search
Bell
Calendar
Heart
Star
Upload
Download
Trash
Edit
Check
Exit
ChevronDown
ChevronUp
ChevronLeft
ChevronRight
ArrowUp
ArrowDown
ArrowLeft
ArrowRight
Share
Info
AlertCircle
AlertTriangle
Lock
Unlock
Clock
Padding & Spacing Scale
Multilog's services are complex, and we cannot exclude important information.
We created and iterated on key components based on the design system, defining the direction for the initial low-fidelity prototypes.
#01
big data cards
We created three card patterns that feature reduced interactions, placing information in expandable clicks, supporting icons and large numbers. These cards were used in various sections of the prototypes.
#02
navigation COMPONENTS
The header was our main challenge as it contained a lot of information; we created, prototyped, and tested 04 menu options, choosing based on data alongside stakeholders. The next step was to define the footer and navigation patterns such as breadcrumbs, tabs, search, language, and chatbot.
#03
BUTTONS, BULLETS AND FORMS
We created buttons along with their respective states and functions. Custom input forms for each type of information. Sliders, toggles, dropdowns, all with unique vectors and interactions.
#04
logistics interactive elements
Complex components were integrated into the system, also serving Genius, our logistics app.
Cargo tracking with an interactive map, scheduling inspections, dashboard elements, and notification patterns.
The prioritization matrix indicated three main pages. We prototyped these pages, tested them internally, validated with stakeholders, and iterated on important details before proceeding with the creation of the homepage.
Healthcare Services
Chemistry and Hazardous Goods
Distribution Centers
We optimized some components through collaborative workshops with stakeholders, allowing us to understand business objectives and communicate them more effectively, understanding the iterations.
ITERATION #01
service cards
Captured images in the Multilog matrix to generate the cover videos for the service cards. We optimized the hover interaction to deliver the description along with a CTA that directs the user to the capture page.
Bonded
Warehouses
Special
Transportation
ITERATION #02
CUSTOMER-RELATED multi-step FORMS
We have summarized the main forms, but there are leads from specific segments that must provide us with extensive information to prove their qualification. We have reduced the pain of this journey with step-by-step forms developed according to each persona and desired service.
Custom quote to store your chemical loads
Fill in the details and we will contact you
Name
Enter your name
Company
What is the name of your business?
Choose your best email
Back
Next
1
Main
information
2
About your business
3
Additional information
ITERATION #03
MULTILOG TIMELINE
The company's history is extensive and contains important expansion points that should be displayed. Previously shown on a single vertical scroll page, they are now integrated into an interactive timeline that presents information according to the brand's schedule.
2003
Name change to
Multilog
2007
Change from EADI to
Dry Port
2013
Change from Dry Port to Customs Logistics and Industrial Center (CLIA)
2014
Start of operations at the Joinville unit in Perini Business Park / SC
2016
Acquisitions in the South of nine more units between PR and RS
2017
Acquisitions in the Southeast of five more units in SP
2019
Start of operations at the São José dos Pinhais Logistics Complex / PR
2020
Victory in the bidding to operate the Dry Port of Dionísio Cerqueira / SC
2022
Northeast acquisition (BA). Acquisition of six more units for CD and Transport in the South and Southeast regions
2023
Inauguration of the Dry Port Dionísio Cerqueira / SC. Victory in the bidding to operate the Dry Port of
Foz do Iguaçu / PR
1996
Start of activities as EADI Portobello in Itajaí / SC
Hover over the timeline to learn about our journey.
ITERATION #04
navigation cards
At the end of specific pages, we offer navigation cards that provide exits for the user. We optimized these cards with our KPIs in mind, intending to direct the user to our sales team.
Get quick answers
See the answers to the most frequently asked questions by our clients.
Click to view our FAQ
Reached the final stage of our project, where we prototyped all the pages of the website, tested them with a small group, and iterated again based on feedback from users and stakeholders.
Internal collaborators, logistics market partners, and occasional clients formed a group of 6 people who underwent interviews and guided interactions. The execution of the tasks brought us important optimizations.
MENU
When clicking on the header, the menu was covering the entire screen, making scrolling difficult on specific devices. We redesigned the dropdown and added an exit button for the user.
blog
Feeding the news is a challenging task; we created some excessive interactions that were not very important to the user. Removing them allowed us to create a page template in Salesforce that can be edited directly by the content manager.
feedbacks
The feedback cards were in a horizontal scroll gallery. Users would scroll through the gallery without seeing the other feedbacks. We added navigation arrows and set the second feedback to low opacity to make the interaction more intuitive.
BIG NUMBERS
A previous pain point was the difficulty in visualizing the company's scale. Multilog generates over R$ 1.3 billion and has 37 units in Latin America. Users did not perceive this at first glance. We increased the emphasis with bullet points of important numbers and motion icons.
The design system is online in a dedicated application. Additionally, we created documents in Figma Slides and PDF with detailed steps and guidelines that served as a foundation for the developers.
The development was carried out by Multilog's internal programming team, in conjunction with a third-party consulting.
We collaborated to understand the best way to optimize the files, participating in meetings and advocating in important parts of the process.