Web Development Project: Wireframe Model and User Interaction Design

This project focuses on the design of wireframe models for a website, serving as schematic blueprints for the site's structure and configuration. The assignment explores two interactive design models for an e-commerce platform, Local Farm House, considering user interaction, usability, and the integration of e-commerce and m-commerce functionalities. The project includes detailed wireframe diagrams for various pages, such as the home page, login, registration, product listings, individual product details, profile management, payment, and delivery information. The reasoning section compares the advantages and disadvantages of the two interactive design models, evaluating their usability, design principles, and user experience. The project concludes by emphasizing the importance of website design in attracting and retaining users, highlighting the significance of presenting information effectively and catering to user needs. The provided bibliography supports the research and design choices made throughout the project.

Running head: WIREFRAME MODEL DESIGN
User Interaction Model Design
Name of the Student
Name of the University

Subject Code: Subject Name: Semester Number:
Table of Contents
Introduction:....................................................................................................................................3
Interactive Design 1:........................................................................................................................4
Interactive Design 2:......................................................................................................................14
Reasoning:.....................................................................................................................................22
Conclusion:....................................................................................................................................24
Bibliography:.................................................................................................................................25
Student ID: Student Name: Page 2

Subject Code: Subject Name: Semester Number:
Introduction:
Those wireframe of a website alternately otherwise called those schematic blueprints of
the website, may be utilized for speaking to those diagram of the website structure as well as
additional configuration. It will be a functional device for those UX plan likewise this device
around is skilled of giving exceptionally solid Realities regarding website usability for
insignificant exertion. Those website configuration will be a incredulous assignment Likewise
the configuration need to be dependent upon those decisions of the nearby individuals who will
make purchasing from those association.
Those Local Farm House will be a well-known association who may be Intuition from
claiming making e-commerce as well as m-commerce provisions to the Growth for their
business. Those wireframe diagrams need been outlined as stated by those organization’s
Different necessities. Exchange diagrams are likewise in this report.
Student ID: Student Name: Page 3

Subject Code: Subject Name: Semester Number:
Interactive Design 1:
Figure 1: Home Page
(Source: Created by Author)
The home page consist of the offers that organization provides. The customer can see
various products that organization provides. The customer can navigate through the site using the
menu. The products shown in this page will be categorized.
Student ID: Student Name: Page 4

Subject Code: Subject Name: Semester Number:
Figure 2: Login
(Source: Created by Author)
The login page allows the customer to login into the system using the registered user id or
email and password. The user can also login using social media if customer has registered
through social media.
Student ID: Student Name: Page 5

Subject Code: Subject Name: Semester Number:
Figure 3: Registration
(Source: Created by Author)
The user can register into the system using the personal information. The user will
provide address and contact details that will be used in the time of delivery. The user can also
register using social media.
Student ID: Student Name: Page 6

Subject Code: Subject Name: Semester Number:
Figure 4: Products
(Source: Created by Author)
The products page will represent the products based on the category. If the customer
clicks on the category name then a page consist of only the products of those categories will be
shown. The different categories will be consisting of different pages.
Student ID: Student Name: Page 7

Subject Code: Subject Name: Semester Number:
Figure 5: Individual Product
(Source: Created by Author)
This page shows the individual products of the website. The page consist of all the details
of the product. The customer can also check if the product can be delivered to user address using
the Zip Code.
Student ID: Student Name: Page 8

Subject Code: Subject Name: Semester Number:
Figure 6: Profile
(Source: Created by Author)
This page shows the information of the user provided during registration. The user can
update the information by clicking on the “Update profile information”.
Student ID: Student Name: Page 9

Subject Code: Subject Name: Semester Number:
Figure 7: Profile Update
(Source: Created by Author)
The user can update the information by inputting the desired information and clicking on
the update button. The user can also change the profile picture.
Student ID: Student Name: Page 10

Subject Code: Subject Name: Semester Number:
Figure 8: Payment
(Source: Created by Author)
The user location details will be shown in the payment page and there is various ways of
making a payment.
Student ID: Student Name: Page 11

Subject Code: Subject Name: Semester Number:
Figure 9: Delivery Details
(Source: Created by Author)
The user will provide all the required data for delivering a product to this page. If the use
logs in then the user data will be automatically fetched from the database.
Student ID: Student Name: Page 12

Subject Code: Subject Name: Semester Number:
Figure 10: Restaurant and Catering
(Source: Created by Author)
This page will allow the customer to book the restaurant or catering service. The options
and information required will be shown within this page. The slideshow of images will show the
images of restaurant and catering services.
Student ID: Student Name: Page 13

Subject Code: Subject Name: Semester Number:
Interactive Design 2:
Figure 11: Home Page
(Source: Created by Author)
The home page shows the advertisement that the organization offers to the registered user
which will attract the new customers. The login and registration option has been included into
the menu.
Student ID: Student Name: Page 14

Subject Code: Subject Name: Semester Number:
Figure 12: Login
(Source: Created by Author)
The login page allows the user register if the customer is not registered. The customer can
choose to browse the product without logged in. In this case the purchase history will not be
saved and various offers will not be provided.
Student ID: Student Name: Page 15

Subject Code: Subject Name: Semester Number:
Figure 13: Registration
(Source: Created by Author)
The user can register using Gmail id or Facebook. If the user choose to provide all the
information and register manually then the system will verify all the details. The website will
store all the data into the database and show the saved information in the profile page.
Student ID: Student Name: Page 16

