1. Blue Team |Final Presentation Sheldon Jones Melissa McElroy Jessica Niksa Kirk Ockerman JAVA STOP

2. USER STORIES

3. User Stories Sprint 3 US21 – Create jQuery Mobile version of main web site. Goal: To develop and convert three pages from the original web site into a mobile site which contains the Header, Footer, Content, and Navbar, data roles. Pages Converted from main web site Newest Brew, Blog, and Inquiry Form. http://ectweb2.cs.depaul.edu/blue50/JavaStop/Mobile/NewestBrew.aspx

4. US22 – Re-Organize the Merchandise Product Description The usability testing revealed that users preferred to see the text description beside the product in a narrower format so it doesn’t span the width of the page. The product description text was moved into a table next to the image to allow for improved readability and user appreciation.

5. US23 – Remove images on home page and provide text All three usability tests revealed that users were confused by the images below the main page carousel. Users were not sure what the meaning of images were since they were not linked to any content. The team decided to remove the images and replace with the JavaStop Mission statement to eliminate confusion and allow for a better experience.

6. US24 – Move price and text closer to “Add to Cart” button The Usability Testing results also showed that users were having trouble finding the price of items when trying to purchase them. The price was moved next to the “Add to Cart” button in order to increase visibility and to allow for a predictable experience that is similar to what users would expect on other e-commerce web sites.

7. US24 – Add left and right controls on home page carousel Originally, the carousel automatically scrolled the images and it was not possible for a users to control. If a user wanted to see an image / promotion again they had to wait for the loop to complete. Left and right controls were added to give the user the ability to take over control and allow for a more customizable experience.

8. E-COMMERCE VALUE CHAIN

9. Value Proposition Java Stop provides customers with exceptional coffee while creating a community of growers, local business and customers who value fair, sustainable and equal trade practices. The Java Stop website’s value proposition is to creating a clean and simple experience that allows customers, growers and staff to come together as a community. The website fosters interaction among the community via the Java Stop Blog, while also serving as a way for customers to further their knowledge of all things Coffee.

10. Value Proposition Customers can visit the Java Stop website to restock on their favorite products or order gifts for loved ones. Java Stop.com is a continually evolving experience that customers will visit daily to learn about the newest brew or the neighborhood’s upcoming Farmer’s Market. It’s a place where customers can learn and connect over their shared love, Coffee.

11. Marketing and Advertising (Attract) Java Stop focuses its business both on the B2C and also B2B clients Brand awareness in the metropolitan Chicago market is a key approach to appeal to both consumer and business retailers. Java Stop will attract consumers to the store location as well as promote it’s website and mobile application through: – Digital marketing: Google AdWords campaigns; geo-targeted display banner advertising geared towards restaurants and fine dinning; the Java Stop Blog; and Social Media Marketing (Facebook, Twitter, etc.) – Print advertising: entertainment and event newspapers such as Metromix; upscale Magazines such as CS, and Chicago Magazine to reach the gourmet and fine dinning consumer and potential wholesale clients. – Frequent buyer program to entice customers to continue to purchase coffee products knowing they are saving money by returning to Java Stop. – Actively engaging with the community through a presence at food related trade shows, food festivals, hosting events, and attending farmer's markets

12. How Does Java Stop Attract Buyers? To attract Impulsive Buyers, JavaStop.org will feature: – our “Newest Brew” at a discounted price and any other sales offerings, rotating on a daily, weekly or monthly basis. – Java Stop will send out email blasts featuring special offers that drive customers back to the website, targeting our impulse buyers. To attract Patient Buyers, Java Stop will – feature site personalization, allowing users to create a profile on the website and bookmark their favorite products, enabling them to complete their purchase in multiple visits, if needed. – provide users with sales alerts via email, so that they know when their favorite product goes on sale.

13. How Does Java Stop Attract Buyers? To attract Analytical Buyers Java Stop will: – provide customer reviews on all products on the website, in addition to a social plug-in that highlights reviews from Facebook friends. – feature extensive product descriptions, photos, and video (where appropriate) to provide the analytical buyer with all of the needed information to make an informed purchasing decision.

14. Enhanced User Experience The Java Stop website features number of tools to enhance the user experience on the website. JavaStop.org: – Integrates media into the website featuring videos from growers and local companies who provide products to Java Stop, discussing their product. – features a Blog where users can interact with Java Stop employees and other store patrons, discussing the local community, that new “Fall roast”, their thoughts on improvements to the menu, and more.

