Frenzy FCR ARB Presentation CS577A Fall 2016 Team 01 -Arpan Badeka Ankur Palav Jheel Somaiya Sailee Rane Ashwin Hariharan Rishabh Sharma Alan Kwan James Chang

Outline Remote Team Member Operational Concept Description Win Win Agreement / Requirements Prototype Architecture Life Cycle Plan Feasibility Evidence QFP

Remote Team Member

Team Strengths Operational View Technical View Frequent Team Communication via group chats and group meetings Open communication with Client Academic Experience: At least 6 members taken courses in both Database Systems and Web Technologies At least 5 members have professional/project experience in Web/Application development (c) USC-CSSE

Team Weaknesses Operational View Technical View Operational Resolution Multiple tracking system tools imposed Communication method (E-Mail) Not all members experienced in Web development Operational Resolution Technical View Reference progress tickets between systems to ensure proper tracking CC E-mails to all team members between clients/instructional staff Knowledge sharing between members (c) USC-CSSE

Technical Concerns & Solutions Understanding the existing Code Base for the Frenzy Website Mitigation- Conducted meetings with the client and his development team to get better insights of the working model Lack of front end experience among the team members Mitigation- Using online tools and tutorials to expand our knowledge in web technologies

Operational Concept Description

System Purpose “ Frenzy website is a one stop shop for Fashion bloggers, stylist, online shoppers and magazine article publishers. “ It provides: An array of products associated with online articles Conversion of digital media into visual store fronts

Program Model

Benefit Chain Diagram Assumptions: People are willing to buy the items posted on fashion blogging site. People like to buy the clothes that celebs and their friends wear.    

System Boundary & Environment

Element Relationship Diagram

Core Capabilities Capability Goal Priority Level OC-1 Sort Items: User can sort products based on prices, new arrival, most popular Must Have OC-2 Shop Widget: User can view the product in a slide view fashion and overall better UI OC-3 Shop similar: User can search similar items based on price, color, category and brand OC-4 Mobile Responsive: User can access frenzy web app through his mobile. OC-5 Elastic Search: Build a system to store the data in a search and analytics engine using AWS Wish List

Goals & Constraints Organizational goals: Constraints: OG-1: Automated Ecommerce of fashion blogging website OG-2: Using digital media as store fronts OG-3: Browsing and shopping the latest fashion articles without leaving the website OG-4: Buying similar articles based on color, style and price Constraints: CO-1: Use of Angular JS for front end development CO-2: Use of Code Igniter Framework for backend CO-3: Zero Monetary Cost- NDI/NCS must be free CO-4: Linux as an Operating System- The backend server is Linux CO-5: Free database system

Win Win Agreements

Shop Widget Win conditions Description WC_4239 As a user, I should be able to focus on the product whose shop widget has been clicked so that I am able to view the product of interest. WC_4237 As a user, I can filter the products by it's arrival so that I can get the available product. WC_4236 As a user, I can sort the products by it's price ( low to high and high to low) so that I can get the product of my price range. WC_4234 As a user, I can sort the products by creation time, so that I can possibly follow the latest trends. WC_4233 As a user, I can collapse the "sort by drop down menu box" by clicking anywhere on the page except the box. WC_4231 As a user, I can view the details of the products in the slide view with the shop similar function. WC_4229 As a user, I can slide the collection of products on display.

Clothing Tags Win conditions Description WC_4242 As a user, I should be able to see the transparent, concentric circles, so that I can view the product image. WC_4241 As a user, I can view similar items for each of the tags within the product. WC_4145 As a user, I can buy clothing from digital media using Frenzy. WC_4144 As a User, I can view a responsive version of Frenzy on my phone so that I can shop a product from anywhere.

Shop Similar Win conditions Description WC_4230 As a user, I can see a loader animation on clicking on product layout buttons so that I am not viewing a blank page. WC_4141 As a User, I should be able to see the items on discount so that I am able to minimize cost. WC_4140 As a user, I can see products which are available, which are sold out on the website so that I don't waste time on already sold out products. WC_4126 As a user, I can sort the products listed based on the color, size, price range and style.

Prototype

