Teamwerks.com Redesign

Teamwerks teaser image.jpg

The Challenge  

Teamwerks, a computer forensics and technology firm, needed a fresh design for its website which had been created more than a decade ago.

The existing site content did not adequately convey Teamwerk’s strengths, had too much information, and no longer reflected Teamwerk’s focused work areas of computer forensics and expert witness testimony.

Context

I worked with a partner to redesign and rebuild the website from scratch using Squarespace. We aimed to better represent Teamwerks as a Women’s Business Enterprise (WBE) and feature the narrowed scope of Teamwerk’s work areas.

The website goals included:

  • provide strong branding and a credible online presence for Teamwerks

  • feature a modern design with a simple, clean interface

  • be secure and easy to maintain

 

Role/Services

Visual Design
User Experience
Website Design
Information Architecture Mockups
Production & Testing   

Content Strategy
Copywriting
SEO

 

Time Frame

September, 2017–January, 2018


 
 

Content and Information Architecture

The original website’s main sections were called, “People,” “Solutions Groups,” “Clients,” “Careers,” “Partnerships,” “Contact,” and “Home,” and each of these sections had numerous subsections and each subsection varying number of pages. To reduce the amount of content and feature more user-friendly names, I reviewed the existing site content and we defined a new site architecture with sections for home, “Who We Are,” “What We Do,” “Women-Owned Business,” “Philanthropy,” “Careers,” and “Contact Us.” “Women-owned business” was a new section we proposed based on the client’s desire to show Teamwerks’s various certifications as a distinguishing characteristic from other technology firms.

 
 
Teamwerks IA.png
 
 

Squarespace Templates

With the revised content in mind, I reviewed Squarespace’s templates to find options for the new design. We learned that making Teamwerks’s physical address and contact information easily accessible was very important to the client because they had heard from their users that the address was difficult to find on their existing site. With this in mind, I found a few templates (Keene, Montauk, and Harris) where an address could be displayed globally on the site.

 
 
Squarespace templates.jpg
 
 

Ideation

In early conversations, the client liked the idea of giving the site a detective feel because their business is computer forensics. Given the nature of the work, it did not lend itself easily to being depicted with interesting photography; a literal portrayal meant showing people working at computers, which felt generic.

We wanted to create a unique look and feel that differentiates Teamwerks’s new site from competitors and other business sites that use stock photography of people working on computers/collaborating in an office setting. Our early ideas included using shapes or patterns to convey the mood of the brand in an abstract way.

Eventually while thinking about what computer forensics entails, I thought of the task of looking for things in computer code, like binary or HTML; perhaps the title of each page could be hidden/revealed within a block of code and this could serve as imagery. My partner thought this idea had potential.

I mocked up hero images with both binary code (spelling Teamwerks repeatedly) and HTML to show the different textures they created, and I experimented with different combinations of light and dark backgrounds. My partner created mockups as well to compare ideas, and she built on the title-hidden-in-code idea by showing the page title word illuminated by a spotlight. She made a short animation that depicted a spotlight moving around and ultimately landing on the hidden word. We went with this animated representation with an enthusiastic signoff from the client; it was the most compelling way to create a detective feel.

 
 
 
 

Design and Production  

While building the website in Squarespace, I ran into a problem with displaying the animation as a video banner. Looking through all the template options again, I found one called Tremont that would work better with a video banner; however, although it allowed for a video banner, the video was designed to be the same height on all pages. We wanted the homepage video to be a full-screen welcome experience, but for the other pages to be differentiated with a shorter video banner. To implement videos of varying heights between pages, I searched online for CSS snippets that I could inject into Squarespace’s code editor; I got it to work through trial and error.

I designed the pages in Squarespace with my partner’s feedback and editing, and she created the header videos and supporting imagery. I chose Source Sans Pro as the body typeface and PT Sans for the navigation for their clarity, efficiency, and straightforward feel. After looking at our color options from various drafts, we chose a bright blue highlight color against a very dark grey background to convey a technical/computer feel.

 

Website Before

Website After Redesign

Teamwerks animation 2 trim.gif
 
 

Outcomes

After creating all the pages, I set up analytics and entered metadata for SEO. Once we presented the site to the client again and incorporated feedback, we conducted testing for functioning and design on mobile and desktop. With the final and happy approval from the client, we made the site live. I complied the consolidated content and project files to hand off and presented a training to the client about how to update and work with Squarespace. Teamwerks has since received compliments from their clients and partners about their new website.

The live website can be found here: https://www.teamwerks.com/