Introduction

In this case study, I show the development of a responsive website for the fictional logistics company Trackpak, which was created as part of the UX Design Google Certificate. From the beginning, my goal was to develop a user-centric experience that seamlessly combines functionality and aesthetics.

More and more people are buying their products primarily online. The advantages are obvious: they have a wide choice of products, are not bound by opening hours and save time and money. Alongside the many advantages, many logistics companies forget about climate protection.
While every individual can contribute to reducing CO2 emissions, it is even more important that large companies pay attention. Trackpak takes a forward-thinking and environmentally conscious approach, offering sustainable and customer-focused shipping solutions.

Project duration: June 2023 until August 2023

Problem Statement

Trackpak recognized the need to align its platform with its commitment to sustainability. The challenge was to create an engaging and user-friendly platform that would encourage users to choose greener shipping solutions.

The Goal

TrackPak's goal is to transform the logistics industry by seamlessly combining sustainable shipping solutions with advanced technology. To provide both businesses and individuals with an environmentally conscious, efficient and reliable shipping experience that not only meets their logistical needs, but also aligns with their environmental beliefs.

My role and tasks

The project was developed entirely by me as part of the Google Certificate Program.

My Process

1. Competitive audit

2. Interviews

3. Personas

4. User Journey

5. Side map

6. Paper wireframes

7. Moodboard

8. Sustainibility considerations

9. Low-fidelity Wireframes

10. Usability Studies

11. Design System / Branding

12. High-fidelity design

13. Iteration

14. Accessibility considerations

15. Takeaways

16. Next steps

Design Process

The design process that I followed is the five stages of the Design thinking process: Empathize, Define, Ideate, Prototype, and Test.

Research

Summary competitive audit

• DHL is known for its global reach, premium services, and user-friendly digital platforms.
  
  

• Hermes focuses on convenience, affordability, and catering to the e-commerce sector but may have occasional usability issues.
  
  

• GLS offers reliable services within Europe and user-friendly digital tools, with a focus on accessibility and efficiency. The choice between these companies will depend on specific shipping needs and priorities, such as speed, cost, and regional accessibility.

User research: Pain Points

To better understand users, I conducted interviews with friends. In conversations lasting about 15 minutes, I asked basic questions about the use of logistics services, users' expectations, and problems they encounter.

Insights

Personas

Conducting interviews proved to be very informative and provided a lot of insight into users' experiences, desires, and areas for improvement. The wealth of information I gained from these interviews formed a good basis for creating user personas.

User journey Sebastian

Side Map

Paper wireframes

Sketching several versions of the responsive website on paper ensured that the best ideas were included in the digital wireframes, paying particular attention that the website was clear and that the most important functions were visible to the user at first glance.

Mood Board and inspiration

Sustainibility considerations

The ecological footprint of logistics companies is mainly influenced by their energy consumption, emissions during transportation and storage, as well as the amount of packaging used. The ideal goal is to achieve zero percent excess emissions in all logistics processes, which can be attained by reducing consumption, limiting pollutant emissions, and minimizing packaging.

The transportation route offers considerable potential for sustainability, which can be exploited through innovative green transportation technologies.
It is therefore important that all modes of transportation - whether by sea, air, road, or rail - are as environmentally friendly as possible.

In the case of electromobility, it is not enough for the vehicle to be emission-free. The electricity must come entirely from renewable energy sources to effectively reduce emissions.

The roofs of Trackpak warehouses are equipped with modern solar panels. They offer plenty of space and are conveniently located as there are no obstacles to block the sun.

Low fidelity wireframes

Building on the information architecture and my paper sketches, I switched to Figma to create low-fidelity wireframes for the entire responsive website. My primary goal was to allow for quick iterations and experiment with different layout options before moving to the high-fidelity design phase. This approach provided a preliminary visualization of my design and allowed me to generate new ideas for improvements.

Usability study findings

The results of user testing of the Trackpak website were promising. Participants found the interface intuitive and easy to navigate. They appreciated the responsiveness and smooth performance of the website. Feedback indicated some minor usability issues, I quickly fixed. Overall, users expressed satisfaction and enthusiasm.

Design system

Color and Branding

The following phase was about designing the visual interface for the website in high quality and transforming the wireframes into a vivid and functional design. During this process, I explored numerous possibilities by experimenting with different color schemes, fonts and icons to finally design the final version.

I decided to use a palette of greens and bright orange. When designing websites, this combination of colors can evoke positive emotional responses that ultimately enhance the user experience and drive business engagement.

Green hues:

Sustainability and Eco-Awareness: Various shades of green are often synonymous with nature, sustainability and eco-friendliness. Trackpack's commitment to sustainable shipping fits seamlessly into these associations and encourages user confidence in your environmentally conscious initiatives.

Freshness and progress: shades of green often represent a sense of freshness and growth. This highlights the message of progress and innovation.

Bright Orange:

Vitality and Focus: The bright hue of orange is undeniably attention-grabbing and quickly grabs the viewer's attention. It exudes an aura of energy and enthusiasm, attributes that can be highly beneficial for customer interaction and increase user engagement on the website.

High-fidelity design

During the high-fidelity phase of the designs, user feedback from testing sessions was carefully considered. As a result, important design decisions were made to improve the user experience. One notable decision was the implementation of a one-tap navigation system that simplified the user experience and made it more intuitive.

In response to user feedback and to optimize the layout, I also decided to use radio buttons in the pricing table instead of traditional call-to-action buttons. This not only saves space, but also gives users a visually clear and intuitive way to make a choice.

The user testing results of the app were promising. Participants found the interface intuitive and easy to navigate. They appreciated the app's responsiveness and smooth performance. Feedback highlighted a few minor usability issues, which the development team addressed promptly. Overall, users expressed satisfaction and enthusiasm, indicating a positive reception for the app's future release.

Create a Trackpak parcel label

The responsive website offers a variety of features to make the logistics experience as smooth as possible. Users can easily create package labels, track shipment numbers, and use the store finder.

The following images show the features in more detail.

Track your delivery status

Find a Trackpak store

Accessibility considerations

Takeaways

• Sustainability is important: The focus on sustainability was well received by users and represents a potential unique selling point for the logistics company.
  
  

• Tracking concerns: Users expressed frustration with unreliable tracking and pointed to the need for a robust and reliable tracking system.
  
  

• Mobile responsiveness: It is very important to ensure a seamless experience on different devices

Next Steps

Shipment Tracking: Develop an accurate, real-time shipment tracking system so that users have an accurate overview and can follow their daily schedule.

Sustainability communications: further highlight the company's sustainability initiatives and practices, and I will consider how to make shipping more ecologically friendly.