Google site: How it has evolved

I have a new website built on Google sites service: free (as usual), simple, stable, and also flexible enough to allow creating surprisingly decent website. One such "example" website is Steegle - a website offering tips for building Google sites on which itself is built. The author not only contributes frequently to Google Support forum and offers free tips but also provides paid service for advanced consulting. Many features in my own websites were taken from Steegle's tips.

My website, 5-minute courses, offers insights into Asian (mainly Japanese) cultures, especially their "peculiar" aspects which baffle people who are not familiar with them.

 

The course is offered as a small presentation, with comment facilitation at the bottom. The right side bar provides site structure, search box, contact information, and RSS link. The top logo also serves as the link to the home page, and the buttons below the logo offers shortcuts to major sections. Below is the original blueprint of the website as I planned in September.

The goal of the original plan was to provide a web-based training system for an imaginary global consulting company with the following traits:

• Visual-based: non-verbal and reflective learning rather than verbal and active learning
  
• Concept-driven: theories and concepts rather than examples and linear steps
  
• Optimized for global team: can be taken anytime, anywhere

Is the current website meeting the original goals (or even exceeding them)? I will examine the effects and see what was accomplished and what is being left.

Features
Some features have stayed the same and some did not. Here are the quick summary of features, realized or not.

• Realized: Course title, Course content, Controls, User comments, Search button, What's new, Course structure
• Not realized: Login information, Ratings
  

A majority of the functions were realized. I did not include the Login function in the website and instead chose to make it more "open" to end users, by allowing anybody with Google account to comment. Originally commenting in Google sites were allowed only to "collaborators" registered by the web master, which could have worked as a pseudo-login system. The user rating function is something that wasn't realized due to lack of technical expertise or knowledge - by default Google sites does not offer such function (yet).

Design aspects

Let's take a look at each of the realized element and see how it was designed and how effective (or ineffective) it might be.

Template design

I took the Solitude: Olive template shown to the right, took the header background off, and left the green color for texts. I also changed all font into Trebuchet. I wanted a bare-bone design with minimum shades of green (nicely realized in the original template). Although the target users are visual-oriented, I eliminated the background color to let them focus more on the content - too much design element, if not placed carefully, might lead to visual noise.

Logo & Menu design

The logo and menu are clickable image texts. They are designed to match the bare-boness of the website and its color. Functional-wise they work fine, but unfortunately the image color does not exactly match the text color (see below: icon color and title color). The logo/icon font does not match the main content either, but that is intended. Other colors and textures were not added to avoid visual noise, as in the background color: future revision should add more design variations without adding noises.

The menu icon was added also to offer a quick high-level site map for the target users who prefer to have an overview of the situation before going into details.

Main content design

The presentation was created in Google Document (Presentation) because it offered (1) easy integration with Google site and (2) Came with embedded playback control and (3) modifying the original presentation gets reflected to the Google site in real time. Presentation / Video sharing sites such as Slideshare offered similar embedding function, but none could offer the (3) real-time option. Below is the close-up of the embedded control playback.
The content itself -- presentations -- are text-based, which seems not fit the visual-oriented target users, but are designed so that each presentation only contains a handful of words. The presentations are structured so that the main argument (concept) is presented first, followed by examples.

Comment design
Google sites is by default equipped by commenting function but it is not open to anyone who visits the website: the web administrator need to give permission as "collaborators" of the web. This might work well in educational usage (commenting can only be done by students) or internal training as proposed in the original plan. This time, to (1) encourage more people to comment and to (2) test an "unorthodox" comment field mechanism introduced in the aforementioned Steegle website, a more open (anybody with Google account can comment) field is embedded as a widget. As shown in the snapshot below, when a user is logged in to his or her Google account, the profile image automatically shows up, creating an instant identity field. This feature should work especially well with the target users -- visual-oriented and international -- where identifying people by photos is considered much easier than names in texts (example: it is very hard for people from U.S. to identify the sex of the Chinese name Bai Ling).

Search design

Google site by default offers a search box. I have modified the option to add a normal Google search option in addition to the default site search (see right). This is a decision that made the original design more complicated (thus less "visual-oriented") in return of increased convenience.




What's new design

Google site by default offers a page template that can be used for posting news and updates. The What's new page offers a quick overview of what is going on in the website -- it suits the target customers who prefer to grasp the "high concept" before going into the details.









(Bonus) About author design

The About corner, the author's page was also meant to experiment with page design. Instead of the default two-column, I used three-column design with equal width, and embedded a Google map showing my address. The gorilla mask was added to add a fun element for visual-oriented target users.