Project Brief

The aim of this project is to create and develop a brand and accompanying website, rich with information on working in a team. The name of the 'organiation/company' will be a choice between either teamWorks or teamQuirks.

Initial requirements of the project state that a brand be created, designed and developed in a way that represents the company in an upstanding, professional manner, but also one that appeals to those not in a professional environment.

Along with the branding, a website should be developed, highlighting how a team of colleagues should go about taking on a task, not just as individual. The website should use current web standards such as XHTML and CSS and, where possible, JavaScript, PHP or any other development methods supported by XHTML and CSS.

Each stage of the project should be documented, annotated and planned out in as much detail as possible, in order to provide an accurate path of how to develop a project of this nature.

Elements to be considered in the development of the website and branding extend to that of promoting and launching the website, creating expectation and fulfillment for those interested.

Content to be distributed throughout the website should include:

  • How productivity can be improved through successful teamwork
  • The importance of team working in a design studio context
  • The Forming Storming Norming Performing model of team development
  • The 9 types of team member described in the Belbin teamworking model
  • The social skills required for successful teamwork which include: listening, questioning, persuading, respecting, helping, sharing and participating
  • How lack of commitment from members can directly affect the team's performance
  • Difficulties encountered in team working
  • The legacy of learning how to work in a team

A page outlining evidence of creative experimentation for the design and development of the brand and website should also be included (that would be the page you're looking at right now - surprise!). The website should be well illustrated with relevant visual material. Any external sources and imagery should also be referenced using the Harvard referenceing standard.

Brainstorming & Idea Generation

Creating a brand will be the initial stage of the development process, although before embarking upon Photoshop and Illustrator, ideas must first be put on paper for the chosen company name. The name teamQuirks will be used as a starting point and as the diagram below shows, a 'mind-map' can be drafted, branching off into possibilities for the project as a whole.

teamQuirks mindmap
teamQuirks mindmap

The hand-written sketch shown above may be a little unreadable, so I used iMindMap 5 to create a digital rendition, to provide clarity and cleanliness (see below). iMindMap 5 is a software package available for Windows platforms and allows the much of the same functionality as that of MindNode for Apple devices.

teamQuirks mindmap using iMindMap 5
teamQuirks mindmap using iMindMap 5

Whilst going through this brainstorming session, a coincidental idea came to mind in the form of 'links', and how there are links between different elements of the development process, much like the links between team members within a group. This may be a path I wish to follow in creating a brand for teamQuirks.

Brand Identity & Visual Treatments

Original sketches

Original branding ideas, pencil sketches
Original branding ideas, pencil sketches

The basic idea behind many of the sketches shown above was taken from what I mentioned earlier, using 'links' as a focal point of the branding for teamQuirks. Along with a few other ideas thrown into the mix, I began linking the 'k' and 's' of 'Quirks', combining them like links in a chain.

Another idea that came to me is adapted slightly form that of a few products and services already on the market, although not necessarily to do with teamwork. The first of which being the refreshing beverage Oasis.

Oasis (drink) logo
Oasis (drink) logo
author undefined, 26/07/2011, Oasis : Ingredients : Nutrition : GDA - Coca-Cola GB [Home of Coca-Cola UK : Diet Coke : Coke Zero - Coca-Cola GB], [online]. Available: http://www.coca-cola.co.uk/brands/category/oasis.html [26/07/2011].

"Did you know? Oasis is the number one soft drink that people drink with sandwiches" - jee, thanks for that Coca-Cola!

Another inspiration came from an online dating website, ironically, also called 'Oasis' (hmmm!).

Oasis Dating logo
Oasis Dating logo
author undefined, 26/07/2011, Oasis.com - Free Dating. It's Fun. And it Works. [Oasis.com - Free Dating. It's Fun. And it Works.], [online]. Available: http://www.oasis.com/ [26/07/2011].

The similarity between these two logos is uncanny, given that they both use the same name. The structure of each logo consists of a think, coloured stroke around each letter, merged together to give the effect of a full border around the text.

Now that I've come across more than one similar idea, it would seem idiotic to move ahead with my rendition. Bring on idea number two...

