The AEC Firm Website Development Process

Timeline for Website Development

A great AEC firm web­site doesn’t just hap­pen. It needs a de­fined process with each phase in­form­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 re­peat­ed the win, at the next Gala, for Bergelectric’s site. Cre­at­ing award-win­ning web­sites re­quires vision­ary clients and a process of spe­cific phas­es to en­sure 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 em­ploy­ee will pass through your web­site. So we con­sider how your new site will be a hub for your firm’s of­fline and on­line mar­ket­ing ini­tia­tives. We re­view 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 re­view sites you ad­mire, in­clud­ing your com­peti­tors to eval­u­ate their on­line presence.

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 de­vel­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: re­searcher, 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 re­al as possible.

This phase fo­cus­es on infor­ma­tion archi­tec­ture: what sections/​pages to in­clude in the new site and how will the user find her way to the infor­ma­tion she seeks. This re­sults 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 Re­search, Site Map

Pro­to­typ­ing (2 – 4 weeks)
Af­ter approv­ing the Site Map, we cre­ate greyscreen pro­to­types of the key page tem­plates. Greyscreens, al­so called wire­frames, are sketch­es of con­tent on each key page tem­plate. They are grey be­cause col­or at this point is dis­tract­ing. The goal in this phase is to fo­cus on con­tent, not de­sign. We used to present print­ed greyscreens, but now pre­fer dig­i­tal. To re­al­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 environment.

Know­ing all page ti­tles, you must be­gin 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 il­lus­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

De­sign Explo­ration (2 weeks)
We bring the greyscreen key tem­plates to life with de­sign 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 de­sign 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.

De­sign Refine­ment (4 – 8 weeks)
We re­fine the de­sign by adding ac­tu­al copy­writ­ing and im­agery to the ini­tial key tem­plates. Up­on ap­proval, we ap­ply the cho­sen de­sign to all the remain­ing page tem­plates. Inter­ac­tive ele­ments like rollovers or mo­tion are shown as sto­ry­boards. If the site fea­tures respon­sive de­sign (opti­mized for desk­top, tablet and mo­bile), and it should, then we fine tune the de­sign for dif­fer­ent sized screens. De­sign refine­ment con­tin­ues through the cod­ing phase, and even af­ter launch. A great web­site is nev­er “done.” There are al­ways op­por­tu­ni­ties for im­prov­ing 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)
Ex­cept 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 al­low 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 browser

Con­tent Man­age­ment Sys­tem (CMS) and Search En­gine Opti­miza­tion (SEO) Train­ing (1 day)
Af­ter 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 al­so 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 en­tire site with all the copy and im­agery you have gath­ered since the Pro­to­typ­ing phase. This helps you learn the CMS in a “re­al envi­ron­ment” with a safe­ty net of the site not be­ing live yet. Plus, you’ve got an avail­able ex­pert (us) should you run in­to roadblocks.

Brows­er Test­ing & Launch (1 week)
We test your site on ma­jor browsers (both desk­top and mo­bile) and oper­at­ing sys­tems (Mac, PC, iOs, and An­droid). 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 an­nounce that you are live and launch a pro­mo­tion to dri­ve vis­i­tors to your new site.

Obvi­ously I’m bi­ased, but I rec­om­mend you hire a web con­sul­tant fo­cused on Ar­chi­tec­ture, En­gi­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 in­formed part­ner in the process. Who knows, it may lead to your next site be­ing award­ed “Best Website.”

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

Tags: , , ,

No comments yet.

Leave a Reply


Fatal error: Allowed memory size of 94371840 bytes exhausted (tried to allocate 1533843 bytes) in /home/davidlecours/lecoursdesign.com/wp-includes/functions.php on line 435