Product Catalog Website

A clean, easy-to-navigate web presence for a leading industrial company with a wide range of products and services.

Product Catalog Website

A clean, easy-to-navigate web presence for a leading industrial company with a wide range of products and services.

Product Catalog Website

A clean, easy-to-navigate web presence for a leading industrial company with a wide range of products and services.

Product Catalog Website

A clean, easy-to-navigate web presence for a leading industrial company with a wide range of products and services.

Product Catalog Website

A clean, easy-to-navigate web presence for a leading industrial company with a wide range of products and services.

CLIENT
Syntron Material Handling

ROLE
Principal UI/UX Designer

RESPONSIBILITIES
Research
Information Architecture
Wireframes
User Interface Design
User Experience Design
Design QA

CLIENT
Syntron Material Handling

ROLE
Principal UX/UI Designer

RESPONSIBILITIES
Research
IA
Wireframes
UI Design
UX Design
Design QA

CLIENT
Syntron Material Handling

ROLE
Principal UX/UI Designer

RESPONSIBILITIES
Research
Information Architecture
Wireframes
User Interface Design
User Experience Design
Design QA

CLIENT
Syntron Material Handling

ROLE
Principal UX/UI Designer

RESPONSIBILITIES
Research
Information Architecture
Wireframes
User Interface Design
User Experience Design
Design QA

The Client

Syntron Material Handling is a provider of industrial products for large-scale projects in a variety of industries.

The Problem

Syntron’s previous website wasn’t doing their users, and thereby the company, any favors. It was built on top of a WordPress template that restricted them from implementing any custom design or advanced functionality they needed to drive sales. My coworker—who specializes in SEO—and I conducted a thorough audit of the website and found that not only was it not optimized for mobile or search in any way, but it had very poor user experience and almost no brand recognition.

The Client

Syntron Material Handling is a provider of industrial products for large-scale projects in a variety of industries.

The Problem

Syntron’s previous website wasn’t doing their users, and thereby the company, any favors. It was built on top of a WordPress template that restricted them from implementing any custom design or advanced functionality they needed to drive sales. My coworker, who specializes in SEO, and I conducted a thorough audit of the website and found that not only was it not optimized for mobile or search in any way, but it had very poor user experience and almost no brand recognition.

The Client

Syntron Material Handling is a provider of industrial products for large-scale projects in a variety of industries.

The Problem

Syntron’s previous website wasn’t doing their users, and thereby the company, any favors. It was built on top of a WordPress template that restricted them from implementing any custom design or advanced functionality they needed to drive sales. My coworker, who specializes in SEO, and I conducted a thorough audit of the website and found that not only was it not optimized for mobile or search in any way, but it had very poor user experience and almost no brand recognition.

The Client

Syntron Material Handling is a provider of industrial products for large-scale projects in a variety of industries.

The Problem

Syntron’s previous website wasn’t doing their users, and thereby the company, any favors. It was built on top of a WordPress template that restricted them from implementing any custom design or advanced functionality they needed to drive sales. My coworker, who specializes in SEO, and I conducted a thorough audit of the website and found that not only was it not optimized for mobile or search in any way, but it had very poor user experience and almost no brand recognition.

Original Syntron Website

☝️ The original website in all its WordPress template glory.

☝️ The original website in all its WordPress template glory.

☝️ The original website in all its WordPress template glory.

The Project

Instead of attempting to build on top of the existing WordPress site, Syntron decided to start from the ground up. Our task was to design and build a custom website to support their large amount of content that allowed for easy product searching and the ability to find reference documents and get custom quotes quickly.

The Goals

The goals of this project were to create a strong brand presence online that mirrored their well-designed printed materials, be perceived as leaders amongst the competition, and create a smooth user experience throughout the website.

The Project

Instead of attempting to build on top of the existing WordPress site, Syntron decided to start from the ground up. Our task was to design and build a custom website to support their large amount of content that allowed for easy product searching and the ability to find reference documents and get custom quotes quickly.

The Goals

The goals of this project were to create a strong brand presence online that mirrored their well-designed printed materials, be perceived as leaders amongst the competition, and create a smooth user experience throughout the website.

The Project

