# data[].attributes.body
better selling chart
pizza and drink set
integrate with AI chatbot

# data[].attributes.body
Approach: Website Layout Prototyping

Estimation: 1.5 hour

By: Lenlin

User Story:

1. As a user, I want to know the choices of Pizza, ingredients. So that I can easily choose my favorite Pizza

2. As a user, I want to know the selling point of this Pizza shop.  So that I know why I shop here

To-do-items:

✅ Research competitor websites

https://www.newyorkcitypizza.com/

https://deliveroo.hk/

https://www.foodpanda.hk/

✅ output:

https://www.notion.so/Research-competitor-websites-d1d89f21b0a04c338eca0f186fb4ef51?pvs=4

✅ Collect design references, e.g.:

https://muffingroup.com/blog/pizza-websites/

✅ output:

https://www.figma.com/community/file/1217014063947524470

https://www.figma.com/community/file/1205868209634268205

https://www.figma.com/community/file/1206991515347793093

https://www.figma.com/community/file/1176472126403902742

https://www.figma.com/community/file/1037639529535271823

https://www.figma.com/community/file/1103820487891554272

✅ Draft site map with key functions & features, e.g.:

https://miro.com/templates/sitemap/

✅ output:

https://www.figma.com/community/file/1157217989092445578/PIZZA-ORDERING-WEBSITE

# data[].attributes.body
Approach: Create Order Procedure System Flowchart

Estimation: 1.5 hour

By: Wendy

User Story:

1. As a user, I want to order with a simple procedure.  So that I can buy easily

2. As a user, I want to have a clear and sharp photo of the Pizza.  So I can make sure I buy something I like (i.e. same as expectation)

To-do-items:

Research the ordering procedure on competitor websites

https://www.pizzahut.com.hk/en/order

https://www.pizzaexpress.com.hk/order-take-away

Collect all sytems related to the ordering procedure, included but not limited to POS & CMS

CMS (content update)

Location Selection

POS

Third Party Delivery (e.g. Deliveroo, foodpanda)

Collect system flow references, e.g.:

https://venngage.com/templates/diagrams/ordering-swimlane-process-flow-diagram-50ee0b5e-be9a-49bb-b7df-95cbf6c79eac

Draft the high-level ordering flowchat,

Pizza Ordering Flow.docx

# data[].attributes.body
- not too many pages
- attract more people to enter the pizze website

# data[].attributes.body
can add/remove an ingredients

# data[].attributes.body
- Support membership for welcome offer
- order checking
- got discount offer

# data[].attributes.body
- ingegrate with 3rd party report tools, e.g.: powerBI

# data[].attributes.headline
Flyer with QR code of the new ordering website

# data[].attributes.subject
Flyer with QR code of the new ordering website

# data[].attributes.body
insert with the current pizza order box

# data[].attributes.body
Approach: Study the integration with 3rd party system

Estimation: 3 hours

By: xxxx

User Story:

1. As a user, I want to use the website similar to "https://www.newyorkcitypizza.com". So that I can have move interest to place order on it

Related Task:

xxxxx

To-do-items:

xxxx

# data[].attributes.body
Responsive design
- PC browser
- Mobile browser

Estimation: 30mins

# data[].attributes.body
Approach: Study all payment method integration requirement

Estimation: 1.5 hour (2ppl)

By:

Eddie: Visa/Master

Ahmad: ApplePay

User Story:

1. As a user, I want to checkout with Visa/Master.  So that I can earn reward from my credit card

2. As a user, I want to checkout with ApplePay.  So that I can complete the order with my iPhone/iPad/Macbook easily

To-do-items:

✅ Research the integration sytem requirement & API documentation from the payment gateway website/contact the payment gateway account manager via email for help

https://www.mastercard.com/gateway/partner/developer.html

https://developer.apple.com/documentation/passkit/apple_pay/

✅ output from Eddit:

- VISA / Master

Read the document for VISA and Master official website
https://www.mastercard.com/gateway/partner/developer.html
https://developer.visa.com/

Apply the application:
- Outline the input procedure
> Company Information
> Bank Information (Fin department provided)
> Company Lisense  (Fin department provided)
> confirmation email after 2-3 workings day

✅ output from Ahmad:

Apple Pay integration (worldline.com)

Comparison How to integrate a payment gateway into a website? | JustCoded

Integration of Payment Gateway: All You Need to Know (grinteq.com)

Need to have Apple device

Need to have Apple Developer Account and Xcode to implement the Apple Pay

Create a merchant identifier

Create a payment processing certificate

Enable Apple Pay in Xcode

Collect all related systems info which will be integrated to the specific payment gateway, included but not limited to payment module

✅ output from Eddit

Website Web Server -> Payment Gateway

tech: JAVA, ...

✅ output from Ahmad:

Device = Apple

Apple Pay includes Mastercard, Maestro, Visa

Xcode and Apple Developer account

Flowchart Apple Pay integration (worldline.com)

Collect the payment gateway requirements from Fin department

✅ output:

Fin department agree/disagree, because xxx

Sent email for quotation with a year subscription
- VISA (USD)$150 / per year + 1% transaction fee (24*7 technical support)
- Master (USD)$100 / per year + 1% transaction fee (24*7 technical support)

- Specification:
- Security Protocol for the network traffic -  Mutual Authentication
- User Privacy Protection - Data Encryption
- Programme Language - JAVA

- Fin department:
- User Meeting with Fin department:

Assumption:
Revenue:
VISA :$100,000 (per year)
Master : $100,000 (per year)

VISA - 150 + ($100000*1%) = $1150
Master - 100 + ($100000*1%) = $1000
- Our estimate budget is $2150.
According to Fin research, the budget for the payment estimate in:
- <  (USD)$5000 /per year
They accept to provide VISA/Master payment service which their accept range

Draft the high-level payment gateway integration flowchat, e.g.:

https://miro.com/templates/cross-functional-flowchart/

✅ output:

- Flow Chart:
https://www.gifttool.com/support/Page?BID=10&AID=279
- Credit Card Payment mechanism

# data[].attributes.attachment_link.readable_text
Build your payment gateway integration

Our flexible platform is here to support you and your payment strategy goals. In addition to our full team of payment industry professionals, we employ a global development team to help you customize your solution.

Check out our API resources and gateway documentation to help you build your payment gateway solution.

# data[].attributes.attachment_link.title
Payment Gateway Developer Integration - Mastercard

# data[].attributes.attachment_link.description
Our flexible platform is here to support you and your payment strategy goals. In addition to our full team of payment industry professionals, we employ a global development team to help you customize your solution. Check out our API resources and gateway documentation to help you build your payment gateway solution.

# data[].attributes.headline
👨‍💻 Website Layout Design - Phase-1: quotation stage

# data[].attributes.subject
👨‍💻 Website Layout Design - Phase-1: quotation stage

# data[].attributes.body
Approach: Website Layout Prototyping

Estimation: 2 days

By: xxxx

User Story:

1. As a user, I want to use the website similar to "https://www.newyorkcitypizza.com". So that I can have move interest to place order on it

Related Task:

Website Layout Prototyping：https://padlet.com/hi_asia/kanban-board-group-1-na5l4zkjuu6wwxlu/wish/2590962430

To-do-items:

search website design company

ask for demo

ask for website design quotations