August 16, 2016
Diamax Korea
A light-weight, meteor-based product catalogue and CMS
Diamax Korea Homepage
ClientDiamax Korea / Diamax Inc.
GoalTo create a simple, light-weight, and mobile-friendly product catalogue for Diamax to easily be able to update.
RoleInformation architecture, interaction design, copywriting, graphic design, front-end and back-end development
AgencyFreelance
TechnologyReact, Meteor, SASS
Links
Diamax Inc. (parent site and inspiration)

Introduction

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.

Initial conceptual sketch

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.

Meteor + React

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.

Design

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.

Home page wireframe
Product organization and information architectyre.
Product grid wireframe
Single product page wireframe.

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

Lots of filter options

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.

Part of the Design Spec

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.

Product Page with Mock Data

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.

Editing static content like the homepage background, the about page, other settings
Creating, editing, and sorting new categories of products. The order of categories is very important.
Individual categories lets admins "link" various products to this category. The linking was determined to potentially not be a one to one map, so admins could check off which products to add.
Individual categories lets admins "link" various products to this category. The linking was determined to potentially not be a one to one map, so admins could check off which products to add.
Posts are like tiny, ephemeral blog posts that appear on the homepage. These are used for announcements and such.
Each post is edited like a blog post, with a title and markdown. They can be as long or as short as the admin likes.
The File Manager is a simple but quick and effective view for admins to see where files are assigned, and delete files if needed.

Conclusion

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.