Vera's Vegan Pizzas is a popular South Manchester based food truck. The popularity of this delicious "can't believe it's vegan" pizza often leads to long wait times to order. Whilst most customers are happy to wait, Vera feels she is losing customers before they order due to an absence of online ordering. Currently, there is a single point of contact to place orders by phone, and if this is frequently engaged, some customers order elsewhere.
Vera requires a solution that provides a new method for customers to place orders. An online based ordering system should be simple, and clear in design and layout, taking a similar duration to ordering by phone.
A successful solution should reduce the amount of calls Vera is handling to allow her to focus on cooking. Furthermore, as the orders will be received digitally to a Google based spreadsheet, Vera will be able to execute them in order from viewing the spreadsheet on screen.
There are additional benefits of moving to a digitally driven ordering system; in that Vera will have order data and her fingertips. Allowing Vera to analyse and forecast stock levels for a particular day and/or location far easier than the current paper-based method. Vera will also be able amend the menu and costs within the spreadsheet negating the requirement for Developer services to update within the code.
- As a customer...
- I want to place an order at the first time of trying, so that I don't have to keep calling back.
- I want to understand how long it will take to cook my order, so that I can plan my journey time.
- I want to learn which pizzas are available, so I can choose my preferred option.
- I want to learn which sizes are available, so I can choose the appropriate size for my appetite.
- I want to order multiple pizzas, so I can provide food to more people.
- I want to be able to amend the order before committing, so that if a mistake is made I don't have to restart the order.
- As the owner...
- I want to reduce the time spent on the phone and writing orders, so I can focus on executing the orders.
- I want to provide an easier method of ordering pizza, so that our orders increase.
- I want to be able to inform customers of changes to the menu daily, so I can try new toppings and improve customer satisfaction.
- I want to have data from the day's orders, so that I can learn of customers trends and forecast more accurately.
- The application will provide a method of receiving and executing orders from Vera's customers.
- The application will be intuitive for the customer to follow and take a similar amount of time as if ordering by phone.
- Customers who had previously ordered elsewhere due a continually engaged phone line, will place an order online, which in turn will increase revenue.
The roadmap below highlights the high-level strategic opportunities versus the importance and viability/feasibility of development for the MVP (Minimal Viable Product):
An agile approach of keeping the in scope features simple and aligned to the strategy for the MVP will be adopted. Below is a list of the leading features for the application.
- Create an online interface for customers to place orders.
- A welcome message.
- Options for ordering different pizza sizes.
- Options for ordering different pizza toppings.
- On screen confirmation of the order before placing with Vera.
- Provide the order details in a spreadsheet to Vera as they are received.
- Provide the customer with a cost to be paid on collection.
- Add the value of each order within the spreadsheet.
- Develop application for smartphones.
- Options for ordering custom toppings.
- Email confirmation when the order is placed.
- Provide the customer with the opportunity to pay online.
- Provide the customer with an expected wait time dependent on current live orders.
This website will be structured with the following design considerations.
- The customer will be welcomed to the CLI (Command Line Interface) with a welcome message from Vera.
- The customer will be asked for basic details, including their name which could be used as the order reference for the MVP.
- The customer will then be asked which pizza they would like from the menu.
- This will be followed by the size of pizza they would like; Small, Medium, Large
- Confirmation of their order will be provided, asking them whether they would like to place the order, or order anything else.
- If the customer needs to order more items they will be navigated back the first ordering question.
- If the customer has requested all items then the order will be placed, and the Google Sheet updated for Vera.
- Finally, the customer will be thanked and informed of the time for collection. customer.
The final structure may differ slightly as development progresses and from user feedback.
Key to the UX attributes is the ease for which customers can place an order. Therefore, the website will contain a simple interface that immediately welcomes the customers and takes them through the process with minimal inputs.
The journey should take a similar amount of time to when ordering by phone which should ensure no customers are lost with the change in method.
Aesthetically the page will be clean with no images, and a clear header informing the user they are ordering with VV Pizzas. Use of the national colours of Italy will provide signals of the food theme. Within the interface, Emoji's will be used to communicate some fun. However, they will not be used to replace words to avoid any confusion with the customer.
Should the customer make an error whilst navigating through the system, a message will appear guiding them on the steps to take, whilst also having the ability to navigate to the Main Menu and exit the system. Furthermore, customers will have the ability to restart the order from within the interface or by clicking a 'Restart Order' button located on the browser page.
A flowchart outlining the customer journey has been created using Lucidchart. The final application may differ slightly as development progresses and from user feedback.
As part of this phase a wireframe for a browser has been produced using Balsamiq (see image below - the wireframe is located within the project Repo).
The website is responsive through differing screen widths to a minimum of 800px wide. It is not yet developed for smartphones - a future sprint should see this delivered.
The key aim for the MVP launch is to have a readable interface for the customer to order. Therefore, the surface theme has retained a simple and clean style.
The colour palette signals 'Italy' to the customer, to convey the link with the Italian food of pizza. The Savoy Azure Blue works well to provide accents; however, it does not work as well within the interface against the black background. Whereas the Green and Red from the Italian flag are readable against the background. However, they have not been overly used to ensure all critical text is readable. The Philippine Green from the Italian flag has also been used for the webpage background, as well as communicating Italy food, Green is often associated with Vegan or Vegetarian food.
'Fira Code' font has been selected for free commercial use from Google Fonts due to its similar style to the interface font. Fira Code is an extension of the Fira Mono font containing a set of ligatures for common programming multi-character combinations. Whilst these ligatures won't be used within this build, it does highlight the font is quick and easy to read.
- A welcome message greets the customer
- A table presenting the days choice of pizza is displayed. The customer is asked to make a choice to proceed or has options to navigate elsewhere.
- A table presenting the options for sizes and the cost is displayed. The customer is asked to make a choice to proceed or has options to navigate elsewhere.
- Following a choice of pizza and size, the customer is asked how many they would like to order.
- The customers choices are played back to them, asking for confirmation to proceed sending the order to the kitchen.
- The customer's order is being sent to the kitchen.
- From the Main Menu, users can choose to view the current live orders to anticipate when theirs will be ready within the 20 minutes window.
- Sensitive data such as phone number and cost have been removed from view.
Following a successful MVP launch, the application can be further developed over a brief period to improve UX. Here are the immediate development roadmap features:
- Place an order on smartphones
- Website features i.e. About, Contact, Map, Social Media
- Pay online prior to collection
- Real-time update on the order to customer via email/SMS
Meta data is included within the HTML head element to increase the traffic to the website. Furthermore, the site page is titled appropriately as another method of informing users of their location.
I have based the model on functions used as the steps to request, validate and return data from the customer. These functions are called from within the 'Place Order' function. As each function is executed, return values are collated and confirmed back to the user before sending to the kitchen.
An external Google Sheet is used to receive this data in a format the kitchen can read, execute and update the order status. The Owner also uses this Sheet to update the menu for the day, and any cost changes. Pandas DataFrames is used to receive the data into the application. DataFrames are formatted using Tabulate for customer views.
The Google Sheet can be viewed online at VV Pizzas. Data within is for the purposes of the MVP and therefore fictitious.
Throughout the Build phase Python Tutor, PEP8 Online and Chrome Developer Tools are used to ensure the application is intuitive, responsive and accessible. These tools and others were used for the Testing phase. Full details and results of testing be found within the project Repo.
The following sections summarise the tests and results.
The code on each file has been assessed using the appropriate validation service; W3C Markup for HTML, W3C for CSS (within the HTML files) and PEP8 Online for Python.
Below are the summarised results from these tests:
- run.py - 0 Errors / 0 Warnings
- layout.html - 0 Errors / 0 Warnings
- index.html - 1 Errors / 2 Warnings; relating to the absence of boiler plate
<!DOCTYPE HTML>code which is anticipated given the structure of the website. This data is coded in the layout.html file along with the Head element.
The website renders and is functional on the following browsers:
- Google Chrome
- Mozilla Firefox
- Safari
- Opera
- Microsoft Edge
- Microsoft Internet Explorer
The website does not render on any previous versions of Internet Explorer.
As anticipated the website was not functional on smartphones or tablet due primarily to terminal dimensions being fixed. However, functionality was as planned on devices that incorporated a keyboard to support navigation through the application. No issues were identified with desktop and laptop testing.
The homepage has been tested using the Wave (Web Accessibility Evaluation Tool) with zero alerts and only 1 contrast error where the Footer text was triggering a low-contrast error. As a result, I increased the size of the text and separated over two lines to improve readability for users with low-vision.
Using Lighthouse performance testing within Chrome Developer Tools, the website has been tested for use on Desktop only. The website scored highly across all criteria; however, some further work is required to improve the contrast of the background to foreground for Accessibility, and potentially to use passive listeners to improve scrolling performance. Furthermore, the initial load time could be improved by eliminating render-blocking resources.
Test occurred using Lighthouse within Chrome Dev Tools on 16/03/2022 with the following results:
The leading user stories have been tested to ensure the priority aims of the website have been delivered. Below is a summary of the story's validation.
| Reference | Description |
|---|---|
| US01 | As a customer, I want to place an order with VV Pizzas at the first time of trying, so that I don't have to keep calling back. |
| Validation | Customers can navigate to the website and place an order online |
| US02 | As a customer, I want to understand how long it will take to cook my order, so that I can plan my journey time. |
| Validation | Customers are advised to collect 20 minutes after they order, furthermore there is an option to 'View Live Orders' to check the order status. This is currently updated manually by the kitchen. |
| US03 | As a customer, I want to learn which pizzas are available, so I can choose my preferred option. |
| Validation | In step 3 of placing an order, the menu highlighting which 4 pizzas are available is displayed. |
| US04 | As a customer, I want to learn which sizes are available, so I can choose the appropriate size for my appetite. |
| Validation | In step 4 of placing an order, a table is displayed showing the size options and the respective cost. |
| US05 | As a customer, I want to order multiple pizzas, so I can provide food to more people. |
| Validation | In step 5 of placing an order, the customer is asked to choose a quantity between 1-6. |
| US06 | As a customer, I want to be able to amend the order before committing, so that if a mistake is made I don't have to restart the order. |
| Validation | This user story has not been deployed - several differing solutions to build this functionality have been attempted. Further time is required. |
| US07 | As the owner, I want to reduce the time spent on the phone and writing orders, so I can focus on executing the orders. |
| Validation | Vera can view orders as they are received on a screen within the kitchen. |
| US08 | As the owner, I want to provide an easier method of ordering pizza, so that our orders increase. |
| Validation | Vera can communicate the website address to customers so they can use this method next time. |
| US09 | I want to be able to inform customers of changes to the menu daily, so I can try new toppings and improve customer satisfaction. |
| Validation | Vera can update the menu daily from within the external spreadsheet - this then populates the table within the code that the customer sees. |
| US10 | As the owner, I want to have data from the day's orders, so that I can learn of customers trends and forecast more accurately. |
| Validation | Vera can copy the data received on the order spreadsheet and paste into a data model that performance this type of analysis. |
The issues listed in the table below we identified during March 2022.
| Ref | Bug | Description | Resolved | Fix / Latest Update |
|---|---|---|---|---|
| B1 | Capital input for pizza size | Currently the only accepted input for a pizza size is a capital S, M or L | ✔️ | Incorporate .upper() to the variable received from the users input |
| B2 | More than 11 digits allowed for mobile number | The user is asked to input their mobile phone number, which is validated using RE Compile and Match methods. However more than 11 digits were being accepted | ✔️ | Solution found within stackoverflow forums on the right code combination to use for UK mobile formats to match against. |
| B3 | Displaying row data from external spreadsheet | Using Rich tables the row data from the Google Sheet will not display on new lines, instead it displays as columns | ✔️ | This was an exhaustive bug to fix; I could not successfully code the right method to unpack the row data into the table. I spent a vast amount of time trying to fix this bug as I wanted to use Rich tables to style the data, however in the end I found using a Pandas DataFrame would be quicker for now. |
| B4 | Pandas DataFrame not rendering | With styles applied to format the DataFrame, it would no longer render in the terminal | ✔️ | After trying several differing methods, including the use of Jinja the complexity was too great for the MVP. I decided to use Tabulate to format the DataFrame within the code which renders simply, but readable. |
| B5 | Pep8 error when using a lambda expression | As part of the solution to use the GBP £ for cost I installed and setup the right 'locales' packages. To invoke this a line of code was required using 'lambda' | ✔️ | This format triggered an E731 error with Pep8 so I researched for alternative format of code, attempting to rewrite as part of a 'def'. I've been unable to successful code this function, and in conjunction with bug B6 have opted for a manual workaround to display the £ symbol. |
| B6 | Use of GBP £ symbol within code | Having installed and setup 'locales' to change the defaults to en_GB, the £ symbol could be used throughout the code correctly. However, despite update the requirements.txt file the position would regress to the locale settings being lost and an error triggering as the default could not be found. | ✔️ | I attempted a few different solutions to ensure the settings would remain, however in the end I've opted for a manual workaround of adding the symbol as part of the string as opposed to being dynamically added depending on geo location. Investigations continue to provide a permanent fix. |
| B7 | Navigating back to the previous question | The option of (P) to return to the previous question works, however due to functions not being chained when the user goes forward again some of the returned values are lost which comprises the rest of the order process. As this code is not functioning correctly it has been removed to be developed in a future release. |
This bug was discovered close to the submission date and it was considered potentially too risky to reconstruct the data model from being a central command style where the ordering functions are called in sequential order, to a model where all the functions can be chained to allow for this type of back/forth navigation. There are also considerations as to how this will work with a fix for B8. |
|
| B8 | Adding / Remove order items | Code has been developed to Add / Remove items. However, I have struggled to have the original cust_order list update with the changes to the order. As this code is not functioning correctly it has been removed to be developed in a future release. |
The structure of the data model may need to change to allow this functionality. A move to having the order list as a Global Variable dictionary maybe the best option, and this could be combined with the fix for B7 where you could chain through the ordering functions, with a central Class for the Order collating the differing return values, any additions or removals could also be collated here. When this can be resolved, the code for additional menu items for Sides and Drinks can be re-added. |
This project was deployed using the steps below with version releasing active. Please do not make any changes to files within this repository as any changes pushed to the main branch will be automatically reflected on the live website. Instead, please follow the steps below which guide you to forking the website where changes can be made without impact to the live website. Thanks!
To fork this website to either propose changes or to use as an idea for another website, follow these steps:
- If you haven't yet, you should first set up Git. Don't forget to set up authentication to GitHub.com from Git as well
- Navigate to the VV Pizza.
- Click the 'Fork' button on the upper right part of the page. It's in between 'Watch' and 'Star'
- You will now have a fork of the VV Pizzas repository added to your GitHub profile. Navigate to your own profile and find the forked repository to add the required files.
- Above the list of forked files click the 'Code' button
- A drop-down menu will appear providing a choice of cloning options. Select the one which is applicable to your setup Further details on completing the last step can be found on GitHub's Fork a Repo page
To deploy from GitHub, follow these steps:
- Log into your GitHub repository, create a GitHub account if necessary
- Click 'Settings' in the main Repository menu
- Click 'Pages' from the left-hand side navigation menu
- Within the Source section, click the "Branch" button and change from 'None' to 'Main'
- The page should automatically refresh with a url displayed
- Test the link by clicking on the url
The url for this website can be found here https://vv-pizzas.herokuapp.com/
Create a Spreadsheet (Data Model)
- Login to your Google account, create an account if necessary
- Navigate to Sheets, Googles version of Microsoft Excel
- Start a new spreadsheet, amend the title at the top i.e., VV Pizzas
- Create 3 Sheets/Tabs, titling 'Orders' 'Pizzas and 'Sizes'
- In the first row of the Orders sheet, add the following column headers:
- Name, TelNum, Pizza, Size, Quantity, Cost, Time, Date, Status
- In the first row of the Pizza sheet, add the following column headers:
- Item, Pizza, Topping
- In the first row of the Sizes sheet, add the following column headers:
- Item, Name, Size, Cost
Setup API
- Navigate to Google Cloud Platform
- If you do not already have a profile then follow the basic steps for creating an Account, via clicking on the 'Get Started for Free' button in the upper right corner.
- Once the previous step is complete, create a new project with a unique title
- You should now arrive at the project dashboard and be ready to setup the required credentials:
- Access the navigation menu from clicking on the hamburger button
- Select APIs and Services, followed by 'Library'
- Search for and select Google Drive API -> Enable
- Search for and select Google Sheets API -> Enable
- Click Enable to navigate to 'API and Services Overview'
- Click Create Credentials in the upper left of the screen
- For Credential Type, select 'Google Drive' from the dropdown
- For 'What data will you be accessing' select Application Data
- For 'Are you planning to use this API with Compute Engine...?' choose 'No, I'm not...'
- Click Next
- Within the Create Service Account page, enter a Service Account Name
- Click Create and Continue
- Next within 'Grant this service account access to project', choose Basic -> Editor from the 'Select a Role' dropdown
- Click Continue
- Next within 'Grant users access to this service account', choose 'Done'
- On the following, click on the 'Service Account Name' you created to navigate to the config page
- Navigate to the Keys section
- Select 'Add Key' dropdown -> Create New Key.
- Select 'JSON' -> Create - the file will download to your machine
- From your local downloads folder, add file directly to your Gitpod workspace, and rename the file to creds.json
- Within the file, copy the value for 'client email'. Paste this email address into the 'Share' area of your Google Sheet, assigning the role of Editor
Enable API within IDE
-
From within your GitPod IDE terminal, enter 'pip3 install gspread google-auth'
-
At the top of your Python file add the following lines:
import gspread from google.oauth2.service_account import Credentials -
Below this add the following code:
SCOPE = [ "https://www.googleapis.com/auth/spreadsheets", "https://www.googleapis.com/auth/drive.file", "https://www.googleapis.com/auth/drive" ] CREDS = Credentials.from_service_account_file('creds.json') SCOPED_CREDS = CREDS.with_scopes(SCOPE) GSPREAD_CLIENT = gspread.authorize(SCOPED_CREDS) SHEET = GSPREAD_CLIENT.open('vv_pizzas') console = Console() install(show_locals=True)
-
The requirements.txt file in the IDE must be updated to package all dependencies. To do this:
- Enter the following into the terminal: 'pip3 freeze > requirements.txt'
- Commit the changes and push to GitHub
-
Next, follow the steps below:
- Login to Heroku, create an account if necessary
- Once at your Dashboard, click 'Create New App'
- Enter a name for your application, this must be unique, and select a region
- Click 'Create App'
- At the Application Configuration page, apply the following to the Settings and Deploy sections:
- Within 'Settings', scroll down to the Config Vars section to apply the credentials being used by the application. In the Reveal Config Vars enter 'CREDS' for the Key field and paste the all the contents from the creds.json file into the Value field
- Click 'Add'
- Add another Config Var with the Key of 'PORT' and the Value of '8000'
- Within Settings, scroll down to the Buildpacks sections, click to Add a Buildpack
- Select Python from the pop-up window and Save
- Add the Node.js Buildpack using the same method
- Navigate to the Deploy section, select Github as the deployment method, and connect to GitHub when prompted
- Use your GitHub repository name created for this project
- Finally, scroll down to and select to deploy 'Automatically' as this will ensure each time you push code in GitHub, the pages through Heroku are updated
- Your application can be run from the Application Configuration section, click 'Open App'
- Mentor Brian Macharia for guiding and advising throughout the projects lifecycle on how to improve UX and my code.
Support with how to develop ideas into code also came from various online resources:
- Validating Mobile Phone Number Format
- Converting String Inputs to Integers
- Applying Date and Time to Orders
- Clearing Screen Between Menus
- Adding Time Delay to Function Calls
- Visualising a Progress Bar
- Providing System Exit Method
- Google Sheet to display the orders for the kitchen, and to allow the Owner to update the menu and cost.
- Rich Console to style terminal text, provide a Progress Bar when sending orders, and as formatted traceback for development.
- Pandas to receive data from the external Google Sheet into a DataFrame.
- Tabulate to render pandas DataFrames.
- Regular Expression (or RE) to validate the customers mobile number structure
- Datetime to add the date and time to the order before sending to the kitchen.
- Time in conjunction with Sleep to delay functions executing which for the customer provides time to read messages before moving to the next screen.
- Balsamiq - Used to build wireframes in the Skelton phase.
- LucidChart - To map out the flow of data.
- This website was coded primarily using Python3, HTML5, CCS3 with GitPod used for the IDE and GitHub as a hosting repository.
- W3schools - Source of 'How to...' information throughout the build.
- Stack Overflow - Source of 'How to...' information on Python code.
- Python Tutor - For testing sections of code.
- Wave - Accessibility Testing to ensure content is readable for all users.
- HTML Validator - For validating HMTL code.
- W3 CSS Validator - For validating CSS code.
- PEP8 Validator - For validating Python code.
- Code Beautify - For validating the layout of code.
- IE NetREnderer - For browser testing on Microsoft IE versions 7-10.
- LambdaTest - For cross browser testing including, macOS Safari and Opera.