Thinking
outside
the box!.

Boxxco | Retail | UX&UI Design | Product Development

Client

Boxxco

Boxxco (fka derkarton.net), is a wholesaler that focuses on all products made from cardboard. In addition to boxes, shipping packages and many other products they also offer custom made boxes. You name it, they’ve got it!

Our Contributions

01/
Rebranding

02/
Heuristic Analysis

03/
UX Benchmarking

04/
UX Design

05/
UI Design

06/
Usability Testing

The Challenge

After a first look at the e-commerce website, it was clear that derkarton.net needed an overhaul. The user experience had been neglected. Furthermore, the outdated branding and poor image quality did not reflect the young and dynamic team and the company’s high standards.

Goals

01/
Create a new corporate branding (including a new name) for print and digital that inspires trust and reflects the team’s product quality.

02/
Improve the user experience by simplifying the website structure and focusing on highlighting the product range as well as rethinking the cardboard box configurator.

Our Role

We were responsible for the project from start to finish for 10 weeks. This included a workshop with the derkarton.net team, followed by a UX analysis and multiple sessions of usability tests to gain insight on how to redesign the user experience and the user interface as well as what adjustments to make on the final version of the website.

Kick-off Meeting

During the meeting with the derkarton.net team, we were able to understand the direction to take for the rebranding by asking multiple-choice questions including visual examples and branding adjectives. We also narrowed down which areas to focus on and defined the user stories accordingly.

User Stories

The defined user stories all focused on the steps leading up to purchasing an existing product and a custom-made product.

As a customer, I need to add products to my shopping cart so that I can buy them.

As a customer, I need to search for products so that I can find the ones I want to buy.

As a customer, I need to create a custom-sized box if it doesn’t already exist in the product range so that I can buy it.

As a customer, I need to start the checkout process so that I can pay for the products.

As a customer, I need to create an account so that I can proceed to checkout.

Usability Test - Round 1: Testing The Existing Website

In the first round of testing, we gave 5 volunteers tasks based on the user stories. The usability tests showed us that the website is generally understood. However, we did receive a lot of valuable feedback concerning pain points. E.g. the visual hierarchy of the website caused cognitive overload and the reactivity and the size of the navigation dropdown menu created confusion. But the biggest pain point was the cardboard box configurator — where to find it and how to use it?

Ideation

This is where the fun began! With the insights we gained, we started creating the wireframes according to the insights. First, we decluttered the homepage as well as the product detail page to better showcase the products. Then we rethought the whole design concept of the cardboard box configurator and made it accessible from the navigation. By splitting the content of the configurator into different sections and adding a navigation tab, we made it easier for the user to understand how many steps they need to complete and what information is asked of them.

Usability Test - Round 2: Testing The Prototype

In the second round of testing, we gave 5 new volunteers the same tasks as in the first round, but this time they were asked to complete the tasks on the prototype. The results showed that apart from minor details, we managed to fix the problems discovered on the original website. The volunteers had no issues finding the configurator and found it easy to use. And overall the structure of the pages made the content clearer for the volunteers.

UI Concept

Based on the new branding and new name – Boxxco – that we created according to the insights gained from our kickoff meeting, we started applying the UI to the wireframes. 


The concept was to give the website a modern and industrial touch while showcasing the product range in an uncluttered manner.

Usability Test - Round 3: Look and feel

During the last round of testing, we focused on the look and feel of the website. 5 volunteers participated in a 5-second test, first-click test and other tasks that helped us understand their impression of the website and its readability and comprehensibility.Overall the volunteers described the new website design as modern and tidy and they easily understood what Boxxco stands for.

Test result

During the last round of testing, we focused on the look and feel of the website. 5 volunteers participated in a 5-second test, first-click test and other tasks that helped us understand their impression of the website and its readability and comprehensibility.Overall the volunteers described the new website design as modern and tidy and they easily understood what Boxxco stands for.

Conclusion

We created a new branding and name, as well as updated the website’s design to a modern version that represented the Boxxco team better. Additionally, we enhanced the user experience by cleaning up the visual hierarchy of the pages, reworked the size and reactivity of the navigation dropdown menu and designed a new cardboard box configurator from scratch.

Explore more design projects

All Case Studies