Semester Project: Wireframe Design of Local Farmhouse Shop Website

This project presents two interactive wireframe designs for a Local Farmhouse Shop website, detailing the homepage, product search, login, product page, and service page functionalities. The designs utilize buttons, links, and interactive elements to simulate user interactions. The project includes reasoning for design choices, comparing the accessibility and product promotion capabilities of the two designs. It analyzes usability goals and experiences, concluding that the second interactive design is the best choice for the organization. The website is designed for both existing and potential customers, with features like product searching, online payment, registration, login, and restaurant seat booking. The project emphasizes the importance of wireframe diagrams in the website design process, highlighting their flexibility and ease of modification.

Running head: WIREFRAME DESIGN OF LOCAL FARMHOUSE SHOP
Wireframe Design of Local Farmhouse Shop
Name of the Student
Name of the University

Subject Code: Subject Name: Semester Number:
Table of Contents
Introduction:....................................................................................................................................2
Interactive Design 1:....................................................................................................................3
Interactive Design 2:....................................................................................................................8
Reasoning:.....................................................................................................................................12
Conclusion:....................................................................................................................................14
Bibliography:.................................................................................................................................15
Student ID:
Student Name: Page 1

Subject Code: Subject Name: Semester Number:
Introduction:
The wireframe diagram is considered to be the sketch of the system that is to be built.
The main feature of the system is simplicity, easily understandable and clearness. The wireframe
diagrams are utilized by designers are used for representing the required details of the website
design. The actual designs of the website are created later in the form of User Interface. Various
organizations are utilizing the wireframe diagrams to visualize the entities of the website and
make mandatory changes in the site.
The design of the wireframe diagrams are based on the case study of Local Farm Shop.
The organization is currently looking forward to implement a system in its environment. The
purpose of the website is to facilitate the daily operations of the system and track the business
activities. The wireframe diagrams represented through an interactive design. The interactions
are mainly are done using the button and the links.
Student ID:
Student Name: Page 2

Subject Code: Subject Name: Semester Number:
Interactive Design 1:
Figure 1: The Home Page of Local Farm Shop
(Source: Created by Author)
The home page consist of the header, menu, login logo, ratings to the site form the
customers, organization tour images, search options and product list. The products that have
various offers will be shown to the home page. The user can also search various products
through name or other factors.
Student ID:
Student Name: Page 3

Subject Code: Subject Name: Semester Number:
Figure 2: Searching Products
(Source: Created by Author)
The user can search the products in two ways. First, input the name, category or brand
name into the advance search bar and enter. The second is selecting the options available in the
dropdown list and search. The list of products that match with the user input will be visible in the
bottom of the page. In case no product matches with the user input an error message will appear.
Student ID:
Student Name: Page 4

Subject Code: Subject Name: Semester Number:
Figure 3: Login
(Source: Created by Author)
The customer can login to the system by clicking on the login logo appear in the header.
The customer can login through Facebook, Gmail or user id and password that was provided
during registration. An inner html page will appear in the screen while the user will click on
login logo.
Student ID:
Student Name: Page 5

Subject Code: Subject Name: Semester Number:
Figure 4: Buy Product
(Source: Created by Author)
The user can buy a product or add it to the cart from this page. This page shows all the
details available in the system about the product. The customer can write a review or like a
product only after purchasing it. This page will hold an image of the product.
Student ID:
Student Name: Page 6

Subject Code: Subject Name: Semester Number:
Figure 5: Services
(Source: Created by Author)
In this section the customer will access the service page. The user can only book the
restaurant or catering services only after login. However, the users can ask for the price of
booking through submitting the information in the form at right side of the page. The user can
also see the reviews that has been given to the services by several users.
Student ID:
Student Name: Page 7

Subject Code: Subject Name: Semester Number:
Interactive Design 2:
Figure 6: The Home Page of Local Farm Shop
(Source: Created by Author)
The home page of this alternative interactive design has a home icon, login icon, location
detection technique in top along with service access link. The site shows the promotion of the
products in the left hand side. The cart will be shown in the right bottom corner. The products
with offers will be visible just below the header. The customer can see more products that has
offer by clicking on the link. The products are shown through a section as can be seen in the
bottom of the page. The user can click on expand click to see the sub categories. If clicked on the
subcategory expand link then the products can be seen.
Student ID:
Student Name: Page 8

