Sacré-Davey Engineering

Jenna Kc
RED Academy
Published in
6 min readOct 3, 2016

--

For this project our team redesigned the website for a local engineering company called Sacré-Davey Engineering (SDE).

My team members were Fernanda, who took the lead on design, Richard, who took the lead on testing and research.

I took the lead on planning as well as being the point of contact for the client and the web development team.

The Client

Sacré-Davey Engineering is a engineering firm based in North Vancouver, BC. They carry out a variety of large engineering projects such as building food processing plants to building mining and ore sorting sites.

SDE also handles the management of these projects. So once they win a contract, they handle it from start to finish. SDE prides itself on finding innovative solutions, being on time and budget and keeping their clients updated as the project progresses.

The Opportunity

From the kick-off meeting, we learned that SDE has been growing, from a family owned business to a global, full-service, multidisciplinary company.

More importantly, from the way the client talked about her company as well as the photos on SDE’s social media, Sacré-Davey Engineering seemed like a down to earth and a fun place to work.

The original website tells a very different story. It is generic, outdated and overwhelmed with content.

The main goal of the project was to design a website that better reflects the company. After the kick-off meeting, we specified this to 5 goals:

Project goals

1. History of how SDE started as a family business to where they are now needs to be showcased

2. The career page needs to accurately show the work culture to attract potential employees

3. The IA needs to be restructured so the navigation makes more sense and the users’ are not overwhelmed with information (this will be explained more in the planning section)

4. The client wanted a clean, modern and professional look to the website

5. The “Sacré-Davey Difference” needs to be highlighted

The research for this project consisted of a survey we sent to employees and partners of SDE, a visit to the office and a competitive/comparative analysis.

Survey findings

Through the survey, we found some keywords associated with SDE were:

  1. Value
  2. Growing/Expanding
  3. Quality & innovation
  4. Experienced

And employees described the work culture as:

  1. Diverse
  2. Challenging
  3. Fun
  4. Family

These findings aligned with how SDE was described in the kick-off meeting.

Competitive Analysis

  • Most companies only showcase a few of their biggest projects (SDE showcases all projects in a list form)
  • There is a clear hierarchy in the information so even on text-heavy pages didn’t feel overwhelming (SDE has blocks of text and no hierarchy of information)

Office visit

A photo of us on the right and the SDE team on the left at the office visit

The most memorable part of this project was visiting the SDE office. We met with a few executives and found that they were approachable, friendly and very funny. This propelled us even more to show those traits in the website.

Through the visit, we also found out that SDE gets most of their work through bidding on contracts, referrals or through networking at tradeshows. So when potential clients look at the website, they already have some knowledge on SDE and what the company does.

This changed our focus from “website needs to pitch to potential clients” to the “website may be the deciding factor in SDE getting a contract”.

Personas

We developed two personas.

Bill is a senior engineer that is considering SDE for an Oil & Gas project. He wants to…

  • See what kind of company SDE is and if their values align with his company
  • Find the information he needs quickly and efficiently
  • See why he should choose SDE over another company bidding for his project

Max is a mechanical engineering interested in working for SDE. He wants to….

  • See if there is opportunity for growth in the company
  • Find the information he needs quickly and efficiently
  • See what it would be like to work at SDE.

Site map

This is the original site map of SDE.

Original Site Map of SDE

These are some of the issues we addressed:

  1. About us: Users have to click through the drop-down menu of “Mission, vision, values”, “Team” and “News” pages to learn about SDE
  2. The homepage doesn’t show the user what SDE does clearly
  3. Featured projects: There is only one sub navigation for the ‘Industrial’ sector. Users have to click through the drop-down menu to see projects in each sectors.
  4. The sectors listed under sectors do not match the sectors in featured projects.

This is how we addressed these issues

Changes made to the site map
New Site Map

With the original site map, the primary persona, Bill would have to go through 9 different pages to get all the information he wants.

Pages Bill would go through on the original website

With the new site map, he only has to go through 4 pages to get the same information.

Pages Bill will go through on the new website

Color

Logo for Sacré-Davey Engineering

Sacré-Davey has 2 company colors: dark blue and black. We found that designing within these colors made the website very dull so we introduced a turquoise- blue color. We used this new color for things we wanted to stand out.

The color scheme for SDE

Iconography

To break up the heavy blocks of texts to more digestible chunks, we introduced icons whenever we can.

Original “About us” page that was separated into 4 pages→ Paper prototype → Mid fidelity mock up→ high fidelity mock up

We followed a similar process for all the pages that were redesigned.

First screen — In the example of the “About us” page, we first looked at the site map to see what pages needed to be compiled.

Paper prototype — Then we took different sections and tried different layouts to see where each section made most sense.

Mid fidelity — After the layout was finalized, we added content from the original website. This was one of the most painstaking part of the project. We went through blocks and blocks to text to segment, clean and ensure the content fit in the layout.

High fidelity — After we tested the mid fidelity screens, we added color and iconography. Some iterations can be seen in the “About us” page where we decided to have more of a linear timeline instead of photos.

Summary

Although this project presented many hurdles and obstacles, I learned a lot from pushing through them. Working with Fer who is great UI and visual designer, I learned many skills and tips in design. Working with a tight deadline allowed me to practice time management and team management skills. Working on a project that required a lot of input and assets from the client allowed me to practice client management skills and helped build a stronger relationship to the clients.

--

--