AGile Website Development

plan, launch, iterate

“The beauty of agile comes in with its incremental nature and use of empiricism to focus on three “I”s - Interaction, Iteration, and Improvement.”

- Pearl Zhu

Agile Website Development Process

 

1. Research and Analysis

Acquiring a clear and complete understanding of your immediate, mid term and long term needs and wants (initial user stories).

 

2. Planning

Create a schematic based on identified needs and how they will be addressed. At this stage, website infrastructure will also be laid down and agreed upon, as well as determining all user stories as final for website phase 1.

 

3. Design

UX, UI and branding. Execution and/or implementation of user experience, user interface components, prototyping, and brand application.

 

4. Setup and Migration

Setting up a server, migrating content from old website to new website without losing SEO value, and pushing it live.

 

5. Development

Creating a live website, both frontend and backend. Development is being identified as such, regardless of technical involvement and / or skill needed.

 

6. User testing

A website is never really complete. A number of assets may be built and begin to be leveraged, but user testing is necessary to measure effectivity.

Research and Analysis

Before recommending the right solution, a general analysis of previously documented research should take place by all project stakeholders. The purpose of this analysis is to make sure the goals, needs, desires and budget are maintained throughout the process. The following points will be considered during the general project analysis:
  • Website’s general purpose
  • Intended website KPIs
  • Marketing strategy
  • Branding and design strategy
  • Amount of pages
  • Website migration workload
  • Client collaboration / DIY
  • Current sitemap

Planning

Before even the first pixel of a website is ever generated, a thorough plan must be put in place. Stages, milestones, objectives, goals, KPIs, etc. need to be defined and agreed upon before execution. Such a plan must align with the the overall vision. With this in mind, planning is comprised of the following:

 

Sitemap & Unique Pages

This is will act as the backbone for the production of any website. It will allow the team to quickly identify how much work is ahead, and it gives the client a clear understanding of what to expect. It is absolutely vital to identify which and how many kinds of page templates and pages are needed. At the end of this phase, the following should be attained:
  • Sitemap structure and hierarchy 
  • Number of high strategy vs low strategy vs out-of-the-box template pages
  • Total number of unique pages
  • Number of times each unique page will be utilized
  • Total number of pages
At a high level, page templates can be categorized as follows:
  1. High strategy, non reusable (e.g. homepage, about us)
  2. Low strategy, non reusable (e.g. contact us, blog summary)
  3. High strategy, reusable (e.g. service, product, case study)
  4. Low strategy, reusable (e.g. informational, blog article)

Information Architecture

Once every unique page template is identified, further definition per page should take place. This means that every unique page contains a different set of information and modules. Strategy determines the types of information and required user interactions that go in each page and each module, as well as the order in which modules are laid out on the page. Information Architecture or IA should yield:
  • A content outline for each page
  • Messaging priority (what the user sees first, second, etc.)
  • Application of MKT strategy
  • Module categories
  • Necessary information for wireframes
  • Which modules and / or content may be omitted on mobile

Content Migration

Website content should be assessed based on the new recommended sitemap, new information architecture and strategy per each unique page template. This discovery will trigger the following process:
  • Determine whether new copy is required
  • Determine whether all, any or none of the current content fits within the new suggested sitemap and information architecture.
  • Photography style will be reassessed based on new website look and feel
  • Iconography will reflect both fundamental and newly evolved brand standards
This will clearly reveal how much of the current content, if any, should be migrated to the new website. In turn, the following can be determined:
  • Total migration work hours
  • Personnel needed for actual migration
  • Retained SEO value

User Stories

A website should address a number of needs and wants in the short, mid, and long term. Identifying, defining and prioritizing these needs will be a key planning factor. Doing so will allow the team to work efficiently by setting attainable milestones. It also aligns expectations between client and team for goals, deadlines, strategy implementation and KPIs.
User stories are defined as follows: A user story is a tool used in Agile software development to capture a description of a software feature from an end-user perspective. The user story describes the type of user, what they want and why. A user story helps to create a simplified description of a requirement.
This is an effective method of collecting, vetting, prioritizing and scheduling features requested by the stakeholders of the website project. In the case of a theme-based approach, most of the user stories should be at least fundamentally addressed out of the box. The ones that are not, can be further analyzed, and added as needed.
Ideally, the majority of user stories should be acquired before conducting an in depth search for the best theme. This will reduce customization costs for the client, accelerate launch as well as development of new modules. Examples of user stories include:
  • Sliders
  • Team module
  • Forms
  • Image Gallery
  • Filtered results