Instead of attempting to build on top of the existing WordPress site, Syntron decided to start from the ground up. Our task was to design and build a custom website to support their large amount of content that allowed for easy product searching and the ability to find reference documents and get custom quotes quickly.

The Goals

The goals of this project were to create a strong brand presence online that mirrored their well-designed printed materials, be perceived as leaders amongst the competition, and create a smooth user experience throughout the website.

The Project

Instead of attempting to build on top of the existing WordPress site, Syntron decided to start from the ground up. Our task was to design and build a custom website to support their large amount of content that allowed for easy product searching and the ability to find reference documents and get custom quotes quickly.

The Goals

The goals of this project were to create a strong brand presence online that mirrored their well-designed printed materials, be perceived as leaders amongst the competition, and create a smooth user experience throughout the website.

Information Architecture

I created a sitemap to organize the large amount of product content. A new section, “Industries,” was added to showcase Syntron’s work in multiple industries in the form of case studies, as well as other new pages that weren’t previously on the site: FAQ, Careers, and News & Events.

Information Architecture

 I created a sitemap to organize the large amount of product content. A new section, “Industries,” was added to showcase Syntron’s work in multiple industries in the form of case studies, as well as other new pages that weren’t previously on the site: FAQ, Careers, and News & Events.

Information Architecture

 I created a sitemap to organize the large amount of product content. A new section, “Industries,” was added to showcase Syntron’s work in multiple industries in the form of case studies, as well as other new pages that weren’t previously on the site: FAQ, Careers, and News & Events.

Information Architecture

 I created a sitemap to organize the large amount of product content. A new section, “Industries,” was added to showcase Syntron’s work in multiple industries in the form of case studies, as well as other new pages that weren’t previously on the site: FAQ, Careers, and News & Events.

Syntron Sitemap

Wireframing

I used a modular, blocky, straight-line approach to appeal to the engineers and no-nonsense executives that would need to find information quickly.

Wireframing

I used a modular, blocky, straight-line approach to appeal to the engineers and no-nonsense executives that would need to find information quickly.

Wireframing

I used a modular, blocky, straight-line approach to appeal to the engineers and no-nonsense executives that would need to find information quickly.

Wireframing

I used a modular, blocky, straight-line approach to appeal to the engineers and no-nonsense executives that would need to find information quickly.

Syntron Product Wireframe
Syntron Case Study WIreframe
Syntron Reference Library Wireframe

Visual Design

Using the established brand color palette, I applied color-coding to each of the product lines that would make it easy to identify groups of products and their related documents. The rest of the site would use only a few primary colors to keep the focus on the products.

Visual Design

Using the established brand color palette, I applied color-coding to each of the product lines that would make it easy to identify groups of products and their related documents. The rest of the site would use only a few primary colors to keep the focus on the products.

Visual Design

Using the established brand color palette, I applied color-coding to each of the product lines that would make it easy to identify groups of products and their related documents. The rest of the site would use only a few primary colors to keep the focus on the products.

Visual Design

Using the established brand color palette, I applied color-coding to each of the product lines that would make it easy to identify groups of products and their related documents. The rest of the site would use only a few primary colors to keep the focus on the products.

Syntron Style Tile

Final UI

The final design is polished and reflects the Syntron brand through color and a strong grid layout. Users can easily navigate through product categories, request quotes, and even use a custom-developed tool to help them find exactly the right product part.

Final UI

The final design is polished and reflects the Syntron brand through color and a strong grid layout. Users can easily navigate through product categores, request quotes, and even use a custom-developed tool to help them find exactly the right product part.

Final UI

The final design is polished and reflects the Syntron brand through color and a strong grid layout. Users can easily navigate through product categores, request quotes, and even use a custom-developed tool to help them find exactly the right product part.

Final UI

The final design is polished and reflects the Syntron brand through color and a strong grid layout. Users can easily navigate through product categores, request quotes, and even use a custom-developed tool to help them find exactly the right product part.

Syntron Mockup
Syntron Homepage
Syntron Product Page
Syntron Contact

MORE CASE STUDIES BELOW 👇

MORE CASE STUDIES BELOW 👇

MORE CASE STUDIES BELOW 👇

RTC Rebrand
Woman's Pregnancy App

© Christine Maggi 2018

© Christine Maggi 2018

mschristinemaggi@gmail.com

mschristinemaggi@gmail.com