leahbisch

Mobile Website Design

For the SMC mobile redesign, I first focused on the content and structure of the site because I felt it could be better organized to feature both business-type activities like viewing fees and enrolling for classes along with explore/play features like a news feed and social media. This is why I ended up including one category for “Corsair Connect” which would be where students could log in and access the following links:

—Enrollment Services (shown in the demo):

i. View Class Schedule

ii. Check available Classes

iii. Add a Class

iv. Drop a Class

v. View Fees Assessment

vi. Pay Enrollment Fees

vii. Apply for Fee Waiver

viii. View Transaction Receipt

ix. View Unofficial Grades

x. View Student Records

—Purchase Parking Decal (below frame – not visible in the demo)

—Request Satellite Decal (below frame – not visible in the demo)

—View Profile and Preferences (below frame – not visible in the demo)

The other links on the homepage include a wide range of activities like accessing a campus map with parking information, a direct link to emergency services, news/event feed, Google Mail/Docs/Calendar, and more.

For the look-and-feel of the site, I tried to keep it as consistent with the main campus site as possible by incorporating their blue and gold colors, trebuchet font (used on the main site), and blue swoosh design (as seen in the header on the main campus site). I also incorporated the use of icons to the homepage to add visual interest and hopefully aid in finding links more quickly. I also made sure to make the lines 44 pixels apart but it was challenging to fit all the links on one screen on the homepage with this format.

In my initial web design comps (as seen here), I wanted to create one clean and classical design direction that could appeal to users of all three programs within the department (the yellow/gray site) and one that was purely graphical (the black and neon colored site). After my group critique it was decided that the navigation and overall interface of the more clean approach would work best for a department that needs to appeal to students and faculty attending the Entertainment Technology Program, Interior Architectural Design Program, and Graphic Design Program.

In terms of navigation, I tried to keep it as simple and straightforward as possible. I housed the 3 programs within one drop down navigation which allows students, faculty, and parents of students to quickly find information on their program of interest. I still can’t decide if the programs need an introductory landing page or not. I like the idea of it because I feel like the landing page as it is right now is a bit underwhelming for a design school. And, it could serve as a nice introduction to each program for prospective students who are not familiar with them. But, I also think that a programs.html page might seem a bit gratuitous when all the introductory information you need can be found directly on the “Overview” page of each program. I also included a “Why SMC?” navigation page which would act as an “About Us” page. I thought this page could be extremely important for both prospective students and their parents.

In terms of the look and feel of the site, I wanted to keep it clean since we are trying to appeal to 3 different program audiences. I chose the mustard color as my “pop” color because I think it is a nice accent off the main SMC page. I see it as more of a toned down version of the gold SMC color. While we don’t want our department to follow the look of the main campus page, I also think a little bit of commonality can be good since we do need to link back to the main site for information on things like “admissions” which will be a frequently used nav button. On many of the competition school graphic design sites, I found it to be jarring when you were navigating through their interface and suddenly linked back to the main site which was totally different in every way. I think a little bit of color consistency (even if it’s a different shade of the main site’s color) can help to unite the program under the SMC umbrella.

To view my completed midterm project, go here

What are wireframes?
Wireframes (aka ‘page schematics’ or ‘content layouts’) are non-design oriented sketches showing a rough layout of elements on a page. It serves as guide to let the designer know where to place navigation, logo, headers, main content, etc. They show hierarchy of information but do not represent how the information will appear graphically.

When do you not need to define key user paths?
If your site does not require the user to do anything task-oriented (like filling out forms or placing orders), you do not need to define key user paths. If you are trying to get users to complete a task like placing an order, defining the path they might take when navigating through the site – from finding the product to filling out forms to completing the order – is important. You want to make sure the path to placing and completing that order is easy and clear so as not to annoy the user and risk having them abandon their order.

What is a “site map?”

A site map sets the structure for a website. It is the blueprint upon which navigation and content is structured for a website. This is usually created by the person designated as the “information designer” on a project.

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

Organizational/Numeric Naming — ie 1.0, 2.0, 3.0, etc.
HTML Naming — index.html, about.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?

Site–View
This view sets the overall structure of a site (aka – sitemapping).

Page–View
The Page–View is the organizing view. It is used to organize information on the website in a logical and meaningful way.

User–View
This view is the relationship of the pages to one another and considers how a user will navigate the site.

What is a “content audit?”

A content audit is a time to take a close look at every piece of content on a website and determine if it’s necessary to include on your redesigned site, and to help reorganize content in a more logical manner on the new site. This is typically something a client will do.

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

Increase traffic
Increase sales
To create intuitive navigation

What does a Project Plan consist of?

Required Items

Project Overview
Schedule (including deliverables and methodology)
Budget breakdown, with allocated hours
Communication Brief

