2019

A site that is modular and flexible

To match the constantly evolving state of my MTA Portfolio, I knew that ibuiltmywon.education needed to modular and flexible in its design.

I needed to have a website that I could easily adjust to suit the changing shape of my MTA.

One of the main sources of inspiration I for the form of ibuiltmyown.education was Google’s Project Ara.

Project Ara was a modular smartphone that would have allowed the user to build their own smartphone using customisable and upgradable elements that could be attached to a base phone template.

Project Ara was intended to consist of hardware modules providing common smartphone parts, such as processors, displays, batteries, and cameras, as well as modules providing more specialized components, and “frames” that these modules were to be attached to. This design would allow a device to be upgraded over time with new capabilities and upgraded without requiring the purchase of an entire new device, providing a longer lifecycle for the device and potentially reducing electronic waste.

– Wikipedia

But the modular and flexible design aesthetic of the Project Ara phone was very much how I wanted ibuiltmyown.education to embody my MTA Portfolio.

This thinking very much influenced the WordPress theme I purchased to build ibuiltmyown.education.

I had a good dig through the theme packages available on themeforest.net and settled on using the Olvi WordPress theme.

I could see from its demo pages that the Olvi theme would allow me to build something akin to the Project Ara aesthetic.

Project Ara was ultimately cancelled by Google in late 2016, but not after many years of being teased to the general public.

I had even held of getting a smartphone because I wanted to build my own Project Ara smartphone.

I ended up getting a Google Pixel 2 as my first smartphone in 2018 once I accepted the fact that I was not going to get to build my own modular smartphone anytime soon.

I couldn’t build my own modular smartphone, but I could at least build my own modular website.

Building the overview page/original homepage

As I was building a website to mirror the structure of my MTA Portfolio, I figured the best place to start growing out the site would be with the overview page for my MTA Portfolio.

For the longest time, my MTA Portfolio was an abstract that didn’t really have anything visual to represent it.

My MTA is very big with many different parts and it’s not exactly the easiest thing to visualise in its full totality.

The best I came up with was a few rough flow diagrams demonstrating the hierarchy and structure of my MTA.

My MTA Portfolio has evolved quite a bit since I first drew these two diagrams in 2019 which, again, demonstrates the importance of having a website that can easily evolve with them.

But, even before my MTA evolved further, I had to translate these diagrams into a logical, workable and responsive website structure.

I figured the best place to start building ibuiltmyown.education would be with the MTA Overview page.

I reasoned that if I could translate those flow diagrams into a coherent and modular page that clearly laid out the structure of my MTA, the rest of the website would grow from it.

The first thing the overview page had to do was highlight the key attributes and metrics of my MTA.

The Olvi theme has a wonderful number box counter element which you can embed on any page and which you can program to display any information.

So I added six number boxes to the overview page…

• One for the overall courses studied
• One for the concentrations
• One for the learning modules
• One for the years I had been building my MTA
• One for the final projects
• One for the diplomas earned

Amongst the box counters I also added a definition for ‘master’s degree’ and one for ‘transdisciplinary’ because being an overview page for my MTA, if needed to define what MTA actually meant.

Next up are my MTA’s two majors and how many concentrations, courses, learning modules, diplomas and final projects make up each major.

Depending on what device you are viewing the overview page, you will either see the two major strands side by side (desktop and laptop devices) or one major strand after the other (tablet and smartphone devices).

All the concentrations, learning modules, diploma walls and final projects are arranged into their respective groups and within their parent major strand.

Going back to the Project Ara modular aesthetic, the Olvi theme has a great page element that lets you embed banner modules.

Within these banner modules you can place whatever image, text and links you want, so I decided to use a banner to represent each of elements within the concentration groups.

So there is one banner for the concentration itself which includes a link button to the concentration overview page.

There is a banner for the learning modules which includes a link button to the learning module page.

The banner module can also be used as a slider as I have done with the learning module banner which means I was able to include each individual learning module as its own slide.

All the learning module slides circulate in an endless loop.

There is one banner module for the diploma wall which includes a link button to the diploma wall page.

Finally, there is one banner module for the final project which includes a link to the final project page.

The rest of the concentration groups continue with the same four banner module pattern.

Each concentration group is segregated by a divider which labels which major strand you are looking at.

