Make a website

Fall 2018 | FINAL PROJECT

PROJECT: E-commerce with Wordpress (Virtual Storefront)

ADVANCED WORDPRESS

In the last project, we became familiar with Wordpress as a content management system. We selected themes, applied color schemes, created pages, and changed the way our sites behaved, mostly using the Wordpress Dashboard. Conveniently, wordpress.com provided free and easy hosting for our project sites. For our final project, we need to delve a bit further into the inner workings of Wordpress. We’ll be using a free web hosting service (provided by the Department of Advertising + Public Relations) to install and run our own version of

Wordpress, and then we will use some plugins to further customize functionality. We discussed these options briefly in introducing the midterm project.

The major difference between using wordpress.com and using our own web host is that wordpress.com places restrictions on using some features of Wordpress, like plugins and custom stylesheets. When we use our own hosting service, we have access to the full menu of Wordpress features. Specifically, we will be using the WooCommerce plugin to manage our websites’ shopping cart capabilities.

ABSTRACT

In this project, you will build a small-scale e-commerce website for a fictitious business using Wordpress. Your fictitious business must have a name, and can serve any purpose or sell any real or fictional product you wish. You are encouraged to be creative and implement an overarching design theme in your virtual storefront. Usually, this type of site would include 5 main elements:

· An attractive and compelling design

· Information about the business

· A clear catalog of available products and/or services

· A shopping cart/checkout area

· A way to contact the business

Your e-commerce website will need at least 5 pages (you may modify page names):

· Homepage (containing your business’ name/logo and other content of your choosing)

· About Us (containing a short paragraph describing your business and the products or services it offers - a mission statement perhaps)

· Products/Services (containing a well-executed catalogue of products or services available for purchase)

· Checkout (containing your customers’ shopping cart information)

· Contact Us (containing a form by which to contact your business online)


PROJECT PROCEDURE

This procedure is not intended as a step-by-step guide. It is provided as-is. You are expected to extrapolate upon your knowledge to complete some steps.

1. Determine whether you will work alone or with a group. If the latter, you will need to know the names and email addresses of your fellow group members. You will also need to know the desired name of your fictitious business for this step.

2. After you complete the form, your Wordpress hosting account will be set up within 24 hours. You and your group members will receive an email with details about the account and how to access it. Follow the instructions in the email to get to your Wordpress Dashboard.

