![Wight & Company](http://web.archive.org./web/20150905053004im_/https://www.drupal.org/files/styles/grid-8/public/Wight-Company.jpg?itok=JtbFINlt)
Wight & Company (Wight) is an integrated architecture, engineering, and construction services firm with offices in Chicago and Darien, Illinois. Wight has expertise in key markets including corporate, commercial, federal government, higher education, local government, PK-12 education, and transportation and infrastructure.
TOKY Branding + Design created a website that sets Wight apart from the all-too-common aesthetic and functionality of competing firms. TOKY specializes in digital and print work for clients in architecture, building, and design, as well as the arts, education, and premium consumer products.
Wight was ready to move away from its outdated, custom content management system (CMS) and was open to suggestions. The firm’s marketing team wanted a CMS that would support the desired front-end aesthetic while also providing a user-friendly back-end admin experience. After the site's wireframes were finished it was evident to us that Drupal would be our proposed solution. With related projects, news stories, and people appearing throughout the site, Drupal's entity system, Views, Entity Reference, and Media modules were a perfect fit.
The primary goal of this project was to introduce Wight’s new brand positioning, which shifted its identity from a “get it done, design-build” firm to one that focuses on world-class design and quality construction — but not always both at the same time. To do this, we essentially split Wight’s extensive portfolio into two: one for design services, and one for delivery services. On the Home Page slideshow, when a user rolls over the “Design” side, she sees links to the markets, services, and projects that fit under design. When she rolls over “Delivery,” she sees a different set of links directing her to the markets, services, and projects relevant to delivery.
Wight wanted to tell its story in a stimulating way — to inspire curiosity in users through thoughtful and unexpected details within the page design. Moments of surprise are scattered throughout the site, including within the prominent Home Page ampersand, which was inspired by the “&” in Wight & Company. When a user hovers over the symbol, it becomes a navigational item pointing to various process-centric pages on the site.
An underlying goal of the project was to distinguish Wight from competing firms, many of which use a full-page, basic transition Home Page slideshow to showcase projects. To set Wight’s Home Page — and with that its work — apart from the rest, we built the slideshow from scratch so it can accommodate one image, two images, one video, or one video and one image.
Wight has over 150 projects in its portfolio, and as is often the case with an architecture firm’s portfolio, the projects represent a wide range of content. While some projects lend themselves to an in-depth case study with a full slideshow of big, beautiful images, other projects are not as photogenic, and may not require detailed descriptions. We provided Wight with two separate project templates to suit these needs. In each version, staff can turn fields on or off based on available content. We also gave Wight’s internal staff the ability to exercise creative control over a number of site features, including the color of rollovers throughout the site.
With a staff of 175, it was important to Wight to showcase staff of all levels, not just leadership. All staff members are represented on the People Page, which is sortable by leadership, design, delivery, corporate, and a variety of keywords ranging from capability to location. Bios for the leadership team contain a mix of images, text, and video.
The new site is fully responsive and all pages — including the complex Home Page slideshow — look great on desktop, mobile, and tablet.
In terms of development, this project took ten months to complete. We used agile project management and had milestones every two weeks to review and test specific sections of the site. In total there are 14 different page layouts used across the site that have all been functionally tested in the latest versions of Chrome, Firefox, Safari, Chrome for Android, iOS Safari, and Internet Explorer versions 8-11. In terms of build tools we relied on Sass, Gulp, Vagrant, Chef, and Git. On the back-end we developed five site-specific custom modules used for site settings, blocks, and other minor tweaks to the display and management of the site.
Given the importance of the ampersand in the Wight & Company name, we needed to ensure that the symbol would display properly (“&” rather than “&”) on pages throughout the site. We were happy to work with Jody Lynn on a patch to Drupal 7 core that fixed a double-escaping issue on the Block administration page. The patch was accepted and included in the release of Drupal 7.36.
Eric Thoelke, Executive Creative Director
Jay David, Interactive Creative Director
Deana Myers, Project Manager
Robert Paige, Designer
Daniel Korte, Developer
![Wight & Company - Projects page](http://web.archive.org./web/20150905053004im_/https://www.drupal.org/files/styles/grid-8/public/Wight-Company-Projects.jpg?itok=GCrWerm7)
![Wight & Company - Project page](http://web.archive.org./web/20150905053004im_/https://www.drupal.org/files/styles/grid-8/public/Wight-Company-Project.jpg?itok=pOGqG3R2)
![Wight & Company - Profile page](http://web.archive.org./web/20150905053004im_/https://www.drupal.org/files/styles/grid-8/public/Wight-Company-Profile.jpg?itok=Wv4rmabN)
![Wight & Company - Why We’re Different page](http://web.archive.org./web/20150905053004im_/https://www.drupal.org/files/styles/grid-8/public/Wight-Company-Why-We%27re-Different.jpg?itok=NEq3Qwxn)