Example Google Site for Design Plan

Design plan for a team Google Site

Lucas Hall UX

This design plan for working with a team Google Site is based on experience I’ve had working with some different teams here at Costco. I hope this approach provides you with some basic walk-through instructions for getting your team’s Google Site up and running.

Design Plan Step 1: Research

Before any line is drawn, first become an expert user of your site. Learn what goals or expectations your users have of your site. Learn what hinders them, causes them question, or makes them hesitate. We do this through the objective dismantling of our own assumptions. We do this through research.

Usability is how well a design meets a user’s needs without causing them hinderance, hesitation, or question.

Set up Google Analytics to learn how your current site is doing
Hooking up Google Analytics is possibly the easiest/cheapest way to see the behavior of your users.

From analytics, you can see which pages get the most traffic. Keep in mind that this is often highly influenced by the current information architecture.

Also, there isn’t any way to know your user’s intent from this tool. You can’t tell what they were looking for.

Gif Animation of process to set up Google Analytics with Google Site

Getting to Know Our Users Survey

The Getting to know our users Survey is a form that is emailed to 20+ users. This form gathers information about past UI experience, and UI needs/expectations for your future site.

The key to gather valuable info is to keep it short, but precise. Users will fall away if the survey takes longer than 5 to 7 minutes.

Conversation / User Testing
When time and budget permit, the best way to empathize with your users is to meet with them. Ask them questions from the survey. Observe them use the current site. Dig deeper for qualitative information. Take notes (have someone take notes).

Refrain from deciding on a design until you’ve interviewed all your users and have had sufficient time for processing your notes, paying special attention to patterns in conversation.

Design Plan Step 2: Design

Once you have gathered information about your users, and feel you have a good grasp of their goals, it’s time to work out the Information Design and the Visual Design.

First get to know a bit about the platform you are going to work with. Note that Google Sites is pretty limited with what you can do.

Information Architecture
With Google Sites, information architecture is where you will get the biggest bang for your buck. How is your information grouped? Is it grouped and presented to be in alignment with what users expect?

First, draft a grouping strategy that seems to align, then use a simple card test (free from Optimal Sort) to validate.

Sketch / Layout
Google Site can be constraining, but you still have some room for screen information layout. Everything on screen competes for the user’s attention with every other thing on screen. Users spend most their energy at the top of the screen, then gradually lose interest as they scroll.

Prioritize the most important information to the top left of the screen. Deprioritize downwards.

Design Plan Step 3: Develop

Site development can be as complex or as quick as you need. For those who are tight on time, get the architecture right, then select a theme that is low in complexity.

For those who like to develop, here are some tips.

No Javascript / Yes Google Apps Script

Often, people expect to do great things with javascript. Sadly, when it comes to Google Sites, you don’t have that option.

You can use Google Apps script to do some cool things from a development standpoint, but often this proves to be hard to maintain for a team.

Check out the Google Apps Script page for more instruction here.

Google Sites doesn't allow Javascript

Google Sites HTML view has a mechanism that scrubs your custom html code, removing comments, javascript, and some CSS. Because of this, it’s best to devise a means of maintaining your code externally.

Refrain from managing code in Google Sites. Test often and save often using a standard text editor (notepad, dreamweaver, sublime text).

Example File Management


There are many resources out there that can help you get your google site up and running. Dive deep to get the most out of your team’s Google Site. Remember to keep your site usable for the user. Keep it simple and free of clutter. Prioritize to the user’s expectation.

Share link via: