At this stage in the course, you’ve no doubt realized that creating a killer-looking Web site is just one step of the process. Research, planning, and testing are required to make sure your page designs fulfill the needs of your clients and site visitors.

This lecture covers how to make sure a site design is usable.  We’ll begin by exploring some usability design concepts that are essential to making your site perform effectively.

Then we’ll examine some simple and cost-effective usability testing methods that you can use to avoid making Web development mistakes that could cost you time and money.

In this exercise, I’m going to challenge you to explore the usability of your work. First, you will design a site for a client called the Singing Crab Cajun Bayou Restaurant, using the Web design methodology you’ve learned in this course.

Then, you will conduct a usability test on your site design to make sure it conforms to good practices. You’ll benchmark your site against a checklist of principles you’ve learned. Then you’ll conduct either a focus group (live or online) or card sorting test with at least three participants to see whether your site is headed in the right direction!

• Create a project proposal containing a formal mood board and details of the site structure and goal achievement.
• Develop an effective design for the client and build and validate all pages.
• Conduct either a focus group or a card sorting session with at least three participants and summarize your results.

–Sessions College for Professional Design

Singing Crab Interface Concept

Dear Jacques,

Thanks for all the info about your restaurant. The food and atmosphere sound amazing. I wish I could be there right now!

After reading the text that is going on the site, I knew I had to come up with a design that had just as much personality as the restaurant! So I started putting together a mood board (see below) full of images, typography choices, images and graphics that I think will reflect Singing Crab very nicely.

I chose a complimentary color scheme of blue and orange.  When I think of Cajun food I always think of orange crabs, red craw fish and brown jambalaya soup, so orange, red and some brown are the main colors. An extra bonus behind choosing red and orange is that those colors stimulate peoples’ appetites! To balance that out will be a nice blue background.

For type choices, I went with Georgia for headers and Arial Narrow for body text. I knew I wanted a condensed san-serif for the body text because after scoping out some other cajun seafood restaurant websites, that type seemed to fit the best. I chose Georgia because it’s bolder serif style makes for good contrast to Arial Narrow.

Then, I set to work finding images for your website. I found lots of pictures of Cajun food dishes, that was the easy part! I looked for images of scenes you depicted in your descriptions: families eating on tables covered with newspaper, a fiddler with a band, and Mardi Gras decorations. I think having these images will do a very good job of communicating the fun, casual and family-oriented atmosphere at the Singing Crab.

As for design elements, I came up with a couple interesting textures and graphics. Actually, the very first idea I had before I even started pulling images together, was to have the navigation buttons look like little wooden signs like you see on the board walk at beaches. So, I gathered up some wooden board images for that. Then, I found some textures I thought would work with a seafood theme: an abstract blue texture for water, sand for the beach, and an extra one that’s almost white but still has a texture like sand but it’s much more subtle. These really evoke a sense of going out to each near the beach or ocean and will get customer excited about coming to your restaurant.

Next, after putting together the mood board, I starting putting together a wireframe, followed by a rough layout of the site (see both attached). I liked the existing logo you sent me because it’s big and bold! I changed the fonts to match the ones I picked, and put it front and center at the top of the page. Below that I wanted the wooden sign navigation buttons so visitors could easily find out where to go within the site. I reorganized your original categories to save a little space.  “What’s Cajun Food?” and “Our Restaurant” are now under About, and “Mardi Gras” is under It’s Party Time. The sections are divided by pictures within there new pages.

As for the body, I went with a two-column layout. The left-hand column will be the primary area to display information, so it’s wider than the right-hand column. It will contain images and corresponding text that you provided to me. In the right-hand column you will find three small sections full of links. The first one is to let visitors know about signing up for emails. The second one is to let visitors know about your chili recipe (and links to the chili recipe page). And the third one is to let visitors find more information about the restaurant through media feeds. This section especially, along with the email sign up, will help keep your site interactive.I wanted to mention two final things about the footer and the Contact page. The footer contains a lot of links. The top row is an iteration of all the orignial catergories you wrote about, but they’re displayed individually here instead of tucked into their new pages. When you click on “Our Restaurant” and “Mardi Gras” you will be taken to their respective anchor points within the About and It’s Party Time pages. This will be helpful to visitors to find all the categories without going through each navigation button one by one. The bottom row of links don’t connect to anything yet, but they will eventually take the visitor to pages concerning “fine print” information about the restaurant and using the website. Finally, on the Contact map, I added a map that is connected to Google Maps, so your customer can get directions to the restaurant quickly and easily!

That seems to be everything I could think of! Please let me know if you have any questions. Looking forward to your thoughts.

Thanks!

Becky