Web & New
Media Designer

Website Development & UX Process Book

Below are many websites that vary in coding and intent. Some projects use PHP database coding, jQuery effects, WordPress and html5 practises. There is also a UX Process book as well as a large set of demonstration files that show some interesting possibilities.


PHP, JQUERY & WORDPRESS SHOPPING CART

Coffee Roaster

Project Description

Design a corporate website that features all their capabilities within their existing brand. The site also has a shopping cart.

ORDER OF SIGNIFICANCE

  1. WEB DESIGN
  2. WORDPRESS SHOPPING CART
  3. PHP & JQUERY

Intazza Website

sample website

PHP SITE USING JQUERY

Ministry

Project Description

This site had a simple donation option that worked with credit cards. It also had a private site living within a secure login system for those who became a partner. This site uses a lot of video and motion graphics.

ORDER OF SIGNIFICANCE

  1. WEB DESIGN
  2. USER LOGIN TO HIDDEN SITE
  3. CUSTOM JQUERY
  4. VIDEO CODEC
  5. VIDEO STREAMING

GRACE WAVE MINISTRIES

sample website

PHP SITE USING JQUERY:

Geotechnical

Project Description

Create a simple site for a small Orange County Geo Technical Company

ORDER OF SIGNIFICANCE

  1. WEB DESIGN
  2. JQUERY EXPANDABLE LIST

COASTAL GEOTECHNICAL

sample website

PHP MENU SORTING & DISH EDITING

Restaurant Business

Project Description

Using PHP and MySQL design and code a custom password protected admin login menu. The custom dashboard allows the admin to edit and create new dishes. The menu uses PHP and MySQL sorting option for users to list items by category.

ORDER OF SIGNIFICANCE

  1. PHP MYSQL DATABASE
  2. CUSTOM PHP ADMIN (NO WORDPRESS)
  3. DYNAMIC PHP SORTING (NO JQUERY)

BOBO'S RESTAURANT

sample website

PHP DATABASE CATALOG WITH CUSTOMER RATING SYSTEM

Sun Glass Industry

Project Description

Using PHP and MySQL design and code a catalog database website. The catalog needs to give the user the ability to share a product as well as rate the product and list the rating to other users.

ORDER OF SIGNIFICANCE

  1. PHP MYSQL DATABASE
  2. PHP DATABASE USER RATING SYSTEM
  3. SOCIAL SHARING

RAY-BAN

sample website

PHP GUEST REGISTERY DATABASE

Mobile Service Website

Project Description

Using PHP and MySQL design and code a custom password protected guest login site.

ORDER OF SIGNIFICANCE

  1. PHP MYSQL DATABASE
  2. DATABASE GUEST LOGIN
  3. DATABASE RSVP

Tammy & Johnathan Registery

sample website

UX Process & Testing Process Book

Below is an example of good research, development, and site testing.

Process Book

Temecula Farmer's Market

Project Description

Using good UX development and practices, create support documents and testing.

ORDER OF SIGNIFICANCE

  1. UX
  2. TESTING
  3. PDF MOCKUP
Temecula Valley Farmers Market

Project Overview

Temecula Valley Farmer's Market

