Overview
Stantec Inc. is an international professional services company in the design and consulting industry. Stantec provides professional consulting services in planning, engineering, architecture, interior design, landscape architecture, surveying, environmental sciences, project management, and project economics for infrastructure and facilities projects. The Company provides services around the world through over 22,000 employees, operating out of more than 400 locations in North America, and 7 locations internationally.
While working at HUGE, My colleagues and I were tasked with redesigning Stantec’s websites. We started with updating the US and Canadian regions, then pushed those updates to their international sites. Stantec was interested in refreshing their brand identity, elevating their thought leadership, updating their template system, and boosting their SEO. The original ask was to update certain components with minimal disruption to the existing back-end code. After a conducting a few stakeholder interviews, we realized it was going to take more than that to address our clients needs. Stantec’s site was built using Adobe Experience Manager (AEM). AEM is a content management system (CMS) designed to help enterprise companies manage their sites. While working on Stantec’s site I conducted stakeholder interviews, designed multiple template systems, wired landing pages and components, and created a bunch of prototypes for our developers. We redesigned the homepage and created flexible templates for the rest of the site.
My Contributions
Strategy
User Research
Wireframes
Design
Prototypes
Challenges
The original ask was to simply update a few components. This seemed like a straight forward task at first, but once the project began, our client's needs required more. To better understand the root of the problem, we have to take a step back in time. HUGE originally redesigned this site back in 2013. Responsive design was still a new philosophy to most clients back then. HUGE created all of the design assets, then handed them off to Stantec to have them developed. Their developers were not well versed in responsive design systems. Stantec didn’t have HUGE Q&A the site before launch, resulting in a lot of broken components, alignment issues, and responsive design flaws.
Fast forward to 2016, Stantec wanted us to update those components without disrupting the back-end code. It would have been extremely difficult to insure the quality of our design updates if we moved forward with this direction. Designing on a broken foundation would only get worse when it came time to make future updates. Setting our client up for failure wasn’t an option. We shared our concerns, and came up with a new game plan. Rather than redesigning the full site at once, we focused on the key pain points that surfaced during discovery. We would then move forward with the rest of the site's design after launch.
“We struggle with [branding & messaging]... we can’t have just one message, because we offer so much more.”
Adobe Experience Manager (AEM)
I've had a lot of experience designing template systems that fit within a CMS’s parameters. This was my 3rd time designing components for AEM. One thing I like about designing with restrictions, is it forces you to push your creativity. With that said, sometimes those restrictions can be challenging to solve from a UX and Visual Design stand point. To prevent the site from becoming an endless stack of rectangles (aka the layer cake), I worked closely with the design team when developing component functionality. We utilized transparent div backgrounds and strategically stacked/paired certain components. My experience designing for AEM has taught me how to bend some the out-of-the-box rules that most designers find constricting.
Design Solutions
Navigation
Navigation was definitely a big issue. The main navigation was too oversimplified. Users were often confused and had to rely heavily on “Search”. The sub-navigation was disconnected from the main navigation and unintuitive to most users. Navigating their matrix of services was a bit tedious at times. Stantec separates their services by Sectors (Markets) and Disciplines (Services). Here’s where things get confusing. Multiple sectors share some of the same disciplines.
For example, the Airport Sector could have transportation services, architecture & interior design services, and international development services associated with it. A few of the same services could potentially live within the Educational Sector. Our navigation had to be intuitive, and well-organized to retain visitors, increase leads, and increase ROI. To address this issue, I created more intuitive categories, then realigned their existing groupings to be more user-friendly.
“My clients have a difficult time navigating so I don’t even send them there anymore.”
Search
Search was another pain point that came up during discovery. Users would often browse content by location. Their search results showed offices, projects, and people’s profiles, all in the same listing. Adding filters helped reduce Stantec’s user’s frustration while searching for content.
“It just takes too much digging to where it gets to architecture.”
Templates
The site felt overwhelming and cluttered with information, making the site difficult to navigate. It was critical when updating these templates to increase their flexibility for their global site, update the overall branding of certain components, and eliminate any responsive usability deficiencies. When redesigning new components, I had to take existing elements into consideration. Retro fitting components didn’t stop at the brand level. I had to be conscious of existing interaction models too.
“Clients want to see and experience a portfolio within their marketplace. What I really want people to do is call so we can sell them over the phone. I want to tease them enough and not tell them too much.”
Components
I wired, designed, and prototyped a wide range of components seen on the site today. The components had to follow the same guidelines as our temples. They had to be flexible, scaleable, and fully responsive. A component's flexibility would be determined by the number of templates it could live on, and the number of locations it could be placed within a template. A component's scale would be determined by the amount of content it could hold. Insuring all of the components were fully responsive was critical. All of the work you have seen thus far was designed mobile first.
When creating new components for the site, it was important to take the level of effort (LOE) to build them in to consideration. The resourcing gods blessed my project with 2 interaction designers. This enabled my colleague and I to rapidly explore a number of interaction concepts simultaneously. We could then regroup with the rest of the team to determine the LOE required for development. All of the interactions featured on this site were created by me using Principle, framer.js, or webflow.
“Clients get scared that we’re this behemoth. Clients still want to know that they’re working with a boutique firm.”
Content Localization
Template systems are perfect for companies with sites in multiple regions. Part of our lead-gen strategy required Stantec to push content to users based on their location. This enabled Stantec to target various audiences autonomously. I also created the selector which enabled users to switch regions.
Thought Leadership
Surfacing business insights has been a huge trend for companies in the last couple of years. It shows relevancy, creates subscribership, and can even sway perceptions of existing/potential customers. Stantec needed to generate more thought leadership to keep up with their competitors. I helped design a dynamic feed that could be managed via UberFlip. The feed could be placed on any of Stantec's service landing templates. The content in the feed would be specific to a users region and site activity.
