SMC Diodes - International Portfolio

Description:

Sangdest Microelectronics (Nanjing) Co. Ltd., a China-based factory needed to completely redesign its online presence and consolidate to the company rebranding.

Project Details:

Dan Corcoran, a US-based customer for which I've developed ServiceSpan.net, contacted me in July 2012 saying that his wife owns a company in China and she needs a major technology improvement of the site itself, and for it to be relocated on a server farm that is fast and responsive for her customers in Europe and Asia.

Technical Specifications:

My role on this project was to work on improving the information architecture, to design the interface design, to code it in web page format, to integrate it within a CMS solution and to import and make available their products.

The Importance of Quality Work

I've been very happy to see that a customer (Dan Corcoran) brought me another customer (his wife). The pleasure was even higher considering that Dan himself was referenced by another customer of mine, Ben Ellison from Panbo.com.

The Plan

Dan and I agreed to organize a meeting with him, his wife and me over Skype and to go over the project specifications. His wife name is Yunji Corcoran and the company she is running is called Sangdest Microelectronics (Nanjing) Co. Ltd. (formerly Sensitron Semiconductor).

When we met we went over her current website as well as a .PDF document that she preferred with some notes about the improvements she wanted to apply to her website.

The site Yunji was running seemed to be very old, with very poor graphics, bad branding and very little content, badly organized, hard to navigate and not complaint against the W3C. I would just call that "a mess".

We've agreed to redesign the look and feel, to better organize the information, to organize the backend in a few sections (i.e. news, downloads, products), to import her over 4,000 products, to allow visitors to filter the products based on various characteristics and last, but not least, to host the project together.

Movable Type Interface Redesign

We've agreed to build the site backend using the movable type publishing platform.

I've started to produce a few variations of what could become the client's factory website interface design. Over a couple of weeks we've refined the initial proposals, we chose one of them and then we've refined that until the client was happy.

Since the project was quite complex and its sections were meant to display the information differently we've ended up producing more than a dozen of different design templates, one for each page type.

Important during the design phase was to consolidate the company rebranding which involved using a specific logo and a specific color scheme for the website interface.

Movable Type Layout Coding

When the interface design was completed, I've started to work on coding it in web page format using xhtml, css and javascript.

You may like to know that I'm a hand coder, I know very well these programming languages and I've even been a web programming trainer when I was student, both in my country, as well as in Rome, Italy teaching web programming at the FAO, UN.

The result that I've produced was valid against the World Wide Web Consortium (W3C).

Movable Type Integration

With the site new interface design ready in web page format, the next step was to integrate that within the content management solution we chose.

I've started the movable type development phase by creating a parent website for the English version, publishing each general page as a page under that parent website and sorting these pages in folders.

Then I've created a child blog for each and every section of the website. As I've briefly mentioned above, we've decided to structure the website content in three sections, as follows: news, products, downloads.

Since these sections were quite different, I had to code different templates for each of these sections.

Movable Type Custom Fields

While the "downloads" section needed a few custom fields for filling in all the details we needed, the "products section" needed about 70 (seventy) custom fields for providing the product characteristics which were very different from a products category to another.

Importing Products Inside the Movable Type Backend

The client provided me 9 Excel spreadsheets, one for each category of products.

Each Excel spreadsheet contained a table with a few tens or hundreds of products, each product having in between 7 and 10 characteristics.

This phase was the most difficult one because I needed to find a way which to allow me to import over 4,000 products available in Excel spreadsheets, divided in 9 categories and if that wasn't enough, each product contained up to 10 characteristics, most of them to be accommodated inside custom fields.

I've developed an intelligent approach which to allow me to import these products inside movable type and which to be simple enough for the customer to understand and use when needing to import other products.

Movable Type Search Engines

Worth mentioning is that we're publishing an individual web page for each and every product and that the whole website is optimized for search engines so that the site would attract visitors from the search engines results pages.

Movable Type Custom Fields Sorting

The customer wanted a way for visitors to be able to filter products from the product category pages.

We needed to allow a user to filter the products by any of its characteristics and sort the data display in ascending or descending order.

I was looking for a solution which to not interrogate the mysql database for the data display, but which to allow me to generate each product category page as a flat file and which to "do the magic" for the data sorting and filtering features.

After trying a few technologies I've ended up using the Data Tables jQuery plugin.