Full redesign of the Ajax Paving website
SeventhStreet, a Detroit Based Agency
UX Designer (Freelance)
Ajax Paving Industries, Inc. leads the road construction industry in Detroit Michigan. Their customer base is primarily comprised of government entities, automobile manufacturers, and race track owners making Ajax paving a B2B-driven organization with a relatively smaller contingency of B2C customers. As much of Ajax’s business is conducted over the phone or in person, the Ajax website is not, by nature, transactional. Although the site is not used for business transactions, it is necessary for credentialing Ajax to both prime and subcontractors looking for project partners, potential employees looking for a solid and reputable company to join and a showcase for their work which exemplifies their core principles: Quality. Safety. Productivity.
In an industry with opportunity for more web based technology use, we believed that designing a clean, modern site which leverages current technological paradigms could set Ajax apart from others in their field. And so our project began!
We designed a their new website from the ground up. Our process, as always, began with research. The SeventhStreet team met with a cross section of Ajax employees ranging from executive leadership to individual contributors. We used Ajax's old site as a reference point for collecting information about what was working, what wasn't working, and what an ideal site might do for Ajax.
Our research and evaluation efforts revealed some key opportunities for improvement that we set out to address. First, the Ajax site was not responsive. With the new design, we addressed this issue, taking special consideration to optimize the design for Android and PC/Windows devices. Second, the old Ajax site was not harnessing all of the capabilities offered by modern web technology. We were able to identify elements of the old site which had related manual business and customer processes and sought to automate these efforts to gain efficiencies. Third, the old Ajax site was limited in its use of descriptive imagery and SEO optimized language. The redesigned site offered an opportunity to increase both of these. Fourth, due to the complexity of the business, Ajax's site architecture needed to be reworked to optimize wayfinding. Finally, the calls to action on the old Ajax site were no longer aligned with Ajax's current business goals. The new site offered an opportunity to target visitor behavior and drive desired engagement with such areas as the 'Careers' page.
As we framed up the Ajax site redesign, we identified several key opportunities for improvement that we set out to address. First, we needed to make the site responsive. The emergence of ubiquitous computing has necessitated that most customer facing sites be accessible on the go, from any device. Second, there were elements of the old site with related manual business and customer processes (like building materials calculation) that had the potential for driving unnecessary cognitive load for site users. Third, the old Ajax site did not have a core focus on building trust with new customers and potential employees. A lack of descriptive imagery left it up to these users to find out more about Ajax's projects through alternative means. Fourth, due to both business complexity and growth, Ajax's site architecture had grown to a place that it needed to be reworked. Too many main navigation options exposed had created the potential to cause decision fatigue, satisficing, and navigation mistakes. Finally, the calls to action on the old Ajax site were no longer aligned with Ajax's current business goals. While customers could navigate through the site easily, of their own accord, they weren't clear what the most important pieces of information on Ajax's site were.
Having identified the opportunities outlined above, we got to work!
The subsequent sections will walk through some of our processes and mockups, and will provide context around how they fit into the scheme of the redesign.
Sketch, Invision, Trackduck
The core users for the Ajax paving website were outlined as follows:
Prime and Subcontractors, Potential Employees, Current Employees, Producers of Large Scale Developments, and Professional Racetrack Owners.
When Ajax takes on a large project in the private sector or from the government, they may subcontract out opportunities to other concrete, asphalt, and construction companies. Subcontractors visit Ajax's site to understand what potential opportunities exist for collaboration with Ajax.
Potential employees visit Ajax's site to see what job opportunities may exist at Ajax. They want to understand where the job might be located (Michigan or Florida), the job title, and the job description. They also want to be able to easily apply for the job online or have the option to download the form and bring it to the Ajax office. Potential employees want to easily understand Ajax's company culture, safety standards, and what a day in the life of an Ajax employee looks like.
Ajax's employees use Ajax's site to access their employee portal. They want to easily be able to find the login to the corporate portal. Ajax employees are proud of the great company for which they work. They want to see their company reflected in a positive light, see their corporate values depicted on the site, and be able to see pictures of their team working together. They also want to be able to see job opportunities on the site which may help them apply for roles which offer career advancement.
Navigation, Information Architecture, & User Flows
To effectively redesign the information architecture of the site, we started by collecting information about the company's business units. We compared these business units against the old navigation structure of Ajax paving site and looked for opportunities to reduce complexity. The old navigation featured eleven main navigation links. We were able to successfully reduce this to six in the redesign, nesting sub-pages, where appropriate. We also moved subordinate content into the footer navigation so as to preserve access while reducing cognitive load associated with decision making when wayfinding using the main navigation.
From a B2B standpoint, the site had to be designed to serve those who wanted to engage with Ajax about concrete or asphalt road construction, asphalt manufacturing, airport runways and taxiways construction , or race or test track resurfacing. Internally, the site needed to provide easy access for employees to access their corporate HR portal. And, as hiring quality employees is a key business goal for Ajax, we also ensured that we spent ample time designing clear, discoverable paths to employment related information on the site.
Old Site Navigation Pattern
Updated Site Navigation Pattern
Updated Mobile Navigation Pattern
Concept Design and Ideation
Once we knew what the site needed to accomplish in a general sense, we began the process of concept design and creative ideation. We pitched several initial directions for the site. Two of these concepts are illustrated below.
Wireframes and Mockups
Once we had aligned on an aesthetic direction, we began the process of wireframing and creating mockups. As the site would ultimately be implemented on a Wordpress platform, each page was designed using a visual language that could be templatized. We created all of the wireframes for the project first, placing content and designing reusable patterns. We then went through a detailed curation process, selecting our most favorite images to occupy hero and supporting imagery. Hero images were all designed using an glossy, heavily treated, black and white texture, which feel as high quality, inky, oily, and weighty as the raw materials Ajax produces.
Key Design Considerations
As we designed, we had some key site goals that we set out to accomplish. The sections below elaborate on those goals, some of the challenges we faced, and how we executed the final designs.
Design a Web Presence that reflects Company Values and Industry Status
Ajax dominates their industry in both Michigan and Florida. Their strong work ethic, drive for innovation, attention to detail, and desire to build high quality, aesthetic projects have driven their ongoing success in their field. As such, their web presence needed to feel bold, strong, and glossy. The ultimate site design leveraged a combination of black and white, heavily treated custom imagery, along with saturated brightly colored photographs of Ajax’s properties, projects, and employees.
Design a Site That Is Mobile Friendly
Ajax’s old site was not built responsively so, one of our core tasks in this project was to design a modern, responsive UI that could be used on any device. The majority of Ajax stakeholders were PC and Android users, so special consideration was given to optimize the design for these break points.
Create a Site that Serves as a means of showcasing past projects
Because Ajax’s site isn’t inherently transactional, one of the key business functions of the site is to communicate what Ajax can do for it’s potential clients and other stakeholders. From a design perspective, this meant that the site needed to be rich with imagery that could illustrate Ajax’s capabilities. It also meant that the site needed to feature a repository of projects that Ajax could refer clients to, like a portfolio. Beyond creating an imagery rich experience, we designed a section of the site dedicated to Ajax’s past projects which could be accessed via the homepage or the footer.
Offload Manual Tasks by Employing Modern Technological Paradigms
As we designed the site, we noticed there were some core activities stakeholders engaged in that were seemingly quite manual. Examples of these include:
The Job Search & Application Process
On Ajax’s old website, potential candidates searched for jobs within a list of open positions using visual search only. Once they had found a job that seemed fitting, candidates would then have to print out a paper copy of the job application and bring it to an Ajax office, in person. In response to these opportunities for offloading, we designed an employment page with a job search feature which allows candidates to search by location and job title. Search results are then displayed in list and, candidates are then able to decide whether to apply online or in person. Raw Materials Tonnage Calculation
When working on an asphalt project, contractors or subcontractors need to calculate their tonnage (raw materials) requirements as part of their cost estimation. This tonnage information is used to inform the pricing that Ajax provides their customers. Previously, before engaging with an Ajax representative, potential customers would work through a tonnage calculation process involving a calculator and a PDF with instructions for calculating tonnage requirements. To offload some of this effort, we designed a tonnage calculator that both potential customers and internal representatives can use to calculate the raw materials needs for a project. A user simply supplies the dimensions and shape of the project and the calculator provides them with their raw materials needs.
Raw Materials Tonnage Calculation
In my role, the goal of my work was to deliver finalized mockups across Desktop, Tablet, and Mobile breakpoints to be developed. As timing would have it, I had to move on to another project immediately after delivering my results. As such, the mockups I created were passed to another designer who worked with the developer to get the site engineered.