Blue Team |Final PresentationSheldon Jones

Melissa McElroyJessica Niksa

Kirk Ockerman

JAVA STOP

USER STORIES

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

US22 – Re-Organize the Merchandise Product DescriptionThe 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.

US23 – Remove images on home page and provide text

All three usability tests revealed that userswere 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 .

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.

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.

E-COMMERCE VALUE CHAIN

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.

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.

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

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.

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.

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.

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.

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.

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.

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.

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.

– 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.

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.

DESIGN

Information Architecture

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

Implementation Details

• C#• .NET• CarouFredSel 6.2.1• Foundation 4 Framework• HTML5 & CSS4• JQuery Mobile

Database Structure

Database Interaction

• Inquiry Form• Business Type• Inquiry Type

• Merchandise Page• Displayed Items

• Product Page• URL Parameters• Item Detail

Form Validation

• .NET Required Field Validator• .NET Regular Expression Validator

USABILITY

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

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

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

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

• 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

Usability Test Scenario #1

Step 1.Navigate to the JavaStop website.

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 4.Read the Newest Brew Page content.

Step 5.Click on the play button and allow the video to completion.

Usability Test Scenario #1

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

Usability Test Scenario #2

Step 1.Navigate to the JavaStop website.

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.

Usability Test Scenario #2

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 6.A successful submittal will return the following message.

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

Usability Test Scenario #3

Step 1.Navigate to the JavaStop website.

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.

Usability Test Scenario #3

Step 3.Locate the “Le Creuset French Coffee Press” and click on the picture of the item.

Step 4.Read the product details.

Step 5.Add the Item to the Shopping cart by clicking the “Add to Cart” button.

Usability Test Results: Primary PersonaUsability

Test Scenario 1Usability

Test Scenario 2Usability

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.

Usability Test Results: Secondary PersonaUsability

Test Scenario 1Usability

Test Scenario 2Usability

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

Usability Test Results: Negative PersonaUsability

Test Scenario 1Usability

Test Scenario 2Usability

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 errorTime 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

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.

Changes ImplementedTask: • Create jQuery Mobile version of main web site.

Newest Brew mobile page Blog mobile page Inquiry mobile form

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.

Changes ImplementedTask:

• Remove images on home page and provide text.

Removed & Replaced with text.

Before After

Changes ImplementedTask:

• 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.

Changes ImplementedTask:

• Add left and right controls on home page carousel.

Before After Previous & Next buttons

WEBSITE DEMO

http://ectweb2.cs.depaul.edu/blue50/JavaStop/Home.aspx

Website Demo

1. JavaStop Site Features1. Newest Brew – Play video2. Wholesale Inquiry 3. Blog 4. Merchandise Page – Product page

2. How the site interacts with the database.1. Inquiry Form – Fill out Inquiry Form2. Merchandise Product Page – Adding to Cart – Shopping Cart page

3. Usability Scenarios1. 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

Website Demo4. 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 textUsers 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