My main goal for my SMC Home Page was to have an uncluttered opening page that then goes to an organized, Landing Page that offers the user 6 – 10 image links all related to a particular nav title.
Having 6 main navs and 4 user-type navs provide enough categories to cover the majority of information found on the entire SMC website.
One design direction offers a friendly, inviting look while the other design emphasizes organization and simplicity.
Wireframes
Wireframes are content layouts for individual pages on a proposed website. They form the foundation for the page’s visual design and html production, and aid in communication. Wireframes should include a representation of all major page elements that will appear on the web page and should be completed for pages that have unique functionality, main pages, secondary pages and template pages.
You do not need to define key user paths if your site does not require the user to actually do anything task oriented.
Develop Site Structure
A sitemap shows a visual representation of the site’s structure, organization, flow, and grouping of content and information. It is representation of the entire, whole web project, from a broad vantage point to many of the minute details.
Two types of naming conventions are 1) organizational/numeric and 2) HTML naming. Whatever convention is followed, it should be consistent, clear and simple, and use logic.
Content
Three views or perspectives involving the content of a site are 1) Site-View 2) Page-View and 3) User-View. Each achieves a different goal.
Site-View sets the overall structure and creates a “blueprint” of the site. The Page-View involves wireframing of individual pages. It presents and organizes copy, navigation and visuals in a logical, meaningful way for the end user. The User-View follows paths and decision points of the user based on intended actions and task flows a visitor would follow. This view looks at the relationship of one page to the next.
Content audit is a close evaluation of all the items of content in the outgoing site that are relevant to the redesign. The purpose is to remove unnecessary content while maximizing the content and messaging that meets the site’s branding and business goals.
Define the Project
A few examples of “overall goals” for the web site re-design would be 1) to reduce calls to admissions 2) to create intuitive navigation and 3) to create a scaleable structure for growth.
A Project Plan consists of 1) an overview of the project 2) a schedule of deliverables and methodology 3) budget breakdown 4) the communication brief 5) audience profiles 6) user testing and 7) a line for the client’s signature.
Examples of good documentation would be the consistent use of the Change Form which documents all client-initiated additions and changes to the defined project and use of the budgeting time tracker which documents the time alloted and spent on the different phases of the total project.
An Additional Change Form is used each and every time the client requests a change or addition outside the defined scope of the project. It is used to keep a record of even gratuitous changes or additions outside the original scope to control Scope Creep.
Two approaches to the scheduling task are 1) an overview schedule that shows methodology chronologically and 2) a detailed date-by-date format that itemizes deliverables and approved reviews.
A Visual Designer is familiar with the various softwares for creating stunning graphics within the limitations of the capacities of the target audience. Your Information Designer translates content and business goals into functional schematics. This is the person concerned with the site map and structures the way content navigation is laid out on a page in a non-designer oriented manner.
A “staging area” is the hub of communication. The team’s development area is an HTML area for deliverables and project documentation that is not visible to the client. A separate staging area is established for the client and both areas should be password-protected.
The agenda of a “kick off” meeting should include 1) an introduction of the total project to all team members and clients 2) the overall site goals supported by a distribution of the Communication Brief 3) schedule and timing of the project with calendars, risk and any scoop creep issues 4) who and how content will be delivered 5) what happens next and who will be in contact with whom 6) establish a standing day and time convenient to all for weekly meetings and 7) the immediate next step.
Analyzing your Competition
The differences between a Formal and an Informal Industry Analysis is 1) expertise, 2) budget and 3) approach. A formal analysis is usually done by an outside experienced marketing or research company that uses exhaustive documentation within a high-end budget. The informal analysis is comparing actual customer experiences primarily online and is a snapshot view of the competition’s services and features from a customer’s standpoint. This analysis involves both the web development team and the client completing the actual analysis.
A few of the features you might look for when you are doing a Competitive Analysis are personalization, search function, web links, flash animation, etc. –all of which would comprise your list of web features you gather from several sources and competitors.
The three main areas for rating when evaluating for a Competitive Analysis are 1) overall experience, 2) functionality and 3) the look and feel (the site, the brand, the company, etc.).
Core Design Process
There are 5 phases in the Core Process. They are 1) Define the Project, 2) Develop Site Structure, 3) Design Visual Interface, 4) Build and Integrate, and 5) Launch and Beyond.
“Scope Creep” occurs when after defining the scope of a project, additional features, requests, time delays and other unanticipated factors expand the scope of the project beyond its original boundaries. To prepare for it, define Scope Creep at the kick-off meeting to team members and clients and note that careful tabs will be kept of the schedule and deliverables and the process that will be used to counteract actions that put the project outside the original limits.
Content delay can be avoided by 1) appointing or hiring a Content Manager, or 2) creating a content delivery plan.
QA refers to quality assurance of the project. It is an ongoing and final check of the website for bugs.
Smart Design refers to a focus throughout the design process on the intended audience and end user of the website. Such design is functional, fast loading and does not distract from your audience.
Gathering Information
“Discovery” refers to the first phase of the 5 phase Core Process. It is concerned with the gathering of information on the client’s goals, the target audience, the industry competition and the functional requirements of your web design/re-design.
A “good client” is one that is goal oriented and one who answers the Client Survey in a clear and detailed manner. Your “red flag client” is one who presents an attitude of small budget/swift deadline and/or unresponsive–does not email or call back in a timely manner.
An audience profile is a detailed description of a typical or actual site visitor. It is also called a “persona.”
When determining an audience’s capabilities, you need to look at the technical factors such as browser types, monitors, broadband width and connection speed to decide how you will design the website.
CJLO Website Redesign
CJLO radio station is the results of 2 separate stations coming together more than a decade ago to form the only radio station at Concordia University in Canada.
Since the merger, the station now has the goal of bringing forth a distinct brand that is its own and having that clear brand recognized by its primary target audiences. In addition to brand recognition, CJLO needs to have the target audiences embrace, identify with it and utilize the services and programs offered by the station.
Our goal is to also improve the user experience so that the members of the target audience will want to return over and over again to the station and website thus strengthening the CJLO brand. Hopefully, the station can offer a sense of community for both the local residents and the academic community.
The primary target audience is the 40,000+ students and faculty members associated with Concordia University. This is where the station is located and from where most of its radio staff and volunteers are drawn.
The second target audience consists of the residents in the surrounding community and to a lesser extent, the audiences of Ottawa and Burlington, Vermont that are reached by the station’s 1000 watt power transmissions.
Members of the student audience are somewhat similar in characteristics—they are between 18 – 25 years in age, majority full-time students, equally divided between males and females, but are diverse wth as many as 10% from other countries, islands and regions. Interestingly, a fourth of this audience is French-speaking with the majority English-speaking. Faculty members represent a somewhat older population than the students, but share the same traits as students. For Concordia members and residents, it is anticipated they would log on to the CJLO website for campus and local news daily as well as from time to time for the specific genre of music played throughout the day on the station.
The University itself emphasizes the importance of community outreach and by aligning the station’s programs along the same lines, it will build close ties with the academic audience and the local residents audience.
One of the main goals of the redesign is to have the target audiences feel that the station/website are extensions of the University and the surrounding community. Presently, that is not the case. By continuing to highlight local talent, offering the benefits of an in-house recording studio, sponsoring community events with branding and air time and continuing high school internships at the station, the goal of creating a sense of community will be achieved.
CJLO should be perceived as current, community supportive and progressive with the redesign. The site itself will be consistent, straightforward, inviting and recognizable.
The overall message of the new site is this is an ongoing effort to foster a sense of community among all listeners. This will be achieved with dispersing more information about the availability of the recording studio, the involvement with high school students in the station workings, highlighting community events, sponsoring them and encouraging local talent.
Other college-run stations are not within the broadcasting range of CJLO and the For-Profit local stations do not have the close affiliation with the University and its audience to the degree that CJLO has. With such a diverse student population, playing familiar homeland music and emphasizing campus and local news will build a loyal following that other radio stations lack.
Already, putting the spotlight on local, upcoming talent and offering production services in our recording studio, is building a following. The diverse volunteer staff is mostly from the University population and by featuring one of our DJ’s weekly, our staff personalities increase the station’s following.
The site, once it is launched, can be described as “Building Community.”
Research and Competitive Analysis of College Radio Stations
I analyzed four different college radio stations during the planning stage for the Canadian CJLO station redesign in addition to some for-profit, commercial stations. The Santa Monica College station, KCRW 89.9 was analyzed as well as KALX 90.7 FM of Berkeley, KUSC 91.5 FM for USC and KSDT 95.5 of UCSD.
The colors used on the site were the first elements on the opening page that grabbed my attention. With the addition of Flash animation, it took awhile to get past the purple, orange, yellow and blue to actually start reading the information and look at the page elements.
The navigation bar is clean and well organized, although numerous in choices. It is very good that a drop-down menu was included to minimize the cluttered look of the home page. There is little “white space” on the opening page which makes the site look crowded. The san-serif typography use is a plus for the site—it gives a modern, up-to-date look to the many announcements on the page.
Very clean, uncluttered home page with simple, easy-to-use navigation. The drop-down menu keeps the navigation simple throughout the site. There’s a good use of “white space” to keep the site clean. I noticed the social media icons immediately and felt that this site is a school supported station for students by the inclusion of the social media.
There is some Flash that makes the site interesting and slow enough to hold your attention, but it is not distracting. The use of the green, black and white throughout the site gives it a very consistent “look and feel.” There is some mixing of serif and san-serif typography on pages and it comes off well. Overall, this was a well put together website.
This is USC’s station and somewhat uses a mild red (pastel?) version of the school color for its navigation. There are about 11 navigation buttons which goes against the 7 +/-2 rule for navigation. The organization of the buttons is not clear as I tried the site. The “games” navigation button directs you to a kids’ presentation that did not seem to be functional or informative, and definitely not intended for its university students audience. Use of “white space” keeps the site uncluttered. Only classical music is offered by the station which narrows the target audience. The site did not seem to direct much of its content toward a university student audience.
The tag line for this station is “fiercely independent college radio” and the “look and feel” of the site conveys a sense of rebellion. The call letters are large and smeared with a broad black paint stroke covering the right side of the pages. However, this “look and feel” is consistent throughout the site. There’s a lack of social media icons and no “on air” play button conspicuously placed on the site as an appeal to its target audience. Typography is a mixture of font faces and font sizes which is consistent for all pages. It’s one of the least cluttered of the sites I research for colleges and for commercial radios as well. The navigation exceeds the 7 +/-2 rule and does not use drop-down menus.
