Mobile Application Design Project: Local Farm Shop, ITC504, Semester 1

This project presents the design of a mobile application for a local farm shop, aiming to provide online services to customers including food, gifts, and restaurant bookings. The report showcases two interactive design options, detailing wireframes for key functionalities such as home page, login/signup, shopping cart, order checkout, and restaurant booking. Design 1 emphasizes accessibility, while Design 2 prioritizes product presentation. The reasoning section analyzes the advantages and disadvantages of each design, considering usability goals and user experience. The conclusion recommends Design 2 based on its integration of required functionalities and attractive presentation. The project highlights the importance of wireframes in website and application design and provides a detailed analysis to facilitate the development process.

ITC504: Interface Usability
Local Farm Shop case study
Name of the Student:
Name of the University:

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

Subject Code: Subject Name: Semester Number:
Introduction
Local farm shop is an organization that offers products like food, gifts as well as wine to
their customers. They have decided to provide their services online to their customers with the
help of a mobile application. The Local farm shop also has a restaurant which the customers can
book as per their requirement. Presently, the restaurant has an accommodation of 50 guests so
their main focus is on local customers rather than corporate customers. Hence, wireframe designs
has been presented in this report which reflect upon the functionalities of the mobile application
as per requirement of the Local farm shop.
The wireframe designs present the exact look and feel of the actual mobile application
that will be developed for the Local farm shop. The wireframe designs are sketches of the system
that has to be developed to meet the requirements of Local farm shop. In this report, two
alternative designs are produced so that the suitable design can be chosen for development of the
mobile application.
Student ID: Student Name: Page 2

Subject Code: Subject Name: Semester Number:
Interactive Design 1
Figure 1: Home Page of Local Farm Shop
(Source: Created by Author)
Student ID: Student Name: Page 3

Subject Code: Subject Name: Semester Number:
The page demonstrated above presents an insight into the products or services that are
being offered by the Local farm shop. The Home page has been designed with suitable
implementation of menu bar for easy navigation along with properly labelled buttons.
Figure 2: Login/Signup Page of Local Farm Shop
(Source: Created by Author)
This page demonstrates upon the functionality of Signup that will be used by new users
to register themselves and Login that will be used by existing users to access their account.
Student ID: Student Name: Page 4

Subject Code: Subject Name: Semester Number:
Figure 3: Shopping cart page of Local Farm Shop
(Source: Created by Author)
This page demonstrates the functionality of shopping cart which is similar to that of
shopping basket in physical stores. In this page, the users will be able to view the items they have
purchased and proceed for payment to place their order.
Student ID: Student Name: Page 5

Subject Code: Subject Name: Semester Number:
Figure 4: Order checkout page of Local Farm Shop
(Source: Created by Author)
In this page, the users will confirm their order after making payment and a booking
number will be generated in return. The booking number could be used by the users to check and
track the status of their order.
Student ID: Student Name: Page 6

Subject Code: Subject Name: Semester Number:
Figure 5: Restaurant booking page of Local Farm Shop
(Source: Created by Author)
In the page illustrated above, the users will be able to make their booking of venue or
reservation of a seat as per their requirement.
Student ID: Student Name: Page 7

Subject Code: Subject Name: Semester Number:
Interactive Design 2
Figure 6: Home Page for the Local Farm Shop
(Source: Created by Author)
The Home page of the website serves as an overview of the functionality that will be
offered by the mobile application of Local farm shop. The page has been embedded with various
icons and buttons so that it becomes easier for the users to operate.
Student ID: Student Name: Page 8

Subject Code: Subject Name: Semester Number:
Figure 7: Login page for the Local farm shop
(Source: Created by Author)
This page shows the functionality of Login so that the users can access the system that
will be developed for the Local farm shop. The user will have to enter their email and password
for accessing their account and operate the system.
Student ID: Student Name: Page 9

Subject Code: Subject Name: Semester Number:
Figure 8: Signup page for the Local farm shop
(Source: Created by Author)
This page is intended for registration of the users so that they become a member of the
organization and avail the services being offered by the Local farm shop. In this page, the
personal information of the users have to be entered.
Student ID: Student Name: Page
10

Subject Code: Subject Name: Semester Number:
Figure 9: Products page for the Local farm shop
(Source: Created by Author)
This page demonstrates the various products that are being offered by the Local farm
shop so that the users are able to view and place their order. The users will be able to add
products as per the requirement in the shopping cart from this page only.
Student ID: Student Name: Page
11

Subject Code: Subject Name: Semester Number:
Figure 10: Cart page for the Local farm shop
(Source: Created by Author)
This page illustrates upon the items that have been selected by the user for purchase so
that they can be aware of their order or modify as required.
Student ID: Student Name: Page
12

Subject Code: Subject Name: Semester Number:
Figure 11: Product order page for the Local farm shop
(Source: Created by Author)
This page demonstrates the page for ordering a particular product so that the users can
confirm their order and keep track as required.
Student ID: Student Name: Page
13

Subject Code: Subject Name: Semester Number:
Figure 12: Restaurant booking page for the Local farm shop
(Source: Created by Author)
In this page, the functionality has been demonstrated such that the users can easily book
the entire restaurant or reserve a particular seat of their choice as per their requirement.
Reasoning
The major advantage of the designs being presented in Design 1 is accessibility as the
users will be able to access and operate the system by using minimum effort. This design is
disadvantageous as it is unable to promote the products being offered by the Local farm shop.
Student ID: Student Name: Page
14

Subject Code: Subject Name: Semester Number:
The advantage of Design 2 is that the products has been presented and organized in a well
manner so that those are easily visible to the customers. The major disadvantage identified in
Design 2 is that the conventional process of user interface design has not been followed.
The design principles applied in Design 1 reflect that it has been done by following the
golden rules of user interface design. In Design 2, the sketches has been developed using only
traditional methods without application of specific rules.
Design 1 has been prepared with end goal that the requirements of Local farm shop and
the users are met. Design 1 is done such that every information is accessible as per requirements
of the user. The usability goal of Design 2 is to attract more customers to the website so that the
Local farm shop can easily expand their business.
The usability experience being evaluated for Design 1 is considered to be good as the
users will able to easily locate the various functionalities offered by the website. Design 2 has
better usability experience than Design 1 as the users are more attracted towards the designs.
The sketches being presented in Design 2 is considered to be suitable for the Local farm
shop as it integrates every required functionality into one system. The designs reflect that the
every element is placed in a sequential and organized manner so that the users can easily access
and operate. The designs are being presented mainly for the existing customers however, new
users could also avail the services by registering themselves with the organization. Design 2 is
more sensible in nature as it demonstrates every functionality as separate pages presented above
which will support the users to carry out the required operations with ease. The sketches in
Design 2 illustrates perfect blend of creativity and usability that is required for development of
mobile application for the Local farm shop.
Student ID: Student Name: Page
15

Subject Code: Subject Name: Semester Number:
Conclusion
From the analysis and illustrations carried above, it can be concluded that the wireframes
are an important aspect for the design of any website or application. The wireframes present an
exact and precise look of the application that have to be designed for the Local farm shop. From
the designed wireframes, the Design 2 has been selected as it consists of required elements and
the functionalities desired by the Local farm shop. The designs has been done according to the
interests as well as objectives of the organization. The pages being designed in Design 2 are
attractive and presents a pleasant look to attract more customers.
Student ID: Student Name: Page
16

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
17