Creative Brief

This is document is about 1 to 3 pages long and it provides information about who the client company is and what they do, user personas, as well as high level direction of the intended look and feel: what impression should be given, and what attitude the website should exude. In short, a creative brief should answer the following questions:
  • What is this project?
  • Who is it for?
  • Why are we doing it?
  • What needs to be done? By whom? By when?

Wireframing

Once the IA and user stories have been defined, and client has signed off on them, it’s time to build the website’s infrastructure and basic layout. In the case of a Wordpress theme, this will be achieved via a combination of included out-of-the-box modules, as well as actual wireframes of custom modules designed to provide solutions not present in the selected theme. Wireframes will provide:
  • An efficient platform for iterations
  • High level page layout
  • Granular order in which information will be presented
  • Clear and specific UX 
  • Functionality and Interactivity

Design

User Experience (UX)

Because most of the UX in a theme based website is baked in, UX design is initially done at a high level. User experience can be influenced and modified by reordering modules, as well as creating different user flows. Using a theme proves to be quite advantageous when literally any of the stakeholders is able to make quick changes to the flow and composition of a page. This allows the team to efficiently make and test different iterations of any page of the website.
As the project moves forward, and new user stories are fulfilled, new UX assets will likely be required. It is at this stage that the flexibility of the theme becomes even more valuable, facilitating the reconfiguration of existing elements to make more granular, nuanced and fine tuned changes.
Regardless of which kind of website is being created, initial UX design should follow fundamental best practices such as Neilsen’s Heuristics for User Interface Design. However, this is only a starting point. True UX design can only be informed by user testing. There is no perfect way to design. What works for one company with one audience, may not work the same way at all for any other company and audience.

Brand Application

At this stage, the website begins to visually reflect the brand. However, design involvement needs to be minimal and strategically used in this regard. If a branding guide exists, the theme’s colors and type may be edited to match the client’s brand. This can be done by a programmer, or by anyone via the administration panel and plugins. Nonetheless, QC of these items by a designer is highly recommended to ensure brand integrity and aesthetic standards are met.

User Interface (UI)

UI design is concerned with making sure that the path the UX designer has created is visually communicated. This is where decisions are made such as slider v.s. knob, or whether a solid button or a ghost button is better suited for the intended purpose. A cohesive style guide is also created at this stage in order to create a consistent design language throughout the site. Exploration and definition of feedback behavior also takes place at this point: e.g. hovers, error messages, form field events, transitions, etc.
While UX has to do with overall user experience, flow and feel, UI has more to do with the visual aspects of user interaction. It also takes on a more granular approach with the layout of the elements within each module. This makes the steps intended by UX clear to the user.
 

Custom Module Creation

This process is similar to the general website creation, except at a smaller and more granular scale. Each new module still needs to go through the following steps:
  • Define user story
  • Define purpose
  • UX design (wireframes)
  • UI design (Layout and additional UI kit elements)
  • Brand consistency QC
  • Implementation

Setup and Migration

Setup is usually left up for the technology team to perform. They are the most qualified to make sure that all the pieces work together 
  • Setup server and point domain
  • If the website is new, domain occurs during setup
  • If the website is being migrated, domain transfer occurs later 
  • Install plugins
  • Install Wordpress domains 
A website has an SEO value that is defined by its URL structure, sitemap, links, images, copy and other SEO configurations. In order to preserve said SEO value, migration must keep to the following process:
  • Transfer desired website content
  • Ensure URL structure is the same 
  • Redirect URLs from eliminated pages 

Development

Development should be minimal with the use of a theme. Depending on what capabilities the selected theme may offer, a programmer’s contribution may be limited to the following:
  • Apply and test template
  • Edit CSS to match the brand and design
  • Cross compare and match desired functionality with theme functionality
  • Website launch

Development of Custom Modules

After the design phase is complete, developers will take the following steps to get the modules live, with testing interspersed:
  • Framework
  • Code
  • Fill with content
  • Test and verify links and functionality

User Testing

The core tenet we believe in for user testing is "test to fail."  In other words, it is the testers' objective to try and break/fail the website they are testing. Many testers practice "test to pass" which can result in a non-comprehensive test and holes in the project.  During the testing phase cross-browser, cross-device, and cross-platform functionality will all be reviewed.