Frontend design for Pizzeria Bella
Home exam, individual or in groups of up to 5 students Notice:
- The main topics in this exam are interface design, prototyping, user experience and implementation using Frontend framework as given through the course. The implementation should be the manifestation of the design work and should be done after all the design work, which is the main priority, is done.
- In the case of Frontend frameworks, use the technologies you have learnt in this course to solve the case. i.e., React + CSS.
- All code should be coded by you. Except for in very special and concrete cases, you can’t copy paste code that is not yours. You should consult if unsure on this point.
- Any resources used, citations and references must be stated clearly, both in text and in reference list.
- You should put all the files which the delivery contains in one folder which you zip before uploading to WISEFlow.
- Groups will register and deliver together on the same group in WISEFlow.
- If you are unsure about something regarding the exam you should ask the teacher to clarify.
CONTENT
- Case to solve: Pizzeria Bella online food ordering system
- What are you going to deliver?
- Assessment criteria, for students and assessors.
CASE TO SOLVE: PIZZERIA BELLA
Pizzeria Bella is a fictive Italian restaurant. They want to design their online food ordering system, which can present pizza and pasta menus to customers and help to place an order. The layout shall be responsive to Mobile, Tablet and Desktop versions.
Notice:
- The main focus is on design.
- This is a pure Frontend exam. Additional functionality, ex. backend, database, is not part of the scope.
Functionality:
- Be able to present an overview of Pizza and Pasta products that you can order.
- Be able to add products to shopping cart and present the total number of ordered items and total price.
- Shopping cart is editable, i.e., edit quantity of products, delete products, etc.
- Be able to place an order.
- Be able to navigate between web pages and edit your order before final order is placed.
- And other selective features you think practical in this context. For example, a dropdown shopping-cart menu; or side dishes suggestions while ordering.
- None of the functionalities requires backend.
Website layout: Suggested application layout at least includes below navigation pages:
- Home page
- Product page/pages. Add to cart- function for each product.
- Checkout page. It shall include 1) a shopping cart; 2) a mock-up section that contains payment alternatives and shipping options; and 3) a mock-up “place an order” button.
- Note that you can have a separate shopping cart page too. You decide how many and what products will be placed in the menu and present to the customer. You have a lot of freedom regarding the content of the page. However, the solution shall present good enough scope and complexity. For example, it is expected that the solution should include 8-10 products for both Pizza and Pasta menus. The main point is to get a prototype that can show the complexity of a solution that is close to reality.
WHAT ARE WE GOING TO DELIVER? Based on the techniques you learned in the course when solving the following four challenges shall be delivered in WISEFlow. Note that both design and implementation have to be done on a much smaller/easier scale as compared to ordinary implementation.
- A report that includes
a. Description of design process and solution b. Evaluation of the solution c. Description and reflection of the applied methodology, purpose, observations and recommendations
- A zipped folder that contains the technical solution
The report part shall not be more than 5-7 pages, including any Sketches and prototyping files. The most important thing is that you show reflection and good knowledge in design theory. Other details
- The solution should be responsive in the following manner with help of CSS3 Grid and Media queries: • Mobile (0-576px): 1 column of information • Tablet (577-970px): 2 or 3 columns of information • Desktop (971+ px): 3 or 4 columns of information
- There are three layouts (three breakpoints) required in this exam.
ASSESSMENT CRITERIA, FOR STUDENTS AND ASSESSORS. The following will be the main points to assessed: • Interface design theory and implementation are what is assessed in this exam. • Persona – Identify user group; Create a persona for each user group • Prototyping – Convert ideas to tangible form • Usability – Revise the project according to user feedback • Accessibility / Universal design – It should reflect good universal design principles, i.e., font size, contrast, color, images, links, etc. • Frontend framework – React + CSS • It is expected that a group of 3 will be able to create more than a group of 1 Guideline for how much each part counts The percentage numbers below present approximate numbers on how much each part will count
- Persona: ca. 10%
- Prototyping: ca. 30%
- User testing: ca. 10%
- Accessibility/Universal design: ca. 10%
- Frontend implementation of the design: ca 30%
- *Amount of code and complexity: ca. 10% *All points affect each other. The assessment will require a holistic view of techniques applied in the exam delivery.