jennifervero

Having completed the technical production phase of this assignment, it’s much easier evaluate whether the design and the navigation structure are effective and best serve the target audience and the goals of the site. In general, I’m pleased with the design and the organization/hierarchy of the visual elements and the content, but nearly all the type and graphic elements need to be scaled down somewhat to give the design a little more breathing room and make it look less wide. I’d also like to further develop the logo to give it more character and a more distinct look.

Technically speaking, my finished pages are nearly identical to my design comps but I had some problems with the drop down menu for the top nav (which I still haven’t been able to fix), the search bar, and with embedding fonts. Almost none of the fonts that I initially chose in the design comps were available to embed. The typefaces I chose as replacements are not completely off-the-mark, but they aren’t as effective as my original choices.

Overall, I do think I was successful in creating an “interesting navigational interface that allows the user to navigate the site in multiple ways.” I like that the main nav, top nav, and second-level nav are all in close proximity to one another but exist in distinct sections/spaces of the page. I hope that this would allow users to quickly determine their next move upon a quick scan of the nav options.

Before I began any sketching or designing, I decided I would keep SMC’s color of blue and gold. It’s unlikely that a college or university would change its longstanding school colors just for a website redesign, so I wanted to keep the tradition intact.

My first design direction is the first set of images seen below. When I first began sketching and working in Photoshop, I was pleased with the clean, crisp look of the pages, but they seemed to be lacking personality. They are, in a word, boring… if not underwhelming. I really wanted the design to capture the essence of SMC and the surrounding area, which is bright, cheery, modern, and bustling. These initial designs did to confirm to me, however, that I was on the right track in terms of giving the pages a simple, decluttered look and that I made the right choice in keeping the blue and gold color scheme.

For my second direction, I decided to use a less saturated blue to make the pages look less austere. I used photography that highlighted the outdoors and the usually clear blue skies of the Santa Monica area. This immediately gave the pages the cheery, modern look I was going for. I also decided to try to vertical main navigation to make SMC’s website stand out. In my research, I noticed that very few institutions use vertical main navigation, or vertical (portrait) photography for that matter. By using vertical main nav in tandem with horizontal sub nav, I could make better use of the space and use photography of varying orientations. Finally, I added a drop down menu to the top nav and created a more defined logo treatment for this second direction.

I have to decided to move forward with my second direction for my midterm project.

As someone who prefers the design and technical aspects of building a website, I really struggled to create a well-organized and concise yet thorough sitemap for the smc.edu redesign. After several days of researching both the existing SMC website as well as competitors’ sites, I think I did just that. My primary goal was to create a sitemap that’s indicative of a website that contains any and every piece of content the target audience may desire but that’s also easy to navigate.

From there, I began to work on the wireframes for the homepage and one landing page (Admissions). Confident that I had a thorough and well-structured sitemap, it was fairly simple to determine the information hierarchy for both pages as well as the structure of the various levels of navigation. The wireframes reflect pages that are organized in a way that makes sense to the target audience as they scan the information and navigate from page to page.

I felt strongly that the homepage should be simple and clutter-free, which is in stark contrast from the homepage as it exists today at smc.edu. Therefore, the homepage wireframe contains only the navigation necessary to delve deeper into the site to locate desired content and just a few important content blocks (featured items, news, events, social media, and campus information).

The Admissions landing page is a bit like a homepage for admissions content. In other words, in order to keep the page clean, attractive, and easy to navigate, it contains only a bit of general admissions information and second level navigation which can be used to find specific, in-depth content on the admissions process for the various types of prospective students. This page also features a “Steps to Apply” content bar that contains links to the various steps of the admissions process in the order that they should be completed.

What are wireframes?

Wireframes are storyboards for the site. Also referred to as content layouts or page schematics, they are nondesign-oriented sketches of unique pages showing rough navigation, copy layout, graphic allocation, key headers, and any other elements that need to appear on a page. They show major content placement, primary and secondary navigation, and perhaps light functionality. Looking at wireframes in relation to each other (interactive wireframes) helps depict page flow but does not dictate exactly how something should be represented.

When do you not need to define key user paths?

You do not need to define key user paths if your site does not require the user to actually perform any tasks (for example, fill out a form, log in, make a purchase, etc.), but if the user’s experience includes tasks, identify the task’s path and build wireframes for each page in the path. With these interactive wireframes, you can check page flow and judge the validity of the path.

