Kevin Amézaga                          

  Back to Projects   Home   Career   Skills   About   Press

  FIU UX Lab - Order Form

Oct 2021



The assignment description was as follows:

The FIU Marching Band (Links to an external site.) is planning a fundraiser to help offset their costs to travel to the away football games next semester. After the pandemic has affected so many in-person events, the marching band wants to sell limited edition Panther Pride t-shirts. You have been kindly asked to design the screen for the order form application that will be used to take an order for a single t-shirt. This will be a mobile application that will be used only by a band member who will process each of the orders. (For simplicity sake, assume that only one shirt can be ordered at a time.)
Tasks/Requirements
Use a free version Webflow to design your application (other web tools for design are also permitted). Be sure to save your project as a pdf or image file!
  1. Data that must be collected by the application on the order screen:
    1. Customer name
    2. Customer address, city, state, zip
    3. Customer phone number
    4. Customer email address
    5. Shirt color (choices are white, blue, gold)
    6. Shirt type (choices are short sleeve, long sleeve, and sleeveless muscle shirt)
    7. Shirt size (choices are small, medium, large, and extra large)
    8. Delivery option (pick up or ship to customer)
    9. Express shipping option
  2. Design the form for the application program that will meet the requirements described above, applying what you have learned so far in this course about design and usability.
  3. Use the toolbox controls from WebFlow.
  4. Include visual elements available at:
  5. Use color where appropriate to make the screen attractive.
  6. The form must have a field to display the total order cost.
  7. The form must provide buttons to place the order, to clear the form, and to exit the application.
REMINDER: You are not writing any programming code for this – you are only designing the screen prototype.
Deliverable
When you have completed this project, save your work as pdf or image files, and submit it via Canvas.

  View Project Live