BCC Logistics Website Redesign - Case Study

Overview

Project Details:

Duration: 3–4 months

My Role: UI Designer, UX Researcher, Interviewer, UX Designer.

Tools Used: Figma, Google Forms, Zoom, Miro (for mapping), Pen & Paper.

BCC Logistics is a global logistics company that specializes in comprehensive shipping and supply chain solutions for both individuals and businesses. Despite their robust service offering, their digital presence—especially the website—was outdated, non-intuitive, and lacked features that today’s users expect.

I was brought on as a solo UX/UI designer to completely redesign their website from the ground up. This wasn’t just a visual upgrade. It was a deep, strategic UX process that involved understanding the business model, conducting research, interviewing users, and eventually crafting a modern, user-friendly, and conversion-focused digital experience. As a solo designer, I led every aspect of this UX/UI project: from discovery and user research to design and prototyping.

**WHAT'S IN THIS CASE STUDY?

Step 1 : Understand Client Requirements

- Project Goals

- Targeted Audience

- Challenges

- Timeline

- Specific Features & Functionalities

Step 2: Research

- Market Research

- Common Sections In each Competitor website

- User Reviews

- User Interviews

- User Surveys

- User Personas

- Empathy Map(s)

- User Journey Map(s)

- Card Sorting

Step 3: Wireframe

- Creating a Sitemap

- User Flows

- Sketching

- Wireframing

Step 4: High-Fidelity Designs

- Design Pages Overview

- Before & After

- Visual Design (Colors, Typography, Images...etc)

- Prototype on request

Step 1: Understand Client Requirements

1 - 🌟 Project Goals

• Primary Goal:

Redesign the "Get Quotation" experience to increase submissions by simplifying the process, optimizing the form flow, and improving its visibility throughout the website.

• Secondary Goal:

Implement a reliable and intuitive real-time shipment tracking feature that allows users to track their packages easily with regular updates (from every 10 minutes to 1 hour).

• Tertiary Goal:

Clearly showcase BCC Logistics' full range of services in a well-organized, visually clear, and engaging layout that encourages users to explore and take action.

• Additional Goals:

Add a live chat or chatbot for instant user assistance.
Introduce user accounts and dashboards to boost engagement.
Ensure the entire platform is fully mobile responsive.

These goals shaped the design direction, content structure, and interaction flow of the new website.

2 - Targeted Audience

- Businesses that need logistics solutions (e.g., import/export companies, manufacturing, retail, e-commerce).
- Individuals shipping goods internationally or domestically (e.g., personal shipments, small-scale commercial businesses).
- Partners and suppliers who work within the logistics and supply chain industry and require a streamlined way to manage logistics operations.

3 - Challenges

- Outdated Design: The current design is not reflective of a modern, competitive logistics company. We need a complete redesign that conveys trust, reliability, and professionalism.
- Complex Processes: The existing quotation and tracking processes might feel overwhelming to users. Simplifying these processes while maintaining their depth and detail will be a challenge.
- Real-Time Tracking: Ensuring that real-time shipment tracking is accurate and updates frequently without overwhelming servers is a technical challenge that needs to be addressed.
- User Engagement: Encouraging users to create accounts and engage with live support without forcing them or making the site feel cluttered is essential.
- Competitor Features: Competitors may offer more seamless experiences or extra features, so we must innovate to stay competitive.

4 - Timeline

- Total timeline: 3-4 months for completion, with flexibility for revisions and adjustments during the process.

5 - Specific Features & Functionalities

- Get Quotation CTA: A prominent button that drives users to a multi-step quotation form.
- Quotation Form: A multi-step form broken into easy-to-digest sections (e.g., shipment details, destination, service type) that can also serve as an optional account creation flow.
- Track Shipment: A secondary button that leads to real-time tracking. The tracking page must allow users to input their shipment details and get updates with intervals ranging from 10 minutes to an hour.
- User Accounts and Dashboards: Once a user signs up, they will have access to a personalized dashboard where they can manage quotes, track shipments, and access support.
- Live Chat or Chatbot: A 24/7 live chat or chatbot feature for immediate assistance. This will help users with the quote process, tracking issues, or general inquiries.
- Service Showcase: A dedicated section that highlights all of our logistics services, with clear, detailed explanations and links to request more info or get a tailored quote.
Mobile-Responsive Design: The website should be fully responsive and optimized for mobile use since a significant number of users will likely access it via mobile devices.

Step 2 - Research

1- Market Research

- Get Quotation CTA: A prominent button that drives users to a multi-step quotation form.
- Quotation Form: A multi-step form broken into easy-to-digest sections (e.g., shipment details, destination, service type) that can also serve as an optional account creation flow.
- Track Shipment: A secondary button that leads to real-time tracking. The tracking page must allow users to input their shipment details and get updates with intervals ranging from 10 minutes to an hour.
- User Accounts and Dashboards: Once a user signs up, they will have access to a personalized dashboard where they can manage quotes, track shipments, and access support.
- Live Chat or Chatbot: A 24/7 live chat or chatbot feature for immediate assistance. This will help users with the quote process, tracking issues, or general inquiries.
- Service Showcase: A dedicated section that highlights all of our logistics services, with clear, detailed explanations and links to request more info or get a tailored quote.
Mobile-Responsive Design: The website should be fully responsive and optimized for mobile use since a significant number of users will likely access it via mobile devices.

Common Sections In each Competitor website

User Reviews

2 - User Interviews

Meeting with the users and their pain points

2 - User Surveys

Surveys was sent to the users and their pain points

3 - User Persona (Individual Users)

3 - User Persona (Business Users)

4 - Empathy Map ( Individual users)

This can help us know how what are the user thoughts, emotions, actions, words about the product. This is composed of 4 categories ( Say, Think, Do, Feel). Also, we collect these data from the User Interviews we made before (Online Meeting) But the most efficient way to do an empathy map is to do it after the user persona and create the empathy map depending on the user personas but while I am doing the user interview I must take notes of what the user in saying, thinking, doing, feeling.

4 - Empathy Map ( Business users)

5 - User Journey Map ( Individual users)

The purpose of conducting a user journey is to understand the user’s step-by-step experience with your product or service, allowing you to see where users might encounter friction, confusion, or unmet needs. This process can help you identify specific touchpoints and potential pain points and understand the emotional states of users at each stage. This insight is essential for creating a more user-centered design, addressing gaps, and improving the overall experience.

5 - User Journey Map ( Business users)

6 - Card Sorting

Purpose of Card Sorting: Card sorting helps you figure out how users would expect to find information on your website or dashboard. It’s a technique that involves listing all the key features or content of the site on individual "cards" and asking users (or imagining from their perspective) to group these into categories. The goal is to organize content in a way that feels intuitive for your users.