What is a “site map?”

A site map is an architectural blueprint of the site. It is a visual representation of the site’s structure, organization, flow, and grouping of content and information. It is a representation of the entire project, from a broad vantage point to many of the most minute of details, from the user’s standpoint. The sitemap should clearly show all HTML pages within each section of the site; every page gets a box, and most major links are represented. The site map is a deliverable and should by signed off by the client.

What are the two types of naming conventions that are addressed in the book?

There are two types of naming conventions: organizational/numeric naming and HTML naming. Sitemaps should contain them both, but if they only contain one, include a key that makes it easy to discern the other naming convention.

Organizational naming is applying a numeric or alphanumeric standard to pages and sections of the site map. Begin with the home page as 0.0. The primary sections beneath the home page are labeled 1.0, 2.0, 3.0, etc. Subsections under primary pages are 1.1, 1.2, 1.3, etc. HTML naming is using the name of each page link (i.e. about_biography.html, contact.html, etc.).

What are the “three views” discussed in the book involving the content of the site? And what are the differences between the three views?

The three views are the Site View, the Page View and the User View. The Site View sets the overall structure and creates a blueprint of the site. The Page View 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.

What is a “content audit?”

A content audit is an evaluation of every piece of content (text, imagery, or media) in the outgoing site that is relevant to the redesign. In other words, it is a means of determining what content will be used in the redesign, what will be revised/edited, and/or what will be discarded.

Name a few examples of “overall goals” for the web site design or re-design.

Some goals may include increasing traffic, increasing sales, decreasing calls to customer service, creating intuitive navigation, and/or creating a more user-centric site.

What does a Project Plan consist of?

The Project Plan should contain at least the following:

1)   Project overview

2)   Schedule (including deliverables and methodology)

3)   Budget breakdown, with allocated hours

4)   Communication Brief

Give examples of good documentation practices for a project.

1)   If the client signs it, save it. Email approvals are a good start, but follow up with a hard copy to protect yourself get a signature via fax whenever possible. For every project, create a project folder (or a binder) to house all signed documentation: contracts, briefs, the initial proposal and subsequent revisions, approved sitemap, visual design directions, etc.

2)   You should print all emails relating to budget, scope, sign-off, and especially requests for changes and have them at your fingertips. Save everything electronically as well. Avoid messy files and lost documents; start organized and stay that way.

3)   All the forms, briefs, and schedules are key to both keeping the project streamlined and maintaining your credibility. Most documents can be as abbreviated as an email or as formal as a written, multipage report complete with 8×10 color glossy pictures with circles and arrows and a paragraph on the back of each one.

4)   The importance of each piece of documentation lies in clarity of communication, not necessarily in the extravagance of delivery. However, sometimes more documentation is prudent, especially if you have a capricious client or an inconsistent team.

When is an Additional Charge Form used? (often times referred to as Change Order)

An Additional Charge (AC) Form is a handy way to document increases in scope that can result from Scope Creep or requests for project changes. Even if you decide to not charge for a change, you can still issue an AC, mark the change as “gratis,” and have a record of the change. ACs work as amendments to the approved budget.

What are the two ways to approach the Scheduling task?

First create an overview schedule that shows methodology chronologically then build a detailed date-by-date format that itemizes deliverables and approval reviews according to due dates. One follows and evolves out of the other; each communicates the message from a different perspective. Get both schedules approved by the client. Leave nothing up to interpretation.

What is the difference between a Visual Designer and an Information Designer?

The visual designer creates stunning, effective graphics while working within the limitations of the capabilities of the target audience. A fluency in industry-standard programs (Fireworks, Flash, Dreamweaver, Photoshop, GoLive) should be a given. On the other hand, the information designer translates content and business goals into functional schematics. This person develops the site map and structures the way content navigation is laid out on a page in a non–design-oriented manner. The information designer defines site navigation, functionality, and user interaction. Information design is sometimes a shared role with either visual design or production.

What is a “staging area?”

The staging area acts as a hub of communication. It is divided into two sections: a client staging site and a team development area. For the client, or internal decision-makers, set up a central HTML staging area to post all deliverables and project documentation. Although email is very effective for transmission of information, for work in progress, and as a point of administrative reference (email links, schedules, etc.), create and use these staging areas.

What is included in the agenda of a “kick off” meeting?

