Cargoboard is a digital B2B logistics provider founded in 2019 in Germany. The business is based upon two separate systems: a website and a web application. After 3 years in business and constant growth, the startup saw the need of a website redesign.
Do a rebranding for a modern appearance that stands out against competitors in the logistics field. Redesign the website with new branding elements and set up a design system for company-wide use.
Cargoboard's original branding seemed outdated to them. Website design & content showed a lack of consistency. The website had performance issues, and the company felt they weren’t able to convey a strong brand identity with their online presence. While they weren't ready to articulate what their company culture exactly was, their vision was to look more modern, dynamic and trustworthy. Moreover, business needs required a tight timeline: 140+ sites needed to be reviewed and redone in under 1 year.
We started auditing the current product to kick off with the rebranding process. In a team of 3 designers, we reaccessed brand assets and updated them in accordance with the old brand. We took several rounds of brainstorming & feedback to achieve the look and feel we were aiming for. We developed a first version of the style guide while testing brand assets in print and digital design.
Brand Design •Styleguide & Design System •Illustration •Information Architecture •UI/UX DesignFirst we needed to clarify who Cargoboard was and what they stand for. Mentally, founders and employees were almost on the same page. Employee interviews across different departments helped to get a better understanding of the cultural essence. At the same time, HR worked with an agency to conduct workshops and dig deep into bringing detailed brand values andemployer branding strategies to paper and into practice.
I took the insights from interviews, observations and workshops to translate them into a visual identity the company could run with in the long term.
The logo remained unchanged except for a few minor touch-ups. The word mark can now be used stand-alone, which gives the brand a sleeker look.
We didn't want to change the brand's primary color - a bright red - as it is a core pillar in the existing brand's identity. Instead, we extended the color palette for softer tints, tones and shades of the same color, which we now call "signature red".
At the same time, we added alternative colours to even out the aggressiveness of the red. Blue is our secondary color, green the teriary option. Blue and green are complementary split colors to red. In color psychology, they convey trustworthiness and calmness.
We exchanged the former typeface Source Sans Pro. The new reading font Graphie is accompanied by Mokoko as the company requested a seperate display font. The usage of both is controlled by clearly defined type styles.
We did lots of design tests trying different fonts, colors and styles until we ended up with the rebranded look. Here's a summary of updated brand assets:
To ensure future design consistency, we document Cargoboard's design guidelines:
For internal and external stakeholder who are not designers, we offer a one-pager style guide. Its focus is on print, social media and presentations.
For designers, developers and others working with the web presence, I create and maintain a design system (WIP). I set up a UI library in Figma. It's the foundation for our design system in zeroheight. zeroheight is a tool for collaborative design systems. In zeroheight, print and web design are elaborated in more detail. Developers, marketing and copy writers can specify on their guidelines, too.
Illustrations are custom made. Cargoboard applies the Fontawesome Pro 6 library for functional icons. Illustrative icons are either inspired by Fontawesome or custom-made.
Overall, illustrations & icons follow a similar rule set. The color palette is restricted to a set of shades of blue and red from our color palette. We limit the use of color for setting highlights. This offers a chance to put emphasis on certain aspects. For example: how to pack a bicycle for palette shipping.
The new illustration style is primarily two-dimensional. The isometric perspective is reserved for complex illustrations that would be difficult to realise otherwise. An example: displaying different methods for placing good on palettes on a truck.
Decorative graphic elements help us to make illustrations more dynamic. Graphic elements in illustrations are simplified representations of elements used at other places on the website (e.g. the square made from dots). Those elements, such as blobs or circles, are picked up in other design contexts. At the same time, our premise is to not become too playful. Illustrations should look friendly and young, yet not childish.
Cargoboard is a small company. Being able to take action quickly without relying on external parties is important. Therefore, we offer 2 ways to create illustrations in-house:
Firstly, it is possible to change the old illustrations to the new illustration style. This should be done carefully as all old illustrations are isometric and we want to limit this style. However, this offers a chance to make use of the existing illustration library.
Secondly, a designer can take any of the Fontawesome Pro icons and manipulate it to fit the illustration style. This procedure (developed by our graphic designer) makes it very easy to mix and match any kind of illustration. It can be applied to both illustrations and illustrative icons, the later are usually smaller.
The third and most time consuming option is to create illustrations from scratch. I use Adobe Illustrator or Figma for creating those assets.
From the start of the project it was clear: the navigation system needed to be completely redone. On Cargoboard's original website, a majority of pages was not accessible using the navigation. Even Cargobaord's employees reported to use Google search regularly if they wanted to find certain pages. This was especially critical for any sites concerning operative business (such as optional insurance service).
For the new navigation system I drew on best practices by Nielsen Norman group and "Information Architecture. For the Web and Beyond" (O'Reilly, 2015). I collaborated closely with SEO marketing managers to consider link structure for their needs. The focus here was on global navigation with top navigation and footer. We used a FigJam board to compare our approaches and came up with a solution that meet SEO needs without sacrificing users. (In terms of wording, marketing was given priority.)
We treated the navigation system we developed for global navigation as hypothesis and tested our ideas organising a card sorting workshop.
During the workshop, 2 groups of people were given cards. Each card was labeled with the title of a page, e.g. "About us".
Both groups were given the same tasks: First, group the terms (if possible). We then asked them to imagine those groups as part of the navigation bar: How would you call the categories, do you need to build any subcategories?
Eventually we brought both groups together and asked them to compare their results. This opened room for a lively discussion. Thus, making most of the open interview questions I prepared for this part uneccesary.
The workshop confirmed most of our assumptions. It confirmed difficulties we orginally had with some parts and brought a few important updated in terms of wording.
Additionally, I took the workshop results and tested the updated navigation again. I used UXtweak for tree testing with users I recruited from our website. I wanted to see if users could find information easily or whether they would get lost to prove our top bar navigation was intuitive.
Eventually, I designed the final top menu & footer considering best practices. The final navigation functions as a mega menu with 1 hierarchical level (no drop downs or interactive elements like on the old website). The new navigation has 5 menu sections. From left to right menu sections start with informative links and finish with action links on the right. We used icons & subtitles to elaborate on the content a user can expect under each link.
Cargoboard's new website uses a fat footer that roughly copies the top menu. We added a trust score and Cargoboard's socials.
My design process took inspiration from a typical design thinking framework. I got research insights primarily from interviews, screen recordings and heatmaps (using Hotjar). When I joined Cargoboard little performance data was available (e.g. Google Analytics). Since there weren't enough resources given for research, I treated my insights into current performance as hypothesis (Hotjar's coverage was very low). I wrote them down (each site got a project plan) and developed design solutions. The strategy was to ground design decisions on well-studied best practices and be conservative with design changes beyond that. Once the website is live, the designs should be tested against user needs & pain points. (Thus, treating the launch as live testing phase). Although differing from a typical design cycle and going against my preference, Cargoboard's management supported that suggestion. In absence of external testers, I usually went into feedback rounds with colleagues from design, marketing, business strategy and operations. Cargoboard has a dedicated customer service team that spends all day communicating with users via phone, email and live chat. I saw them as gatekeepers to customer knowledge I wasn't able to generate myself and consulted them frequently. I made sure to differentiate clearly between actual user problems and solutions offered by operations as those should be treated as hypothesis as well.
Despite mobile first being a common standard, Cargoboard's management requested to design desktop first. The reason being that a majority of Cargoboard's customers are desktop users. While my design process was focused on desktop, I tried to incorporate mobile in my sketches to translate components to different screen sizes early on. I then did wireframes and final design prototypes for desktop. Only then I added the final mobile design.
The product owner wanted to continue using Wordpress and hired a frontend engineer whose focus is on Wordpress development and Elementor. I provided final designs in Figma and did the handoff there, too. I established design components for specific usage purposes, such as customer testimonials. Those are part of the handoff files and were documented in the UI library. Our frontend developer then made the components available as custom templates in Elementor.
We relaunched Cargoboard's website in January 2023. We got very positive feedback from internal and external stakeholders regarding for new web design and usability. The new navigation system makes it much easier for customers to find relevant content and thus supports operations/customer service massively. The new site performs much better and in the future any changes can be tested on a staging website. Containing design consistency is now much easier as we set up a template library for components in Wordpress/Elementor that's based on Cargoboard's design system. The new branding gives Cargobaprd a fresher look. Blue and mint elements in combination with red highlights help Cargoboard to stand out - whether in print or digitally.
You can explore the full website at https://cargoboard.com/de.
In the past few months, Cargoboard was able to set up data tracking. We are currently evaluating the effectiveness of design changes using site recordings and heatmaps as well as Google Analytics data. Management also mentioned interest in generating qualitative insights (for example using interviews or preference tests) and A/B testing. Having the chance to base design solutions on more data could make future iteration cycles more (time) efficient. Due to time restraints the design focus on desktop was beneficial. However, the user experience for mobile and tablet needs thorough assessment now. (Since only around 5% of customers are tablet user Cargoboard saw no need to design for tablet, although being reflected in the breakpoints we defined.)
During the project Cargoboard introduced Confluence for company wide documentation. As one of the early adopters at Cargoboard, I used it for transparent documentation of the project plan, strategic decisions and design hypothesis. To enhance (cross-team) project management for future iterations on the website and backlog projects, we also introduce Jira to the whole team.
