[Web Development] [UX/UI Design]

TECHNOLOGIES/TOOLS: HTML, CSS, JavaScript, Photoshop


This project is what led Tradeprint to offer me a position as their UX/UI Designer whilst I was originally working as Front-End Developer. When I joined Tradeprint, I discovered a website filled with legacy and duplicated code, thought as a translation of their own internal system, rather than a user-centred service.

A big problem they encountered at that point was that they were launching too many products which were not fitting in the navigation menu anymore. They asked me to design a brand new navigation, that would fit all products but also all menu items which were originally there. They gave me a deadline of 5 days to design and develop it.

Original top navigation

The first thing I did was a content inventory along with a quick content audit. I found a lot of duplicated content and major problems with the information architecture. A lot of categories and product pages were oddly hierarchised; static pages such as “Resellers tools” were classified along the actual products; products characteristics rather than product types were used to categorise products (materials, printing method (litho/digital), size…). I reported the issue and advised surveys/card sorting but the management decided to go along with the following 3 categories: Litho, Digital and Large Format, with alphabetically ordered products. They also asked that all products were visible on the dropdown without extra click.

I came back with a scalable dropdown menu (this navigation was still used after a year and a good amount of new products). As I was not convinced by the category decision, I made sure the search bar was quite prominent. I also put the register/login/my account links on the top right instead of the original top left, as my concurrent analysis displayed that the top right corner was way more common for those kinds of links. I also redesigned the basket icon to a simpler shape. I removed the hamburger icon from the product link, and put a caret instead (up/down depending on dropdown opened/closed).

I also designed a variant fixed menu for when users are scrolling down – they don’t have to scroll back up to get to the menu.

The navigation is entirely responsive:

My redesign – Tablet view (left: All closed/right: All opened)

My redesign – Mobile phone view
(From left to right: All closed/Menu icon clicked/Product link clicked/Product category clicked)

In addition of that top navigation, I also had to rework the sidebar navigation.

Left: Original sidebar / Right: My redesign (menu only)

The original sidebar was getting way too tall with the growing product range. So I designed an accordion menu that would only open one category at a time, and clearly display the current page. It reuses the graphic codes from the top navigation: colour, left green bar, right double chevrons.

Given the very short deadline and the absence of UX budget, the project sadly lacks user testing. I also regret that the business did not allow a proper reflexion on the categories/information architecture.