Creating a great website doesn’t just happen. It requires a defined process where each phase informs the next. I was recently honored with winning the Best Website Award for designing randalllamb.com at the SMPS San Diego Awards Gala. Creating an award-winning website requires a visionary client and a process of specific phases to ensure smooth project delivery. To help you with your next website project, I’ll summarized each phase below.
Planning (2 weeks)
First, we establish goals and tactics for your new site. We consider how your new site will be a hub for your firm’s offline and online marketing initiatives. We review your current site analytics to see where users go on your site, how long they stay, and how they find your site (keyword search and referring sites).
Architects call this phase programming. In website development, we call it planning. In both cases, it’s about gaining clarity on the why, what, and when of your new site. Even more important, it’s about who; the user and their needs. So we develop three “personas” for the targeted user archetypes who will be visiting the new site. These “personas” are a compilation of demographic information and user profiling at the three buying stages: researcher, evaluator, and purchaser. It may sound silly, but I recommend giving each persona a name and a photo so they seem as real as your future site visitors.
Deliverable: Strategic Brief (2–3 page document outlining why, what, when, who, goals and scope of the new site)
Prototyping (2–4 weeks)
This phase focuses on information architecture: what sections/pages to include in the new site and how will the user find her way to the information she seeks. This results in a Site Map: an outline of all the proposed pages organized by navigation buttons and page titles.
After approving the Site Map, we create greyscreen prototypes of the key page templates on the actual host server. Greyscreens, also called wireframes, are sketches of content to be included on each key page template. They are grey because color at this point is distracting. The goal in this phase is to focus on content, not design. We used to present printed greyscreens, but found that to really understand how a user experiences navigating from one page to the next, these greyscreens need to be on screen and clickable within a browser.
Now knowing all page titles, you must begin wrangling content. This means gathering project descriptions, project photos, leadership bios, and about the firm information. A determination must now be made for a writer and photographer or illustrator.
Deliverable: Site Map and Greyscreens
Design Exploration (2 weeks)
We bring the greyscreen key templates to life with design by introducing color, typography, photography, illustration, backgrounds, graphic elements, buttons, etc. Two design explorations of the Home, About, Project Gallery and Project templates with placeholder imagery and copywriting are presented as static screenshots.
Deliverable: Static .jpg Screenshots presented on a laptop
Design Refinement (4–8 weeks, some concurrent with Coding)
We refine the design by adding actual copywriting and imagery to the initial four key templates. We apply the chosen design to all the remaining page templates. Interactive elements like rollovers or motion are shown as storyboards. If the site features responsive design (optimized for desktop, tablet and mobile), then we fine tune the design for different sized screens. Design refinement continues during the coding phase.
Deliverable: Static .jpg Screenshots presented on a laptop and smart phone
Coding (4–8 weeks)
Except for the greyscreens, pages so far are static. Coding brings the pages to life by making them interactive, and fully functioning within modern web browsers. We code sites by creating a Content Management System (CMS) framework to allow clients to take over maintenance of key sections of their sites.
Deliverable: Coded site viewable within a web browser
Content Management System (CMS) and Search Engine Optimization (SEO) Training (1 day)
After coding the first key templates, we hold a training session with you on how to use your shiny new CMS. We share best practices for adding and updating content so your site stays fresh without having to hire an outside coder every time they want to make changes. We also share best practices for you to optimize each page for search (SEO).
Content Population (2–4 weeks)
Newly trained on your CMS, you can now populate your entire site with all the copy and imagery you have gathered since the Prototyping phase. This helps you learn the CMS in a “real environment” with a safety net of the site not being live yet. Plus, you’ve got an available expert (us) should you run into roadblocks.
Browser Testing & Launch (1 week)
We test your site on major browsers (both desktop and mobile) and operating systems (Mac, PC, iOs, and Android) and will suggest you upgrade from Internet Explorer 8. Once ready, we prefer to go live with the new site over a weekend. We recommend a soft launch where the site goes live but you don’t make a big announcement for at least a week. This let’s us fine tune any quirks (there will be some). Then you announce that you are live and launch a promotion to drive visitors to your new site.
Obviously I’m biased, but I recommend you hire a web consultant focused on professional services firms to help you with your next website. With the guide above, you’ll be an informed partner in the process. Who knows, it may lead to your next site being awarded “Best Website.”
Resources
randalllamb.com — Best Website SMPS San Diego Awards
A Website That Works by Mark O’Brien
The Strategic Web Designer: How to Confidently Navigate the Web Design Process by Christopher Butler