The idea below is one from my own thinking, and moving towards the idea of teamwork not just about creating links, but creatign links between the team members in particular. I quite like this idea and see that it can evolve beyond the piece of paper it appears on. Each person in the logo could be coloured differently, hinting at analogy of Edward de Bono's Six Thinking Hats and also towards Belbin's Team Roles.

Alternative branding idea, pencil sketches
Alternative branding idea, pencil sketches

However unintentional it may seem, it would also appear that I the two figures at the "10 o'clock" and "2 o'clock" positions are auditioning to be in a Lady Gaga dancing video.

In order to specifically get thi logo structured correctly, my mathematical background should help me with angles I need to consider in placing each figure. This one I'm looking forward to creating

Digital illlustrations

Adobe Illustrator representation, original logo idea
Adobe Illustrator representation, original logo idea [AI file]

As mentioned before, I will no longer be considering this idea as it is too similar to several brands already in use.

Adobe Illustrator representation, alternative logo idea
Adobe Illustrator representation, alternative logo idea [AI file]

This design is pretty much how I contemplated it to be. The symmetry of the brand shows order, consistency and sequence - three things that are essential to progressive teamwork. It also signifies a group of people working together to create something of a greater scale. Although not complete at this stage, I believe this design would stand prominently on its own. The overall aim of the branding developmment is to create a brand that publicises the company, teamQuirks, in which case, the word teamQuirks should appear somewhere within the logo.

Refining the Brand

The steps outlined below are the basic stepping stones I used to create the final design, from the pre-illustrated guides, to the choice of coulours used.

Schematic creating the final logo
Schematic creating the final logo

Now that the symbol has been completed, the next task is to add the text. A decision now arises as to what colour would be most suitable. I will make a concious decision to use only the colours used in the symbol to maintain consistency.

Final design - colour treatments
Final design - colour treatments

The placement of the text is also important to the final design of the brand. From the treatments above, by comparing the text on the left to the text on the right, my belief is that the brand generally looks better with the text floating to the right-hand-side of the symbol. The list below porvides a brief synopsis for each of the colours I have used in determining which is more suitable:

  • Red: clearly the strongest of the five, stands out the most.
  • Blue: smooth and chilled, with a relaxing feel.
  • Green: a little bright, and somewhat difficult to read.
  • Yellow: far too bright, extremely difficult to see on a default white background.
  • Purple: another relaxing perspective, that blends well with the overall design.

All of this leads up to the final design. I have chosen red as the final choice for the font colour as it's strength will stand out very well on a plain white background, moreso than the purple variation. Below, are some further treatments of the final design, including black/white scaling, how the brand would look at different sizes and also as a favicon for a website.

Final design - full branding treatments
Final design - full branding treatments

Design Specification #1

Content Audit

The following list of items will be used as the oontent audit for the website, and hence the navigation structure, leading to the overall structure of the website.

  • About teamQuirks
  • Team building methods
  • Problem solving
    • Belbin's Team Roles
    • Tuckman's Methods
    • de Bono's 6 Thinking Hats
    • Brainstorming
    • Divergent / Convergent thinking
    • Left / Right / Whole Brain thinking
    • Creativity and Innovation
  • Improving productivity
  • Importance of teamwork in a design studio
  • Social skills required within a team environment
  • Commitment and performance issues
  • Difficulties arising from teamwork
  • Legacies of teamworking
  • Benefits (Quirks) of teamworking

Navigation Structure

Primary Navigation shall contain the main sections of the website only, as detailed like so:

  • About teamQuirks
  • Team Building Methods
  • Benefits of Teamwork
  • Teamwork in Design/IT
  • Teamwork Difficulties
  • Advice/Help

Moving onto Secondary Navigation, further elements of the website can be broken down and distributed to a relevant section:

  • About teamQuirks
    • Mission Statement
  • Team Building Methods
    • Brainstorming
    • de Bono's Six Thinking Hats
    • Belbin's Team Roles
    • Tuckman's Method
  • Benefits of Teamwork
  • Teamwork in Design/IT
  • Teamwork Difficulties
  • Advice/Help

Any further links or content that do not fall under any of these categories will be available from the footer of the website, and all links would then be available from every page.

Technical Specification

Web technologies being used in the development of this project are listed below:

  • HTML / CSS
  • JavaScript / jQuery
  • Search Engine Optimisation

