Brief
TranTech's website hadn't been updated since 2011 and needed to be rebuilt from the ground up. I led the site's redesign from background research to final mockups.
Client
TranTech Engineering is a small structural, civil, and construction management consulting firm for public works projects. Almost all their clients are city and county governments in the Pacific Northwest. As such, the primary audience they want to attract on their website is local public works staff.
Addressing the Target Audience
My primary method for attracting potential clients was to differentiate TranTech from large international engineering firms; TranTech provides specialized transportation services to local public agencies. The first way I achieved this was by helping users identify and define TranTech's three main disciplines—Structural Engineering, Civil Engineering, and Construction Manangement. The second way involved promoting TranTech's commitment to communities of the Pacific Northwest.
Preliminary Research
After establishing clear goals for the site, I compiled a list of common questions that TranTech's clients have had, and researched how competitors have used their website to provide this information. Furthermore, I compared specific components of competitors sites—such as their navigation menus, about us page, or most prominent content—to evaluate their strengths and weaknesses, and to identify successful industry patterns.
Initial Wire-Framing
Sketching ideas out on paper allowed me to quickly develop concepts for the site's layout, incorporate feature requests from multiple employees, and to test the effectiveness of these ideas with rudimentary user testing.
Visualizing the Layout
Once I had a few strong layouts from my hand-drawn wire-frames, I used Adobe Illustrator to draw it out to scale. In this phase, I finalized the placement of content and how users could navigate to specific sections of the site. This phase involved extensive user testing which helped refine the layout, navigation titles, and eventually the written content.
User Interface
The user interface design process continued to refine the user-experience with frequent user testing. The end result was a colorful and easy to use website that helped refresh TranTech's brand image.
Previous to my involvement, TranTech had no common visual identity, so when designing the website's interface, I developed a visual language that was adaptable far beyond the website and to their printed materials—including a new template for all their project proposals.
Previous to my involvement, TranTech had no common visual identity, so when designing the website's interface, I developed a visual language that was adaptable far beyond the website and to their printed materials—including a new template for all their project proposals.
