Zydar.Net/Portfolio

Tnemec Web Site

Tnemec is a company that specializes in industrial strength coatings. Go check it out at www.tnemec.com

My Role

I started this project when I was working with Lanit Consulting. My role in the project was the design lead and programming lead. I worked with an awesome team both at Lanit and at Tnemec. Our combined efforts has lead to a successful website that has met or exceeded expectations.

This site has alot going on underneath the surface. Some of the highlights are a custom CMS to manage the product and market data, a custom search engine that has a unique tagging and weighting system, JQuery modules for different UI elements, and specialized C# classes to handle state management.

The UI

Here are some designs that didn't make it, but helped us refine and get to what the customer really wanted and needed. After all, design is about solving problems!

Product Home Blue Product Overview Blue Product Overview Black Product Home Black Market Black Curve

The UI is setup for a 920 pixel maximum width and collapses down to a 770 pixel width. This is so that screens with a resolution of 800x600 won't have to scroll horizontally. Because there isn't a huge difference between the maximum and minimum widths, it's not difficult to account for both when designing a screen.

As you can see, there are several different versions of comps. We went through roughly 5 rounds of comps for this client. All of the client's print materials had a black header, and so they wanted to carry that through to the website. They also wanted the body to be white because people would be using the web site for research. Because of the high contrast between the header and the body, we produced another set of comps labeled the "blue angelic wings".

The blue comps were actually a favorite of a user group that we questioned, but in the end we settled on a design that had a more seamless white header while retaining their brand identity.

The Team

I really worked with a great team on this. Chris Miller, Sean Goggins, Arpit Ghoting, Luke Daffron, and Tim Banks. Together we put a detailed proposal together that included user experience flowcharts, comps for every screen in the system, personas, database schemas, preliminary usability testing, and detailed descriptions of functionality for each screen.