Prototype: Shop Similar Why? The shop similar feature is an essential part of the application which caters to the demands of all types of customer base. Mitigation Risk Reduction by interfacing with the back end through a search model in Code Igniter framework.

Process Flow Diagram BackEnd

Model

Prototype: Shop Widget Why? The Shop Widget is essential as it will improve the User Experience by providing the user with better UI. Also, helps to analyze the user interface of the website with the client. Mitigation Risk Reduction by building GUI prototype.

Shop Widget Page#1 Default when User clicks on the shop button on the article page. List two images relevant to the article selected by user. Also, providing shop similar button below the image to find more similar items relevant to the product based on category, price, color and brand.

Shop Widget Page#2 Default when User clicks on next option on the shop widget page#1. List three images relevant to the article selected by user and focusing the center image by default. Also, providing shop similar button below the image to find more similar items relevant to the product based on category, price, color and brand.

Live Demo Demo

Architecture

Top Level Physical Architecture

Top Level Logical Architecture

Use Case Diagram

Use Case List # Use Case Name UC-1 Search Item UC-6 Share Items UC-2 Select Item UC-7 Clip Items UC-3 Shop Similar UC-8 Sort Items UC-4 Browse Items UC-9 Upload Fashion Blogs UC-5 Buy Items UC-10 Tag Clothing Items

Artifact and Information Diagram

Life Cycle Plan

Purpose: Manage the project team work flow on each phase of the project’s development. Development Strategy : Agile – Scrum Duration : 1 Semester (15 weeks) Team : Consists of 7 Team Members Future Plan: Scrum Board

Let’s Meet the Team Member Strengths James Owner of Frenzy Web Application Alan IIV & V Ankur Software Architect and Prototyper Arpan Prototyper and UML Modeller Ashwin Jheel Project Manager and Life Cycle Manager Rishabh Operation Concept View and Developer Sailee Feasibility Analyst and Requirements Engineer

Foundation Phase Duration: From 08/22/2016 to 12/09/2016 Activities :- Win-Win Negotiation Bi Weekly Reports Prototype Development Phase

Life Cycle Plan Artifact Deliverable in Foundation Phase Artifact Due Date Format Medium Jira Every Monday Online Project Plan Biweekly .mpp Soft Copy Progress Report .xls Progress or Prototype Presentation Slides 09/19/2016 .ppt Development Commitment Presentation Slides 10/10/2016 Draft Development Commitment Package .doc, .pdf Development Commitment Package 10/17/2016

Project Scale Factors Scale Driver Value Rationale Precedentedness (PREC) Nominal Considerable understanding of the project objectives and team members have a moderate level of experience in web technologies. Development Flexibility (FLEX) The redesigning of the website requires full conformance with requirements and the established specifications. Risk Resolutions (RESL) High Elimination of the risks can be done by building the prototypes for showcasing different functionalities. Team Cohesion (TEAM) High Co-operation between the team members. Active participation and greater understanding of the project. Process Maturity (PMAT) Achieving key area goals of CMM Maturity to a reasonable degree of satisfaction

Identifying the following Information in order to estimation the software cost: Estimated CSCI577A Effort : 7 team members at 20 hours/week for 13 weeks Total Estimated Effort : 1699 Hours Budget Information : $ 0 Project Duration : 12 weeks Components in the development project :- Shop Similar Module – Lower Prices, Same Brand, Similar Items Systems Tech Stack :- PHP, Code Igniter Framework, MYSQL, AngularJS, HTML, CSS

COINCOMO ESTIMATION

Feasibility Evidence

Personas

Use branded fashion products she likes the most. Photographer - Salena Profile: Age: 18 Gender: Female Hometown: Los Angeles Occupation: Photographer Description: Salena is a fashion Photographer by profession who loves to shop and follow fashion products. She also likes to read fashion blogs and magazines. Goals & Aspirations: Use branded fashion products she likes the most. Attributes: Curious about following specific fashion brands User Scenario: Salena plans to buy products of brand she is curious about. She also wants to read articles posted by fashion bloggers. Information Sources: Vogue Zara Snapchat Team 2@CS577a Fall 2015