Work Summary

  • R&D Audience
  • Card Sorting
  • Content Map
  • Storyboard
  • Wire Frame
  • PDF Mockup
  • Create Test
  • Usability Testing
  • Results
  • Getting to Know The User

    Temecula is an average sized city in a valley that is set between Los Angeles and San Diego. The climate is perfect for the 30+ vineyards and middle class citizens. The summers are hot and the winters are mild. The city has grown quickly over the last 15 years.

    • Population: 120,000 (2000 to 2012) (54% growth)
    • Weather: Average mid 70’s, rainfall 19 inches (Comparable to Napa Valley)
    • Median / Average Household Income: $75,757.00 / $89,115.00
    • Medium / Average Effective Buying Income: $66,335.00 / $76,586.00
    • Number of Homes: 28,267
    • Square Miles: 30.5

    Data sourced

    LOCATION

    The market is held every Saturday morning from 8:30-12:30. The location is perfectly position in Old Town. Old Town Temecula was the original location of downtown Temecula in 1859. Most of the original western buildings in town have been preserved and new modern characters-styled buildings are peppered throughout the downtown area. The area is home to law firms, salons, upscale restaurants, burger joints, barbeque places, a newly built Playhouse Theater, and touristy shops: even a dedicated root beer shop.

    TARGET AUDIENCE

    The market has a diverse age and social-economic variety. The gender is slightly dominated by females and the there are mostly Caucasians.

    AGE

    • Young Families: 20%
    • Young Couples: 10%
    • Middle Aged Couples: 30%
    • Senior Citizens Groups: 20%
    • Single: 10%

    RACE

    • Latino: 5%
    • Caucasian: 80%
    • Asian: 5%
    • African American: 10%

    Social-Economical

    • Lower Class: 10%
    • Middle Class: 30%
    • Upper Middle Class 50%
    • Upper Class: 10%

    Gender

    • Male: 40%
    • Female: 60%

    ON LOCATION RESEARCH

    Temecula Valley Farmers Market
    TYPES OF VENDORS

    The market has a variety of products: from what you’d expect like vegetables, and homemade jarred foods to unexpected items like fine art, and dog treats. The average price for most products are between $4-$10. Items that were not consumables ranged between $20-$60 +

    • Vegetables, Herbs, Garden Plants, Fresh Cut Flowers
    • Gyros,Served Coffee, Tea, Sandwiches, Grilled Meats, Kettle Corn, Hot dogs and Hamburgers
    • Breads, Pastries, Jelly & Jams, Local Honey
    • Fresh Fish, Beef Jerky, Fresh Meats, Specialty Cooking Oils
    • Jewelry, Wood Works, Photographers, Handmade things like Wind Chimes, Fine Artist, Pottery
    PURCHASING BEHAVIORS

    Most of the vendors wanted cash and there were some who advertised that they accepted credit cards. Overall I would say most people purchased the food products with cash and the non-food items with a credit card. I didn’t witness any bargaining but I’m sure there was some going on. During one of my purchases I was short $2 and I sensed an opportunity to bargain but instead I asked if there was an ATM machine near by—the vendor pointed to one about 20 feet outside of the market. The bags or lack of bags was very obvious. The newcomers fumbled around with plastic bags pulling on their fingers while the veteran shoppers brought their own wheeled carts and/or cloth bags.

    FLOW OF PEOPLE TRAFFIC

    The market was very busy. At times there was such a crowed people were almost rubbing elbows. The market had an outer ring of vendors and two separate islands of vendors in the center. The location of each kind of vendors appeared to be random throughout the market. This lack of organization played on the shopper’s sense of urgency and interest. Most people were polite and slow moving through the market. There was a lot of criss-cross traffic going through the main isles. The vendors were able to get people through each purchase quick enough that I didn’t see any long lines form. When a person entered into a vendor’s space everyone seemed to understand who was next.

    MARKET SUCCESS OR FAILURE

    The Temecula Farmers Market is a poster child for a successful market. The location in Old Town is fantastic for locals to reach, and for Old Town visitors to find. There are plenty of parking places around Old Town and there are two-access points through Old Town to get to the market. The venue’s proximity to one of Temecula’s main freeway exits makes getting there easy for out-of-towners. I see two potential negative issues: the over popularity of the market could make it too crowded for shoppers and the weather could disrupt the event because the venue is outdoors and not covered. Lastly, shoppers can shift their farmers’ market experience to the over 100 different specialty shops in the Old Town area—not to mention grab a bite to eat at the many different restaurants and cafes that are offered throughout Old Town.

    CONTENT MAP (OMNI GRAFFLE)

    Temecula Valley Farmers Market

    Content Map

    The Following information is the information architecture (IA) for the Temecula Farmers Market website.

    The information is broken into six categories: food, non food, getting there, vendors, calendar, what to bring. The audience-focus is on the attendee. There is one link dedicated to becoming a vendor.

    UX Storyboard

    The user is a new attendee. They recently read an article about how local-grown fresh vegetables is a healthy choice because the vegetable stays on the vine longer, which increases the nutrients, and taste better. The user navigates directly to the Veg & Fruit page. They read more about how locally grown vegetables are better for you and that all the vendors must pass a quality inspection by the Temecula Farmers Market Association before they can become a vendor. The user navigates to the Vegetable page and takes note of all the different types of vegetables they can purchase.

    UX VISUAL STORYBOARD

    Temecula Valley Farmers Market
    Temecula Valley Farmers Market
    Temecula Valley Farmers Market
    Temecula Valley Farmers Market
    Temecula Valley Farmers Market
    Temecula Valley Farmers Market
    Temecula Valley Farmers Market

    The user didn’t know Fine Art was at the market so they are curious and navigate to the Fine Art page. The user is now interested in going to the market. They don’t have a car so they navigate to the Public Transportation page. They see that the Trolley goes straight there on Saturday mornings at 10 am. The user is interested in getting a new pot so they navigate to the potter page. They want to know where the pottery section is so they navigate to the Market Map. The user plans on going this weekend.

    Usability Test

    Participants:

    • Tim: Male, 36 attends farmer’s market a couple times a year.
    • Marie: Female, 49 attended the farmers market a lot in the past.
    • Helen: Female, 72 used to attends farmer’s market.

    Data Collection Overview:

    The test will be performed on a laptop computer. I will test each person individually because the site will be used this way. I will sit next to them and record the test with my video camera. If they need help I will verbalize hints but I wont point to the answers. The data will be recapped and noted after all the tests are completed.

    Facilitator Script:

    The facilitator will verbally ask the participant question as they go through the testing scenarios. The facilitator will ask specific tasks providing hints and tips for the user if they become overly frustrated.

    • Thank you for taking the time to help me test this site.
    • This test is designed to test the site and not you.
    • You don’t need to be concerned about make a mistake or doing something incorrectly because there are not right or wrong answers.
    • For the test to be effective I need you to be honest. If you do not like something please tell me. If you think something is confusing please explain your thoughts.
    • I will be giving you verbal tasks to do and I would like it if you can verbally explain what you are doing while completing each task.
    • To help me better understand your experiences with the site I need you to verbally describe what you are thinking while your moving the mouse around. For example: I’m looking for a button or link that would get me to the fruit section, I don’t see a link for fruit so I’m confused and don’t know where to look.
    • Before you click on a link let me know what you are considering and why you made that choice.
    • If you have any questions I will answer them in a way that does not take away from the test.
    • I will be recording this test with my camera so I can accurately account your experience.
    • What is your age? What is your occupation? From 1-5, 5 being an expert, how would you rate your Internet browsing abilities? Do you go to the farmers Market regularly? Have you ever been to the Farmer’s Market?

    Usability Goals:

    The goals are to test if the usability of the site is satisfactory or needs to be improved. If the site fails then the site will need to be altered based on the data and the testing will need to be done again.

    • Learnability: can participants quickly understand the site so they can complete the testing needs? 0-2 is a fail 3-5 is successful.
    • Efficiency: after participant learns the environment can they be productive enough to complete the tasks within a comfortable and or reasonable time. 0-2 is a fail 3-5 is successful.
    • Satisfaction: will the participant enjoy the usability of the site? 0-2 is a fail 3-5 is successful.

    Tasks:

    High Level Tasks

    1. Can you find the fruit page and find the vendor “Ruby Farm?”
    2. Where are some helpful tips about what to wear?
    3. Can you find a Woodwork page?
    4. What kinds of vendors are at the market?

    Infrequent Tasks

    1. Find the site mape.

    Typical Tasks

    1. Find the navigation and use the fly out menus successfully.
    2. Understand that they are on the Farmer’s Market website.

    Scenarios:

    1. You’ve heard that the farmers market vegetables are really fresh from a friend who goes to the farmer’s market every weekend. You decide you want to buy your vegetables from the market this weekend. Your not sure where it is, find where the market is located?

      Expectation

      • Find direction navigation link
      • Click on calendar date
    2. Now that you know where the farmer’s market is you are curious about the different types of vegetables the market carries. You need to find the vegetable page?

      Expectation

      • Find vegetable page
    3. You plan on going this weekend to buy your vegetables. You assume they wont have shopping carts so you wonder what you should bring. Where would you find that information?

      Expectation

      • Find what to bring section that is located on every page
    4. You want to go back to the home page but there is no home page button. How do you get back to the home page?

      Expectation

      • Click on the logo
    5. You wanted to get a handmade wood bowl for your friend for their birthday. You search on the web but you only found online shopping. You wanted to buy it from a local artist so you have an interesting story to tell about the gift. The farmer’s market page comes up in your search for handmade wood bowls. You need to find a wood bowl vendor.

      Expectation

      • From home page click on “Non Food”
      • Click on Woodwork link on fly out
      • OR click on Vendor
      • Click on either Market Map or List by Category
    6. You are a fin art painter and paint paintings of the local terrain and old buildings. You decide you could sell your paintings if you setup your work at the market. You went to the market to see if you could talk to someone but know one was available. You go on the farmer’s market site looking for information about becoming a vendor. Where do you find this information?

      Expectation

      • Click on vendor button
      • Click on “Be a Vendor”
    7. You want to go to checkout the farmer’s market but you don’t have a car. You need to know if there are any local transportation systems that stop at the market and what the Trolley hours are. You also want to go to the Temecula Trolley page for further information?

      Expectation

      • Click on “Getting There”
      • Click on “Public Transportation”
      • Find hours
      • Click on Temecula Trolley link

    Participants Handout Questionnaire:

    This brief questionnaire was given to the participants after the testing was completed.

    Rate the site using this 1-5 scale with 1 = difficult and 5 = easy.
    • How was the fly-out navigation: difficult or easy?   1  2  3  4  5
    • Looking for pages: difficult or easy?   1  2  3  4  5
    • Was the site testing: difficult or easy?   1  2  3  4  5
    • Was it difficult or easy to find the Woodworking page?   1  2  3  4  5
    Rate the site using this 1-5 scale with 1 = not useful and 5 = very useful
    • Did you find the information to be: not useful or very useful?   1  2  3  4  5
    • Is the “What to Bring”: not useful or very useful?   1  2  3  4  5
    • Having the calendar on every page: not useful or very useful?   1  2  3  4  5
    Rate the site using this 1-5 scale with 1 = No and 5 = Yes
    • Did you look forward to seeing each new page?   1  2  3  4  5
    • Did you notice the Facebook, Twitter, and LinkedIn icons?   1  2  3  4  5
    • Did you notice if the market has baked goods?   1  2  3  4  5
    • Were there over 40 vendors?   1  2  3  4  5

    Post Test Review

    Successes:

    All participants quickly learned the fly-out navigation and identifying the red color as navigational information or systems. The Calendar and “What to Bring” was beneficial to all testers. Helen mentioned that she liked seeing the calendar dates highlighted instead of stating, “Open every Wednesday and Saturday.” There was a good retention of some of the site features without the site opened: Remembered the social icons, some of the other items at the market, and approximate amount of vendors at the market.

    Challenges:

    The biggest challenge is the navigation categories being too broad. I think the Food and Non Food main categories were an issue. Also, the term “Getting There” was to specific and unique as well. A better choice might be Directions with sub categories of: Directions, Walking, Public Transportation, and Parking.

    Site Changes:

    The navigation will need to be reworked to be clearer and more specific. I will also need to add a “Home” button. The footer navigation was used too often and I think that is because the color of the links was brighter than the high-level navigation and that the font size was large as well. I think I’ll use a gray tint for the footer navigation and reduce the font size.

    Usability Goals

    Learnability:

    Can participants quickly understand the site so they can complete the testing needs? 0-2 is a fail 3-5 is successful.

    Site Passed

    Efficiency:

    after participant learns the environment can they be productive enough to complete the tasks within a comfortable and or reasonable time. 0-2 is a fail 3-5 is successful.

    Site Passed

    Satisfaction:

    will the participant enjoy the usability of the site? 0-2 is a fail 3-5 is successful.

    Site Passed

    * documented test not provided in this presentation

    Demonstration Sites

    Below are a few sites demonstrating different methods of displaying content.

    DEMONSTRATION SITE

    Project Description

    Each one of these sites uses a variety of different methods that can be used to enhance a users experience.

    DEMONSTRATION SITES 1

    sample website
    sample website
    sample website
    sample website

    DEMONSTRATION SITE

    Project Description

    Each one of these sites uses a variety of different methods that can be used to enhance a users experience.

    DEMONSTRATION SITES 2

    sample website
    sample website
    sample website
    sample website

    DEMONSTRATION SITE

    Project Description

    Each one of these sites uses a variety of different methods that can be used to enhance a users experience.

    DEMONSTRATION SITES 4

    sample website
    sample website
    sample website
    sample website

    DEMONSTRATION SITE

    Project Description

    Each one of these sites uses a variety of different methods that can be used to enhance a users experience.

    DEMONSTRATION SITES 5

    sample website
    sample website