User Interface Design for Local Farm Shop Website

The assignment involves designing a user interface for a Local Farm Shop Website, providing two alternative designs (Design 1 and Design 2), and selecting one design for implementation. The report includes wireframe designs, page layouts, and usability analysis for both designs.

Running head: INTERFACE DESIGN
Local Farm Shop Website Interface Designs
Student Name:
University Name:

1INTERFACE DESIGN
Table of Contents
Overview..........................................................................................................................................2
Design 1...........................................................................................................................................2
Design 2...........................................................................................................................................8
Selection of design.........................................................................................................................15
Bibliography..................................................................................................................................16

2INTERFACE DESIGN
Overview
The report provides the information about the website implementation of the Mountain
Artistic Co-operative. The wireframe design for the website implementation have been
developed. Two alternative designs for the development have been provided among which the
client would be selecting one design for the implementation.
Design 1
Home

3INTERFACE DESIGN
Figure 1: Home page for the website
(Source: Created by Author)
The homepage contains the information about the products. The products are categories
into food, wine and gifts. In addition to this, the products are sorted as top deals and special
offers.
Login
Figure 2: Login page for the website
(Source: Created by Author)
The login page allows the users to enter their email address and password and log
into the web site.
Signup

4INTERFACE DESIGN
Figure 2: Signup page for the website
(Source: Created by Author)
The sign up page is used for the registration of the users into the website. The user
would be required to enter the details into the respective fields and click the register button.

5INTERFACE DESIGN
Products
Figure 3: Products page for the website
(Source: Created by Author)
This page provides the detailed information about the product in the website. The
user can select the type of product they are looking for and they can add the product to the cart.

6INTERFACE DESIGN
Checkout
Figure 4: Checkout for the website
(Source: Created by Author)
After adding the product to the cart the user would be directed to the checkout page of the
website. The user would be able to complete the purchasing by clicking on the confirm button.
User Profile

7INTERFACE DESIGN
Figure 5: User profile page for the website
(Source: Created by Author)
This is the user information page that the user would be directed to after login. The user
can check the cart informations and also track the orders made by user.
Restaurant booking

8INTERFACE DESIGN
Figure 6: Restaurant booking page for the website
(Source: Created by Author)
The restaurant booking page provides the user to book the restaurant of the organization
from the website.
Design 2

9INTERFACE DESIGN
Register/Login
Figure 7: Register/Login page for the website
(Source: Created by Author)
In the second design the user has to login or register and only them they are able
to view the products.
Products

10INTERFACE DESIGN
Figure 8: Products page for the website
(Source: Created by Author)
The products page opens after the user successfully logs in to the website. The products
are designed similar to the first design.

11INTERFACE DESIGN
Cart
Figure 9: Shopping cart page for the website
(Source: Created by Author)
This is the cart page the user can view the cart after they select a certain number of items
of their choice. The total billing details for the user is provided on the right hand side.

12INTERFACE DESIGN
Checkout
Figure 10: Checkout page for the website
(Source: Created by Author)

13INTERFACE DESIGN
This is the checkout page. The checkout with the items they have added to their
cart and end the purchase process.
Restaurant booking
Figure 11: Restaurant booking page for the website
(Source: Created by Author)
This is the restaurant booking page and this design is similar with the first design.
Reasoning
The main advantage of the design is that the design provides an efficient homepage for
the organization. This makes the web designing look very attractive.
The main disadvantage of the first design is that the functionalities are spread across the
webpages and the pages could have been utilized for better purposes.

14INTERFACE DESIGN
The main advantage of the second design is that the design looks more compact hence,
the user is provided an option to find all his requirements at a single page.
The main disadvantage of the second design is that it misses out on some of the utilities
of the website.
Design principle of the first design is to cover all the requirements specified by the
organization for the website development. Whereas the design principle of the second design is
to cover all the specific requirements of an actual website.
The usability of the first design is very good, but the usability of the second design is not
up to the mark.
The first design is selected for the development of the website of the company. The first
design is selected as that design provides an efficient homepage and the navigations options for
the system are very efficient. In addition to this the second design provides a less functionality
and hence the design can be regarded as in efficient for the website development. Hence, the
selection of the first design is justified.
The development of the website is aimed towards the customers of the company who are
the main users of the website. The main tasks of the user would be to search products, select
them and purchase the products.
Conclusion
From the completion of this assignment we can understand that the designing of the user
interface is very important for the development of a website and the wireframe designs are

15INTERFACE DESIGN
important are very important for the development of the user interfaces. Two alternative designs
have been provided in the report among which the first design is being selected for the
development of the user interfaces.

16INTERFACE DESIGN
Bibliography
Chadwick, G., & Daly, E. (2016). Research databases page usability test-August 2016.
Chiu, T. A. H. Y. (2015). Anxiety Meter for Children with ASD: Classifier Development
and User Interface Usability Study (Doctoral dissertation, University of Toronto (Canada)).
Kantorowitz, E. (2016, September). Two Step User Interface Design. In Proceedings of
the European Conference on Cognitive Ergonomics (p. 41). ACM.
Louridas, P., Tsoukalas, G., & Mitropoulos, D. (2016). Requirements and User Interface
Design.
Shneiderman, B., Plaisant, C., Cohen, M., Jacobs, S., Elmqvist, N., & Diakopoulos, N.
(2016). Designing the user interface: strategies for effective human-computer interaction.
Pearson.