1)   Introduction of the Project Plan: Introduce the project, client, and team; show Discovery items; go over Details and Assumptions; make sure everybody understands the project scope; distribute contact lists to both sides; go over roles and responsibilities of both the client and team; establish means of communication.

2)   Overall site goals: Distribute the Communication Brief and go over it in detail.

3)   Schedule and timing: Discuss the project calendar; make clear the relational importance of feedback and content delivery to the final launch date; establish and adjust the project calendar according to individual schedule conflicts; discuss known risks and Scope Creep issues.

4)   Content: Who will provide content? How will the content schedule be worked out?

5)   Next steps: Briefly describe what happens next and who will be in contact with whom, specifically for the immediate next steps: organizing the content and structuring the site.

6)   Regular meetings: With all decision-makers in one place, pull out your calendars and establish a standing day and time that is amenable for the entire team. This scheduled meeting can be changed as necessary from week to week, but it helps to check in on a regular basis at least weekly.

What are the differences between a Formal and an Informal Industry Analysis?

A Formal Industry Analysis involves an independent research team with expertise and background in marketing, communications, research, and/or strategy. They conduct a formal analysis of industry, market segmentation, trends and forecasts, and customer needs using quantitative data-driven, market- and research-centered focus. The goal is to provide comprehensive, detailed, strategy-based recommendations on changing marketplaces, evolving business models, and customer habits and segmentation. On the other hand, an Informal Industry Analysis is done by members of the web development team who will be re-creating the user experience online by completing and informal analysis of competitive sites focusing on features and user experience. The goal is to gain firsthand view of customer experience. Provide relevant documentation and industry information to the client.

Name a few of the features you might look for when you are doing a Competitive Analysis.

The features one would look at when doing a Competitive Analysis are content, graphics, media, and functionality, which are broken down further into the specific features that appear on a competitor’s site, such as search capability, e-commerce, site security, etc.

What are the three main areas for rating when evaluating for a Competitive Analysis?

The three main areas for rating when evaluating for a Competitive Analysis are overall experience, functionality, and the look and feel.

Core Design Process

How many phases are part of the Core Process and what are they?

There are 5 phases. They are:

1)   Define the Project

2)   Develop Site Structure

3)   Design Visual Interface

4)   Build and Integrate

5)   Launch and Beyond

What is “Scope Creep” and how can you prepare for it?

Scope Creep is “the slow, inevitable swelling of a project’s scope from something defined to something significantly bigger.” You can prepare for it by being watchful of seemingly casual client requests for small changes, defining Scope Creep to both your client and your team at your kick-off meeting, and explaining how keeping careful tabs on the schedule, deliverables, and process will help keep the project on target.

What are the two ways to combat content delay?

One way to combat content tardiness is to hire a content manager, a person to manage and oversee the entire content-delivery process. A second way is to create a content delivery plan. This is a schedule that outlines realistic dates for delivery according to readiness.

What does the “QA” in QA testing stand for?

Quality Assurance

What do the authors mean when they refer to “Smart Design?”

Smart Design means serving the audience’s environment and capabilities. It is functional and fast loading and is focused on the audience’s experience. You can achieve Smart Design by thinking like your audience and creating a site based on that.

Gathering Information

What does the word “Discovery” refer to?

Discovery is a thinking process. The three main steps are: 1) Gathering Information, 2) Understanding Your Audience, and 3) Analyzing Your Industry. Its purpose is to allow team members to put themselves in the minds of the site’s users and to understand as much as possible about the target audience(s), the company, the outgoing site, and the redesign project as a whole.

Give me a couple examples of “good client” attributes and “red flag client” warning signs.

A good client is goal-oriented: focused on the big picture and how the site fits into the business as a whole, and is in agreement on deliverables, schedule, and budget. A red-flag client is unresponsive, cannot make decisions, does not email or call back in a timely manner; he or she may also wants to handle the creative and/or production aspects to “save money.”

Understanding your Audience

What is an audience profile? What is another name for it?

An audience profile gives a detailed description of a typical site visitor. Also called a “persona,” this document can be as brief or as detailed as your information, creativity, and time allow. Most sites draw several distinctly definable audience types.

Name some of the things you need to analyze when determining an audience’s capabilities?

The goal is to identify your target audience’s technical capabilities, such as their screen resolution, the types of software they have installed on their machines, the browser they’re using, and what bandwidth they can comfortably handle.