Class 03

The Week’s Topics

Focus on Users
Web Design Critiques
Personas
Content Inventory
Web Analytics
Competitive Analysis (Competitive Review)
Wireframes
Dreamweaver
Quiz 1


Assignment 3: Due Monday, March 12

1. Read & watch all the “important stuff” for this week.
2. Create a communication (project) brief and redesign a home page.

Create a communication brief (project brief) for one of the three websites below:

MacVaugh & Company Commercial Real Estate
http://www.macvaugh.com/

Food on Foot
http://www.foodonfoot.org/

Lycee International of Los Angeles
http://lilaschool.com/index2.htm

Base your communication brief on the outline from the Class 02 notes. Because you’re not going to have the opportunity to talk with the client, you will need to “get in the head” of the client and base the communication brief on your best guesses. Be sure to do research, do an informal competitive analysis and look at competitive websites. Your communication brief needs to include the following:

  1. Project name:
  2. Big picture:
  3. Project summary
  4. Business objectives/goals
  5. Preferred date for launch by client
  6. Target audience
  7. Perception strategy
  8. Message Strategy
  9. Competitive Advantages

Redesign the home page for the website focusing on the target audience and reflecting the information from your communication (project) brief. The “deliverables” for this assignment are your Communication Brief and the Design comp (in Photoshop) for the home page of the website. Remember the principles of Balanced design that we discussed last week. You need to take in consideration both the client and the customer (user, audience) when redesigning the home page.

Here a Sample Creative Brief compliments of Goto Media. This sample does not include all the information so be sure that your Communication Brief includes the 1-9 listed above and detailed in our textbook on page 112.

Please bring in your communication brief and the redesigned home page to our next class, Monday, March 12.

3. Read the following chapters from our textbook.

Chapter 9: Content Strategy
Chapter 10: HTML Intro
Chapter 11: CSS Intro


Quiz 1

Click here to take Quiz 1

Assignment 1 Feedback

1. If you need to develop your file organization skills

I’d like you to work on your file organization skills by doing the following:
View this File Organization Video

+ + + + + + + + + + + + + + + + +

2. If you need to develop your visual design skills

I’d like you to work on your visual design skills by doing the following:
Study the following principles of design:

1. The Grid
2. Color Palette
3. Navigation
4. Design Principles
5. Typography

Read this Basics of Web Design article.


Practice design by taking a design that you really like and creating your own version of it. (Like a film student who pays homage to their favorite filmmaker, try copying your design idol, it’s not easy to do!) You’ll find your own style through practice and develop stronger design skills, but it does take time and work!

Or think of your favorite artist and design a website inspired by their work. Here’s some great examples:
http://www.smashingmagazine.com/2009/08/27/if-famous-painters-were-web-designers/

+ + + + + + + + + + + + + + + + +

3. If you need to develop your technical skills

I’d like you to work on your technical skills by doing the following:

View this One Column CSS Layout Video
View the Two Column CSS Layout Video

Important Stuff

Content questions & information architecture tools
Question Information Architecture Tool
Exactly who is the content for and what do they want/need? 1. User surveys and interviews
2. Personas and task-based scenarios
What content do we already have?
What is the source of each piece of content?
Content analysis: content inventory
What content are people using? Content analysis: web analytics
What do the “other guys” have? Content analysis: competitive review
What content would we like to have at launch? Proposed content outline
How would users organize and label our proposed content? Card sort
Focus on Users
.
  • Conduct user interviews and/or surveys. Find out exactly what users want by asking them in interviews or online surveys.
  • Develop key audience persona(s). A persona is a fictitious character created to represent the primary audience. The persona is developed based on data discovered through user interviews and/or surveys. The persona helps keep the project focused on the needs of the user by bringing an imaginary audience member to life.
  • Write task-based scenarios. Identify the top 10 to 20 most common situations that bring the target audience to your site to accomplish a specific task. These scenarios will guide the design of the site and are also used as the basis for usability testing.
Personas

A persona is a fictitious character you will create to represent the primary target audience. A persona should include the following basic elements:

Basic demographics

  1. Age
  2. Occupation
  3. Education
  4. Income

Personal

  1. Name
  2. Picture
  3. Description

Technical profile

  1. Preferred operating system
  2. Preferred browser
  3. Internet skill level
  4. Favorite sites

Audience goals: What does the user want to do? Top three to ten tasks this user wants to accomplish on the site.
Business goals: What does the client want the user to do? Top three business objectives for this audience.

The basic demographic information is usually gathered during the initial client interview. Ask the client if they already have personas for current branding or marketing initiatives. If they do, start from their established persona and add any additional details for this specific project (like technical profile, task-based scenarios, and specific business goals). Select a name and a photo to represent this persona based on the description the client gave you for this target audience. The name and photo should be appropriate for the stated age of this persona. You can use a tool like the Baby Name Voyager to help you find common names for that age range http://www.babynamewizard.com/voyager.

Consider selecting photos from a stock photo service or more casual shots from Flickr. Respect intellectual property and copyright law by obtaining permission to use photos when required. Don’t use names or photos of people your project team knows.

Question: Seriously? Why do I need to create a fake person and give them a name and a face (picture)? Can’t I just define the primary audience and be done?

Answer: During the design and development stage, without a detailed persona, you will have a tendency to assume that the audience needs are the same as yours. By creating a persona with a name and a picture as well as a detailed description, you bring the target audience into your design process.

Examples of Personas

Content Inventory

