groceriestogo.com by the blue team allan sievert gian avolio sumit mukhia
TRANSCRIPT
groceriesToGo.com
By the Blue TeamAllan SievertGian Avolio
Sumit Mukhia
Value Proposition & Business Model Groceries-To-Go is an online grocery pick-up service We believe people don't mind going to pick up groceries if
they know they will be bagged and ready to be picked up at a specific time
Our goal is to take the hassle out of grocery shopping with an e-commerce solution that would make it easier for the consumer.
Picking-up pre-ordered groceries Business to consumer (B2C) Product information and an online ordering mechanism Profit: convenience fee charged for pulling ordered
products from the store and bagging them for pick-up
Intended Customers Mainly active busy professionals from 20-45 years
Average income between $40-75K.
Average tech savy.
Differentiation: convenience of not having to spend time at grocery store NOR waiting delivery
Primary audience of customer would be Impulsive buyers
Secondary target would be Occasional customers: Patient buyers
Site content according to type of customer and types of online purchasing behaviors?
Online advertising campaign Impulsive buyers with promotional banners Patient customers with price for each product, but also
additional services as recipes and suggestions Analytical customers with customer reviews Marketing research (websites target visits the most)
Posters and billboards at strategic locations downtown
Order placement and payment Online catalog in our website product
categories by type (aisles) First time user create an account Customer Login for managing shopping
lists and billing profile for easy checkout Checkout button highlighted in menu bar Select billing option for a secure payment
Delivery, shipping and return
No delivery: customer picks up products at store
Customer will present a photo ID at store
We have a 100% quality guaranteed policy in agreement with merchant store
Customers will be get a replacement or refund if quality is not standard
Store is responsible for product’s quality standards
Information Architecture
Schedule pickup
Order Summary
General Grocery
Produce Stand
Meant and seafood
Deli
Health and beauty
Wine and Spirit
Groceriestogo.com
Home Check OutMy AccountBrowse AisleGrocer
Participating grocers
Specials
Login/register Add/Edit payment Detail
Website Layout & Color Scheme Three column layout
Color Scheme Red (#E93301) Green (5f9b1e) Blue (#53a5ce)
IDE and Program Language Used Microsoft .NET 2.0 C# Javascript Visual Studio 2005
Database Structure
Site & Database Interaction(1)groceriesTogo.com - grocerypickup.mdb
Registration/Login Page Customer Table
protected void LogIn_Click (object sender, EventArgs e) {
Login login = (Login)LoginView.FindControl("login"); CustomerTableAdapter customerTableAdapter= new CustomerTableAdapter (); LogIn.CustomerDataTable customerDataTable = customerTableAdapter.CheckLogInDetail(login.UserName,
login.Password);
if (customerDataTable.Rows.Count == 1) { welcomeUser.Text = "Welcome " + login.UserName; Session["UserName"] = login.UserName; Response.Redirect("default.aspx"); } else { MessageBox("Error with your username or password. Please try again."); } }
Site & Database Interaction(2)Browse by Aisle
Brand/Category/Product Tables
protected void showcategory(int idx, string cat) { OleDbConnection conn = new OleDbConnection(GetconString()); conn.Open(); string query = "SELECT categoryid, categoryname, imgsource FROM Category WHERE aisleid=" + idx; OleDbDataAdapter da = new OleDbDataAdapter(); da.SelectCommand = new OleDbCommand(query, conn); DataTable dTable = new DataTable(); da.Fill(dTable); lblCategory.Text = cat + " Aisle"; lblProduct.Visible = false; DataList1.DataSource = dTable; DataList1.DataBind(); DataList1.Visible = true; DataList2.Visible = false; btnGetProducts.Visible = true; conn.Close(); if (DataList1.Items.Count > 0 && idx == 1) { foreach (DataListItem item in DataList1.Items) { Image img = (Image)item.FindControl("imgCategory"); img.Visible = true; } } }
Site & Database Interaction (3)Browse by Aisle (cont)
protected void btnGetProducts_Click(object sender, EventArgs e) { int i; string param = null; string catname = null; if (DataList1.Items.Count > 0) { i = 0; foreach (DataListItem item in DataList1.Items) { CheckBox cb = (CheckBox)item.FindControl("categorynameCheckBox"); if (cb.Checked.Equals(true)) { Label lbl = (Label)item.FindControl("categoryidLabel"); param += lbl.Text + ","; catname += cb.Text + " | "; i += 1; } } if (i > 0) { param = param.Substring(0, param.Length - 1).ToString(); catname = catname.Substring(0, catname.Length - 2).ToString(); OleDbConnection conn = new OleDbConnection(GetconString()); conn.Open(); string query = "SELECT Product.imgsource, Product.productid, Brand.brandname +' '+ Product.productname AS productname, Product.[size],
Product.unitsaleprice, Product.unitsinstock FROM Brand INNER JOIN Product ON Brand.brandid = Product.brandid WHERE Product.categoryid In(" + param + ") AND unitsinstock > 1";
OleDbDataAdapter da = new OleDbDataAdapter(); da.SelectCommand = new OleDbCommand(query, conn); DataTable dTable = new DataTable(); da.Fill(dTable); lblProduct.Text = catname; lblProduct.Visible = true; DataList1.Visible = false; btnGetProducts.Visible = false; DataList2.DataSource = dTable; DataList2.DataBind(); DataList2.Visible = true; conn.Close(); } } }
Validation Process & Use of CSS
Client side validation
Visual studio validation tool
External CSS (style.css) <link rel="stylesheet" type="text/css" href="style/_stylelogin.css" /> <link rel="stylesheet" type="text/css" href="style/_dealOffers.css" /> <link rel="stylesheet" type="text/css" href="style/cssform.css" />
Java script to allow user to just view the required field.
Primary Persona (1)William Blake- Bank Manager
Age 27/ Single Income – 50-80K Busy Schedule. Works an average of 40 hours a week Prefers to spend his spare time with
his friends. Has experience shopping online Drives 45 minutes to get to work
everyday. (1:30 approximate- back and forth)
Uses internet 4-8 hours a day Resides in Fullerton
Primary Persona (2)Lucy Stone- Information Architect
Age 35/ Married Income – 80-100K Works an average of 60 hours a week for big corporation Prefers to spend her spare time sailing with her husband Planning to have kids soon, which will make her even busier Has experience shopping online On the road most of the time Uses internet 4-8 hours a day Resides in Fullerton
Five Detail Design Requirements New users should have the ability to register with the site
Existing users can enter their login credentials
Users can select products through a Browse by Aisle feature to drill down to specific products
Users can then select products to buy and place them in a shopping cart. They should also be able to remove items from the cart.
Finally, users can checkout items in their cart specifying a pick-up date and time for their order
Three Usability Test Scenarios
Browse product from Aisle and put it in the shopping cart
Create an account
Schedule a pick up time
Usability Test Results and changes Usability Test #1
User was satisfied with experience. Understood that it was still a work in progress. No specific comments for functional aspects of site.
Usability Test #2 User recommended to add more content
We added more products We updated Grocer page to show potential grocer
participants
Usability Test #3 User recommended that we should give the user the
ability to save a shopping list. No action taken after the test since we fulfilled other
functional requirements. We told user that this was definitely something we would implement eventually.
Website Content (1) Home (Implemented):
Logo High Level Navigation (Main Navigation) Search Button Sub Navigation Deals Company Info Add or Promotion Log In/Register: User can log or register with the site.
Grocer: The grocer page will provide user with the list of grocers they can do their shopping from.
Browse Aisles(Implemented): List of different types of groceries.
Website Content (2) My Account: My Account will display past purchases or activities. Your
available coupons or favorite items etc. Check Out(Implemented): Check out or finalize purchase
Schedule Pickup: In this page user schedules a pick up time for their order.
Order Summary/Print Receipt: Summary of the order. Here user can either save and print the receipt of the order.
FAQ: Answers to most frequently asked questions by the users. General Help: Help and support generally with technical aspect of the
website. Privacy Policy: Describes the privacy policy of grocerstogo.com. Shopping Information: Information to users about shopping with
grocerstogo.com About us: Allows user to look at the company profile.
Mission: The mission statement of the organization. Partners: Shows the list of grocers, the organization partners with.
Site Map: Displays the map of the site.
groceriesToGo.com Web Demo Web Site
http://ectweb2.cs.depaul.edu/blue40/Deliverables/default.aspx
Mobile Site http://ectweb2.cs.depaul.edu/blue40/
Deliverables/m_default.aspx
Web Site http://ectweb2.cs.depaul.edu/blue40/
Deliverables/default.aspx
Mobile Site http://ectweb2.cs.depaul.edu/blue40/
Deliverables/m_default.aspx