There is, of course, the option of using a Content Management System to help co-ordinate the content available on the website, but with little anticipation of constant updates to the content, it would seem unnecessary to take this route. The website will therefore remain as a static website.

HTML, or XHTML, is a markup language and therefore uses markup tags in building the bare bones of any website. It is also the most commonly used language in web design and is supported by all mainstream web browsers. Depending on the DOCTYPE declaration of the page, the web browser is instructed to follow the rules laid out in the markup language, the most recent and up-to-date being HTML5, which simply uses the declaration 'html'.

CSS has come a long way since its introduction to web design and is used across the web in fascinating style. With the latest updated version, CSS3, web design has risen to a whole new level, allowing for in-line animations of HTML objects within a web page. CSS is mainly used to help organise the key elements of HTML in presenting any given web page with as much hard-coded structure as possible.

JavaScript and jQuery allow websites to perform beyond the standard 'point-and-click' functionality. By assigning functions to specific events the user takes when browsing a website, elements on a web page can look more appealing and can also aid in storing temporary information to make the user's experience more enjoyable.

Search Engine Optimisation is a major part of web design. Without proper methods, a website may never see the light of day and may never be found by those who do not know the correct URL from the start. By using a combination of keywords, key-phrases and commonly used search terms throughout the website, more and more traffic can be expected and the reputation of the website increases.

Design Specification #2

Functionality

The question to be asked at this point of the development process is what the purpose of the website will be. The following few points should outline the functionality of the website and what it aims to rovide it's users.

  • To provide help and advice to team members in creating a friendly teamworking environment.
  • Hints and tips in building strong relationships between other team members.
  • Resources relating to different methods of team building and project development.
  • Information on how teamworking benefits team members as well as the project being undertaken.

Page Layouts

Just a few brief comments before you scroll down. The following sketches combine as one to give the full perspective of how the website should look, and ultimately work. What's noticeable is the main feature of the website being the gear and pulley system I intend to create and manipulate in order to display recent tweets, or links to external resources, relative to teamQuirks. The reason I would like to incorporate this gear system is to further highlight the importance of how team members working together is vital to the completion and overall flow of a project.

Header and navigation bar, preliminary sketch
Header and navigation bar, preliminary sketch

Body content and footer, preliminary sketch
Body content and footer, preliminary sketch

Main feature - gear system, preliminary sketch
Main feature - gear system, preliminary sketch

Wireframes