Fashion Designer - Madonna Profile: Age: 25 Gender: Female Hometown: Honululu, HI Occupation: Fashion Designer Description: Madonna is a fashion designer who loves to shop and modify low end good quality fashion products. Goals & Aspirations: Madonna aims to purchase lower end high quality products, modify them and sell those products Attributes: Highly passionate about the latest fashion trends but particular about pricing. User Scenario: Madonna wants to design the best clothing styles economically and for that purpose, she needs a medium to view large amounts of cheap clothes with minimal efforts. Information Sources: Facebook Twitter Snapchat Instagram Team 2@CS577a Fall 2015

Graduate Student - Punit Profile: Age: 25 Gender: Male Hometown: Delhi Occupation: Graduate Student, The Art Institute of California Description: Punit is a fashion design student who likes to browse and shop products that he sees around him within his social circle. Goals & Aspirations: Punit aims to purchase similar products that’s worn within his friend circle. Attributes: Craving for the fashion products he explores around. User Scenario: Punit wants to buy similar products to blend with his friend circle. Information Sources: Facebook Twitter Snapchat Google Team 2@CS577a Fall 2015

Major Risks

Major Risks Risk Description Risk mitigation Personnel Shortfalls   Understanding the code base from the client and other developers Images take a lot of time to download Extract thumbnails while download process happens in the background System not functioning according to user needs Develop prototypes which will allow the users to give an early feedback Large project scope Scope down the requirements by prioritizing them and modularizing the project Local environment not setup Conduct a meeting to setup the environment

Business Analysis

Personnel Costs Activities Time Spent (Hours) Development Period(15) Valuation and Foundation Phases: Time invested(8 Weeks) Owner: 1st Win Win session 1.5 Owner: 2nd Win Win session Owner: meeting via email, skype and in person 15 Architecture Review Boards [4hr * 2 times * 1 person] 8

Hardware & Software Cost Rationale AWS Staging server $100/month Testing/Dev Proxy Service $19.85/month Network Service IBM Watson $10/month NLP Google Cloud Vision $12/month Media classification Google AdWords $20/month Advertisement

NDI Analysis NDI/NCS Products Purposes GitLab Repository MySQL DBMS AWS Cloud Services Google API User Login details Angular JS libraries MVC architecture

Quality Focal Point

Traceability Matrix OCD Requirements OCD Requirements OC-1 None (Completed) OC-2 WC_4229 WC_4231 WC_4233 WC_4234 WC_4236 WC_4237 WC_4244 OC-3 WC_4239 WC_4242 OCD Requirements OC-4 WC_4126 WC_4140 WC_4141 WC_4230 WC_4241 OC-5 WC_4145 (c) USC-CSSE

Quality Management Strategy: Defect Prevention Priority Description Version Control High Record artifacts on Git for document version control and for software version control used for change tracking, branch development, and controlled code integration. Prototyping Use prototyping to refine win-win conditions with stakeholders Win-Win Review win-win conditions with client to ensure all requirements are identified and understood Peer Review Medium Review code to identify defects and verify resolutions to defects Coding Standards Follow coding guidelines for best practice when developing software. Status Updates Conduct group status meetings or provide status updates to set expectations and establish task prioritization. (c) USC-CSSE

Quality Management Strategy: Defect Detection Review Identification Methods Peer Review Client Feedback Instructional Staff Feedback ARB Test Identification Methods Unit Testing Integration Testing Run for Record (End-To-End) Testing (c) USC-CSSE

Quality Management Strategy Defect Injection and Removal: Using JIRA to maintain defects and track progress All respective team members will maintain status updates of responsible tickets (c) USC-CSSE

Defects and Technical Debt Defects as of Week 3 Progress Report: Avoidable Defects Unavoidable Defects Concerns Late to start the win-win negotiation 1 There was a delay by the client in providing us the code base Understanding the complex codeflow may consume a lot of time Off campus student not able to attend win win negotiation 1 Freezing of the database due to large file size Technical Debt: Debt Enabler Mitigation Documentation Lack of software documentation and source code comments results in difficulties to understand source code and structure flow Understand current framework then implement good coding practices (commenting) to provide easier readability of source code and structure flow (c) USC-CSSE

Q & A