The AEC Firm Website Development Process

 

Timeline for Website Development

A great AEC firm web­site doesn’t just hap­pen. It needs a defined process with each phase inform­ing the next. Lecours­De­sign was hon­ored with win­ning the Best Web­site Award at the SMPS Awards Gala for Ran­dall Lamb’s site. We repeat­ed the win, at the next Gala, for Bergelectric’s site. Cre­at­ing award-win­ning web­sites requires vision­ary clients and a process of spe­cific phas­es to ensure smooth project deliv­ery. To help you with your next web­site project, I sum­ma­rize each phase below.

Plan­ning (2–4 weeks)
First, we estab­lish goals and tac­tics for your new site. Every new client and employ­ee will pass through your web­site. 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, includ­ing your com­peti­tors to eval­u­ate their online pres­ence.

Archi­tects call this phase pro­gram­ming. In web­site devel­op­ment, we call it plan­ning. In both cas­es, 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 devel­op 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 sil­ly, but I rec­om­mend giv­ing each per­sona a name and a pho­to so they seem as real as pos­si­ble.

This phase focus­es 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: Find­ings & Rec­om­men­da­tions, Strate­gic Brief (2–3 page doc­u­ment out­lin­ing why, what, when, who, goals and scope of the new site), Per­sonas, 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 sketch­es of con­tent on each key page tem­plate. They are grey because col­or at this point is dis­tract­ing. The goal in this phase is to focus on con­tent, not design. We used to present print­ed greyscreens, but now pre­fer dig­i­tal. To real­ly 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 with­in a brows­er envi­ron­ment.

Know­ing all page titles, you must begin wran­gling con­tent. This means gath­er­ing case sto­ries, blog con­tent, project descrip­tions and pho­tos, peo­ple sto­ries and pho­tos, 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 illus­tra­tor to cre­ate con­tent 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 col­or, typog­ra­phy, pho­tog­ra­phy, illus­tra­tion, back­grounds, graph­ic 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 pho­tog­ra­phy isn’t ready, we use place­holder pho­tos 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 actu­al 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 web­site is nev­er “done.” There are always oppor­tu­ni­ties for improv­ing the user expe­ri­ence.

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 ful­ly func­tion­ing with­in 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: Cod­ed site view­able with­in a web brows­er

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 train­ing ses­sion for you to opti­mize each page of your site for search (SEO).

Con­tent Pop­u­la­tion (4–6 weeks)
New­ly 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 safe­ty net of the site not being live yet. Plus, you’ve got an avail­able expert (us) should you run into road­blocks.

Brows­er 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 dri­ve 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 Archi­tec­ture, Engi­neer­ing and Con­struc­tion (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 award­ed “Best Web­site.”

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

Tags: , , ,

No comments yet.

Leave a Reply