Ashley Cameron Design

Ashley Cameron Design

Z Website Browser Mockup

Z3 Technology

This post was last updated: Jul 24, 2023
ProjectsWebsites

About a 2.6 minute read

"Styles come and go. Good design is a language, not a style."

Massimo Vignelli, Italian designer

CLIENT

Z3 Technology

HISTORY

Z3 Technology is an industry-leading, USA-based manufacturer of video encoding and IP camera systems headquartered in Lincoln, NE. 

Design & Functionality

The new website design has an organized, minimalist, and intuitive interface considering the network of information available—user & product registration, software & firmware updates (conditionally), product info, search & filtering, data sheets & manuals, a dynamic distributors map, and submission forms. Rich and vibrant photography bring the website and its products to life. Large yet lightweight typography is techie yet elegantly contemporary and brings clarity and hierarchy to the content. Consistent presentation of the products on either a white background or transparent over a colorful background image made a significant difference in professionalism.

Website

z3technology.com

2020 Website Redesign

Ztechnology Website Home Mockup

The back-end of the Z3 Technology website is the most robust network of user registration, product data, and file documents and downloads Ashley has developed to date. The complex relationship of product information to users and files to products is organized in such a modern and easily accessible design for users on the front end, while it’s incredibly easy to add and revise products,  files, and specs, and manage users in the admin. 

Enhanced Navigation & Accessibility

The new mega menu navigation is a major improvement in speed and accessibility–generating fewer clicks to get to relevant information. Users can hover over a product category to quickly filter down the secondary product category.

Z Technology Mega Menu

The Support menu dropdown is visually iconic and easily recognizable, and the links have a large click area.

Z Technology Mega Menu Support

Products

On the main products category landing page, the header offers a clear snapshot of the product category features. The products are organized in a grid of thumbnail images and intuitive filtering, sorting, and search functionality in the sidebar to quickly narrow the selection for the user. 

Ztechnology Products Page

Single Product Page

On a single product page, the overview, features, docs, specs, and management software are displayed neatly by section and are easy to read based on the formatting for the given information. The datasheet is a prominent button since it’s a common resource and calls to action for requesting more information are highly visible as green buttons. Related products follow at the bottom of each product page.

Ztechnology Single Product Page

User Registration

Upon registering as a user, the form and purchased products are automatically emailed, and manually reviewed and approved by a website administrator.

Ztechnology User Registration

Firmware Updates

Users must be logged in to access their product’s Firmware Updates. The front end of a logged-in user’s Firmware Updates is personalized by the first name in the greeting. The product overview is card-like with a thumbnail image, product name, and product description. Each card links to the individual product page detailing the features, documentation downloads, & specifications.

Ztechnology Firmware Updates Cards

Software Downloads, Manuals & Support Files

The Firmware Updates page contains Software Downloads for each product by release date and version. Manuals & Support Files are also pulled in for each related product and show the file size of the download. The mass of information is condensed into expandable sections to keep the page length as concisely as possible.

Ztechnology Firmware Software And Support Manuals

Users Administration

In the admin, the Users page overview is easy to see when the user registered, their company, contact info, and how many and which products are registered to the user. The product(s) registered to each user can easily be updated.

Distributors Map

The Distributors page leads with a dynamic map of clickable nodes for each distributor location along with its contact information and a link mapped to directions. The following section is condensed using tabbed functionality for each product category of distributors to reduce scrolling on the page.

Ztechnology Distributors Map

Download Center

The Download Center is organized into tabs by the three overarching product categories to make the most of the vertical height of the page and all of the data sheets pdfs which are visually organized into a grid of thumbnails and minimal titles.

Ztechnology Download Center