Suggested Items

Target audience information
Audience Profiles
Audience technical capabilities
User testing plan
Details and assumptions
A line for the client’s signature

Give examples of good documentation practices for a project.

Keep all emails related to schedule, budget, and change orders together in a file or print them out and put into a binder and obtain signatures or written client approvals on all the above items as well when possible.

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

Any requests that are outside the original scope and budget of the project should receive a change order.

What are the two ways to approach the Scheduling task?

Create an overview schedule that shows methodology chronologically
Build a detailed date-by-date format that itemizes deliverables and approval reviews according to due dates

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

The Visual Designer is responsible for creating stunning graphics while keeping their intended market audience in mind. They should be well-adept in working with programs like Flash, Dreamweaver, Fireworks, GoLive). This person should also be able to follow the schedule and interact with clients.

An information designer is responsible for the structure of the site as well as usability. They develop the navigation, functionality, and user interaction.

What is a “staging area?”

There are two different types of staging ares:

The client staging are is a place where designers can post all deliverables and project documentation for work in progress or for administrative reasons. This is a place where the client can log-in to review work.
The team development area is a place to view work-in-progress that is not yet ready to be viewed by the client. This is also a great place to develop an HTML alpha site.

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

Introduction of the Project Plan
Overall Site Goals – Review the Communication Brief in detail
Schedule and timing
Content – Figure out who will be providing content
Next Steps – Figure out contacts and follow up
Establish a Time for Regular Meetings

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

Formal Industry Analysis

Created by an Independent Research Team with expertise in research, strategy, & marketing
Formal Industry Analysis = marketing segmentation, trends, forecasts, customer needs
Quantitative data driven, market- and research-centered
Huge book of information (think War & Peace)
Will cost $20k+
Provides a comprehensive, strategy based recommendations on customers, market, and evolving business needs

Informal Industry Analysis

Created by Members of the web-development team
Informal analysis of other competitive websites with a focus on features and user experience
“Shows what is working and not working”, feature-driven, qualitative information
5-20 pages
Will cost anywhere from a business lunch up to $20k
Provides industry information & gain a firsthand view of customer experience

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

Search, registration, message boards, content, graphics, media, functionality, things to do, email or feedback ability, global navigation…to name a few.

Core Design Processes

There are 5 steps in the core design process and they are as follows:

Define
Structure
Design
Build
Measure

~~And, once my Web Redesign 2.0 book arrives from the slowest shipper on planet earth, I will answer the remaining assigned questions.~~

9/12/11 UPDATE: The book has arrived!

What is scope creep and how can you prepare for it?

Scope creep is a common problem in our industry so it’s important that designer’s know how to deal with it. Our author defines scope creep as “the slow, inevitable swelling of a project’s scope from something defined to something significantly bigger” (p 22). To manage scope creep, it is important to discuss this concept with your client at the outset of the project. Gather as much information as you can and make a schedule of deliverables with your client. It is also important to discuss how any additional changes will be handled in terms of the budget so if scope creep gets out of control, you have a contingency plan in place (that the client is aware of) to get paid for the additional work. It can also be beneficial to hire a project manager to help tract the schedule and keep the budget in order.

What are the two ways to combat content delay?

Create a Content Delivery Plan to clarify when content is due from your client.
Contract or assign one person to be responsible for following through to obtain content from a client in a timely manner.

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

Quality Assurance

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

Design with your audience in mind. Resist the temptation to do something in the design simply because it “looks cool”. If it inhibits page loading time or is not functional, don’t include in the final website.

Gathering Information

What does the word “Discovery” refer to?

Discovery refers to spending as much time as possible getting to know your client’s business, their needs, the competition, and learning about their audience in Phase 1 of a project. The five parts of discovery are as follows:

Gathering Information
Understanding Your Audience
Identifying Your Audience’s Technical Capabilities
Developing Functional Requirements
Analyzing Your Industry

Examples of “good client” attributes and “red flag client” warning signs.

THE GOOD

Answers the client survey in a clear comprehensive manner
Is responsive to emails and phone calls
Is goal oriented and focused on the big picture and how the website fits into the business as a whole

THE BAD

Small budget and fast deadlines
Indecisive and unable to articulate changes or feedback
Wants to save money by handling the creative/production aspects himself

Understanding your Audience

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

An Audience Profile, or User Persona, is used to help gain a stronger sense of who your audience is, what their goals are on the website, and what tasks they will be profaning at the site. Audience profiles can either be based on real-life interviews or educated assumptions made by the designer.

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

Platform, connectivity speeds, user browsers, and resolution

Week 14

Week09

Week08

Week 07

Week 06

Week 05

Week 04

Week 03

Week 02

Week 01

Follow “leahbisch”