Project #4: Group Site Redesign FINAL

THE FINAL LAYOUT of williamsonoma.com
------------------- click here ----------------------

Iphone

+

=

funny.

On The Late Show with Conan O'Brien last night, they had a skit about the different uses of the iphone...such as:

• electric shaver
• bottle opener
• blow dryer
• book mark
• cheese grater
• portable shower
• thermometer
• mace
• tread mill
• side burns
• pan flute

and...a really hard to use phone.

Turbo Tax

I was watching the news this morning and there was a brief article on turbo tax (regarding the conversation we had in the last class); the news reporter said that people who filed their taxes online with turbo tax weren't able to get their taxes in on time due to the servers for turbo tax being "swamped." The people won't get fined for their late taxes but is this a usability issue? I think yes.

Project #4: Group Site Redesign Updated Update

For the bakeware page I found "grounded images" for the bundt page, cookie sheet page, and loaf pan page. I also rearranged everything alphabetically, BUT kept the "new arrivals" first; though it starts with an "N," I feel like when reading a list, people will start at the beginning, reading the most important things first...which would be new arrivals.



For the Bundt pan page, i rearranged everything alphabetically as well, keeping the "new" items first again...but i was thinking of putting them alphabetically as well, disregarding the "new" infront of the word beehive bundt cake. I guess i'll just have to collaborate with my team!

Project #4: Usability Test

Test-ee: Gary Brandenburg

Upon testing our polished pdf, Gary had good things to say...until it came to the "sign in" page, which has you sign in as a new customer or an old customer, enabling you save payment information for possible future purchases.
Gary thought that going through the purchase process and then being confronted with the "sign in" page made him feel like he had jumped out of the check out process. Following the "sign in" page was the shipping and billing information page, which had the steps of the final checkout process highlighted on the upper right hand corner, Gary asked why the sign in page wasn't be part of the process...good question. And considering if you were a new or an old customer, wouldn't the number of steps change?
Also, the fact that during the checkout/sign in process, Gary noted that when he's purchasing online, he likes to feel assured during the process, like as if he were in a store, talking to a real person, purchasing something. Instead of having "sign in" for the page title, have "welcome!" and "thank you" to help create an "online face" as Gary put it.

For once I'm happy I picked someone with computer experience, because he was able to verbally describe what he felt and questioned, as opposed to "this right here, it's weird."

Thanks for your help Gary!

Project #4: Group Site Redesign Update

As a group, we decided to have a backdrop of an extremely light gray in the boxes that contain text, and in my case, that accompany an "button." Also, on the bakeware page, I added space at the bottom (between the content of the page and the footer) to allow the page to stay the same length from bakeware to bundt pan.

Bakeware UPDATE



Bundt Pans UPDATE

Project #4: Group Site Redesign

THE OBJECTIVE:

In a group, redesign a website through a series of 10+ pages.

THE GROUP:

Project Manager: Jesse
Art Director/Designer: Evan
Programmer: Dave
Research: Sarah
Usability Tester: Cory

THE WEBSITE:

willimassonoma.com



THE SITE/PAGE ANALYSIS REPORT:

Investigate a market niche and product. Put together demographic data and formulate a design plan for this product/service.

THE DESIGN PHASE:

The initial design phase will involve the creation of a site content map, construction of a page design grid, and final page design in it’s fully fleshed out form.

My homework was to redesign the Bakeware page and the Bundt page on the Williams Sonoma website, and here's what I came up with:



Bakeware page ORIGINAL


Project Plan:

• Have consistent page titles throughout the site
• Organize the product images to eliminate scrolling
• Control the images and have a consistent grid layout

Bakeware page REDESIGN



Using Evan's homepage layout, I grided out pictures/links in a way that eliminated scrolling and kept a consistent flow from column to column. For the pictures that I used for the links to other pages, I eliminated the "floating image" by inserting images of the links that were photographed in a setting. I had to take screenshots from random locations througthout the williams sonoma site to find images that were of relevance to the link; I still came up short a couple images so I had to go on other websites like macys.com to find more "none floating pictures." I made the title bigger, but minimized the opacity to 75%, creating less of a competition between the title of the page and the site ID. All of the text that names the link (i.e. "new arrivals") were also opacified, because it just seemed to be easier on my eyes.




