Designer and Creative in Seattle, WA
Absher - Cover Image.png

Absher Construction

Website architecture and design for Absher Construction Company.

 

CASE STUDY

Absher Construction

Building an intuitive website architecture and modern design to match the innovative and progressive approach of Absher Construction.

 
Absher-Homepage.png
 

Project Details

Agency: Rusty George Creative
Role: Lead Designer & Researcher
Timeline: 4 months
Tools: Adobe XD, InVision, Adobe Premiere Pro, WordPress
Disciplines: UX Design, Research, Site Architecture, UX Writing, Visual Design, Videography

The Challenge

Absher Construction is a mid-sized regional contractor and was in need of a website that accurately reflects its values and the quality of work it produces and communicates Absher’s innovative and modern approach. Being located in Puyallup, Absher has had challenges recruiting and retaining top-tier talent even though they have an incredible company culture. My team and I restructured and redesigned the Absher Website, taking a strategic approach to the structure, layout, and design to create an inspiring, effective site that attracts new hires and potential customers, letting Absher’s culture and personality shine through each page and interaction.

Project Goals

  • Position as an experienced, innovative, modern company through sophisticated design and user interface

  • Elevate company culture as featured content information and create a blog-like area that can act like a social media feed where Absher can post photo galleries from events, updates about new hires, and more

  • Encourage potential employees to apply for a job

  • Balance in the innovation of design with down-to-earth brand personality

  • Showcase the company’s project portfolio in a dynamic, sortable way

  • Create an elegant user experience that is confident, not too flashy or complicated

Data, Competitor Analysis, and Research

I compiled a hefty research report summarizing an analysis of their current site based on things like brand, usability, content quality, Google Analytics analysis, and more. I researched other websites of construction companies and general contractors and created a competitive analysis chart with rankings by analyzing each site compared to the current Absher site. I found that the majority of people weren’t staying on the site for long, they were mostly going directly to the portfolio of projects, and that not very many other construction companies/general contractors talk about their company culture—at all. Check out the full Research Report.

With Absher Construction’s help, we put together a small group of potential users to understand their usage of the currently existing site, to confirm our site architecture decisions, and to watch how they navigated through a site tree of the new site hierarchy.

I organized a card sort with the group to learn how other users might logically look for information on the site. Based on the results of this card sort, we were able to make a few quick tweaks to our proposed navigation structure. Through watching the users navigate the site tree, we identified a few additional sticking points in the navigation and were able to correct those for a better outcome on the next group of users we tested.

Personas

I developed three personas based on the three main audiences for Absher’s website—the prospective employee, the prospective client, and the contract partner. We made the majority of our decisions based around Sarah’s user flows as she represents the audience that Absher prioritized the most, but while always keeping clients and contract partners in mind as well.

 

Sarah, the Prospective Employee persona

Mark, the Prospective Client persona

Thomas, the Contract Partner persona

 

Site Architecture and Wireframing

Taking into account the audiences and site goals, along with the data we had gotten from our analysis and user test group, I finalized the new site architecture that would be the most successful and logical. When I had come up with a clear direction, I created a site map and some basic wireframes to present to the client. Using Adobe XD and Invision, I was able to make use of the prototyping abilities to quickly and clearly communicate the flow through the site to the client.

Absher Sitemap

 

Homepage Wireframe

Who We Are Wireframe

Sortable portfolio wireframe

 

The Solution

With a more logical site architecture in place, we created a stunning and modern design with subtle animations and elements to help build and craft the story of Absher’s culture. Using a video background header, the first thing the user sees is dynamic imagery of Absher’s people in the forefront. We highlighted some case study/featured projects, created a sortable portfolio, gave them a culture page, and built a “What’s Happening” section where Absher can post new content frequently and easily.

 
 
 
Absher full-screen takeover navigation structure. Overlay changes to blue on hover.

Absher full-screen takeover navigation structure. Overlay changes to blue on hover.

 
featured-project.jpg