Website Design & Usability Process
Our process : |
Whether it is a new project with a new client or a redesign of an existing client's website (or brochure or billboard or vehicle or...), the process is the same. The following outlines our process for interactive projects but is applied in context to everything we do.  Phase 01 . DiscoveryWe start by helping our clients establish a plan similar to a Request for Proposal (RFP) if one does not already exist. RFP-type documents outline your needs as a client, the goal(s) and purpose of the project, the needs of the end user or end viewer (your potential customers) and our needs for design / technology / production. The more up-front information that can be collected the more cohesive and smoother the overall process will be. It is in this phase that we also begin to understand your company (what you are all about, how you do what you do...), your competition and where you are within your overall professional landscape. As part of the final measurement, we also use this information to gauge the success of the project. In most cases we strongly recommend you take part in our website evaluation process as either an addition to the discovery phase or prior to it. Phase 02 . Interaction Design Interaction Design (ID) is the process in which all backbone elements of a website are flushed out and finalized. These elements, simply put, are all things not visual design or programming. We keep this process separate from visual design to maintain focus. Prototype / wireframes We will create an ID document (a .PDF ) which includes wireframes of all pages or a functioning prototype. Essentially wireframes, or schematics, are black and white and include all copy for each page, keywords for each page, site navigation, general area for future visual elements, page naming conventions, and expectations for certain functionalities. This phase is not all that dissimilar from an architect’s blueprints--you have to outline the house, finesse room dimensions, plan for plumbing and electrical wiring, identify materials to be used, etc. Nomenclature As we create the structure and hierarchies of your website or web application, careful consideration is placed on nomenclature--the naming of things--to ensure the user knows and understands the nature of the category or link prior to viewing or clicking. For example, a category like Services might not serve as an optimal name or category. It may be in the best interest of your overall site structure, the users, Search Engine Optimization (SEO) and other factors to rename Services to something specific. If you are an electrical supply and services company, it may make sense to expand the structure of the category to Services for Contractors and Services for Home Owners for example. Making those types of distinctions helps to clarify site structure, helps the user understand and navigate the category, helps create specific instances for SEO and all-in-all, creates a clearer, more manageable structure. Writing We also consider the reading copy of your website or application. Is it written for the way we, as internet readers, read text online? Is it written in the same voice or does it read as though different people wrote copy for different sections? Is the style consistent or is 'website' (one word) used in one paragraph, 'web site' (two words) used in another and 'web-site' (with a hyphen) used in yet another? Is it email, e-mail , Email or E-mail? Do you 'test' or do you 'inspect' and if you test, do you call it testing in one instance and inspecting in another? These types of writing guidelines and consistencies, along with many other factors, help to maintain a high user experience. Usability testing We, including you the client, us the designers, and your website or web application's audience (your customers or clients), are finicky when we are online. Therefore, usability of online applications and the overall user experience with those applications is paramount. It is the different between someone contacting you or immediately going to another website--your competition perhaps. As part of the process, and depending on the scale, scope and budget for your project, we may recommend your website or web application undergo a formal usability study. The study will document the interaction between a typical user group(s) specific to your industry and your website or web application. The collected information will inform the process as to what we have done correctly, meaning what makes sense to the user, and what may need to be refined or altered. These studies are typically performed by an independent party but we can also host a study. Phase 03 . Visual Design Our first and foremost priority with any and all visual design is to either strengthen, maintain, enhance, elevate or refine your company's identity. What you look like, how you are portrayed and how you are perceived is at least equal to the integrity of who you are. We do not just look at your website, for example, as a stand-alone item. Rather, we also look at how it relates to all the visual elements within your company--your corporate design system, your marketing and/or sales collateral, etc. Our goal is to do everything we can to strengthen your company's identity and overall presence. On to phase 03, the visual design process... All the hard work to this point now gets a visual presence and identity. Typically, as an initial presentation, we design and present 1-4 different visual directions depending on your budget. Each direction includes design for the home page, corresponding category page, sub-category page and a one-off page, usually Contact. For each direction we look at appropriate color schemes, font treatments, link and navigation identifiers, iconic language and layouts all within the context specific to your company. Once a direction has been chosen, we then refine those pages and include design for any new pages that fall within the design system. Simply put, we design the rest of the website or web application based on the chosen direction. Phase 04.a . Technology & Programming As outlined in the discovery phase, we begin to build the website or web application using the approved technology and environment. Each page we construct and each piece of functionality we build gets tested in each of the browsers listed under Quality Assurance Testing (below). We do this to ensure the solution we provide works correctly and is viewed as intended. Cross-platform and cross-browser compatibility is at times tedious and in rare instances, we may modify certain functionalities in order to attain coherence. If there are any Flash elements to be incorporated, we construct those elements in this phase as well. Content Management Systems (CMS) If we are building within an existing CMS, or creating a custom CMS, we will most likely populate the initial 1/4-1/3 of the content and recommend you populate the remainder. We ask this so you become familiar and comfortable with the back-end / administration components. Phase 04.1 . Quality Assurance Testing (QA) Unless otherwise noted, we test your website or web application in the following browsers : Windows : • Firefox 3.x • Explorer 7 & 8 • Safari 4 • Google Chrome Mac : • Safari 4 • Firefox 3.x |