As there are five concentration groups for both majors, you also get a nice bit of visual symmetry when viewing the two major strands side by side.

Both major strands are locked off at the bottom of the page by a panel which states the mission of my MTA.

This is then followed by a definition for ‘application’, which links back to the definitions for ‘master’s degree’ and ‘transdisciplinary’ at the top of the page.

The site’s current MTA Overview page hasn’t changed all that much from the original one I built.

The only major difference between the two is the inclusion of a header slider on the original one.

This header slider serves as an introduction to my MTA because I used the MTA Overview as the initial homepage for ibuiltmyown.education.

Right from the start, I had other plans for the site’s actual intended homepage.

Until I got round to building that homepage, I used the MTA Overview page to fill the gap.

Overall, I had created one concise overview of my MTA.

Not only does the overview page look better than a flow diagram, but it proved to me that I could visualise my MTA Portfolio in a structured form on a website!

Next, I just had to start creating the pages that all the overview page’s banner modules would link to.

Creating a concentration page template

I always intended to create one page design that I could duplicate and use as a template for each of the ten concentrations in my MTA Portfolio.

So there would be a uniform design layout for the concentration pages that would only alter with regards to the contents of each  concentration.

The first concentration page I created was for my Public Health and Personal Fitness concentration (back with it was called Public Health, Nutrition and Exercise Science)…

Overall, the page was a very simplistic design and I never completely finished it (hence why the Public Health, Nutrition and Exercise Science page has a Olvi theme stock image for its page title header).

This first version of the concentration page had one aim – all the contents of a concentration had to be illustrated on a single page in a clean and clear fashion.

That is a very tall order when you consider that each of my concentrations contains a multitude of online course, learning modules and diplomas.

The key to achieve a seamless one-page presentation of each concentration was to utilise two features of the Olvi theme I had been playing around with – the tabs element and the hover box element.

The tab element allows you to create different page panels with different content that can be switched between via the tab menu.

So I created four tab panels.

The first tab was for the learning modules…

Here I included each module as its own section which had the name of the module, a brief description of the module and a quote to further contextualise the module’s focus.

For listing the courses that make up each learning module I used the hover box element which allows you to create a panel that flips around whenever the user clicks on it or hovers their cursor over it.

On the front side I put how many courses were present in that learning module…

On the back side I listed the courses with each course name acting as a drop-down function that reveals the course data when clicked on…

I also included an identical flip box for any books I had read that I felt could be included in a particular learning module.

The next tab was for the explanation for why the concentration is a part of my MTA Portfolio

Next up was the diplomas tab that was for displaying all the diplomas I earned for the courses present in the concentration.

There are no diplomas included in the first version of the concentration pages because I never got round to including them.

Once I realised I would have to take each diploma pdf file and convert it into an mpeg file, I reasoned I could get back to the diplomas when I had time to do so.

Had I included the diplomas in the first version of the concentration page, they would have been small jpeg images arranged in a neat series grid that would enlarge when clicked on.

Finally there was the final project tab…

This tab just included an over-glorified button for taking the user to the final project page.

I had always intended for the final projects to have their own separate pages.

Forging the final project page template

I constructed the final project page template alongside the concentration page template.

This dual-development process was very intentional as I saw the concentration page and the final project page as representing two sides of the same coin (ten coins of which made up my MTA).

This is also why concentration page version 1 and final project page version 1 both share a similar design aesthetic.

As with the concentration page, I wanted the final project page to be a one page presentation.

SCREEN CAPTURE VIDEO

The first final project page I built was for Biohacking My Personal Fitness because I was very actively working on this project at the time.

This is also why the first concentration page I built was for Public Health and Personal Fitness because that is the parent concentration of Biohacking My Personal Fitness.

As with concentration page v1, final project page v1 has a full-width banner image and title to identify which final project this is and what concentration it belongs to…

Also, as with concentration page v1, final project page v1 uses the tab element to include different panels of information on the page.

I also included a big and significant quote to further contextualise and legitimise the focus of the final project.

I also used tab panels to present the different project components.

I went a bit crazy with the tab elements because I had tab panels inside of tab panels…

I also utilised drop-down chevron triggers to reveal more text when the highlighted triggered was clicked on…

The final project page v1 also introduced a new feature that I would eventually use across most of the site’s pages, the footer navigation buttons…