Project: Usable Design Analysis

Wayward Vegan Cafe homepage
Wayward Vegan Cafe homepage

Domain:  http://waywardvegancafe.com/

Purpose of Site: Wayward Vegan Cafe is a vegan/vegetarian restaurant in Seattle.  The purpose of the website is for customers to find location and hours, view menu, and utilize a delivery service.

* It is also crucial that customers know as of  January 2015 the cafe has relocated to a beautiful new space in the Ravenna neighborhood. 

Tasks Analyzed:


Guideline: Don’t make me think! Present all major options on the homepage.

Comments: Users should not be required to click down to the second or third level to discover the full breadth of options on a Web site. Be selective about what is placed on the homepage, and make sure the options and links presented there are the most important ones on the site. Wayward does a great job of limiting the homepage to simple options. They also make the operating hours and location clear at the top of the page.  However, I When I first opened the page, I thought there was something wrong with my computer or Javascript had been disabled since the homepage looked uneven and clunky. The map at the bottom of the page is large in relation to the rest of the homepage content.

Recommendations: Move the navigation bar located at the top or left of page to make it easier for users to know where they are on the site. The lack of organization and attention to details on the site makes it difficult for me to believe this is a competent business.


Guideline: Do not create or direct users into pages that have no navigational options. Always have the homepage, a “way out”, or search bar easily available.

Comments: When creating links that open new browser windows, ensure that the ‘Back’ button is still available, and that the new window is setup to return the user to the original browser window. Disabling navigation is confusing and frustrating to users, and can negatively impact user satisfaction and task completion. Always make the homepage available.

menu-waywardvegancafe.com_menu.html


Guideline: Ensure that all clickable images are either labeled or readily understood by typical users.

Comments: Occasional or infrequent users may not use an image enough to understand or remember its meaning. Ensure that images and their associated text are close together so that users can integrate and effectively use them together. Additionally, alt text should accompany every clickable image.

Below, a local meal delivery service featured some of the menu items beautifully. When the user hovers over the image, it is easy to add to shopping cart. – https://www.trycaviar.com/seattle/wayward-vegan-cafe-56.

Caviar's interpretation of the cafe.
Caviar’s interpretation of the cafe with high resolution pictures of the food.

Good Example: The addition of labels is essential for a user to understand the clickable image links

Good example of labeling images.
Good example of labeling images.

Mobile first:

Comments: Attaching a mobile example. Many people search  for places to eat on mobile phones. It is important to have a responsive design with the menu and contact information easily available. Users shouldn’t have to guess which website they are on.

mobile-example
mobile-example
wayward-mobile
Wayward -mobile capture

Project: Analyze for Usability

Seattle Area Feline Rescue Homepage

Domain: Seattle Area Feline Rescue (SAFe) (www.http://www.seattleareafelinerescue.org)

Purpose of Site: Rescue homeless cats and kittens, find them good homes.

Tasks Analyzed:

  • Find out how I can volunteer for the organization.
  • Find out how I can donate used yoga mats and towels to the rescue for animal cages and transport.

Analysis: A non profit’s website needs to make it easy to find out more about their cause, to donate money and supplies, and to become more involved. And it needs to do all this in a way that’s inviting to the organization’s targeted donors and/or volunteers.

Cause: The Seattle Area Feline Rescue website makes it immediately apparent through images and small text areas on their home page what the organization is all about.

Make Site Donor-Friendly:

  1. Donation links should be featured both in the main content area of the home page and in the top navigation. This can be done with a special banner or button or simply make it prominent in regular navigation, donors have to see where to donate before they can do so.
  2. Make the actual donation process as painless as possible. Don’t require visitors to set up an account to donate. Use a single-page donation form if possible, with just one confirmation page.
make-a-donation example
An example of how to make it painless to make a donation!

Volunteer/Get Involved:
Make it easy for visitors to your site to find information on how they can get involved. There are plenty of people out there who might not have the money to make a donation but are still passionate about what your organization is doing.Whether you provide detailed information about volunteering directly, steps people can take on their own, or just contact information for your volunteer organizer, make sure you don’t overlook this crucial bit of information.
Providing multiple means of contact makes it easier for volunteers to get in touch, so include an email address, phone number, and a web contact form if you can.

Make it easy to find out how to volunteer/get involved.
Make it easy to find out how to volunteer/get involved.