Lack of online presence Is costing TIC opportunities to recruit new Instructors and communicate clearly with existing ones, therefore, we intend to create a website for TIC and populate it with intent and downloaded forms appropriate to these two audiences. This document is a functional document set for that web design project. It follows the Jesse James Garrett model of user-centered web design, found in “The Elements of user Experience: user-centered Design for the Web” (New Riders, 2002). Ender the Jesse James Garrett system, the workflow Is divided Into five discreet areas, or planes: 1 . ) The strategy plane 2. ) The scope plane 3. ) The structure plane 4. ) The skeleton plane 5. ) The surface plane The finished document set will provide a blueprint for an effective, user-centered sign. Strategy Plane user-centered web design begins with specific strategic aims. The strategy plane is built on answering two major questions: 01 . ) What do we (the designers/stakeholders) want to get out of this site? 02. What do the users want to get out of It? A good web concept balances these two components-?site objectives and user needs -? with each other. Site Objectives Business Goals As a nonprofit organization, TIC has a goal to recruit and train English Instructors to send to China, In order to continue accomplishing that goal, TIC needs to Inform existing Instructors about polices and procedures, and sell the experience to potential instructors. Brand Identity TIC brand identity is being established and currently, TIC has a logo but no branding or style guide.
One intention of this web design is to begin to establish a branding should communicate excitement and professionalism, in keeping with the unique opportunities and constraints of international teaching. Success Metrics Success in informing existing instructors about policies and procedures can be measured in average time per visit to the relevant pages (available on the server). We loud expect that the number would grow steadily from launch, in proportional relationship to English teachers successfully recruited.
Success at selling the TIC experience is best measured in terms of decreased, unaffected, or increased application numbers. Since this is a pro bono web design project, the only cost for TIC is that of hosting the website on the server. We would expect a website that is successful in selling an international teaching experience to generate significantly larger numbers of applications from qualified candidates. This could be measured against application trends of previous years.
User Needs/User Segmentation In discussions with the client, we learned that users for this site fall into these general demographics: Gender: Male or female Age: 18-55 Education level: college and above Marital status: single or married Income: $30-$200,000 dollars per year They are familiar with technology and able to run basic computer functions: downloading data, using social networking websites. They know little about China and TIC, and will depend on the website for information. Usability and User Research User research has been conducted in conversation with the client. Extensive usability jesting is prohibitive at this point.
However, in the next iteration of the website, usability testing may become necessary, especially if the client requests more dynamic content. Team Roles and Process This is an agile web project that involves the following participants: ; Client: Carl Rogers, President of International Teaching Coalition (TIC) ; Designer: Richard Marx Based on ongoing talks with Carl Rogers and other relevant research, we will draft a functional document set outlining a web design strategy for the TIC website. This will follow the Jesse James Garrett model of web usability set forth in The Elements of
User Experience. Relevant deliverables and dates are provided below. We’ll also supply a fully-functioning HTML website with appropriate content. This website will meet the specifications of the functional document set and present appropriate design and capabilities. Necessary revision of web copy will be undertaken to meet site objectives. 9/12/08 Strategy plane documents 9/26/08 Scope plane documents 10/3/08 Structure plane documents 10/10/08 Skeleton plane documents 10/17/08 Surface plane documents 10/31/08 Functional document set 10/31/08 Content revision 11/1/08 Working website
Scope Plane If the strategy plane addresses the question, “why are we making this site? ” the scope plane addresses the question, “what are we going to make? ” The scope plane is oriented toward both process and product; process because it forces designers to address potential problems before they arise, and product because it provides a common reference point for team members. This second point is not as critical for this project since there is only one designer. However, it is helpful to answer the two questions embedded in this plane: 01 . What are the functional specifications? 2. ) What are the content requirements? The scope plane helps designers understand not only what they are building, but what they are not building, and this aids in staving off “scope creep,” or the constant addition of new functional requirements, resulting in setbacks and inability to meet project milestones. Functional Specifications Functional specifications are what the system should be able to do. They should be positive, specific, and falsifiable.
These functional specifications will serve as measures at the end of web development to determine if functional goals have been met. The site should be able to: 1) Deliver content to recruited teachers quickly enough to automate the preparation process and circumvent info requests directly to Carl Rogers. This will be considered successful if, after launch, on average, fewer than 3 emails per day are sent to Dan requesting information that is already available on the website. 2) Successfully turn click-thorough into applications at least 50% of the time.
We would expect this number to increase as traffic grows. 3) Be attractive enough from a design standpoint to meet the standards of a representative audience member. ) Function on all major browsers installed in the last 3-5 years, including Maxilla Firebox, Windows Explorer, Apple Safari, and the new Google Chrome. 5) Comply with Section 508 of the Rehabilitation Act, which ensures access to the web for people with disabilities. 6) Be conveniently updated by an TIC staff member with nominal training.
Content requirements are what information the site needs to provide in order to be considered functional. While content involves text, it also involves other audio, visual, and video media. These requirements are driven by user needs, which have been featured in strategic planning sessions with TIC President Carl Rogers. For the purposes of this document, we will break them down into two categories: static and Static Content 1 . ) A home page that contains panes for dynamic content, logo, navigation system, and welcome information. 2. A “Who We Are” page that contains approximately 1000 words of explanation of the company and its mission. This page will also contain at least one image of no more than 400 x 400 pixels. 3. ) A “Participant Guidelines” page (title may change) that will contain approximate 1000 words of expectations of TIC participants, and at least one image of no more Han 400 x 400 pixels. 4. ) A “Requirements” page (title may change) that will contain approximately 1000 words of requirements for potential TIC applicants, and at least one image of no 5. A “Costs and Fees” page (title may change) that will contain approximately 1000 words of cost and fee information for potential and accepted TIC applicants, and at least one image of no more than 400 x 400 pixels. 6. ) A “Schedules” page (title may change) that will contain approximately 1000 words of typical schedules for TIC personnel in China, and at least one image of no more than 400 axis pixels. 7. A “Photos” page (title may change) that will contain between 10 and 50 images of past TIC trips in sizes no larger than 400 x 400 pixels. 8. A “Contact” page that will contain approximately 500 words of contact information and a way to contact TIC staff directly. Dynamic Content 1) Flash slideshows on home page that rotates 5-10 Jeep images, each equal to or less than 400 x 400 pixels. Perhaps link these to static or dynamic content. 2) Wobble that allows continual content delivery by Carl Rogers or staff, and permits comments by users. This dynamic content should entail at least one 500 word article weekly. 3) “What’s New? Pane on home page that displays recent additions to the site. This should be updated weekly.
Variables 1) After further research, we may decide to use a content management system instead of a blobbing platform for dynamic content. 2) After more information about server bandwidth is obtained, we may utilize flash slideshows in other levels besides the home page. 3) Decisions will need to be made about whether it is better to embed PDF forms in Structure Plane The structure plane, while more concrete than the previous two, still involves abstract elements such as interaction design and information architecture. It seeks to forecast ND plan for user experience with the site.
According to Jesse James Garrett, while these disciplines may seem esoteric, they are in fact about “understanding people, the way they work, and the way they think. ” Interaction Design Interaction design approaches the web as a software interface, and seeks to define possible user behavior and system response to that behavior. Seeing interaction between systems and users as a give-and-take relationship, the discipline of interaction design removes the onus from users to conform to the system. Instead, it places technical efficiency alongside the experience of the user.
The idea of “user- friendly’ systems replaced one driven primarily by system efficiency. Conceptual Models Conceptual models are based on how the user perceives the behavior of our interactive elements. For instance, the idea of a “shopping cart” in an e-commerce website is a common conceptual model. This dovetails with the rhetorical concept of conventions, an agreed-upon set of standards. Practically, the introduction of new conceptual models to the web is often counterproductive, and should only be undertaken when the rhetorical situation demands it.
Since the TIC website, from a strategic and scope perspective, needs only o be a clearinghouse for information and a recruiting tool, it can function with the standard conceptual model of content-based websites: a site with pages, a photo album, forms, and other conventional objects. Error Handling Designers should take care to consider how the system will respond when users make errors, and how it can prevent them from making them in the first place. This is important especially in more complex websites, where users can manipulate information in a variety of ways. The first iteration of the TIC website will be a simple information portal.
There will tot, for instance, be a place where users can login and access more specialized information, although that exists as a possible update in future versions. At that point, it will be necessary to carefully consider how the system will respond if a user, for instance, logs in incorrectly. Information Architecture Information architecture suggests organizational schemes for information retrieval. The goal is logic and efficiency; the user should be able to navigate through the system intuitively. In order to create such a scheme, we need to harmonize site objectives, user needs, and content requirements.
Two main approaches are available to us: the top-down approach, where the architecture runs downward from site objectives and user needs, and the bottom-up approach, where the architecture grows upward from content and functional requirements. Because we depend upon a good deal of content that already exists, we are utilizing a bottom-up approach, where we allow the existing content, coupled with the functional specs, to define the information architecture. It should be noted, however, that the client has a number of plans for this site, and expects it to go through several iterations as time and resources allow.
Therefore, we should expect his architecture to change, and we should plan accordingly. Additionally, at this level of complexity we will utilize a hierarchical structure. As the site content proliferates, we might move into a matrix structure, where information is searchable by any number of categories. Organizing Principle If we conceive of nodes as the basic unit of information in an architectural scheme, then the organizing principle is the criteria we apply to group those nodes. We can organize, for instance, by user, where we would group nodes into the categories of prospective and current teachers.
However, this would add an additional level of inks to the other option-?organizing by content-?analogous to another turn around the block instead of pulling directly into ones own driveway. We will retain, therefore, the content-driven organizational principle proposed in the source material, although we might consider an audience-driven principle in a future iteration of the website. Language and Metadata To avoid confusing users with a range of terms that describe similar concepts, a controlled vocabulary will be introduced into the site.
This will be in the form of a thesaurus, where alternate terms that describe a concept will be noted, while terms tot authorized for the website will be fenced. This data will emerge from the content revision and will therefore appear in the next revision of this functional document set. Metadata, or information about information, is a series of descriptors of individual content, including name of author, subject, data added, and other information. Metadata makes possible another spectrum of organizational schema, but is beyond the scope of the current project.
It could be possible in a future iteration of the website, when content has proliferated enough to warrant multiple organizational schemes. Site Diagram Jesse James Garrett has introduced a tool for outlining relationships between web pages called the Visual Vocabulary. While it is not recommended that a website be detailed to its final link, this tool, with controlled shapes similar to a flowchart, allows developers to conceptualize the basic relationships between elements and track the progress of a theoretical user through the site. An architecture diagram of the TIC website follows.
In each plane of this functional document set, we focus on a finer level of detail. While the previous plane defines the workings of the site, the skeleton plane is unconcerned with the form of those workings. The skeleton plane is defined primarily through interface design, navigation design, and information design. Jesse James Garrett explains that interface design is concerned with the ability of users to do things. The interface is the mediation space between the system workings and the goals of the user. As such, it involves the traditional components of user interfaces: buttons, fields, and other common elements.
Navigation design, on the other hand, is concerned with the ability of users to go places. It is the means by which users are enabled to move through the system paces. Naturally, then, its main components are hyperlinks. Information design is concerned with communicating ideas to the user, and as such, it involves decisions about the best presentation of information to users. It can include choices about visuals and page design/grouping, and is the broadest and most difficult to define aspect of the plane. Convention and Metaphor In rhetorical terms, convention is an expected way of doing things.
Every genre has conventions, and websites are no exception. We expect navigation systems, text, and visuals. The TIC website will be fairly conventional. As it is a relatively small site with well-defined goals, it does not necessarily need to re-imagine web conventions. Metaphors for websites were popular when people first started seeing the potential of the web as an immerse experience. An airline might have a website designed to look like the lobby of an airport. You would contact them by clicking on the telephone, and so on.
While making websites with features analogous to real life is an attractive proposition, in reality it seldom works, especially if your users have a different cultural background, where different objects have different associations. It is best to use simplified metaphors, like icons, or to avoid them altogether, as we will in this site. Interface Design A good interface strives for transparency. Users see what is important and are able to focus on their own goals, and ignore what is unimportant. Everything needs to be questioned, and elements that are not accomplishing anything should be minimized or removed.
Additionally, the interface should be geared to the greatest common denominator, not primarily to specialized users with specialized needs. For the TIC website, we will strive for an interface that foregrounds textual content (the material cost users are searching for), downloaded forms, and navigation. There will also be a flash slideshows that will cycle photos and testimonials. Navigation Design Navigation design must accomplish three things: it must allow users to get from place to place on the site; it must show the relationship between elements; and it this must be done simultaneously.
In addition to breadcrumbs at the top right of each page, the TIC navigation scheme breaks down as follows. Global Navigation Also called persistent navigation, this type of navigation takes the user to any major cluster of pages on the site. The navigation bar at the top of the TIC website will contain the major site divisions (see fig [site map]) and allow the user to access them from any page. Local Navigation This type of navigation provides access to pages located “nearby’ in a web architecture system. The local navigation bar will be located on the left side of the interface.
Supplementary Navigation This type of navigation allows users to access related content not accessible by global or local navigation. This navigation will be found in the “downloaded content” area of the interface on the bottom right of the screen. Contextual Navigation This type of navigation is embedded in page content. Garrett notes that while it is neutralized, it should be done with care that text would not become too cluttered. Courtesy Navigation This type of navigation provides access to pages or executables not normally needed, but available for convenience, such as contact information.
Contact information will exist in the persistent navigation bar at the top right of the interface. Information Design Information design involves the grouping of elements in a way that most logically communicates ideas to users. Further information for this planning category will merge from review of existing web content material. Wireless All three aspects of the skeleton plane-?information, interface, and navigation design -? come together in the page layout. One way to conceptualize this is through a warfare, which serves as a template for a typical page in the site.
A warfare concept for the TIC website follows. Surface Plane The final plane of this functional document set is the surface plane. This involves the design decisions that create the visual portion of the site. At this point, Jesse James Garret’s book leaves the world of information design and ventures into graphic sign. Although design decisions still drive site objectives, a different vocabulary is being concerned only with aesthetics, a visual design is Judged by how well it works. Does it support site objectives? Does it highlight and minimize appropriate elements?
Does it make navigational choices clear? Does it communicate the correct tone? Eye Tracking As designers, we should take care to ensure that the place where the user’s eye is first drawn is a place we want to emphasize. Is it an element that reinforces or detracts from site goals? It is possible to use eye tracking equipment to measure this. However, it is also measurable simply by asking users what they see first in a given design. We are searching for two things: a flow that leads users smoothly around the page, and clues to the possibilities of the site without an overwhelming amount of detail.
Since the design is still in process, this testing will appear in the next revision of this functional document set. Contrast and Uniformity Contrast is important in a visual design to highlight strategic elements. The main use of contrast in the TIC website will be the visual elements like the flash slideshows, keyed to the TIC logo color scheme against a white background. Uniformity, or the uniform emphasis of like elements, is especially important in situations like the navigation bar, where pages carry the same amount of importance.
Additionally, I am attempting to create a seamless look where elements like the left banner (local navigation) integrate with elements like the Nava bar to frame the content and create a smooth, unified look. Internal and External Consistency Well-designed websites are internally consistent, where design choices and themes are repeated from page to page, and externally consistent, where the design choices flow seamlessly from other approaches used in the same organization.
Because this is a first generation website for a small company, I do not expect these to be a problem initially, but standards should be maintained to prevent problems of these kinds in the future. Color Palettes and Typography The color palette for the TIC website emerges from logo images constructed by designer Brandon Mathis. The primary colors, with hex codes, consist of: Dark Red 61ST Gold FOOD Black 231 OFF White PAYOFF Because of the high contrast of the existing color scheme, the website will be constructed using a complementary color scheme.
Complementary colors, with hex odes, will consist of: Gray BOCCE orange F26522 readability, visual impact and a clean, user-friendly feel. We will utilize bold only for headings and sub-headings. Design Comps and Style Guide Design comps differ from wireless in intention: wireless intend to document the skeleton, while comps are interested in the final visual design. The two need not agree exactly, but elements should be accounted for. What follows is a preliminary design comps for the TIC website. The style guide will emerge from the completed design and will inform graphic design choices in future iterations of the TIC website.