We will work to refine the objectives for the system and define a common vision for the project. The process will start with a kick off meeting where roles will be established, the detailed project plan will be presented, and lines of communication will be defined. The following are the core deliverables for this phase:
We will work with the team to fill out a project brief. This document will drive all future work on the project, informing every decision. The following template will be used:
Project Brief Template
State general project information, goals, and relevant background information for the site design. This paragraph should be a statement overview of the project as a whole.
- What is the basic overview of the project?
- What is the single purpose of the new site?
- What are the secondary goals of the new site?
- What are the long-term goals?
Profile each target audience. Provide enough detail to enhance everyone’s understanding of who the audience is. Include some user demographic information.
- Who is the target?
- What do they care about?
- And what do they do online on a daily basis?
- Who is your target audience? Define a typical user and profile in detail. Include occupation, age range, gender, online frequency, online activities and any other relevant information. Profile more than one if applicable.
- What is a typical task the user might perform on the new site?
Tone and perception guidelines for creative
- How do you want your target audience to respond to your new online presence?
- What do we want them to think and feel?
- How will this new web site help to achieve this goal?
- What adjectives can be used to describe the way the web site and company should be perceived?
- What are some specific visual goals the site should convey?
- How will we convince them?
- What is the overall message you are trying to convey to your target audience?
- How will you convey the overall message?
- How will you measure the success of the redesigned site?
Single minded message
State a single-minded word or phrase will appropriately describe the site once it is launched.
User profiles and use case scenarios
Before jumping into wireframing in the planning phase, we will explore the use cases for each user type and map out a user experience framework that best meets the user’s perceptions and needs. This will help us design the site structure (that is, the user’s perception of the site’s structure, also called a mental model) when we begin wireframing. The deliverable here will be a series of workflow diagrams that map out how the tasks defined in the project brief will translate into a user experience.
During the discovery phase, No.inc will undergo efforts to identify all content to be included in the system with the purpose of understanding the nature of each possible piece.
Technical specifications will be created for specific target bandwidth, browsers, and platforms The specifications will be based on target audiences and latest statistical data for those audiences Accessibility requirements will be defined in detail
The planning phase will build on much of what was learned in the discovery phase. Think of the discovery phase as a question creating exercise for which the planning phase provides answers. The planning phase leaves no question unanswered, no issue untouched, no possibility ignored. As the plan unfolds, new issues will be uncovered as the discovery phase concepts are further explored. During this process it is important to use the concepts and rules established in the discovery phase to avoid creating complicated solutions for simple problems. These rules should be firm enough to create consistency and stability but flexible enough as to not be restricted by them.
Following the discovery phase, we will work with the team to conduct several weeks of wireframe design exercises and present progress once a week. This step of the process will be broken up into rounds where we are focusing on the most important, core interfaces first and adding to those wireframes every week. This approach allows us to iterate most on the important screens. We will create a clickable prototype from the wireframes. This clickable prototype could be used for formalized usability testing if desired. At the very least it will help the product team to visualize the interface design. These prototypes will be delivered with each wireframe review.
- Determination of basic components / modules of system
- Determine high-level functional architecture of system in terms of specific modules
- Define roles of specific modules
- Final determination of hosting / middle-ware / database requirements
- Based upon requirements laid out in all previous work and client considerations (such as preferred packages), determine selection of software
The visual design can only be executed once the wireframes are in place and approved. Using the wireframes as a blue print, two visual design directions will be developed for consideration Once a direction is chosen it will go though two rounds of revisions. The visual design will be extended to every unique page once the direction is finalized Two rounds of revisions will take place on the design extension.
HTML/CSS BuildThe build can only be created once the visual design direction and extension have been created and are approved
- The HTML/CSS build will create a true user experience using static pages and content
- The build will be tested for browser compatibility
- A compatibility matrix will be created from the technical specifications established in the discovery phase
- The prototype will be tested for accessibility
- Accessibility compliance will be tested throughout the prototype creation stage
- A final accessibility test will be conducted in accordance with the requirements stated in the technical specifications document
- User Acceptance Testing
Development and Implementation Phase
- Perform necessary DBA (Database Administrator) duties for initial set up of database environment
- Configure middleware application server to connect to database
- Configure necessary security/authentication measures for interaction with the database server
- Implement table structure developed in Technical Design
Development of functionality documented in Information Architecture
- Core programming (“coding”) work
- Integration work, as necessary, to enable functionality, as defined by scope, in 3rd party applications
- Use modular coding techniques and best practices for clean, easily maintained code
Integration of HTML front-end build with working back-end
- Integration of HTML front-end developed in prototype phase with new working back-end
- Minimal HTML work should be performed at this stage, due to the process employed and resulting tightly knit working of the design and technology teams
Quality assurance / compatibility testing
Ensure application is as bug-free as possible through ad-hoc testingPerform formal QA process
- Ensure compatibility on platforms determined in Technical Requirements
- Develop test plan
- Execute test plan in full functional testing round
- To be repeated until an acceptably stable release is reached:
- Patch release to address issues
- Perform regression testing round
- A single QA pass will typically require 1-2 weeks, and 1-4 passes may be required
Coordination/configuration of production hosting environment
- Work closely with the team to ensure preparations are made for delivery of working application
- Clearly communicate hosting requirements and verify status of SE target environment and configuration
- Delivery of full source code for application in archive package
- Delivery of database "dump" of all data and structures necessary for configuration of production hosting environment
- Ensure proper operation of application within new hosting environment
- Provide training system to select group of core SE representatives via WebEx