3. From here, you should be familiar with the Wordpress Dashboard. Use the settings under “Appearance” to customize the look and feel of your site, as in the previous project. You can feel free to use Wordpress’ free themes and widgets, or your own custom styles. Remember that your site should offer an attractive and compelling design. You are encouraged to use a theme that is optimized for WooCommerce, which is our e-commerce plugin. (Hint: https://goo.gl/5Gq0yM)

4. Use the Wordpress Dashboard to create your homepage, “About Us” page, and your “Contact Us” page.

1. A note on the “Contact Us” page: Our new installation of Wordpress will not contain the convenient contact form creator that we used in our previous project. To include a contact form, download, install, and activate (see step 6.1 for how) Wordpress’ Contact Form plugin from https://wordpress.org/plugins/contact-form-plugin/.

2. You should see a new option called “BWS Panel” appear in the left-side menu in your Wordpress Dashboard. Go to BWS Panel > Contact Form.

3. To use the form: Open your Contact page for editing in the Dashboard. A new button, “Add BWS Shortcode” should be present near the formatting options above the main content area. Click the button to paste the shortcode onto your page. This bit of shortcode acts as a placeholder (like the forms and galleries from the previous project), and will display your form on the page in the browser.

5. Download the WooCommerce plugin from https://wordpress.org/plugins/woocommerce/, or by searching for “WooCommerce” under Plugins > Add New.

6. Use the Wordpress Dashboard to install and activate your new plugin.

1. If you downloaded the plugin from wordpress.org: Plugins > Add New > Upload; choose the WooCommerce .zip file you just downloaded. Click “Install Now,” then “Activate Plugin.”

2. If you chose to find the plugin by searching from the Dashboard:

1. When you find WooCommerce in your search (it should have a purple/white icon that says “woo” and be first in line when you search for WooCommerce), click the button that says “Install Now.”

2. When the installation is complete, the Install Now button is replaced with a button that says “Activate.” Click Activate.

3. Optionally, follow the steps in the WooCommerce setup to apply some basic settings to your storefront. You can always return to this or change these settings later.

1. A note on Payment options: for now, the easiest way to set up payments is to choose the option for “Cash on Delivery” during the WooCommerce setup. Setting up other methods requires PayPal or bank accounts via other websites (more on this later).

7. You should notice two new options in the left-side menu in your Wordpress Dashboard: WooCommerce and Products. You can use the Products menu to add products to your store, manage prices and sales, categorize your products, etc. Add at least 10 products to your virtual storefront. You should include product images where applicable.

8. Periodically, visit your website outside the Dashboard to see what it looks like (from the black menu bar at the top of the Dashboard, mouseover the name of your website in the left corner, then select “Visit Site” - you may wish to do this in a new tab so that you can easily switch back to the Dashboard and make changes)

1. If your site or certain parts of it are looking rough, you may need to select a different theme.

9. Optionally, use Appearance > Widgets to clean up your website’s Widget Area. By default, it sometimes includes a lot of features that can clutter the look of your site or get in the way of other design elements. It’s safe to remove things like “Recent posts,” “Recent comments,” “Archives,” and “Categories.” Generally, it’s handy for your site to have a search feature. The “meta” options provide you the link to log into the Dashboard from your website - also handy to keep around.

10. Optionally, use Appearance > Menus to create a customized version of your site’s menu. Background info: Wordpress will usually create a default menu based on your existing pages, which it will display in your theme’s menu location. If you create a custom menu, in most themes you should set your new menu as the “primary menu.” It will then replace the original default version on your website.

1. Note: Your website must NOT use a “hamburger menu” by default when it is being displayed on a non-mobile screen (Figure 1, below). Some themes use this form of collapsible menu by default at all screen sizes. Collapsing hamburger menus should only be used when your website is being displayed on a mobile-sized screen. On larger screens, they are less intuitive and have the effect of “hiding” your navigation menu from visitors, making it more difficult to browse your website. If your website is using a hamburger menu at larger screen sizes, you must either figure out a way to disable this behavior (some themes have the option), or you must select a different theme.

11. Social Media Integration

1. For this aspect of the project, you may choose to use Facebook OR Twitter. You may incorporate both, but this is not necessary. In both cases, the relevant plugin pages contain FAQ, troubleshooting, and screenshots detailing how to use them in Wordpress.

2. Facebook

1. Log into Facebook and create a Facebook Page for your fictitious business. It’s an easy, quick form to fill out. You should see the “Pages” in the left-hand menu near the top of your newsfeed page. If you go to this page, you’ll see a “Create Page” button.

2. Add at least one photo and make at least one post on your new Page.

3. Download and install the Simple Facebook Plugin from https://wordpress.org/ plugins/simple-facebook-plugin/

4. Use Appearance > Widgets to add the SFP widget to your website’s widget area (so it will display on all pages). Alternatively, you may use the [sfp-page-plugin] shortcode to include the widget in one specific location on a page of your site.

3. Twitter

1. Think of a relevant and simple hashtag to use for your fictitious business.

2. Ask group members, friends, and classmates to generate a few tweets using your hashtag - think of it as a PR stunt for your business! Alternatively or in addition, you may create a Twitter profile for your business and simply include the feed from this profile in your “Sources.” (see below)

3. Download and install the Twitter plugin from https://wordpress.org/plugins/twitter tweets/

4. Use Appearance > Widgets to add the Twitter Tweets widget to your website’s widget area. Adjust the appearance of the widget to fit your site’s design.

12. Continue to adjust and improve your site’s appearance based on what you learned in the previous project. Remove the “blog” and set a static Home page (unless a blogroll would be conducive to your business). Order your pages appropriately. You can use http:// quirktools.com/screenfly/ to see how your website will look on different devices and screen sizes.

13. Polish the look and feel of your site and prepare to receive constructive feedback from peers at the December 4, 2018 - 6:00 PM meeting. Your project must be finished and you must present it at the meeting in order to receive credit. You then have the remainder of the week to make changes and adjustments based on feedback received at the meeting. Your project will be due for submission at midnight on Friday, December 7, 2018 at 11:59pm.




Fig. 1 - Hamburger menu icon

GRADING RUBRIC

General Requirements: 20 points

The website should use a compelling theme or design that is not the default theme and the students’ identification (names) should be apparent and clear somewhere on the site. (for example, listed on the “About” or “Contact” page.) The website should have a finished, polished look and feel. No mobile/hamburger menus at normal screen sizes.

Points	16 - 20 (max)	7 - 15	0 - 6
Rubric	· Design is compelling, clear, attractive, and easy-toread. · Page elements are appropriately placed. · Images are appropriately sized. · Site has a polished look and feel. · No placeholders or unnecessary elements. · Student(s) identification is clear with names printed in an obvious location (usually on About page) · Navigation functions are readily apparent and easy to use	· Design contains minor flaws that interfere with reading or obscure page elements at certain screen sizes. · Images are blurry or outsized at certain screen sizes. · Site may appear finished, but lacks a polished, clean look · A maximum of one placeholder or unnecessary element is present. · Student(s) identification is clear · Navigation is not intuitive because of design (colors, location, etc.)	· Design is not clear or attractive, information is obscured, and/or site uses a default Wordpress theme · Page elements are inappropriately placed, hidden, or non-functional · Images are missing or blurry at all screen sizes · Site does not appear finished · Site contains placeholder elements and/or other theme artifacts · Student(s) identification is not clear or is missing · Navigation is hidden by a mobile-optimized theme or otherwise not apparent

Home page: 10 points

The site’s homepage should be the first page viewed by visiting the site URL. It should include the site’s header and navigation menu. It may contain content of the students’ choice. Suggested content might include a featured image or product, a “get to know us” blurb, or a short write-up or infographic on a current sale at the business. Students also have the option of featuring a blog, if such a feature is conducive to the business model (for example, an Etsystyle business which features new and widely varied products each week).

Points	8 - 10 (max)	4 - 7	0 - 3
Rubric	· Page is first item in navigation menu · Page contains original content related to the business as indicated above · Content is attractive and well-designed	· Page is not first in navigation menu but is apparent elsewhere (like via the site name or logo) · Page content is not attractive or well-designed	· Page is not present in navigation menu or apparent elsewhere · Page content is not original, or demonstrates exceedingly poor design

About page: 15 points

The About page should include the site’s header and navigation menu, as well as a photo or graphic (the photo does not have to be of the students) and a short paragraph or table of information about the business.

Points	12 - 15 (max)	5 - 11	0 - 4
Rubric	· Page is directly after homepage in navigation menu · Page contains original content related to the business as indicated above · Content is attractive and well-designed	· Page is located in a nonintuitive spot in navigation menu · Page content lacks polish, or is not attractive or welldesigned	· Page is not present in navigation menu or apparent elsewhere · Page content is not original, or demonstrates exceedingly poor design

Virtual Storefront: 40 points

The Wordpress installation should include the WooCommerce plugin. The plugin should be configured to present its pages in an intuitive way in the navigation menu. The generated pages should include the site’s header and navigation menu. The “Products” page should list a minimum of 10 unique products, and include the ability to add these products to the shopping cart. The plugin should handle processing and payment of the shopping cart, including a confirmation page following an order. The plugin should provide for cash-ondelivery payment options.

Points	30 - 40 (max)	15 - 29	0 - 14
Rubric	· WooCommerce is properly installed and running · WooC pages are appropriately placed in navigation · At least 10 unique products listed · Shopping cart functions as expected with no glitches or problems · Checkout functions as expected (payment options, confirmation page)	· WooCommerce is properly installed and running · WooC pages may not be appropriately or attractively placed in navigation · At least 10 unique products are listed · Shopping cart is functional but may experience minor glitches · Checkout is functional	· WooCommerce is not properly installed or is not activated · WooC pages are not appropriately placed in navigation · Less than 10 unique products are listed · Shopping cart is not functional or experiences serious glitches · Checkout is not functional or experiences serious glitches

Contact page: 10 points

The Contact page should include the site’s header and navigation menu, and one reliable primary method to contact the business. Using a contact form is encouraged. Do not include too many methods of contact (confusing to customers). This page should appear last in the navigation menu.

Points	8 - 10 (max)	4 - 7	0 - 3
Rubric	· Page is in last position in navigation menu · Page contains a form or other contact information for the business as indicated above · Page content is attractive and well-designed	· Page is located in a nonintuitive spot in navigation menu · Primary contact method is not intuitive · Page content lacks polish, or is not attractive or welldesigned	· Page is not present in navigation menu or apparent elsewhere · Page contains too many contact methods or none at all · Page content is not original, or demonstrates exceedingly poor design

Social Media Integration: 5 points

The website should feature either a Facebook page widget linked to the business’ page, OR a Twitter widget containing tweets with a specific hashtag and/or from the business’ Twitter profile.

Points	5 (max)	2 - 4	0 - 1
Rubric	· Social media widget(s) are appropriately placed · Social media content is original (created for this project) · Social media widget(s) function properly	· Social media widget(s) are located in non-intuitive spot - Content is not original (copied from elsewhere or unrelated to this business) · Widget(s) may lack functionality, or are not attractive or well-integrated with site design	· Social media widget(s) are not present and/or not functional · Social media widget(s) are placed in exceedingly inappropriate locations · Social content is not original or not present, or demonstrates exceedingly poor design

Project Total: ___/100 pts