15. Order Placement and Payment The checkout process on JavaStop.org is simple and intuitive for all users. Utilizing popular and recognizable industry conventional buttons, the website promotes a familiar experience for the customer. Shopping Cart and Confirmation Page – Customers are given a shopping cart / confirmation page where they can review their selected products and quantities. – Quantities can be easily modified and products removed if they were accidently added to the cart. – Users can return to the products page to continue shopping, leaving the shopping cart saved and unaltered.

16. Order Placement and Payment Checkout Page – Once customers validate their order they proceed to the checkout page to input payment and shipping information. – Returning users can login in order to expedite the transaction due to their payment and shipping information being previously stored. – A coupon and promotional code section is offered for users to apply an instant discount to their order. – Payment types include all major credit cards, debit cards, and gift cards.

17. Order Placement and Payment Checkout Page (continued) – Individuals have the option to have their order fulfilled and shipped to them or in-store pick-up if they prefer. – Customers who elect for shipping will be prompted to enter their zip code in order to calculate an accurate shipping charge. – All products, shipping, taxes and discounts will be calculated to provide the customer with a straightforward total for the transaction. Order Confirmation Page – Once the order has been submitted and completed the user is given the Order Confirmation Page to save or print for their records. – This page is added to the individuals account order history. – Users are informed that all orders are guaranteed to ship within 24 hours of order placement to ensure coffee freshness.

18. Delivery/Shipping/Returns Order Fulfillment – Once placed, orders are routed directly into the order fulfillment and business office at the Java Stop storefront location. – Orders are packaged and shipped within 24 hours of order placement. – Java Stop employs a driver to deliver wholesale orders to local restaurants and businesses within the Chicago metropolitan area. – Individuals who elect to have their order delivered will receive their order via UPS / Fedex to their specified address. – Pick-up orders will be available at the pick-up window in the Java Stop storefront location.

19. Delivery/Shipping/Returns Product Returns – If a customer is unsatisfied with a product, they can email Java Stop at customerservice@javastop.org and request a Return Authorization form to be emailed to them. customerservice@javastop.org – Once the customer receives the Return Authorization form, they can send the product back, to the Java Stop fulfillment center. (customer’s pay return shipping). – Alternately, customers can return un-opened, unused products to the store. – The Java Stop return policy can be found on the “Contact Us” page of the website.

20. Customer Services and Support Java Spot employs a personal and transparent business culture that invites customers to come back time and time again for their coffee needs. If customers have concerns and questions that need to be addressed: – they can a reach out to Java Stop via a straightforward Contact page informs customers the various ways they can contact Java Spot, whether it be by phone, email, or online form submission. – Customers can post reviews, feedback and questions which are monitored daily by the Java Stop staff. This transparency will demonstrate Java Spot’s interest in offering a business practice that focus on ensuring customer satisfaction. – JavaStop.org features a FAQ that addresses the questions and concerns Java Spot has received over the years from its customers and business partners. The use of this page allows the Java Spot website and mobile application users to get information about the questions they have without having to email or call Java Spot directly.

21. DESIGN

22. Information Architecture

23. Site Structure Navigation utilizes Foundation 4 Top Bar plugin Managed in one user control that is referenced by the master page Page Layouts Master Page Header Content URL Parameters on Product.aspx

24. Implementation Details C#.NET CarouFredSel 6.2.1 Foundation 4 Framework HTML5 & CSS4 JQuery Mobile

25. Database Structure

26. Database Interaction Inquiry Form Business Type Inquiry Type Merchandise Page Displayed Items Product Page URL Parameters Item Detail

27. Form Validation.NET Required Field Validator.NET Regular Expression Validator

28. USABILITY

29. Primary Persona Name: Jacob Age: 32 Marital Status: Single Education: Bachelor’s Degree in Business Occupation: Outside Sales Consultant Work Location: Chicago, IL (Telecommuter) Income: 120-130K

30. Primary Persona Primarily a morning Coffee drinker Brew Method: French Press Depends on mobile technology for work and play, owns: – iPhone 4s – iPad – Mac book Pro Laptop – Company Issued Dell Laptop Finds online shopping very convenient

31. Secondary Persona Name: Sharon Age: 47 Marital Status: Married Education: Master’s Degree in Education Occupation: Elementary School Teacher Work Location: Indianapolis, IN Income: 45-50K

