Creating Master of Thought

Custom From Bottom Up

2020-07-30

Category: Product & Design

MasterOfThought.com is a reference website for avid lifelong learners and people who care more than average about self-development.


Code and Design Artifacts

MasterOfThought.com
GitHub Repository
July 22nd Style Guide and Design Assets
July 30th Style Guide and Design Assets

Design Process Overview

The process I took highlights two general design principles:

Follow the cyclical, progressive process up the product architecture. I followed the process I always do ensuring a strong product foundation before getting into visual design. Most of my time was spent in the beginning ideating on strategy, pulling the data together, and setting up the code.


Build to think, think to build. Once I got going, this project felt more like writing a book because the product is the content. Oftentimes authors don’t know exactly what their book is really about until towards the end of their completing it. It was a very iterative process and most of the time was spent on the content requirements, information architecture, and information design.

Software technologies Used

Javascript, Node, npm, EJS

Design Tools Used

Adobe XD, Adobe Photoshop, HTML, CSS, Twitter Bootstrap, SVGs

Strategic Foundations

1- Created an Online Copy of As a Man Thinketh

The project began with me simply feeling a need to create a new online copy of As a Man Thinketh. This is a book I have read more than 40 times in my life - more than any other - so it was important to me that it had an online copy whose style guide and design quality gave justice to the text. None of the online copies of this master work achieve this. For reference, here are the three available versions online:

  1. Project Gutenberg
  2. James Allen Free Library
  3. James Allen Library

2- Expanded the Book into a More-Comprehensive Resource on Self-Mastery

After finishing the As a Man Thinketh portion of the site, a new need emerged from a different project of mine - Learner Interests. Learner Interests is a resource for parents to find learning ideas that are relevant to their kids’ interests. It’s filled with learning ideas that nudge kids toward K12 subject matter in ways that are more interesting to them. As Learner Interests has developed, parents have been interested to know what overarching educational framework is being used to develop the learning ideas. In other words, to what end is the learning material on Learner Interests taking its users?

This is similar to another question I’ve been eager to answer for myself. What does a solid general education look like? What do I hope to provide my own kids before they reach adulthood?

It felt natural to marry this goal of defining what a solid general education looks like with MasterOfThought. Learning is about more than accumulating knowledge - it’s about achieving greatness, however that may be defined for one’s circumstances. To create the best resource possible for interest-driven learning, I need to have a strong framework for general education both defined to myself as well as for others to reference. The spirit of James Allen’s book of self-mastery fit well with the vision. Master of Thought is a reference resource on self-mastery I will develop in parallel to Learner Interests for myself, the parent users of Learner Interests, and whoever finds interest in the project. (At least, that’s the direction of the project for now.)

Coding & Design Process

Unlike most of the other software I’ve designed, for this I am the developer, so I found it easier and faster for me to wireframe the site by building it in low-fi design than to wireframe it in design software. Given that the project is basically print design (with a few complicated javascript problems along the way), the design is more decorative. Below is the design journal I kept along the way:

Early - Mid July

  • I built the framework of the site using Node and EJS. I made a simple database from javascript objects that I know how to work with. It took me over a week just to put the books data together and about a week to put the data together that climaxed in the seemingly-simple data visualizations in the foreign languages page. I spent a few days on putting together comprehensive lists and javascript object databases of cognitive biases and logical fallacies, but these were nixed from this version 1 release.

July 22

July 27

Here’s the product architecture of Master of Thought as I now see it.

Strategy

A resource for right thinking and self-mastery.

Scope

Compiled resources and visualizations.

Structure

A site map: V1, V2, etc.

Skeleton

Print design. Page variations:

  • Home page
  • Table of Contents page (of a Public Domain Book)
  • Table of Contents page
  • Chapter page
  • Book page
  • Stand alone section

Surface

  • 19th century industrial monochromatic print inspired, but with a more modern inspired primary color of teal. Teal captures the spirit of personal rejuvenation and clarity of thought better than red does.

  • Teal combines the calming properties of blue with the renewal qualities of green. It is a revitalizing and rejuvenating color that also represents open communication and clarity of thought. For Tibetan monks, teal is symbolic of the infinity of the sea and sky, while it is the color of truth and faith for Egyptians.

  • I learned about how to make illustration-inspired photography. This video helped me the most.

  • I created a few new concept and data visualizations.


July 28

  • Originally the intention was to switch to Adobe XD to design the surface layer elements of Master of Thought. But by the time I had iterated through content requirements and information architecture with my prototyping, I had already established enough of the aesthetic elements to move forward on visual design with CSS. This project turned out to be different than the design process I take with applications, because this is closer to classic print design than it is software design.

July 29


July 30

  • I spent a good amount of time studying decorative calligraphy this morning and added SVGs I bought from Etsy and then customized for the site. Here’s the latest style guide: https://xd.adobe.com/view/9ed834ce-d81a-4d31-8f56-ad6e0f0431c0-cb8b/

  • At this point, the design of the site, thought it has a classic print style, looks a bit feminine. I think that’s ok because the majority of Learner Interests users are moms and because having a site so centered around As a Man Thinketh might be a tad alienating to women today.


Future Updates

  • Implement in less
  • Get to those other sections (Cognitive Biases, Logical Fallacies)


Comments: