Diamax approached me to create a tool for their sister company Diamax Korea. The tool was to be simple to use for both administrators and users, as it would be an important asset for salespeople, resellers, and engineers traveling through tradeshows and showing off products to potential customers.
Choosing a Technology
To tackle this seemingly gargantuan project (I’m still not sure how I agreed to do this single-handedly, with only a deadline of a month and a half), I decided to use the most rapid prototyping technology I knew – Meteor. Meteor combines front-end with its templating tool Blaze, and a very easy to manage back-end built on Node and MongoDB.
I knew that this app wouldn’t need to be database heavy, and only a small handful of admins would have access to edit the database, so I knew I could trust MongoDB despite its known scaling issues. I had also had previous experience with Meteor as I used it to build my speedwriting app Nanowrito.
I also yearned to learn Facebook’s new front-end tool React, and had discovered it was now supported by Meteor. This would be the perfect opportunity to learn to implement and integrate React with Meteor.
The business and design requirements were straightforward. I already had a parent site and physical product catalogue materials, though I did reorganize and categorize product information to be more flexible yet indexable and future proof.
The site itself was to be very simple, with as few fluff elements as possible. The main focus would be on the categorization and the display of products. We decided that a list of products would need to be easily filtered, as their products would grow over time.
Many small design and engineering tweaks have been added to increase the usability of the tool. For example, to offset the drawbacks of a React/Meteor single page app, I’ve added URL variables, simple filenames and URL product slugs to make filters, searches, and products really easy to share and favorite. Interactive elements and text is larger and checked with the WebAIM color contrast checker
Developing a Style
I developed a color palette and typographic system for Diamax Korea inspired from the parent site and Diamax’s online videos. The idea was to create a reserved yet modern feel that felt strong and trustworthy.
The style is large and simple, with a design for high contrast, and responsively designed for mobile and tablet use. The product page is similarly restrained and ascetic, avoiding the lines and shadows from the parent site in an effort to be “cleaner.” These pages should be able to stand alone as product references. The contents are generated from the database, and the descriptor areas and spec table are generated from markdown.
Power to the Admin
The real utility of the Diamax Korea site is the ease and flexibility for Diamax to edit categories, products, site content, and uploaded files. The system entirely relies on Meteor, MongoDB, and Mongo GridFS. Although reactivity is nice, it’s not necessarily a requirement– though using React and Meteor does make everything blazingly fast.
The site has just been launched, and the client is hard at work populating the database with category and product information. When we first had agreed to build the app, they admitted to little to no technical background, and they frankly didn’t want to learn a new complicated interface (like their previous one), write in HTML, or deal with the frustrations of a Wordpress. Even though I settled with Markdown as a content editor, they seem to quickly be able to grasp writing in Markdown.
As they start gearing up for sales season, this light-weight custom product CMS will provide a tremendous utility for their future operations.