Sanders Imagetools

Sanders imagetools is a place where products are communicative agents to transmit individual advertising message. Place designed primarily for companies, resellers and traders looking for very good quality products with the ability to present their own brand.

I had to figure out how to unify the site's inconsistent user experience, how to make the use of the very extensive product database easier and more enjoyable, and how to improve key elements of navigation, accessibility and performance.

Project goals

The goal of the Sanders Imagetools optimization project was to create a cohesive and intuitive user interface, making it easier to navigate the platform, as well as to optimize the product database for quick and efficient discovery of suitable products for users' brands.

Unified User Interface: The main assumption of the project was to create a cohesive and intuitive user interface throughout the platform. All sections and pages were analyzed for visual consistency and functionality to ensure users had a seamless experience while using the platform.

Enhanced Product Database: The optimization of the product database involved adding advanced filtering, categorization, and sorting options. This was intended to make it easier for users to find ideal products for their brands, reducing search time, and increasing the effectiveness of their choices.

Implementation of Accessibility Features: The project focused on ensuring maximum accessibility for all users, regardless of their abilities or device preferences. Compatibility with screen readers, keyboard navigation, and appropriate labels were introduced to make Sanders Imagetools more inclusive for diverse users.

Performance Optimization: The project aimed to optimize the platform's performance through caching techniques, image compression, and code optimization. These actions reduced page loading times and provided users with smoother navigation.

How it started

I started the project by getting to know the client, his vision for the site, as well as his business approach in order to easily communicate progress and avoid ambiguity.

Then I began to review and analyze the competition and the market to see how they present similar solutions, all the time keeping in mind what kind of platform for customers Imagetools wants to be.

After all, I decided to systematize the product data in order to more easily meet the challenge of preparing the navigation as well as the configurator.

Challenge I was facing

The new site had to focus on the most important things - a large selection of products, a large selection of fillings as well as packaging, but in a very clear and simple way.

The challenge of creating the platform was to systematize the product base to adapt it to the configurators and to make the navigation experience easier and better across the whole website.

Lack of User Experience Consistency: Before the optimization project, Sanders Imagetools faced the challenge of having inconsistent user interfaces across different pages, leading to user disorientation and a lack of coherence in their experiences. It was necessary to ensure a unified, cohesive, and intuitive experience for all visitors.

Managing an Extensive Product Database: While the platform's extensive product offerings were a strength, it posed challenges in finding suitable products for specific brands. The absence of effective categorization and filtering tools resulted in users spending more time and becoming frustrated during their search for relevant offers.

Prioritizing Accessibility and Performance: Sanders Imagetools aimed to provide easy access to the platform for all users, regardless of their abilities or device preferences. The lack of appropriate accessibility features and platform performance issues negatively impacted user experiences and potentially led to a loss of potential customers.

Navigational Challenges: Users reported difficulties in navigating the website, limiting their ability to fully utilize the platform's functionalities. Addressing and improving key navigational elements were essential to enable users to explore the full potential of Sanders Imagetools without obstacles.

Design system I established

To organize the entire website and prepare it for future changes and new additions, I created a design system. This system includes all the basic elements like buttons and forms, as well as more complex elements like product cards with various options.

All these components were designed in a way that allows for easy customization and expansion in the future. I used Figma to create variants of these elements, which made it easier for the design team to work together.

As a result, we achieved a consistent design system that gives the entire website a cohesive look and leaves a positive impression on users. Additionally, this design system will make it easier to implement future improvements and add new features, ensuring that our website remains up-to-date and competitive.

Product categories even clearer

Easy and clear access to products makes it easy to navigate and click on the product of interest.

Old design

The old design includes an entire list of products, which forces you to scroll for a very long time if you want to find a particular product. This makes the search for a particular product tedious and unpleasant.

New design

The new design focuses on concrete and tiled design where in a very fast way without scrolling, we can select the product we are interested in and configure it according to our needs.

Refining the product site

Old design

The old design did not contain enough information for retailers. It focused only on general information. It was not visually consistent with the rest of the site.

New design

The new design adds more information about the product - packaging, certifications, allergen information and product information needed for retailers. It also adds a product summary, where we can select quantity, address or download delivery information in one place. Once everything is filled out, the product loads in our design dashboard.

Dashboard with projects

Old design

The old collection basket was intended to complete products and assign them to a specific project. Here you could order information on all products in the project, download shipping data or add files for labels. The problem was that it was just an idea, most of the functions were not implemented.

New design

The new projects dashboard adds non-existing features, allows to create projects, manage them and projects within a project. It also allows you to download information about all products with a single click, or each product separately.

Usability testing

After the research, I proceeded to develop the skeleton of the concept and present it to the client. After initial approval from the client, it was time to test the site concepts along with the configurator with the target customers.

Using the client's contacts, I was able to get access to several contacts who were the target users of the site. For testing, I prepared separate versions of the site prototypes, which I used on the Maze.co site for testing.

Design approach

Design matters. It's not just about looks, but also about functionality. That's why I implemented a modern, bright, and user-friendly design that meets the requirements and represents the imagetools brand effectively.

Throughout the design process, I focused on maintaining consistency and user convenience. I wanted the website to make a positive impression, build trust in the imagetools brand, and offer a great experience for every visitor.

In summary, the design was not only about aesthetics but also about strategically strengthening the imagetools brand as a modern and trustworthy company in its industry.