The AEC Firm Website Development Process

 

A great AEC firm web­site doesn’t just hap­pen. It needs a defined process with each phase informing the next. LecoursDesign was hon­ored with win­ning the Best Web­site Award at the SMPS Awards Gala for Randall Lamb’s site. We repeated the win, at the next Gala, for Bergelectric’s site. Cre­at­ing award-winning web­sites requires vision­ary clients and a process of spe­cific phases to ensure smooth project deliv­ery. To help you with your next web­site project, I summarize each phase below.

Plan­ning (2″“4 weeks)
First, we estab­lish goals and tac­tics for your new site. Every new client and employee will pass through your website. So we con­sider how your new site will be a hub for your firm’s offline and online mar­ket­ing ini­tia­tives. We review your cur­rent site’s ana­lyt­ics to see where users go on your site, how long they stay, and how they find your site (key­word search and refer­ring sites). We review sites you admire, including your competitors to evaluate their online presence.

Archi­tects call this phase pro­gram­ming. In web­site devel­op­ment, we call it plan­ning. In both cases, it’s about gain­ing clar­ity on the why, what, and when of your new site. Even more impor­tant, it’s about who; the user and their needs. We develop three “per­sonas” for the tar­geted user arche­types who will be vis­it­ing the new site. These “per­sonas” are a com­pi­la­tion of demo­graphic infor­ma­tion and user pro­fil­ing at the three buy­ing stages: researcher, eval­u­a­tor, and pur­chaser. It may sound silly, but I rec­om­mend giv­ing each per­sona a name and a photo so they seem as real as possible.

This phase focuses on infor­ma­tion archi­tec­ture: what sections/pages to include in the new site and how will the user find her way to the infor­ma­tion she seeks. This results in a Site Map: an out­line of all the pro­posed pages orga­nized by nav­i­ga­tion but­tons and page titles.

Deliv­er­able: Findings & Recommendations, Strate­gic Brief (2″“3 page doc­u­ment out­lin­ing why, what, when, who, goals and scope of the new site), Personas, Keyword/SEO Research, Site Map

Pro­to­typ­ing (2″“4 weeks)
After approv­ing the Site Map, we cre­ate greyscreen pro­to­types of the key page tem­plates. Greyscreens, also called wire­frames, are sketches of con­tent on each key page tem­plate. They are grey because color at this point is dis­tract­ing. The goal in this phase is to focus on con­tent, not design. We used to present printed greyscreens, but now prefer digital. To really under­stand how a user expe­ri­ences nav­i­gat­ing from one page to the next, these greyscreens need to be on screen and click­able within a browser environment.

Know­ing all page titles, you must begin wran­gling con­tent. This means gath­er­ing case stories, blog content, project descrip­tions and pho­tos, people stories and photos, and about the firm infor­ma­tion. A deter­mi­na­tion must now be made for a writer and pho­tog­ra­pher or illustrator to create content you’ll need for the new site. We can help you with all this.

Deliv­er­able: Greyscreens

Design Explo­ration (2 weeks)
We bring the greyscreen key tem­plates to life with design by intro­duc­ing color, typog­ra­phy, pho­tog­ra­phy, illus­tra­tion, back­grounds, graphic ele­ments, but­tons, etc. We present two design explo­rations of the Home, About, Project Gallery and Project page tem­plates. If the new copy and photography isn’t ready, we use place­holder photos and copy.

Deliv­er­able: Sta­tic Screen­shots pre­sented on screen.

Design Refine­ment (4″“8 weeks)
We refine the design by adding actual copy­writ­ing and imagery to the ini­tial key tem­plates. Upon approval, we apply the cho­sen design to all the remain­ing page tem­plates. Inter­ac­tive ele­ments like rollovers or motion are shown as sto­ry­boards. If the site fea­tures respon­sive design (opti­mized for desk­top, tablet and mobile), and it should, then we fine tune the design for dif­fer­ent sized screens. Design refine­ment con­tin­ues through the cod­ing phase, and even after launch. A great website is never “done.” There are always opportunities for improving the user experience.

Deliv­er­able: Sta­tic .jpg Screen­shots pre­sented on a lap­top and smart phone

Cod­ing (4″“8 weeks)
Except for the greyscreens, pages so far are sta­tic. Cod­ing brings the pages to life by mak­ing them inter­ac­tive, and fully func­tion­ing within mod­ern web browsers. We code sites by cre­at­ing a Con­tent Man­age­ment Sys­tem (CMS) frame­work to allow clients to take over main­te­nance of key sec­tions of their sites.

Deliv­er­able: Coded site view­able within a web browser

Con­tent Man­age­ment Sys­tem (CMS) and Search Engine Opti­miza­tion (SEO) Train­ing (1 day)
After cod­ing the first key tem­plates, we hold a train­ing ses­sion with you on how to use your shiny new CMS. We share best prac­tices for adding and updat­ing con­tent so your site stays fresh with­out hav­ing to hire an out­side coder every time you want to make changes. We can also hold a training session for you to opti­mize each page of your site for search (SEO).

Con­tent Pop­u­la­tion (4″“6 weeks)
Newly trained on your CMS, you can now pop­u­late your entire site with all the copy and imagery you have gath­ered since the Pro­to­typ­ing phase. This helps you learn the CMS in a “real envi­ron­ment” with a safety net of the site not being live yet. Plus, you’ve got an avail­able expert (us) should you run into roadblocks.

Browser Test­ing & Launch (1 week)
We test your site on major browsers (both desk­top and mobile) and oper­at­ing sys­tems (Mac, PC, iOs, and Android). Once ready, we pre­fer to go live with the new site as a soft launch where you don’t make a big announce­ment for at least a week. This let’s us all fine tune any quirks (there will be some). Then you announce that you are live and launch a pro­mo­tion to drive vis­i­tors to your new site.

Obvi­ously I’m biased, but I rec­om­mend you hire a web con­sul­tant focused on Architecture, Engineering and Construction (A/E/C) firms to help you with your next web­site. With the guide above, you’ll be an informed part­ner in the process. Who knows, it may lead to your next site being awarded “Best Website.”

Resources
ran”‹dal”‹l”‹lamb”‹.com
bergelectric.com
A Web­site That Works by Mark O’Brien
The Strate­gic Web Designer: How to Con­fi­dently Nav­i­gate the Web Design Process by Christo­pher Butler