Subject Code: Subject Name: Semester Number:
Figure 14: Products
(Source: Created by Author)
The product page has been changed hugely. The user will select the category of products
that he/she wants to see. The customer can also chose the minimum and maximum amount of the
products such as minimum $5 and max $200.
Student ID: Student Name: Page 17

Subject Code: Subject Name: Semester Number:
Figure 15: Individual Product
(Source: Created by Author)
This page is designed for showing the details of the products individually. The user will
see the images of the product in the slide show. The customer can choose to add the product to
cart and or buy instantly.
Student ID: Student Name: Page 18

Subject Code: Subject Name: Semester Number:
Figure 16: Restaurant and Catering
(Source: Created by Author)
The organization allows the user to book the restaurant or hire the catering service for a
specific date. In case of catering service, the customer has to provide the number of guests into
the page.
Student ID: Student Name: Page 19

Subject Code: Subject Name: Semester Number:
Figure 17: Profile Update
(Source: Created by Author)
The user can update the information by inputting the desired information and clicking on
the update button. The user can also change the profile picture.
Student ID: Student Name: Page 20

Subject Code: Subject Name: Semester Number:
Figure 18: Payment
(Source: Created by Author)
The user location details will be shown in the payment page and there is various ways of
making a payment.
Student ID: Student Name: Page 21

Subject Code: Subject Name: Semester Number:
Figure 19: Delivery Details
(Source: Created by Author)
The user will provide all the required data for delivering a product to this page. If the use
logs in then the user data will be automatically fetched from the database.
Reasoning:
Those primary advantage of the interactive design1 is its effortlessness. Those usability
of the outline is very good. The playing point of interactive design 2 may be the blending from
claiming segments. The client will discover main the individuals segments that need aid
compelling reason will must perform an operation. Those disservice about interactive design 1
camwood a chance to be excessively its Straightforwardness. A percentage might discover it
Student ID: Student Name: Page 22

Subject Code: Subject Name: Semester Number:
intricate will settle on utilization of every last one of components. Those hindrance for
interactive design 2 is those accurate measure about usability.
The configuration standard of interactive design 1 will be essential majority of the data
representational. The outline guideline about interactive design 2 will be representational about
soundness component to build approachability.
Usability objectives of intelligent interactive design 1 is with permit those client on bring
every last one of needed As well as exchange information and networking in the same page.
Those client will have the capacity should register or login through those same page. Those
client might upgrade Different profile related majority of the data through those same page.
Those usability objectives for interactive design 2 will be will furnish main those alternatives
that need aid obliged. This permits the client will connect for those site through that alternatives
best.
Usability knowledge of intelligent interactive design 1 will be precise beneficial
Furthermore certain. Those clients who would acquainted for those webpage found it precise
simple will explore and entry the works. Those usability background about interactive design 2
will be medium. Those clients need a couple additional data something like those forms along
these lines that clear picture of the capacity might be built.
Those intelligent media plan 1 may be chosen to those fundamental outline and the result
in will be its secondary usability As well as Straightforwardness. Those web page will a chance
to be planned for the individual’s kin who need aid elderly Furthermore attempting class mostly.
Those clients might associate with those website on do assignment with the interface.
Student ID: Student Name: Page 23

Subject Code: Subject Name: Semester Number:
Conclusion:
Those website finishes up that those web pages need aid vital for the site will provide a
chance to be great done attracting clients. The pages must a chance to be planned in light of the
proposition of proving the majority of the data that will attract client to sit tight additional
looking into webpage What's more exact sum for information need should speak to an item
effectively.
Student ID: Student Name: Page 24

Subject Code: Subject Name: Semester Number:
Bibliography:
Achmadi, A., Junaedi, D., & Darwiyanto, E. (2017). Rekomendasi User Interface Pada Website
Dikti Menggunakan Metode Goal Directed Design. eProceedings of Engineering, 4(3).
Chang, W., Ciardella, C., & Prescilla, R. (2017). SCUdent Books: A University-Focused
Bookselling Platform.
Cooke, S. B., & Terhune, C. E. (2015). Form, function, and geometric morphometrics. The
Anatomical Record, 298(1), 5-28.
Curtis, C. A. (2014). ForWord: A study of an interactive learning environment in foreign
language. Rochester Institute of Technology.
Freeman, J. (2017). Using Project Management Techniques to Design a PMP Mathematics Study
App for the Windows Universal Platform.
Kurniawan, Y., & Cassandra, C. (2014). Development of Church Information System (A Case
Study Approach). International Journal of Software Engineering and Its Applications,
8(12), 199-208.
Mtimkulu, S. (2014). Towards the functionality South African internet banking websites should
provide to address the needs of generation-Y users (Doctoral dissertation).
Mutua, L. M. (2017). A Mobile-based drugs and alcohol addiction self-assessment and
management scheme (Doctoral dissertation, Strathmore University).
Patsoule, E., & Koutsabasis, P. (2014). Redesigning websites for older adults: a case study.
Behaviour & Information Technology, 33(6), 561-573.
Student ID: Student Name: Page 25

Subject Code: Subject Name: Semester Number:
Phillips, M. (2015). The architecture of website-hosted multimedia materials for the assured
inclusivity of primary languages learning. Language in Focus, 1(2), 85-114.
Potapkina, E. (2017). Designing a mobile multiple destination app for city traveling.
Shrestha, S. (2016). PREMIER LEAGUE GAME RESULT PREDICTION (Doctoral
dissertation, Tribhuvan University).
Student ID: Student Name: Page 26