Subject Code: Subject Name: Semester Number:
Figure 7: The Product Search
(Source: Created by Author)
The searched products will be visible in the middle of the page along with necessary data.
The user can add the products to the cart from this page or can click on product name to access
the product page. The customer can directly buy the product by clicking on the Buy now button.
Student ID:
Student Name: Page 9

Subject Code: Subject Name: Semester Number:
Figure 8: Login
(Source: Created by Author)
In this interactive design, the website has a different login page. The user will be
redirected to a separate login page after clicking on the login icon. The user can login using the
user id and password, Facebook or google mail address. If the user has forgotten the password
then can click on the “Forgot password’ link.
Student ID:
Student Name: Page 10

Subject Code: Subject Name: Semester Number:
Figure 9: Product Page
(Source: Created by Author)
In this page the details of the product is represented. The user can add product to the cart.
If the product is added to the cart then information on cart will be updated. The page allows the
user to enter the quantity of products that are to be purchased. The page also show some
suggested products in the bottom.
Student ID:
Student Name: Page 11

Subject Code: Subject Name: Semester Number:
Figure 10: Service Page
(Source: Created by Author)
This page allows the user to book the restaurant. The user requested data and number of
seats will be verified. If the seats are available for the selected date then the user will be able to
proceed to pay. The page also shows the user reviews on the right upper section of the page. The
page also shows the images that has been uploaded at the restaurant.
Reasoning:
The main advantages of the interactive design 1 is its accessibility. The user can easily
access the required data with minimal effort. The disadvantage of the interactive design 1 is its
inability to promote products. The advantages of interactive design 2 is the promotion of
Student ID:
Student Name: Page 12

Subject Code: Subject Name: Semester Number:
products in every way possible. The disadvantage of interactive design 2 is that the design does
not follow the conventional process of website interface.
Design principles of interactive design 1start designing the website in small scale and
start integrating in wide form. However, the design principles of interactive design 2 is
delivering a good product concept instead of great deliverables.
Usability goals of the interactive design 1 is allowing the user to be in the same page and
allow accessing the required information every time possible. On the other hand, the usability
goal of interactive design 2 is attracting the customer to interact with the products that Local
Farmhouse Shop sells.
Usability experience of interactive design 1 is good. The usability experience of
interactive design 2 is very good, even better than design 1.
The interactive design 2 is the best choice for the organization. The users will have more
options to interact with the products that is the m motto of the project. The design 1 provide
interaction better than the design 2. However, in design 2, the customers will be engaging more
on the product buy and traversing.
The website is mainly being designed for the exiting and the potential customers of the
organization. The site will give huge loyalty bonus to current customers to promote the site. The
site is also designed for the elderly who live at distance from the physical store. The user will be
doing the tasks on the website by searching products, paying charge of product bought,
registration, login, restaurant seat booking and many more.
Student ID:
Student Name: Page 13

Subject Code: Subject Name: Semester Number:
Conclusion:
The above study concludes that the wireframe diagrams are as important to the website
designing as the user interfaces. The wireframe diagrams are easy to create and change. This is a
positive factor in the website designing process as a lot of changes in the content and media
representation is done during this phase. The design has done according to the interests and goals
of Local Farmhouse Shop. Two alternatives that has been given within this study has provided a
platform that can allow to analyze the wireframe diagrams. The main reason of the design has
been interaction among the pages and this has been done according to the protocols of the
interaction diagram design process.
Student ID:
Student Name: Page 14

Subject Code: Subject Name: Semester Number:
Bibliography:
Akbarzadeh, M., Van Mele, T., & Block, P. (2015). On the equilibrium of funicular polyhedral
frames and convex polyhedral force diagrams. Computer-Aided Design, 63, 118-128.
Bharwani, S., Taylor, R., Lokers, R., Houtkamp, J., Barrott, J., Karali, E., & Bojovic, D. (2017).
PLACARD first version of digital CCA & DRR landscape visualisation.
Imran, I. I., Elameer, A. S., & Al-Hamdani, R. (2017, April). Design and Development of a
MOOC for Academic Institution in Iraq. In The 1 st International Conference on
Information Technology (ICoIT'17) (p. 174).
Liao, J. (2016). Developing an E-commerce Website by Using WordPress CMS for “H. SWare
Oy”.
Student ID:
Student Name: Page 15