Section 1: Approach to the brief
1.1 Research
We did a lot of research on the theme of our website. Since it was McDonalds themed, we found images of the interactive screen and identified all the parts of it.
We researched on how the UX and UI are made in a way that it is easily understandable and usable by an average person. The buttons are big and have a straightforward description. The layout of the page is simple and easy to navigate around.
1.2 Response to the brief
We had a few initial ideas before deciding on the McDonalds theme. The other ideas included: CAO course finder, hospital database, airplane route finder, and McDonalds interactive website. After some discussion, we decided on the McDonalds interactive menu as all of us found it interesting.
Everybody was assigned certain group roles. Cormac was the main project coder in charge of most of the client and server-side javascript, while Shawn was the website designer in charge of most of the html and css, and Joel was the main report writer and co. website designer. We generally worked together on most parts of the project.
.jpg?v=1575544982090)
Section 2: The final artefact in operation
Gathering ideas to start working on our project.
Our initial plan was to make a website which would hold a database of available products with all their relevant information, as well as display the common products on the menu so that when they were clicked, they would be added to the user's order. As we progressed, we had to make some changes to our plan
To begin, we coded in a heading title and top 'div', which we organised to hold the greeting message and McDonald’s Logo.
We then worked on our menu by coding in a left 'div' for our buttons. These buttons will display the individual menus once they are clicked.
We created an event listener for these buttons.
Then we made all the submenus of the main menus, which included many products.
After much discussion and after reviewing the project brief, we revised the function of the search bar.
For the database portion of the project, we created a database to request a product's information, like description. This was done using a special product ID that allowed us to identify each available product. Our database would include the product name, id and the description of the product. To pull the information from the database, a search bar was added.
We also created a results div which would display the description of the product when searched for in the search bar.
Some issues that we have in our website is the fact that it's not able to fit into different sized screens. We also could not figure out a way to create a running total when a product is clicked to purchase.
The way our search bar works is that you have to enter in the specific product ID that is related to the product, and it will display the description of that specific product.
Section 3: Design and Development of the artefact
3.1 The iterative design process
We designed our McDonald's website to be divided in the center. This allowed us to have two clear sections with separate functions. We also applied a column with buttons, allowing the user a clear view for navigation and access to the website's features.
3.2 Development of the final artefact
Our project includes the necessary database to control and access information. The website's layout is also user-friendly with a good user interface.
Section 4: Evaluation
4.1 Reflection on meeting the brief
Following reflection on the final product, we recognised that there were possible improvements to be made. For one, the presented data taken from the database does not look as clean as it could. Further iterations of the product would adjust the view.
Another improvement to be made would be the addition of a checkout section on the bottom of the page. We originally planned for this section, however, we failed to make it work successfully.
We were also unable to make to website fit different computer screens. This makes the website's view different for every screen.
Weren’t able to figure out a way to make a relational database as well.