32. Secondary Persona Drinks coffee in a social setting with friends Brew Method: Drip Prefers premium roast coffee Owns a desktop computer Comfortable with online shopping

33. A prospective customer can access the Newest Brew page on the JavaStop website, view page content and the associated video. – Initial State: Navigate to the JavaStop home page. – End State: Watch the video to completion on the Newest Brew page. – Expected Duration: 4 minutes Usability Test Scenario #1

34. Step 1. Navigate to the JavaStop website. Step 1. Navigate to the JavaStop website. Step 2. Hover your mouse pointer over the “Shop” option in the main menu bar. Step 2. Hover your mouse pointer over the “Shop” option in the main menu bar. Step 3. Select “Newest Brew” from the drop down menu options. The same option can also be found in the footer of the website. Step 3. Select “Newest Brew” from the drop down menu options. The same option can also be found in the footer of the website.

35. Step 4. Read the Newest Brew Page content. Step 4. Read the Newest Brew Page content. Step 5. Click on the play button and allow the video to completion. Step 5. Click on the play button and allow the video to completion. Usability Test Scenario #1

36. Usability Test Scenario #2 A Wholesaler can access the JavaStop website and successfully submit an inquiry form to get more information regarding wholesale opportunities with JavaStop. – Initial State: Navigate to the JavaStop home page. – End State: “Thank you for submitting.” message appears completing the form. – Expected Duration: 1 minute

37. Usability Test Scenario #2 Step 1. Navigate to the JavaStop website. Step 1. Navigate to the JavaStop website. Step 2. Hover your mouse pointer over the “Wholesale” option in the main menu bar. Step 2. Hover your mouse pointer over the “Wholesale” option in the main menu bar. Step 3. Select “Inquiry Form” from the drop down menu options. The same option can also be found in the footer of the website. Step 3. Select “Inquiry Form” from the drop down menu options. The same option can also be found in the footer of the website.

38. Usability Test Scenario #2 Step 4. Populate the required fields in the Inquiry Form as designated by the asterisk (*). Step 4. Populate the required fields in the Inquiry Form as designated by the asterisk (*). Step 5. Click on submit when all the required fields have been populated. Step 5. Click on submit when all the required fields have been populated. Step 6. A successful submittal will return the following message. Step 6. A successful submittal will return the following message.

39. Usability Test Scenario #3 A website user can access the JavaStop website, navigate to the “Merchandise” page, select an item and add it to their cart. – Initial State: Navigate to the JavaStop home page. – End State: Successfully add a product to shopping cart. – Expected Duration: 2 minute

40. Usability Test Scenario #3 Step 1. Navigate to the JavaStop website. Step 1. Navigate to the JavaStop website. Step 2. Hover your mouse pointer over the “Shop” option in the main menu bar. Step 2. Hover your mouse pointer over the “Shop” option in the main menu bar. Step 3. Select “Merchandise” from the drop down menu options. Step 3. Select “Merchandise” from the drop down menu options.

41. Usability Test Scenario #3 Step 3. Locate the “Le Creuset French Coffee Press” and click on the picture of the item. Step 3. Locate the “Le Creuset French Coffee Press” and click on the picture of the item. Step 4. Read the product details. Step 4. Read the product details. Step 5. Add the Item to the Shopping cart by clicking the “Add to Cart” button. Step 5. Add the Item to the Shopping cart by clicking the “Add to Cart” button.

42. Usability Test Results: Primary Persona Usability Test Scenario 1 Usability Test Scenario 2 Usability Test Scenario 3 Task: A prospective customer can access the Newest Brew page on the JavaStop website, view page content and the associated video. A Wholesaler can access the JavaStop website and successfully submit an inquiry form to get more information regarding wholesale opportunities with JavaStop. A website user can access the JavaStop website, navigate to the “Merchandise” page, select an item and add it to their cart. Result: The tester found it easy to find and access the Newest Brew page. The tester read through the description on the page, however sighed when he saw the length of the associated video. He was not interested in watching the full video. Task completed Time: 3.5 minutes. The tester found the Wholesale Inquiry form without issue. He had no trouble accessing the page and completing the form. Task completed Time: 45 seconds. The tester found the merchandise page easily and had no trouble finding the Le Creuset product. He was confused as to why word “Color” was in the product name; that seemed to be a mistake to him. He thought that the image should be left aligned, so that it is easier to see that a description was available, rather than it being pushed down. Task completed Time: 2 minutes.