With the preliminary sketches taken into consideration, the wireframe of the website can now be developed using Photoshop, with the aid of '960 Grid System'. Using the 12-column grid (yea, and my name's Colm... that gets old after 25 years), I was able to accurately build a basic structure for the website, including anywhere that a margin may occur, considering headers, navigation, body content, footer and anything else that may be included.

Wireframe
Wireframe

Visual Compositions

With the basic wireframe of the website in play, the task of filling the page with the relevant elements to be displayed on the website begins. This task also includes numerous failed attempts at perfecting the gear and pulley system described previously, along with a very (annoyingly) simple solution.

teamQuirks Website, visual composition
teamQuirks Website, visual composition

As promised, here are the sketches, calculations and basic forms of geometry I used to create the 'perfect' gear wheels, trying to figure out the correct number of teeth to use on each one.

Gear building, unnecessary math

Gear building, more unnecessary math

Gear building, yet more math

...and now for that simple solution I eventually used...

teamQuirks gear building, the simple solution
teamQuirks gear building, the simple solution

...some brief details on the diameters of each gear wheel...

more gear stuff...
more gear stuff...

...and a final sketch, detailing absolute width, focal centre points and other general dimensions of each gear wheel in relation to the overall system.

A hand-drawn graphical diagram, showing how the gear system should all come together
A hand-drawn graphical diagram, showing how the gear system should all come together

Simples... kind of...

Prototype Website

Before building the website head-on, a prototype page must first be set-up. It should be as fully working as possible, laid out appropriately and as much of the user's interactions considered as possible.

The link below is the prototype page built, using the visual compositions as a basis for design strategy.

Prototype web page for teamQuirks

Navigation Bar

As envisaged in the Visual Composition, the main navigation bar turned out as expected, although the secondary navigation menu has proved to be difficult to implement. The structure and interaction of the sub-level navigation menu is very important to the overall flow of the website, and therefore must be perfected. With an untidy menu, the user will most likely be deterred from progressing further into the website.

Body Content

For some reason, any links in the first paragraph are unclickable along with the text itself currently unable to select (e.g. for copying as a reference). This fault has me stumped, but when I figure it out, I suspect I will be ecstatic (on the inside, of course).

Gear System

It would seem that the mountain of planning has come to fruition. Each individual gear wheel has been placed in an absolute position and the aim now is to use jQuery navigation to rotate each of the wheels at relative speeds to give the effect of full working order, and to project the each of the individual tweets or snippets up the page... at least I would hope so anyway. One unforseen problem has occurred here in the form of adding content to each individual page. As each page will have unknown, differing heights, the length of the pulley belt would ultimately have to change for each page. The most beneficial way of correcting this would be to house the entire system within one rectangular container in the underlying region of the body content. Therefore, the gear system could operate as normal but with the appearance of snipppets rising to the top of each page on the right-hand-side. I will do my best to ensure this is fully functional, or at the very least, perfectly ready to animate, allowing for fully flowing content, followed by the gear system.

Updated Prototype web page for teamQuirks

The link you see above is the updated prototype web page, in an attempt to correct problems from the original.

Image Slideshow

The image slideshow has now been introduced using a collaboration of a JavaScript image array, and some basic jQuery 'fade in, fade out' animation. There is a minor bug in the operation of the animation however. Each time an image fades in, one particular image constantly reappears, which then fades out bringing a the next sequential image into view.

Gear System

By simply using an image sprite to animate the 'on/off' button, the perception leaves the user thinking they have actually pressed a button to interact with the operation of the web page. What I would typically like to achieve here is that each time the user were to click the button, the rotating animation would pause and restart accordingly.

With a slight re-alignment to the elemnts imported from the sidebar on the previous prototype, the appearance of the full gear system is complete. The next step will now be to implement the animation effects. With the recent introduction of CSS3 and the object transform features it allows, it is relatively simple to rotate an object in place, about its centre of origin. Unfortunately, CSS3 is not supported by all versions of web browsers on the market, and those that do support CSS3 functionality, it is dependent on the user as to whether they are actually currently using the most up to date version. One way to counteract this inconvenience is to use jQuery animations. One particular code snippet seems viable and that is the one I have attempted. It can be found on Google Code.

Source: shalkto...@gmail.com, Comment, 27/07/2011, Examples - jqueryrotate - jQuery plugin that rotate images (and animate them) by any angle - Google Project Hosting [Google Code], [online]. Available: http://code.google.com/p/jqueryrotate/wiki/Examples [27/07/2011].

Despite these useful examples, I still cannot achieve any animations. Possible reasons for this may be that my images are being loaded in via CSS and not directly with an 'img' tag in HTML. Another problem may be the jQuery version I am using, compared to that of the examples given. I will put this task on hold until further ideas come to light.

Sub-level Navigation Bar

Through some experimentation of my own, I was continually frustrated as to why the sub-level navigation would not wrk properly. Eventually, I resorted to finding a solution already in use and came across a Simple Drop Down Menu on JavaScript-Array.com.

Source: author undefined, 27/07/2011, Simple JavaScript Drop Down Menu with timeout effect v2.0 « Scripts and Tricks « JavaScript DHTML Tutorials [JavaScript DHTML Tutorials], [online]. Available: http://javascript-array.com/scripts/simple_drop_down_menu/ [27/07/2011].

JavaScript-Array have provided a very simple drop down menu, as the name would suggest. With everything laid out exactly as it should be implemented into any given website, it is also relatively easy to understand for future reference and possible adaptations.

Body Content

Miraculously, the problems encountered regarding the primary paragraph on the first prototype, and the anchor tags contained within, have been resolved, possibly down to the menu now bing in full working order. Everything seems to have come up roses.

Testing & Promotion

Before populating the website with content and information, some important tests should be completed to ensure nothing goes wrong upon launch of the website.

The best way to do this is to first check the validity of the HTML and CSS markup using the W3C Validator. When submitted to the validator, results returned show that the page does indeed pass with a DOCTYPE of XHTML 1.0 Transitional (the same can be said for this page too).

Once markup validation is complete, link checking must be done to ensure the user is not directed to a page that does not exist witin the site. The only way to get a perfect return of results is to click every link on the page, making sure the correct destination opens without any faults.

Link Testing - Stage 1

The first step to link checking is to make sure all common links are working correctly, before using the same template throughout the website. The following table details the expectations and results of this task.

Link ElementLink PositionExpected DestinationTest DateResult
Site logoheaderindex.html27/07/2011Pass
About teamQuirksmain-navabout-teamQuirks.html27/07/2011Pass
Team Building Methodsmain-navteam-building-methods.html27/07/2011Pass
Teamwork Benefitsmain-navteamwork-benefits.html27/07/2011Pass
Teamwork in Design/ITmain-navteamwork-in-design-it.html27/07/2011Pass
Teamwork Difficultiesmain-navteamwork-difficulties.html27/07/2011Pass
Advice/Helpmain-navadvice-help.html27/07/2011Pass
Belbin's Team Rolessub-navbelbins-team-roles.html27/07/2011Pass
de Bono's Six Hatssub-navde-bonos-six-hats.html27/07/2011Pass
Tuckman's Methodssub-navtuckmans-methods.html27/07/2011Pass
Divergent/Convergent Thinkingsub-navdivergent-convergent-thinking.html27/07/2011Pass
Left/Right/Whole Brain Thinkingsub-navleft-right-whole-brain-thinking.html27/07/2011Pass
Creativity & Innovationsub-navcreativity-innovation.html27/07/2011Pass
Brainstormingsub-navbrainstorming.html27/07/2011Pass
Discussion Groupssub-navdiscussion-groups.html27/07/2011Pass
Improving Productivitysub-navimproving-productivity.html27/07/2011Pass
Legacy of Productive Teamworksub-navlegacy-of-productive-teamwork.html27/07/2011Pass
--next page--body-contentsee Link Testing - Stage 2
About teamQuirksfooterabout-teamQuirks.html27/07/2011Pass
Sitemapfootersitemap.html27/07/2011Pass
Creative Experimentationfooter../index.html27/07/2011Pass
Resourcesfooterresources.html27/07/2011Pass
Valid XHTMLfooterW3C Validator27/07/2011Pass

Every common link has been confirmed as directing to its required location.

Link Testing - Stage 2

Once each page has been created, with the fully functional common links, the next step is to ensure the 'forwarding breadcrumb' links are directed to the approriate pages, in order to keep the website in full flow. The following table details the expectations and results of this task.

Current PageExpected DestinationTest DateResult
index.htmlabout-teamQuirks.html27/07/2011Pass
about-teamQuirks.htmlteam-building-methods.html27/07/2011Pass
team-building-methods.htmlbelbins-team-roles.html27/07/2011Pass
belbins-team-roles.htmlde-bonos-six-hats.html27/07/2011Pass
de-bonos-six-hats.htmltuckmans-methods.html27/07/2011Pass
tuckmans-methods.htmldivergent-convergent-thinking.html27/07/2011Pass
divergent-convergent-thinking.htmlleft-right-whole-brain-thinking.html27/07/2011Pass
left-right-whole-brain-thinking.htmlcreativity-innovation.html27/07/2011Pass
creativity-innovation.htmlbrainstorming.html27/07/2011Pass
brainstorming.htmldiscussion-groups.html27/07/2011Pass
discussion-groups.htmlteamwork-benefits.html27/07/2011Pass
teamwork-benefits.htmlimproving-productivity.html27/07/2011Pass
improving-productivity.htmllegacy-of-productive-teamwork.html27/07/2011Pass
legacy-of-productive-teamwork.htmlteamwork-in-design-it.html27/07/2011Pass
teamwork-in-design-it.htmlteamwork-difficulties.html27/07/2011Pass
teamwork-difficulties.htmladvice-help.html27/07/2011Pass
advice-help.htmlindex.html27/07/2011Pass

The development stage has now reached the point where content population can begin. Each and every page on the website can now be filled with relative information, completing the website and preparing it for launch. This content will fulfill the research requirements outlined in the Project Brief.

Website Launch

Final Website