Website Design + Development Process

To ensure the highest quality website and effective project management, we utilize a 4-phase ‘waterfall’ development process: Discover, Design, Develop, and Deploy. While this process is meant to be comprehensive, we are committed to a collaborative approach that best meets our client's needs.

Phase I: Discovery
During this phase, we dive deeper into project goals, target audience (personas), information architecture (navigation), functionality and content. The action items in this phase include:

• Kick Off Meeting: An in-person meeting to review the goals, team roles, the Project Plan and other Discovery items.
• Project Site: This is a secure website housing all project related work and facilitates communication amongst the team.
• Information Architecture: After reviewing client input and analytics a sitemap is created showing the navigation for the site.
• Creative Direction: A Creative Brief is completed that outlines the brand mission, values, target audience and competitors. Also assets the designer needs for the Design phase are provided such as the logo, sample copy and photography.
• Wireframes: These are created for key pages showing content and functionality.
• Functionality: Each feature is reviewed in more detail including creating use cases when appropriate.
• Content: A content inventory is created showing existing and new content and a plan for migrating the content to the new site.

Milestone: Sign off on the sitemap, wireframes, functional specifications and a content migration plan.

Phase II: Design
During the Design phase the overall ‘look & feel’ of the site is created including the User Experience (UX) and User Interface (UI) design. We review the Creative Brief and then explore different design options. We then present creative concepts for the homepage, interior page and other appropriate pages. After a version is chosen we further refine the designs until a final design is approved.

The different parts that comprise the design include:

• Templates also called Themes
• Common style elements e.g. Header 1, Header 2, font styles, hover and on states.
• Mobile designs for phones and tablets
• User interaction designs such as jQuery and Materialize animations
• Motion Graphics and animation sequences

Milestone: Sign off on the overall UX and UI design.

Phase III: Develop
In this phase, the site is coded, content integrated and the site tested. Launching an Alpha site is the milestone that marks the end of this phase. Action items include:

• Install the Content Management System (CMS) such as WordPress or Drupal, modules/plugins and setup the developer environment.
• Code the design Template/Theme using a Responsive Web Design so the site displays optimally on mobile devices. All coding is standards compliant, HTML5 markup.
• Develop specific features such as: a home page billboard, drop down navigation, photo/video galleries, forms, sharing and social media integration, on-site search and multilingual translation.
• Incorporate marketing components including Calls to Action (CTAs) for increasing leads and conversions and CRM integration (e.g. SalesForce) for lead management.
• Develop more complex features such as e-commerce and blogs
• Perform Quality Assurance to ensure the user experience design is true to the design specifications, functional features are working properly and the content has been accurately integrated.
• Test the Alpha site with mobile and desktop browsers based on the browser specifications.
• Launch the Alpha site for the client to review

Milestone: Alpha site launched, preliminary QA and testing complete, content integration complete

Phase IV: Deploy
During this final phase the site is thoroughly reviewed, revisions completed, final testing and deployment. Action items for this phase include:

• Based on a client review of the Alpha site complete the revisions.
• Set up Google Analytics tracking and 'heat mapping' (Crazy Egg) as needed.
• Complete domain name and file management.
• Set up 301 redirects from old page URL to correlating new pages to retain search engine page rank.
• Set up a XML sitemap, connect it to Google Search Console and install SEO modules.
• Set up a utility that will send a notification if the site goes down.
• Provide training and support on how to use the CMS (WordPress, Drupal).

Milestone: Site goes live! Launch party date to be determined.