Introduction to Multimedia and Internet: Website Design Project

This project report details the design and development of a mobile phone e-commerce website. The student begins by outlining the motivation behind the project, driven by the increasing popularity of smartphones and online shopping. The report covers the methodology used, which includes identifying the website's goals, determining its scope, creating sitemaps and wireframes, content creation, visual elements, testing, and finally, launching the website. The core of the project involves creating mockups for various pages, including the homepage, about us, contact us, cart, and payment sections, using Balsamiq wireframes. The homepage mockup features a logo, navigation bar, search bar, product displays, and a cart view. The 'About Us' and 'Contact Us' pages share similar header and footer designs, with unique content sections. The cart mockup showcases the checkout process, while the payment mockup illustrates the payment information input. The project utilizes HTML, CSS, and PHP for the frontend and backend, respectively. The report concludes with a reference section, citing relevant research papers.

Running head: INTRODUCTION TO MULTIMEDIA AND INTERNET
INTRODUCTION TO MULTIMEDIA AND INTERNET
Name of the Student
Name of the University
Author Note

1INTRODUCTION TO MULTIMEDIA AND INTERNET
Table of Contents
Introduction................................................................................................................................2
Methodology..............................................................................................................................2
Storyboard..................................................................................................................................4
Home Page Mockup...............................................................................................................4
About Us Mockup..................................................................................................................5
Contact Us Mockup................................................................................................................6
Cart Mockup...........................................................................................................................7
Payment Mockup...................................................................................................................8
Reference....................................................................................................................................9

2INTRODUCTION TO MULTIMEDIA AND INTERNET
Introduction
The ability to surf the internet and perform some advanced tasks like accessing and
editing documents along with sharing necessary information with other people, have made
smartphones a useful commodity in our daily life. This ended up increasing the popularity of
the mobile phones. With the increase in mobile phone popularity, people are also buying
them from various Online and offline sources. As for the online source, various websites
present and many (websites) of them are coming up with new products in the market. The
increase in mobile phone popularity and the same (phones) being sold in online websites,
gave rise to motivation in developing a phone selling website. Apart from payment related
matter (payment gateway); the website will work on two sides; frontend and backend. The
frontend part will be done with the basic HTML for designing a laying out the website. As for
the theme of the website, that will be visible in the frontend, CSS will be used. PHP will be
used as the backend of the website as it will contain the client information, payment related
details and website content details. The overall website will be very simplistic looking, easy
to navigate, pages with consistent design and in the end, it will be accessible from different
platforms. The following part will contain details about the designing methodology that will
be used to design the same (website prototype) along with some mockups (possible design
layout of the website) in the storyboard section.
Methodology
There are mainly seven steps that are mostly used to design and implement a full
working website. They are:
- Identification of the goal of the website – Before designing the website, it is very
much needed to determine what purpose the developed website is going to fulfill.

3INTRODUCTION TO MULTIMEDIA AND INTERNET
- Determining the website scope – After successfully determining the goal of the
website, the determination of the contents and features (to be implemented) in the
webpage is done along with the time needed to build the same (Fisher, Gallino & Li,
2018).
- Creation of the sitemap and wireframe – with the completion of well-defined
scope, the website features and design layouts are made in this part linking the
contents and features defined in the scope determination part.
- Content creation – With the complete creation of the basic layout of the website
using wireframes, creating the contents for individual pages of the website is done
next. From this stage onwards, it is crucial to work with real content in hand.
- Visual elements – with the implementation of the website architecture and some of
the contents, visualization of some parts of the website is done. Depending on the
client’s liking, this part may already be implemented. However, if a change is needed,
then things like changing styles to a suitable format along with collage of some
elements are done here (Jankowski, Hamari & Wątróbski, 2019).
- Testing – Until this part, all the pages of the website should be well defined and ready
to exhibit the site to the visitors, as a result, it is made sure that all the parts work well
and fine. Here, the site is tested across various device with automated site crawlers to
make sure that the developed site is working properly and if not, identification of the
same (broken links) is done (Rezaei, Amin & Jayashree, 2016).
- Launching of the finalized site – Once all the functionalities of the website executes
fully, the working website is launched in a fully functional state.

4INTRODUCTION TO MULTIMEDIA AND INTERNET
Storyboard
Home Page Mockup
Fig: Mockup of the Homepage in balsamiq wireframes
The arrow pointing the square is the logo of the designated website. It is a linked logo that
will redirect the user to the top of the homepage at any point of time. In the navigation bar,
there are three links navigating to the Homepage, about us page and the contact us page. To
the right, there are login and cart viewing buttons. Clicking the cart-viewing button will
display the cart.
Next, there is search bar through which one can search for any available products available.
For this, the site will search the backend data stored by using PHP and then display the results
accordingly. After the search bar, the cover picture will display about the latest trends that are
going on at current date. Below the cover picture, the products are displayed with product
image, name, price and an add-to-cart option. The product displaying part is scrollable.

5INTRODUCTION TO MULTIMEDIA AND INTERNET
The footer section of the page contains the copyright information and types of payment
accepted.
About Us Mockup
Fig: Mockup of the About Us in balsamiq wireframes
The header (site logo, navigation bar, login and cart), search bar and the footer section have
the same functionality to that of the Home Page. However, the body section of this ‘About
Us’ page contains details about the website, what the site does, how and when it was
established.

6INTRODUCTION TO MULTIMEDIA AND INTERNET
Contact Us Mockup
Fig: Mockup of the Contact Us in balsamiq wireframes
Like the ‘About Us’ page, the header, search bar and the footer section have the same
functionality to that of the Home Page. Additionally in the body section, this page has a form
that will send the details to the website server (backend) and will be stored for further
processing. Apart from form, there is also details about contacting the website organization
like email and phone number. Next to the contact information there is a map displaying the
operating office location of the website.

7INTRODUCTION TO MULTIMEDIA AND INTERNET
Cart Mockup
Fig: Mockup of the Cart in balsamiq wireframes
After adding any products to the cart and opening the cart one can either check out by
clicking the ‘Go to Payment Page’ or click the website logo to go back to the homepage and
add more products that s/he wants to add. On clicking the ‘Go to Payment Page’ button the
cart will redirect the page to the Payment Section.

8INTRODUCTION TO MULTIMEDIA AND INTERNET
Payment Mockup
Fig: Mockup of the Payment section in balsamiq wireframes
In this page, one needs to enter payment details like selecting payment mode, entering card
number, name, expiry date, security code and the billing address. After entering the correct
details and clicking the ‘Place Order’ button, the order is successfully placed.

9INTRODUCTION TO MULTIMEDIA AND INTERNET
Reference
Fisher, M., Gallino, S., & Li, J. (2018). Competition-based dynamic pricing in online
retailing: A methodology validated with field experiments. Management Science,
64(6), 2496-2514.
Jankowski, J., Hamari, J., & Wątróbski, J. (2019). A gradual approach for maximising user
conversion without compromising experience with high visual intensity website
elements. Internet Research.
Rezaei, S., Ali, F., Amin, M., & Jayashree, S. (2016). Online impulse buying of tourism
products. Journal of Hospitality and Tourism Technology.