Bundt page ORIGINAL



Project Plan:

• Control the images and have a consistent grid layout
• Increase page title
  

Bundt page REDESIGN



For the bundt page, I followed the process of what I did for the bakeware page, but I ran into problems finding "none floating pictures" of the products. So I had to use what I had, and I just took screenshots of the "floating pictures." But when I did so, I noticed that with the use of the grid, it helped anchor and organize the "floating pictures."



4.3.07 Group Consensus:

I need to change the typeface of the title and the text, change the color of the title, and change the size of the text. Also, I will be re-doing the pictures on the Bakware page, because Jesse and I both agreed that the none "floating pictures" used in the Bundt page may create a more of an organized appeal and be less chaotic.

Project #3: Site Redesign (part deux)

3. I was able to get the third page done for part 2 of project 3! If you were to click on the "organization" link from the side navigation bar, located on the "anniversary" page/tab, you would see this page, the "Organization" page. Notice the highlights in the middle of the page, it keeps a consistent layout continued from the first two pages. Since the organization page is still located in the anniversary section, notice that the long picture stays the same, visually keeping the organization page within the anniversary section. For the drop down options under the Organization link in the navigation bar on the left, I kept the look of the links consistent by leaving the words italicized with accompanying arrows, but I made it hierarchically secondary by having the links in lowercase, not uppercase.



2. The second page, when clicking on the new "Anniversary" tab, still the only thing that changed was the event and anniversary tab.



1. From the first part of Project 3, I was to redo my initial layout with the results from "trunk test #1" in mind. What is a trunk test? A "test" given to a subject that is not in your usability class; where you take a screen shot of your redesign and bring it into photoshop, adding a gaussiun blur with a 1.5 radius. Then I printed my blurry site out and handed it to 5 people and asked them to locate 5 site elements (site ID, page name, section and subsections (main navigation), local navigation (secondary navigation), "You are here" indicator(s), and search) and circle them. All of the people took about the same amount of time to circle everything and they all made tiny but different mistakes from eachother, so the information i could gather inconsitent and not very helpful. So I just changed what I thought to be slightly confusing, which wasnt much...

I added an "Events" tab and I changed the "centenary" tab to "anniversary", because not many people knew what centenary meant (it means 100th year anniversary).

Project #3: Site Redesign

The new section for "centenary" provides you with a consistent layout, focusing on visual differences that replace the need for bread crumbs to show you where you are within the site.



The new home page condenses all of the information on the main website by the use of tabs. The original site had very repetitive tabs, a lot of times switching sections as you would travel farther within each section. I focused on enclosing information into its own section, visually separating it from other outside information. I used red links within each section to be able to read on, without being too over whelmed to do so in the first place. Differences in the line thickness provide visual separation for navigation purposes as well.



The original website. What was wrong with it? It was very overwhelming, considering we can only take in so much at one time, this website was a definite overload of information. There are a lot of pictures randomly placed through out the site that are links to other pages within the sections. Only two of the links are actual links to other sites. Along the left side of the page there is a list called "Regattas online" which needs to be changed to a link so there's not so much stuff going on.

Reading #2

Read chapters 6-8 in "Don't Make Me Think":

Chapter 6: Street Signs and Breadcrumbs
Designing Navigation
Web Navigation 101:
Similar to the process of searching for something in a store; when you enter a website

• you're usually trying to find something
• you decide whether to ask first or browse first (the web equivalent of asking is searching)
• if you choose to browse, you make your way through a hierarchy, using signs to guide you
• eventually, if you can't find what you're looking for, you'll leave

About Browsing:

• compared to a store, there is no sense of scale of the website
• there is no sense of direction
• there is no sense of location

The (overlooked) purposes of navigation:
Navigation isn't just a feature of a website; it is the website. The purposes of navigation are:

• to help us find whatever it is we're looking for
• to tell us where we are
• to give us something to hold on to
• to tell us what's there, revealing content
• to tell us how to use the site
• to give us confidence in the people who built it and create a good impression

Persistent navigation (or global navigation) describes the set of 5 navigation elements that (need to) appear on every page of a site:

1. Site ID- needs to be on every page
2. Sections- primary navigation that links us to the main sections of the site; subsections are the secondary
navigation
3. Utilities- links to important elements of the site that aren't really part of the content hierarchy
4. A way home
5. A way to search

Project #2: Writing for the Web

The goal of this project was to investigate the writing techniques that we read about in our Reading # 1 assignment. We had a selection of websites provided by the teacher to choose from and to follow through with the assignment by selecting the text that we will rewrite based upon our readings.

I chose the website for the department of Computer Science and Engineering, a department of The Institute of Technology. Why you ask? Because it made me laugh! I couldn't understand over half of the links, there was way too much blah, blah, blah, and it was obvious that someone from that department made the website, not a (good) designer. Silly software engineers, when will you ever learn? What's ironic, is that website for The Institute of Technology is really nice! There is alot to take in with the Headlines, but it's mapped out well and it serves well as a home page, not a site map like the CSE website.

The original website:





What are the problems? Over 50% of the links are repeated and spread out over the page. There are alot of department specific technical names, words, and abbreviations, for example: "CSE," is all over the page, what the hell is CSE? I had to think about it and make the connection that it's the abbreviation for the department name. The search bar is floating around somewhere that isn't readily available when you first glance at the site. No bueno. The technical names are out of control: what is a Colloquium? Oh wait, that's right! I'm not a software engineer and wouldn't readily know that it means academic conference or seminar. I had to look it up in the dictionary. Simply said, this website just has too much going on and not that much is self-evident.

The rewritten website:





By getting rid of all the repeated links, rewording bits of information into shorter bits of information, and grouping similar things, there is alot more clarity and navigation is easier. I no longer have to look up any words.

Reading #1

Read chapters 1-5 in "Don't Make Me Think":

Chapter 1: Don't make me think!
Krug's first law of usability
Don't make web users think about what they are doing; make everything self evident, obvious, and self explanatory.

Chapter2: How we really use the web
Scanning, satisficing, and muddling through
The three facts of life:
1. We dont read pages, we scan them
2. We dont make optimal choices, we satisfice
3. We dont figure out how things work, we muddle through it

Chapter 3: Billboard 101
Designing pages for scanning, not reading
Five ideas you should always follow when designing a website:
1. Create a clear visual hierarchy offering editorial guidance
2. Conventions are good to use and most designers are often reluctant to use them, but you (and them) should really just use them
3. Break up pages into clearly defined areas
4. Make it obvious what's clickable
5. Keep the busyness of visual and background noise to a bare minimum

Chapter 4: Animal, vegetable, or mineral
Why users like mindless choices
It's not the number of clicks it takes you to get somewhere, it's really about how hard it is to find where you need to click to get where you want to go, keep it simple for the users.

Chapter 5: Omit needless words
The art of not writing for the web
The beneficial effects of omitting needless words, making pages shorter, reducing the noise level, and making the useful content more prominent. Dont forget to delete happy talk, or useless nonsense that reads as blah, blah, blah and just takes up space; and instructions, because everything should already be made self explanitory enough for people get the hint.
[END]



I purchased my book of choice "Designing Everyday Things" today...and "Emotional Design: Why we love (or hate) everyday things"...and some other book, too.

Project #1: Online Journal

The objective of this course is to focus on the fundamentals of user-centered design and usability issues surrounding web-based interfaces (internet, PDA, cell, etc.). This course examines information architecture models, content/design relationships, user behaviors, and user testing scenarios. We will be using the following development tools: Photoshop, ImageRead, Microsoft Word, Netscape, Internet Explorer, and Dreamweaver.

To start off this course, we were asked to create a blog journal in which we will be documenting our research, projects, frustrations, and successes through journal entries and pictures.

Ojos que no ven, corazón que no siente.
Out of sight, out of mind.

Tengo algo en el ojo.
I’ve got something in my eye.