106 Group Website

106 Group WebsiteThe 106 Group homepage

Client: 106 Group, a cultural resources management, planning, and interpretation company with offices in Minneapolis/St Paul and Washington DC/Alexandria

Link: www.106group.com

Role:Project manager, interactive designer, and developer

Primary goal: Redesign the company’s website bringing a fresh design and new organization to the site

Tertiary goals: Allow for faster and easier content edits, improve search engine visibility, and showcase more project examples and client testimonials

Technology used: XHTML, CSS, Adobe Flash, Actionscript 3.0, XML

The Process

106 Group Portfolio PageThe portfolio page of the 106 Group

As an employee of the 106 Group, I led a team to revamp the company’s website. The previous website had served the company well for many years, but as with many websites, time brings organic growth to the site architecture. One goal was to reorganize to help convey a consistent message.

We started by creating new site architecture. Then we mocked up sample paged in Photoshop. With both approved, I started the template in XHTML/CSS. We thought about using a content management system, but since I was to be the person who updated the website, we could avoid the time for content management system development. However, the XHTML/CSS template allows for an easy theme or skin to be created if we add a back-end in another phase of the project.

The company had recently started creating project specific one-sheet pdf’s dubbed “sell sheets.” For consistency and ease of project updates, we included these as links from the sidebar of each service page.

Flash element development took three phases with approvals at the end of each phase:

  • Basic “storyline” in a text only format
  • Photoshop mockups of each slide with all imagery and text
  • Flash animations based on the static mockups resulting in slow, simple looping Flash elements

Tricks along the way

106 Group Portfolio PageA company directory listing bios visible with javascript to shorten the overall length of the page.

A few pages presented interesting design challenges:

  • With so many service areas in the portfolio, we wanted to use CSS drop-down menus in the sub-navigation to allow for easy navigation within the portfolio. However, the two Flash elements (one on the homepage and one on the main portfolio page) always displayed on top of the CSS drop-down menu. We ended up using two different Dreamweaver templates to present the drop-down menu when needed in sub-portfolio pages and removed the drop down menu when at upper-level pages.
  • The number of employees did not warrant individual pages for each person, but if one page was used the biographies of each employee would result in a lengthy page. We chose to use Javacript to allow the user to reveal the individual employee biography when desired. The result is a nice clean page of each employee’s picture, name, and title.
  • When the previous website design was implemented many years ago, it changed the site architecture and used flash based navigation, resulting in dwindled search engine rankings. An important requirement of this redesign included search engine optimization and results at or higher than with the previous design. Page filenames and locations were unchanged in this redesign, but content changes and spider-friendly navigation resulted in many pages having higher organic search engine results.
  • We also made sure to include Google Analytics to track users of the site, since the previous design did not include analytics.