What do we have? Discovering what content your client already has is the goal of the content inventory. This task is best done by the client, because they know their content best. If the client suggests that a content inventory is not necessary, emphasize that content is the core of the site. Without a strong understanding of the current content and a strategy for creating new content, they risk dooming the site to be incomplete, outdated, and inaccurate.

Web Analytics

What are visitors doing?
What pages are viewed most?
Where do people enter and leave the site?
Which keywords are frequently used to search the site?
Web analytics tools can provide answers to these questions and help you better understand the effectiveness of a site.

Many web hosting companies offer statistics packages as part of their services. For example, MediaTemple offers free Urchin Analytics and Dreamhost offers free Analog statistics on their basic accounts. If your server does not already have analytics or you want more than they offer, you could consider using Google Analytics, which is free up to 5 million page views per month. If you outgrow the free options, for a fee you can have the most powerful analytic services, which include ClickTracks, WebSideStory, and WebTrends.

Once you have access to the statistics for a website, where do you start to look? Web analytics is a bit like archeology: You are not actually observing people and their behaviors. You are sifting through the tracks they left behind. Let’s look at six basic web statistics and what insights they can provide for content analysis:

  1. Hits—number of requests for files from the server. This statistic is not very useful for content analysis because not only does it include hits for pages, it also includes hits for images, JavaScript, CSS, and any other files that are embedded in a web page.
  2. Page views—number of requests for web pages from the server. This is a very useful statistic that shows you which pages are viewed most.
  3. Entry pages—a listing of the page where each visitor entered the site. Are the key entry pages what you expected? Do not assume users are only entering the site via the home page. Are these entry pages designed in such a way that they help users accomplish their goal?
  4. Exit pages—the last page viewed by each visitor. Are visitors leaving in unexpected places? Are visitors abandoning processes at a critical step? Statistics will not tell you why they left, but they encourage you to investigate what is causing problems.
  5. Bounce rate—percentage of visitors who enter on one page and exit from that same page without visiting any other pages in the site. Avinash Kaushik shares his thoughts in “Bounce Rate: Sexiest Web Metric Ever?” at http://www.mpdailyfix.com/bounce-rate-sexiest-web-metric-ever/.
  6. Keywords—terms and phrases people used in external search engines to fi nd your site. These keyword statistics help you understand your visitors’ vocabulary in relationship to your site.

Web analytics warning
Web analytics are only half of the picture. These web statistics show you what happened, but they do not tell you why it happened (or what steps to take based on this data). For example, a page may have very low page views for any of the following reasons:

  • Users do not need this information (delete page).
  • Users need this information, but cannot find it due to usability problems (keep page and improve findability).
  • A few users need this information and find it very useful (keep page).
Competitive Analysis (Competitive Review)

What are the others doing? A high level analysis of major competitors is vital to a website’s success. It is better to know the competition’s strengths and weaknesses before you fi nalize your website strategy. Here are the basic steps for conducting a competitive review:

    1. Identify the competition—Ask the client who their major competitors are. Use services like Alexa to discover competitors you client may not be aware of (http://www.alexa.com/siteinfo). When possible, identify seven to 10 main competitors to review. At the very least, review three competitors.
    2. Decide what to analyze—Reviewing the competition has many benefi ts, including increased understanding of this business sector, common vocabulary, best practices, as well as the obvious strengths and weakness of the competition. Types of information you might gather include:

High level inventory of features/functionality
Visual design characteristics
Labels and organization schemes
Usability heuristics

  1. Develop a competition survey—Develop a list of objective questions. The more consistent you are when you review each competitor, the more you will gain from this analysis. For a practical example of data to collect, see Jason Withrow’s article “Competitive Analysis: Understanding the Market Context” at http://www.boxesandarrows.com/view/competitive_ analysis_understanding_the_market_context and Thomas Myer’s article “How to conduct a Web site competitive analysis” at http://www. ibm.com/developerworks/webservices/library/us-analysis.html.
  2. Answer survey for each competitor
  3. Analyze survey data
  4. Write a report of the findings and recommendations.

The experience of surveying the competition is a priceless reality check that, when done well, increases the probability of designing a successful website.

Wireframes

A wireframe is a bare-bones layout of a web page. It is a simple drawing of the chunks of information and functionality for key pages in the site. You will want to create a wireframe for the home page, each unique second level page, and any other signifi cantly different pages on the site. Wireframes include the containers for all the major elements of the page. Elements include navigation, placeholders for images, content and functional elements (like search), and footer. Wireframes do not include any reference to color, typography, or visual imagery.

Wireframe warnings
The moment you begin to draw a wireframe you have entered the zone of the visual designer. One could argue that you should not be drawing wireframes unless you are formally trained in the visual design principles of balance, rhythm, proportion, and dominance. Three possible solutions to the natural tension that occurs between information architects and visual designers over wireframes is to:

  1. Put a large disclaimer at the bottom of every wireframe stating: “Disclaimer: Wireframes are NOT visual design (typography, colors, images, fi nal layout, etc.). Wireframes are a rough draft of required content only.”
  2. Have the visual designer develop the wireframes based on the page description diagrams.
  3. Skip the wireframe deliverable all together.

Warning: Skipping both wireframes and page description diagrams is severely dangerous to the health of a website. Wireframes and page description diagrams focus on required elements and their relative importance without the added complexity of visual design. Wireframes are an inexpensive way to test structural design ideas. Making major changes to a wireframe is simple compared to making major changes to a visual design.

Example of a Wireframe



Comments


About Author

jamie

Instructor for Graphic Design 66