43. Usability Test Results: Secondary Persona Usability Test Scenario 1 Usability Test Scenario 2 Usability Test Scenario 3 Task: A prospective customer can access the Newest Brew page on the JavaStop website, view page content and the associated video. A Wholesaler can access the JavaStop website and successfully submit an inquiry form to get more information regarding wholesale opportunities with JavaStop. A website user can access the JavaStop website, navigate to the “Merchandise” page, select an item and add it to their cart. Result: Overall this went well, my wife wanted to know more about “Arabica K7” means. Task completed Time: 4 minutes Also went well, but she suggested giving the user an option to enter the email twice, the second as a confirmation of the first entry. Task completed Time: 1 minutes Pretty straight forward, but did not see the read more option. Task completed Time: 2 minutes

44. Usability Test Results: Negative Persona Usability Test Scenario 1 Usability Test Scenario 2 Usability Test Scenario 3 Task: A prospective customer can access the Newest Brew page on the JavaStop website, view page content and the associated video. A Wholesaler can access the JavaStop website and successfully submit an inquiry form to get more information regarding wholesale opportunities with JavaStop. A website user can access the JavaStop website, navigate to the “Merchandise” page, select an item and add it to their cart. Result: He quickly scans the page, finds Newest Brew Link, and navigates to the page easily. He takes a moment to look over the Newest Brew Page and then presses the Play button on the video. He comments that he “likes how it plays within the page” Participant successfully completes the task with out error Time to complete task: 3:31 He navigates to the Wholesale link in the navigation and then presses the button for the “Inquiry form”. He scanned the top of the page where the text is and began to fill out the form. He presses submit and receives the notification that the form has been submitted successfully. Participant successfully completed task without error. Time to complete task: 23 sec He located the “Shop” and “Merchandise” links easily within the navigation. Clicked on the Merchandise link to navigate to the Merchandise page. He scanned the products to find the correct product. Clicked on the correct product. He then clicked the button “add to cart.” He received the message the item had been added to the cart successfully. He offered up the comments: “The text looked awkward because it went across the whole page. It should be in a column next to the image or at least so your eye doesn’t have to scan the width of the page. The price should also be right next to the add to cart button, above or left.” The participant successfully completed the task without error. Time to complete task: 1:13

45. Changes Implemented Create jQuery Mobile version of main web site. Re-organize Merchandise Product Description. Remove images on home page and provide text. Move price text closer to "Add to Cart" button. Add left and right controls on home page carousel.

46. Changes Implemented Task: Create jQuery Mobile version of main web site. Newest Brew mobile pageBlog mobile pageInquiry mobile form

47. Changes Implemented Before: Merchandise pictures centered. Descriptions are at the bottom of merchandise pictures. After: Left align merchandise pictures. Move text and left align with picture. Task: Re-organize Merchandise Product Description.

48. Changes Implemented Task: Remove images on home page and provide text. Removed & Replaced with text. Before After

49. Changes Implemented Task: Move price text closer to "Add to Cart" button. Before: Merchandise item price was left of “Add to Cart” button. After: Merchandise item price grouped with cart quantity and “Add to Cart” button.

50. Changes Implemented Task: Add left and right controls on home page carousel. Before After Previous & Next buttons

51. WEBSITE DEMO

52. http://ectweb2.cs.depaul.edu/blue50/JavaStop/Home.aspx Website Demo 1.JavaStop Site Features 1.Newest Brew – Play video 2.Wholesale Inquiry 3.Blog 4.Merchandise Page – Product page 2. How the site interacts with the database. 1.Inquiry Form – Fill out Inquiry Form 2.Merchandise Product Page – Adding to Cart – Shopping Cart page

53. 3. Usability Scenarios 1.Usability Test Scenario #1 - A prospective customer can access the Newest Brew page on the JavaStop website and view page content and the associated video. 2.Usability Test Scenario #2 - A Wholesaler can access the JavaStop website and successfully submit an inquiry form to get more information regarding wholesale opportunities with JavaStop. 3.Usability Testing Scenario #3 - A website user can access the JavaStop website, navigate to the “Merchandise” page, select an item and add it to their cart. Website Demo

54. 4.Changes as result of Usability Testing 1.Re-Organize the Merchandise Product Description Users preferred to see the text description beside the product in a narrower format 2.Remove images on home page and provide text Users were confused by the images below the main page carousel. 3.Move price and text closer to “Add to Cart” button Users were having trouble finding the price of items when trying to make purchase. 4.Add left and right controls on home page carousel