Bachelor Project, Webshop: Da Massimo Pizza Webshop

Web Development Final Thesis
Da Massimo
Old: www.damassimopizza.dk
Pizza Webshop New: www.webshop.bcasdenmark.org
June 6
Bachelor
Project,
Webshop 2013
Supervisor: Poul Henriksen
Erhvervsakademi Sjlland
Campus Roskilde
Submitted by: Debashis Das
Bachelor Project, Webshop 2013
Abstract
This report carries the Webshop built on CMS based webshop and responsive design. As final
project for bachelor in web development, it has been developed on the context of Da Massimo
Pizza Webshop. Its an appeal to all customers who are using traditional system (just-eat.dk) to
accept newer system. Some of the sites are owned by the online food order via online (For
example, just-eat.dk, hungry.dk, spiseonline.dk) who play the mediator role for both party
(buyer and seller). This site intends to provide open place where both party can meet each
other without any barriers and it is free.
Different observations and analysis has been done to lead the project in right directions. SWOT
analysis has been done to understand internal and external environment. Target group analysis
helped to map the product with user interest and expectations. Prototype method helped to
organize and plan the task to be done in time with task estimations. Market challenges are
understood going through competitor analysis which inspired to upgrade functional
performance, extra features and standard of the site to facilitate all level users.
Finally www.webshop.bcasdenmark.org has been created. All functions in the site are working
properly. They can visit almost all the view files and use search function to see desired
catagorywise food if matching items are added in database. They can sign up by clicking a
button on the top right corner of the site. After login they have own profile page where they can
see their listed previous order if they already have any. Also they can pay by cash or online,
choose Delivery option and write comments etc. This site has been tested with some of the
users and result was very positive.
Submitted by: Debashis Das Page 2

1. Introduction........................................................................................................... 5
2. Supervisor Contact ............................................................................................... 5
3. Project vision and Goal ....................................................................................... 5
3.1 Vision .............................................................................................................. 5
3.2 Goal ................................................................................................................. 5
4. Problem formulation ............................................................................................ 6
4.1 Research questions ....................................................................................... 6
5. Analysis & Method ............................................................................................... 6
5.1 Prototypes method ........................................................................................ 6
5.2 Stakeholder Analysis ..................................................................................... 7
5.3 SWOT Analysis................................................................................................ 9
5.4 Competitor analysis ....................................................................................... 9
5.5 Risk Analysis and management ................................................................ 10
5.6 Target group analysis ................................................................................. 10
6. The webshop and development process is as follows ................................... 11
6.1.1 Project definition and planning .............................................................. 11
6.1.2 Purpose..................................................................................................... 11
6.1.3 Client Interview ........................................................................................ 11
6.1.4 Target Audience ....................................................................................... 11
6.1.5 Project Brief ............................................................................................. 12
6.1.6 Persona..................................................................................................... 13
6.2.1 Project technical specification .............................................................. 15

6.2.2 Developing the project plan .................................................................... 15
6.3. 1st Interaction ........................................................................................... 16

6.3.2 Site structure and Information architecture ......................................... 16
6.3.3 Purpose..................................................................................................... 16
6.3.4 Content Outline ........................................................................................ 16
6.3.5 Main structure of Webpages .................................................................. 17
6.3.6 Site Diagram ............................................................................................ 18
6.3.7 Wireframes............................................................................................... 18
6.4. Visual design ........................................................................................... 19

6.4.1 Purpose..................................................................................................... 19
6.4.2 Color .......................................................................................................... 20
6.4.3 Font and Typefaces ................................................................................. 20
6.4.4 Graphics and images format .................................................................. 20
6.4.5 Sensory Branding ..................................................................................... 21
6.5.1 Visual Design of individual webpage ..................................................... 22

6.5.2 Site development..................................................................................... 23
6.5.3 Home Page ............................................................................................... 23
6.5.4 Products page .......................................................................................... 24

6.5.5 Single product page................................................................................. 25

6.5.6 Shopping cart ........................................................................................... 25
6.5.7 Checkout page ......................................................................................... 26
6.5.8 Shipping option ........................................................................................ 26
6.5.9 Review Order ............................................................................................ 27
7. After Sending Order what Happen? ................................................................. 28

8. Mail Setup? ........................................................................................................ 28
9. Back-end Developing Admin Panel ................................................................. 28
9.1 How i setup this webshop? ........................................................................ 28
9.2 How i added products? ............................................................................... 28
6.3 Add New Product ........................................................................................ 29
6.4 Install New Module and Enable ................................................................. 30
6.5 Site Configuration ....................................................................................... 31
6.6 Social Network Module............................................................................... 33
10. Comparing between Drupal and Wordpress (E-commerce) ......................... 33
11. Conclusion of Implementation ......................................................................... 34
12. Test and refine ................................................................................................... 35
12.1 Usability ..................................................................................................... 37
12.2 Summary of usability test ........................................................................ 37
13. Conclusion .......................................................................................................... 37
14. Possible extensions .......................................................................................... 38
15. References .......................................................................................................... 39

1. Introduction:
This is the trend that most of people are shifting from physical market to online market today.
When the number of people to access internet increases every day it creates new opportunities
for online market. Despite some security issue (it happens some time) on online payment, this
trend hasnt been slowdown. The new invention and peoples nature of attracting to easy and
better life always let the web market grow.
A website has a wide range of applications; therefore we can take advantage of its endless job
opportunities by being enrolled in the Web-Development Bachelor degree program at Zealand
Institute of Business and Technology (ZIBAT), campus Roskilde.
This project is designed for such an invention of technology and global technological
development where many people access to internet from pc, Smartphone, tablet etc. There are
many people who are using the advantage of information technology. We can find as many
stories as we go in detail. But what I would like to mention that a webpage doesnt hurt people
it just gives users interface usability and faster service to get their food. People can be cheated
via online transactions. Customers has to be registered their username, password and email
before sending their order. When customers will pay via online we are not saving their card
information. It is more secured.
There are many places in the world where people are far way behind from technology of today.
In this environment I come up with a new idea of create a web shop instead of webpage in web.
I will agree that this website will help people to buy food via net. As a student of web
development I have attempted to practice my skills and knowledge I have gained to achieve
this project objective.
2. Supervisor Contact
Name: Poul Henriksen, E-Mail:pohe@easj.dk

My internship and final thesis supervisor is Paul and I meet every week Tuesday, I
meet with my totally almost 15 hours at school campus.
3. Project vision and Goal

3.1 Vision
Damassimopizza.dk aims to provide customers with the best online shopping experience
beginning to end, with a smart, searchable webshop, easy to follow instructions, clear and
secure payment methods, and fast, quality delivery.
3.2 Goal
The goal of the Damassimopizza.dk is to create a user friendly website that can serve the
customer in a flexible way so that customer can get food quickly and easily.

4. Problem formulation
Since few years web shop business is growing very fast. It has been main attraction for some
business investor as well as typical average people. Brokers who manage to find customer and
seller can make money out of the transaction. But it is not the optimum way of handling this
kind of transaction. We are living in the age of information technology where we suppose to
easily get enough information as we need.
Customers face problems of without category food, delivery or take away time, payment
options and order confirmation.
4.1 Research questions

This project is developed to solve following questions.
What is the advantage and disadvantage between Real Shop and Webshop?
How to build web shop and choose right CMS system?
How to make a better website to responsive design and enhance users interface
developed?
Which functions are most important and could be best used in this project?
How can we gain user faith?
What does my client want for their website?
What kind of design style should I create for home page, product page, shipping option,
payment option etc.?
Which E-commerce CMS tools, technology, Shipping module, Payment Module should I
use?
How can I manage the web developing process (or Develop cycle)?
5. Analysis & Method

5.1 Prototypes method
Next step after problem formulation is to figure it out how to implement the idea. The success
of project from implementation to performance depends on this stage. First step to think here
is to find which project method to follow and make decision to stick on reliable project method.
As I have previously applied the prototype method to implement in my previous project, based
on that experience and satisfaction here I have decided to follow the same method.
It is a very popular effective result oriented project development method. Theoretically, it is

appropriate to apply prototypes in single person project. But the tools (method) of its to identify
the task and list it and complete those list in estimated time is very helpful and result oriented
for a single person project.

The actual project starts after planning. In the planning I do make the list of task and give some
priority with time limit. The necessary steps and materials to be done are listed below for this
project.
Buying domain name and space with unlimited database and sub domain name.
Installing different E-commerce CMS system (like wordpress e-commerce, woo
commerce, Drupal Ubercart, kickstart, commerce, Joomla, Magento etc.)
Testing Module, plug-in for shipping method, payment system, shipping information and
mail.
Installing responsive design theme.
User Interface Development/ definition of function that can be applied
Visual Design
Usability test
webpage layout sketch
Enable module for header and footer
To collect suitable images for product and page
Make shipping method option with price
Enable Payment option Delivery on cash or Paid by card Online.
Writing report
Testing
Task estimation is essential part of project. It helps to make things done within a given
timeframe, following a time schedule and estimated budget.
The term estimation means that you cannot be certain but you are going to predict roughly.
Thats what I did in my project. For an easier understanding I can put my project in different
way and explain how it works.

5.2 Stakeholder Analysis
Projects are being organized and run in shop owner. What will happen in the customer and
seller after completion of the project? Some customer in the near shop they might like it
because they think this web shop is helping them get food faster and cheap. And also on other
side it might affect negatively to some customer or user and they react with dissatisfaction. As
a web developer dreams of successful project and to assist this dream he or she have to
understand all factors that might affect the web shop positively or negatively. This task is
called stakeholder analysis. One successful project is possible if the project manager do
perform stakeholder analysis properly. Whether small or big size project, its wise to do
stakeholder analysis. Its the tools that help to understand interest of the players around the
entire project. Its not only to understand the level of influence but also to prepare self to
influence them. Therefore I have taken stakeholder analysis to analyze stakeholders in this
project.
Project
Web Supervisor
Developer
Shop
Owner
Damassimopizza.dk
Competitor Target
Group
Web Developer: My role in this project is to make the functional webshop with responsive
design. I have responsibility to make the website with responsive design and product page user
friendly user can use or buy product very easily. All effect and influence from such a title
remains positive in the project. It is an internal factor.
Project supervisor: Project supervisor has a positive role in this project. The way it influence the
project is checks if the project is going on right track or not. I get feedback and correction
during the development phase of project.
Shop Owner: Typically such a stakeholder has no influence in the project. But here I have used
those stakeholders to get inspired and learn more about the development. In some case we
share our experience to solve each others problem. That inspires me to make the project more
realistic and competitive.
Target Group: Target group are key determinant of the project success and failure. They are
external factor of the project. The determinant factor to include or exclude people from this
target group is interest. It means local area people who have interest to buy food online faster
way they are our target group. www.damassimopizza.dk welcomes people from the whole
Kastrup, Dragr, Amagerbro area who have that willingness to buy food directly via internet
Competitors: The big firewalls of the market are the external factor which negatively affects the
project. I have taken this with big importance and analyze in competitors analysis chapter.

5.3 SWOT Analysis:
Strength: The Idea of making the site unique from others by giving more privilege to target
group is a strong point for this project. Use of e-commerce based cms system gives a lot of
flexibility to develop best user interface adding product, deleting, update and user friendly
system. Site with good interface can attract more user and visitors.
Weakness: Beyond that strength I cant ignore the fact that this product will be new in market.
It will take time to get good rank in search engine. It will take time to get popularity among the
target audience.
Opportunity: The concept behind the project is to make this site as flexible as possible. Instead
of adding content on admin choice I like users to review order, without admin confirmation user
account before checkout, shipping option required telephone number shop owner safety data
their self. That helps to gain more visitors within short time. Publishing the product among the
group of people who are buying food everyday online for safe way of send order to shop might
lead project in successful environment.
Threat: Those existing website this shop could be notable challenge for the success of this
product. The impact of inflation has hit the buying food of the potential customer for the
customer website. Some of the potential users are not interested to make account with
internet and some of them dont trust on online transaction which is bad news for the site like
this. Unstable political situation and changes in existing rules and entrance of new competitors
are the possible line of threat for this website.
5.4 Competitor analysis:
Competitor analysis is another step of the analysis. Though www.webshop.bcasdenmark.org is

a strong site with its unique feature which existing site might not have, still we cant say
establishment of damassimopizza.dk is new on online market. Therefore competitor analysis is
required and based on the result of analysis we can update and add more feature this site if it
needed.
This step has been started by searching similar site for the same target group. Google search
has been used as a tool to finding such websites. On the process I found list of site that are
doing same kind of business. I select some of high ranked site and analyze one by one. I
checked one after another sites and found the level of the services that they offer. The
variance in level of those competitors taught me that I should make this site more unique then
theirs. The following section explains in detail of each of those websites.
Just-eat.dk
Just-eat.dk is existing order food online website owned by Mads Eriksen. Functionally as it
mentioned in webpage it provides information about Order food online with detail of individual
category wise like location, category, interactive maps and food features. This site has

mentioned Order take away online all type of food shop as their target group like Pizza shop,
Restaurant, Bar etc.
Spiseonline.dk
Spiseonline.dk is existing order food online website. Its advantage is customer can get food
category wise restaurant and place. As like just-eat.dk it has advantage when shop owner open
the shop so users can understand shop is open.
hungry.dk
Hungry.dk, Spiseonline.dk and Just-eat.dk is existing same service. Hungry.dk are charging
each order instead of monthly subscription. So shop owners are affected.
5.5 Risk Analysis and management.
Risk analysis is an important process to go through while doing certain project. Uncertainty
exists everywhere from small to big project. It is always good to think about the possible
outcomes that affect the project life. Risk can bring unpredictable results which is undesired in
the project. Therefore analysis of the risk shouldnt be ignored. It cant be omitted but can be
minimized through the management. Damassimopizza.dk might have that unpredictable
accident. There for I have used some time to minimize possible risk.
Probability from
Risk Effect Indicators Strategy
1 to 5
Not finishing each Working overtime.
Not being able to
Exceeding time block of task on Talk to supervisor
2 Launch the product
limit. time and no update and seek for
in time
made on time alternate.
Doing things that Should work on the
are not related to base of current
Not meeting users Loss the potential
1 the target audience market trend and
expectations users and market
on the context of demand of the shop
webshop business owner stake holders
Cut time from the
Exceeding time limit Not working on the project plan for
Illness 4 and not able to project more than 2 contingency so that
launch in time days work can be
recovered
Make regularly
back-ups on
Losing many hours Slow machine,
external HDD, USBs
System Crash 3 work, exceeding funny error message
and upload to
time limit on screen
server.
5.6 Target group analysis
Previously I have mentioned who are the target group for this project. Here in this phase I
would like to be more specific to talk about the detail of the target group. The determinant
factor to include or exclude people from this target group is interest. It means people whoever

have interest to buy food via online it can be its target group. Damassimopizza.dk welcomes
people from the Kastrup, Dragr, Amagerbro area Copenhagen who have that willingness to
buy food directly from shop or via internet. Damassimopizza.dk selects the target group on the
basis of interest though it has some other defined criteria too.
6. The webshop and development process is as follows:

6.1.1 Project definition and planning
Is the most critical step in the web design process? This involves defining the purpose of
the website, creating the client survey, audiences target group, and persona(s);
developing the project plan; normally it is done by Stakeholder/Sponsor/Usability lead.
6.1.2 Purpose
This phase I have to conduct a client survey interview and find the target group for Da
Massimo Pizza webshop. That means I will have to interview my clients (stakeholders).
Secondly I will, based on the information/documents from the stakeholder, define the
project brief and Persona. Furthermore I will develop a project technical specification
and project plan for The Da Massimo Webshop. After all the steps above I need to
create a plan to set up the document maintenance consideration form.
6.1.3 Client Interview
I created a client survey for the interview with my client/stakeholder (Da Massimo Pizza
shop Owner). This is an important step for my project because it will help us decide,
map, and set the stage for my entire project. The client survey is similar to a
questionnaire form that contains questions and answers. This helps us get more
specific informatics in order to determine my target group, help us analyze the clients
goals, detailed feature requests, and relevant information that I possibly collect.
6.1.4 Target Audience
It is important to define my target audience because how I present my information has a

different effect on different people. Remember the constructionist law that states, How
you say something determines what the message is. One thing that you say to a person
can have a different meaning to another person. This is why I need to determine who I
am communicating through my website because I want the website to be appealing to
the right people, - those I am creating the website for. Generally I can define my
audience by: language, location, functionality, and Level of competence.
From the interview that I had with my client, the stakeholder said that:
My shop owner selling products via real shop and internet/webshop local post code like
Kastrup, Amagerbro, Dragr area.

According to this, I could define My audience is local area; which means the website should be
in Danish, but because the company has strong relationship with local area peoples, so it
would be very useful if the website could provide some other language like English, Swedish,
etc.
Related to the demographic I defined, my audiences age is between 16 to 50 years old. They
are student, business man, employer or other airport area peoples, They have relatively high
level of education, and in comparison, have a higher understanding of internet use than most
people. This means that the website should attract people with visual image.
In terms of the level of competence of the audience target, the website should be functional
but easy to use and fast loading. In the event of an error, the user should be able to
understand. For example: When the webpage cannot be opened in the browser, there should
display a message such as Sorry, The page contains an error, please try again later.
6.1.5. Project Brief
I use the information that I gathered from the customer survey and the interview result with my
client and developed a project brief; which will help me not only defined the project goal and
audience profile but also give me a clear view of the audiences perception, primary message,
and competitive advantage. See the project brief form below:
Da Massimo Pizza Project Brief
Project Name:
Da Massimo Pizza webshop
URL (Currently):
http://damassimopizza.dk
Design a new version of webshop for Da Massimo pizza matching the

requirements.
Create a webshop which contains information of Massimo Pizza Menu card.
Project goals:
Any user can easily access the website also ordering food faster.
The website should be able to represent the companys strength.
The admin should be able to easily find product like how to add product in
cart and send order toshop.
Target date
10 of June the webshop must be finished.
for launch:
Audience: Student, Employers, local people, business man and airport office staff.
Current- complicate, duplication, not responsive also not functional.

Perception:
Desired-Simple, dynamic, responsive and functional.
Message: Da Massimo Pizzaria its most renowned shop in kastrup area.

Da Massimo webshop fully dynamic and simple functional webshop, and it

Competitive
presents the quality of the shop service. The website is easy to access.
advantage:
There are also many opportunities for the customers of Da Massimo Pizza to
share content freely; for example add a new products, price, categories etc.
6.1.6 Persona:
Persona is a great idea and useful tool for the web-development team. It keeps you focused on
the design process. On things that are realistic to my project goal, instead of an infinitive
amount of possibilities. As a designer or developer, I am not the audience; I do not see things
the way they do; I do not know what they know; and I do not have the same goal as them. I
often use some phrases like The user might want or Users might to add or design the
functionality to a website, but then that comes with problems. Another positive aspect of
creating/using a persona is that they can be used as a vehicle to sympathize with my
audience/end-users and care about their experience, which will lead the designer or developer
to key opinions that will improve the experience for users.
When I am creating a persona I should keep in mind that the persona(s) is not a segment,
target group, or user. Every person should be individual, which means that I have to go through
each of them. It is not easy to design or develop for all of them and maintain exactly the same
product/website. So related to my knowledge and experience, I have identified a primary
persona showing in below.

Thao Pham
Profile Buying food Motivation: Taste and delicious food make very emotional,
about ordering food for dinner in local shop or online shop.
She rarely can find a webshop that fits her taste and choice.
Gender Female Recently, she's turned to online ordering to avoid the hassle
of ordering food in stores. Thao found damassimo pizza
Age 24 after Googling Indian food restaurant" and reading other
reviews online about the company.
Location Kastrup Goals:
Needs a categories food item.
Occupation Student Would like to purchase several foods to fit with like
occasion, time and tasty.
Hoping to find that she doesn't have to sacrifice
taste or option when searching by categories.
Frustrations:
Not being able to filter option available, send order
with flexible delivery time.
Getting far fewer options when she applies
categories filter.
No other recommended foods when she's looking at
a food she particularly likes.
Da massimo Customers
"My whole life has been a choice between taste and quality-
when i was young i went for taste and varieties foods. As an
It is adult, i tried for quality and taste were for 20 year olds. This
shop is the 1st time i could get both."
so difficult to buy I have struggled my entire life finding taste food enough for
my taste and more so in recent years. i ordered food onto
delicious food online, this website and was shocked to find it comes in up to
within 25 min and it actually i am very surprise.
but I always like
"Love this shop so much i went out and bought two item
damassimopizzaria foods every day, i have very narrow choice and its
perfectly. They are very faster and i get very good quality
food whenever i ordered food.
Inspirations:
Damassimopizza.dk should be able to provide information on the basis of user
preference like categories food list.
Damassimopizza.dk should be easy to use like food name, description, quantity and
price.
Damassimopizza.dk should be rich with the information that can satisfy most of the
users search.

6.2.1 Project technical specification:

I used the information gathered above in the client survey phase, which can help us along with
the technical standards of my organization. It documents the specific technology to clearly
reveal requirements such as which browser to use, screen resolutions, how long for the
download time, and about the web standards and accessibility. Shown below:
Content Management System (CMS): Da Massimo Pizza website will feature a Drupal Kickstart
E-commerce Content Management System (CMS), which will be a set of secure web pages
where an authorized Da Massimo employee who is/are the admin of the website can accesses
the website to add/update/delete products and page content. Normally the CMS will be
chosen and configured by the technical team, this project I will be the one who chooses the
CMS and I will be using Drupal and Kickstart E-commerce module for our website. More
detailed description about why and how am I choose the CMS on chapter Site development.
Hosting: Hosting also handled myself for the development of the website. One year before
bought domain name this company.
Screen Resolution: I choose responsive design theme for optimize Web pages for pc, tablet
and smart phone.
Tools: HTML 5, CSS3, Jquery, Ajax and PHP
Style Sheets: CSS
Browser Compatibility: Internet Explorer, Firefox, Google Chrome, Safari.
Platforms: Macintosh, PC, Smart phone, Tablet.
Page Download Size: (typical page) 50 to 200k.
6.2.2 Developing the project plan
A project plan will establish the timetable and work task for each step of my project. It is a way
of keeping structure for my project. On hand it will give an overview of the whole process that
can save a valuable amount of time. In another hand it will shows me if my project is on
schedule. In this report I will shows a part of my Project Plan shown below:
Week and
Development Week 19 Week 20 Week 21 Week 22 Week 23
Project Selection
Layout & basic

design

Development
Report Writing
Testing and
Finishing
6.3 1st Interaction
6.3.1 Site structure and Information architecture
This process involves getting and managing the content outline, site diagram, main
structure of the pages, and wireframes completed with by default installed kickstart
theme. These are dependent on each other and need to be done sequentially.
6.3.2 Purpose
Based on the information and research form that I have done above, I know who is my website
targeting. Now it is time for working on the information architecture and site structure. Most
websites cannot be contained within one webpage, so in this phase I will generally decide how
will I organized the web content and split them into different pages and how to navigate
between these different pages. On this chapter I will also draw a wireframe for my webpage;
which will help me understand more about the functionality of the webshop for Da Massimo
Pizza.
6.3.3 Content Outline
During my internship period, I learned how my intern company works on this step; they are
using a method called: Card sorting9, which is playing different cards with a special title that
relate to the project categories. Card sorting method allows us to understand some of the user
information that is useful in the design of the site structure, for example: understand the useful
information that truly meets the users habits; and identify the problems of how to name the
projects; comparing between the web designers and users on the cognitive differences of the
site information categories as a basis for judgment framework. Due to the time issue of
analyzing the Card sorting results, I could not do this on my own. Throughout this report I will
not use it as my content outline analyzing method.
I decided to use a shallow hierarchal structure, because the website does not need so many
pages and this corresponds with KISS (Keep It Simple and Stupid). It also helped me to stick to
the corporate identity. I will not have links to another website mainly because my client (Da
Massimo Pizza) has no plan to connect any of other services website yet. This means on this
website I have to market my client (Da Massimo Pizza) but not any other companies business.

When I designed this website, I have kept in mind the inverted pyramid structure of editing,
presenting the important information at the top.
6.3.4. Main structure of WebPages
My client (Da Massimo Pizza) wishes to impress the users with their logo, food picture and let
the user understand what Da Massimo Pizza is all about and what kind of business they are
dealing in. In this case I want to grab the users attention by putting the logo of Da Massimo
Pizza together with a food picture of Pizza, Burger, Pasta, Indian food, and main content text
about the company as the first information the user will see, and leave the least information
such as contact information in the top.
Here is an example of the Home page of Da Massimo Pizza.

6.3.5 Site Diagram
A site diagram is a representation an overview of the website structure. Da Massimo Pizza is

split and organized into 9 different pages as: Home (Main page for Da Massimo Pizza), Bestil
Online, Kommentar, Kontakt, Om us, Produkts Page, Product, Shopping Cart, Checkout.
Home
Bestil Online Kommentar Kontakt Om Us
Produkts Shopping Checkout

Produkt
Page Cart
Shipping
Review
Order
Payment
Checkout
Complete
6.3.6. Wireframes
A wireframe will give the overview of the functionality of each page on my site but not the visual
design; it has nothing to do with the outlook. Wireframe is like a gray scale page layout that
illustrates the key components of the screens. We create wireframes for the purpose of
arranging content and navigation to best complete a certain purpose of the site. For example
on my website for Da Massimo Pizza, I need a wireframe to cast light on the functionality such
as where will the navigation bar be and where should I put the most information of the website
to match to what my client requires. We use wireframes as a quick and simple blueprint of the
websites structure and functionality. That way I have a map of the skeleton of the website
before I start my visual design. Having a skeleton of the website I am going to make for Da
Massimo Pizza is very helpful during the visual design process because it gives me a layout
that I can use as reference when making more detailed designs. I found wireframes helpful
when I noticed how quick and easy they are to make compared to how much time they save; it
can be done by using a pencil and paper(s), sketches on a whiteboard or online mockup tools.

In this case I will use ms drawing tool as I think that it is the fastest tool and the easiest way to
make changes.
I will create a wireframe for my client (Da Massimo Pizza)s Homepage shown below.
Top Bar (A) A. Top bar has to be fixed, auto scrolling page,
never its move. It only for login, logout, registers
Headar (B)
user, shopping cart and checkout option.
B. Inside header company logo, opening time,
Menubar (C)
address and shipping information.
Sliding Picture (D) C. In menu bar only bestil online menu and
Home page company related basic content page.
D. Category wise products picture slide max 5
Wifeframe picture slideshow.
E. And this is sub headline for products picture
slide show.
Slide heading (E) F. This is also another small product picture with
Catagory
transparent headline.
Product G. Footer only copyright or design and developed
Picture (F) by information, accepted payment card logo.
Footer (G)
6.4. Visual design: This is the preparation of the out look and feel of the website. It is
determined by how I use color, graphics, font, typography, and illustration on each page. Visual
design of the webpage has to be done. In this phase default theme has to make sure that the
companys identity is not lost in the design process.
6.4.1. Purpose
I did the site structure; this is the next step of the web development process. Based on the
reviews of the project brief, sitemap and wireframe, I have a clear idea of the purpose of the
site for my client (Da Massimo Pizza), Da Massimo Pizza has a clear requirement of the
outlooks/feeling of the website. It must be cool, simple, and elegant. At the same time I have to
keep in mind the audience target of Da Massimo Pizza; Here I have defined the web design
elements that I will focus on:
Colors and Using contrast

Fonts/typefaces and Typography (The six Cs)
Graphics and Images format
Sensory Branding
It is important to consider all this when creating a website because as mentioned above in the
constructionist law that the message the users will receive from the website depends highly on
the impression they get from the look and feel of the website. A website represents the

company, product, or service; the quality of the design for Da Massimo Pizza, directly affects
the marketing potential of the website and the image of the company (Da Massimo Pizza). To
make sure the website matches the requirements and all these factors I need to keep in mind
the simple and stupid (KISS). With the matching design I need to also make sure the
functionality of the website.
6.4.2. Colors
When a user visits the website, color is the first thing that will get his/her attention. Color
affects humans feeling, perceptions, and interrelations in different psychological and
physiological levels. The principles of color are different around the world; in another way to
describe, different colors invoke different feelings in different people from different cultures.
For example: Red color means good luck and happiness in China but it could means danger
and unlucky in another country.
My client (Da Massimo Pizza) used Green and white for the logo, and they wanted to have gray
go right to edge of the screen; I considered the target audience by demographic and
psychographic as we described above (Target Audience). Therefore I decided to use cyan,
black, white, red and gray for the website shown as below.
green Yellow cyan gray black Red
6.4.3. Fonts/typefaces
How we write the content on the pages of the website is very important mainly because the
user could change their opinion about the company, product, or service based on the
impression of the content. Due to the fact that Da Massimo Pizza has no special requirements
of how they will prefer the font or typeface on the website. Instead, they wish the font could be
something readable but cool. Using black color for the content text and the Basic page menu
bar is because black can be used with any other color. Compared to the gray background black
color font will be more readable with contrast, For example, using red on a brown background
will be unreadable.
Keeping in mind the interview with my client (Da Massimo Pizza), shop owner of the company
said: generally speaking, it has to match with the type of our company, we require a higher
feeling of food, and feature has to be functional. Besides that I will expect the website still
looks elegant but modern at the same time.
6.4.4. Graphics and Images format
To think that the user in our target audience group could be a student or employee, he/she will
not want to spend so much time loading our website. The user will not think in a way as a
programmer. For example the website can have a certain amount of images and we have lot of
categories of food that Da Massimo Pizza would require to have on the WebPages. That will

cause the time to load a page to increase dramatically. This will be very annoying if WebPages
takes a long time to load and this is not the feeling that we want to give to our user. Because of
this, I therefore have three options to store the images:
I can store the images uncompressed also jpeg, png and gif format.
I can compress the images with loss of quality.
I can compress the images with size, resolution and format.
The first option to store the images uncompressed is definitely out of the question because as I
mentioned above we do not want to sacrifice loading time of the pages. I can choose to
compress the image but we cannot afford the loss of image quality. Since the products gallery
is an important part of the information that would give the user a feeling of trust that the
company Da Massimo Pizza is a successful company. Therefore the low quality of the images
of the products could sacrifice customer interest in the website.
I will consider the use of JPEG to compress the logo. we dont want to lose the identity of Da
Massimo Pizza throughout the design, according to the interview and information analyzed
with Da Massimo Pizza, the logo of the company is with Green and white color but low
resolution with an illustrated drawing. GIF supports transparency which allows me to place the
GIF over any color background, and it would not show any border or background in the image.
In this case I use JPEG for logo and other text, I made as an image is more suitable for my
website, it is better for sharp line edge images such as the companys logo and text.
According to the fact that we have a huge amount of the images (products) that we have to put
on the webpage, converting the images to JPEG format is a suitable option, but due to the fact
that it is nearly impossible to reconvert the JPEG images, means I have to remember to keep
the original images as a backup. Using JPEG format is a good choice for converting the images
of the products for Da Massimo Pizza, because it will not lose any quality and it works well with
previews. However, we still have to consider either using progressive JPEG or baseline JPEG.
There is a disadvantage of using baseline JPEG is that, when the images starts download on
the webpage, it appears in fractions or bits, the full image would not appears until the
download is complete. This is not a good design choice for the products on Da Massimo Pizza
webpage, as the users will get impatient, with progressive JPEG the full image appears at the
start of download making it a better option compared to the baseline JPEG.
6.4.5. Sensory Branding
It is through the senses that we can recognize what we experience and that allows the brain to
recall past memories and feelings. An in depth understanding of sensory marketing can serve
as a big advantage when dealing with a target group. Sensory marketing uses the five senses
of the brain touch, smell, taste, sight, and hearing. In my website I mainly use the sense of
sight to communicate with the audience. When the user will first see my color choice they will
offer a cool, elegant feeling. Combined with pictures and font preferences suggest an easy
reading experience for the viewer.

6.5.1. Visual Design of individual webpage
After structuring design elements it is time to show them all together in a visual design of the
webpage. Within this report I have shown the Home page of Da Massimo Pizza.
The homepage will be the first webpage the users will see when they log on as well as being
the first impression of the website. As you can see on the Homepage, I have chosen a picture
of Horizantal Square as Da Massimo Pizza required. It should be sliding between three to five
different pictures of Horizantal Square, to show the user different views of horizantal Square
and in order to make the user interested while they are visiting the website. All the other sub-
pages will use the
same design of the
background, header,
and footer. I do not
want to confuse the
user by complicating
the website with
different designs on
each of the pages.

6.5.2. Site development
We are very much familiar with the term design even in our daily life. We consume products or
services that are designed by somebody else or our self. People are designing things for
different proposes. What is design? Design can be interpreted in different way in different
context. Fact that, every finished design gives green light to go for construction of the project. It
is a plan about the specific object or system how it should be carry out in certain period of time.
The oxford dictionary has defined the term design like this A plan or drawing produced to show
the look and function or workings of a building, garment, or other object before it is made:-
http://oxforddictionaries.com/definition/design?q=design. This definition does satisfy our
understanding of design in web development. We do make sketch of the design and go through
the process and we start programming. Its not only we care about the visual design but also in
programming we make a structures of the file and functions and start coding. By invention of
global programming people develop cms system, without any programming knowledge people
can make webpage, also install or enabling plug-in/module can make more dynamic functional
website, blog, e-commerce website, personal portfolio, picture gallery, news site etc.
Design makes products, services attractive and system more user-friendly. In the web we can
find different levels of websites. We can observe that some site has rich visual design and
some have functionality. Some site has built considering both parts. It differs depending on
what target group has been chosen. The theme of the site should support the usability of the
site that is what we call interface design.
Interface design is to create an environment for the user who uses particular system or website
(In this case webpage). The interface we create is very important that it should satisfy the user.
In theory a good interface design should have clear connection to the target group and relevant
information. The following section explains in detail how damassimopizza.dk is structured.
I uses Drupal Kickstart E-commerce CMS for building and integrating this website. Below I
describe how I developed step by step
6.5.3. Home Page
Home page is most important for any type of webpage. When users visit they can understand
company activities or services, its also communicated visually with visitor. I made this website
with fully responsive design. When users visit this site from pc, tablet, smart phone almost
looking same all of content, flexible resolution mobile, pc, tablet version.
Here all content I am explaining step by step.
Top bar of page login/logout, Signup, Shopping cart and check out button. Because when any
customer want to order/buy food they have to login or register in our system. If any user click
login button then its going login page, in login page user have to write their user name and
password and, also they can send forget password request. If users are not existing member
they have to click create account button and its redirect to register page. In register page

users have to write their user name, email

and password, confirm password, its also
showing password strength, without admin
confirmation any user can make account.
In Header i added shop logo, address,

opening time and delivery costs. Where
customer can see at a glance all necessary
information about shop. And its also full
image and home page link click able, if
users in another page want to go to home
page just click on header.
Next I made menu in left side BestilOnline
button if user click this button they can go
all products page and they can choose
food. Another right side menu bar about us,
contact, comments basic content page.
After menu we have main picture slider

with sub heading. I added 5 picture for
slideshow, its always continuous sliding
also users can control their self.
Next step is popular products ad, small

image with sub headline its called ad push
module, if user click on ad, and its re-
directing to products page.
6.5.4. Products Page
When user click Bestil online menu, then

comes this products page, all products
are category wise, leftside shown all
products catagories, and right side all
products picture, name and price. After
choosing any one product then its goes
individual single product page.

6.5.5. Single Product Page
Inside single product page, user has lot of

user friendly function like picture, if user
hover mouse of picture, picture will show
zooming. Next is product name, price,
size, quantity and Add to cart button.
Users can also like this product with
social ntwork button.
After adding product to shopping cart its

comes new window popups, showing message your product successfully added.
6.5.6 Shopping cart Page
After adding all

products, you can see
all added products
details, like name,
price, quantity and
total. You can also
update product
quantity, remove
product etc.

6.5.7 Checkout Page

After update shopping cart you have to go checkout page, in address field all red star mark is
required field. User has to fill up all fields. Another required field I made for shop owner
requirement telephone field. Because if any user makes fake order, owner can contact by
telephone confirmation Order is true.
Checkout page we have two type address field,

one is Billing information and Shipping
information. User can use their same address
for shipping, just activating (My shipping
information is the same as my Billing
information) option. Either they can write
different address.
6.5.8 Shipping Option Page
After fill up Billing and

shipping field user has to
click continue to next step
button and next step is
shipping option. In shipping
option page we have two
options 1. Take away: 15
min.: 0 kr. And 2. Delivery:
30 min: 25 kr. Shipping
option also required option,
user has to choose one of
them and they can go next step.

6.5.9 Review Order Page
After selecting shipping option its comes Review Order page. Inside review order page user can
see ordered all products name, price, quantity, sub total price, shipping cost, and also total
price.
Next they can see Account Information, Billing Address information and Shipping Address
Information. After reviewing order details user has to choose one of payment method 1. Cash
on Delivery or 2. Pay by card.
If they choose Cash on Delivery, they can checkout/send order without paying instant of card.
Next step its shows your order is complete.
If they choose pay by card its going to epay (Danmark Payment Collection Company) payment
server and they have to write their card number, expire month, year and security code. After
payment complete order will send to shop.

7. After sending order what happen?

After order complete, shop owner and customer they both get order confirmation mail about
order. They can see details order, paid or not, take away, and also food item details.
8. Mail Setup:
1st. admin panel/store configuration developer has to be write their email address which email
address they want all order mail.
2nd Outlook express, Shop owner or Site developer has to be configure mail setup and
automatic mail checkup every 1 minute.
3rd in Outlook express developer has to make rules for incoming mail tone and print it. If printer
is connected with laptop or pc then they can get output.
*** Most important thing here internet and hosting company, if server is down you dont get
any mail from server, another thing pc or laptop has to be always internet connected otherwise
you also dont get any new mail.
9. Back-end Developing Admin Panel.

9.1 How I setup this webshop?
1st I tried different type of e-commerce cms system like, word press e-commerce, prestoshop,
magento, drupaluber cart and last I choose drupal commerce kickstartcms system.
Best advantage of commerce kickstart by default installed and enables all of module. Any
primary developer can build simple and dynamic webshop.
9.2 How I added products: 1st I login as an admin and go to the products menu and select add
product. Next comes new window products category, which category product I want to add new
product. Then I choose category pizza and comes new window.

9.3 Add New Product:

New add product window, I wrote product name in Title Box, next product description, next
attributes size, choose pizza size 30 cm. and attributes details price, choose product image,
and click save variation.
After that I want to add another size pizza with same name and description, after adding
variation I click new variation and choose 40 cm pizza size, price, product image.
Then I can setup different type of product catalog, comments enable or disable etc.
And click save button. See next page adding new product window.

9.4 Install New Module and enable: By default install all of kickstart commerce module, I
install new epay module and flat rate shipping module. Because my shop owner has only two
shipping option in local area for that I installed flat rate shipping module. And I configure two
shipping option 1. Take away 2.Delivery.
Next is Denmark local payment option. I install Danish epay module is verified Danish local and
international credit and debit card. Inside admin panel before enable epay module you have to
buy license from Epay Company, after that they give you one merchant number, one secure
word 3d MD5 number. If I put both number then its work properly.

9.5 Site Configuration: Another most important part in CMS system or webshop site
configuration. Like site information, mail system, front page, error page, cron, account setting,
rules etc. here I setup site name, slogan, error page and email.


9.6 Social Network Module: this is another module its connected this with social network, its
called OAuth connector. User can connect their site with social network like FaceBook,
Google+, Twitter.
10. Comparing between Drupal and Wordpress E-commerce
Drupal (Kickstart) Wordpress (E-commerce)

Homepage www.drupal.org www.wordpress.org
Web server Apache, Nginx, or Microsoft IIS Apache or Nginx
Database MySQL 5.0.15 or higher MySQL version 5.0 or greater
PHP PHP 5.2.5 or higher 5.2.4 or greater
Wordpress began as an innovative,
Drupal is a powerful, developer-
easy-to-use blogging platform. With
friendly tool for building complex
an ever-increasing repertoire of
About sites. Like most powerful tools, it
themes, plugins and widgets, this
requires some expertise and
CMS is widely used for other website
experience to operate.
formats also.
Drupal requires the most
technical expertise of the CMSs.
However, it also is capable of Technical experience is not
producing the most advanced necessary; its intuitive and easy to
sites. With each release, it is get a simple site set up quickly. Its
Ease of Use
becoming easier to use. If youre easy to paste text from a Microsoft
unable to commit to learning the Word document into a Wordpress
software or cant hire someone site, but not into Drupal sites.
who knows it, it may not be the
best choice.
Known for its powerful taxonomy Ease of use is a key benefit for
Features and ability to tag, categorize and experts and novices alike. Its
organize complex content. powerful enough for web developers

or designers to efficiently build sites

for clients; then, with minimal
instruction, clients can take over the
site management. Known for an
extensive selection of themes. Very
user-friendly with great support and
tutorials, making it great for non-
technical users to quickly deploy
fairly simple sites.
Pressflow: This is a downloadable
WP-SuperCache: The Super Cache
version of Drupal that comes
plugin optimizes performance by
bundled with popular
Caching Plug-ins generating static html files from
enhancements in key areas,
database-driven content for faster
including performance and
load times.
scalability.
For complex, advanced and
Ideal for fairly simple web sites, such
versatile sites; for sites that
as everyday blogging and news sites;
require complex data
Best Use Cases and anyone looking for an easy-to-
organization; for community
manage site. Add-ons make it easy to
platform sites with multiple users;
expand the functionality of the site.
for online stores
WordPress is available in more than
Multilingual more than 80 available languages
70 languages.
A single web site could contain
many types of content, such as
WordPress comes with default
informational pages, news items,
content types, but for more flexibility
polls, blog posts, real estate
you can add a few lines of code to
listings, etc. In Drupal, each item
Content Types create your own custom post
of content is called anode, and
types, taxonomies, and metadata.
each node belongs to a
Take WordPress in whatever
single content type, which defines
direction you wish.
various default settings for nodes
of that type
11. Conclusion of Implementation

Throughout this implementation, I have obtained a much deeper understanding of Drupal
Module system, both in theory and practice. The website is working properly and it has
matched the design and function requirements set forth by Da Massimo Pizza. However, while I
was creating the photo slide for Products which is on the middle of Home page, I realized it
require knowledge Jquery; which I have not been taught in school. Therefore I was not able to
make it exactly how I had wanted. While I was creating the site I spend a lot of time reading
theories. Also I realized I had no knowledge of Danmark payment system, Shipping option, after
visit many site I got idea, how to build that option final uses in my site. Also anther product
option like small pizza, big pizza variation attributes I made it. HTML and CSS so I found it very
difficult to write those files because it takes a lot of practices to gain confidence writing the two
from scratch. For instance using Notepad++.

12. Test and Refine

The testing is a very important process in the development of a website. The test consist of
both technical and target user oriented tests, and should pinpoint specific areas where there
are issues to be fixed. I have selected some tests which I found very valuable for reaching the
target of a quality website. Most of the tests are performed during the development process. It
is always best to detect a problem early in the process because it will be easier to fix. Other
tests are performed just before the release because they require the assistance of the
customer or since they require the website to be accessible online.
Control of Content Is the content accurate, understandable, and is spelling and grammar
correct. This test is meant to be performed by content contributors and content editors. This
test is being performed both during the actual building of the webpage, but also before the
release as a final quality insurance.
Links Are there any broken links. Broken links can lead to frustration for the user. This test is
done regularly because links can die because content is moved or deleted.
Browser, Operating System and platform test It is also important to test the website in
different browsers running under different Operating systems and resolutions. This test checks
if the website is displayed correctly in specific browsers. This test also very important if you
want to optimize for mobile screen resolutions, since they often shows WebPages in an
incorrect way due to their very small screen resolutions.
Other potential valuable tests for the future There are of course many other tests which could
be valuable to do. Websites which have a lot of concurrent visitors often make load tests,
where they try to simulate many 1000s of active users. This test can discover code which is
not optimized properly, but since my website does not have this requirement, I will not do this
very technical test.
Another potential test of the future is the test of Search Engine Optimization (SEO). When you
focus on SEO you want to make sure that all your WebPages are indexed correctly into search
engines like Google. If you have made your SEO properly you will improve your chances of being
found through search results. When you are testing SEO you normally check if the webpage
contains a wide range of important elements such as META information (Title, Keyword, and
Description), plus some other elements like page titles.

Mobile Screen:
Pc Screen:

12.1 Usability:
Usability is the most important thing in this project since its all about the user interaction. The
users are those who need to use the system and not the web developers, so optimizing the
system to the users need and create user-centered design which is a very necessary factor in
this project. This part will recovered together with the design decision in this project.
In this webshop I made responsive design, when user or customer browse this website from pc,
tablet and mobile design overall same for the website to become more usable. The idea of this
project is the users want to buy food via online at damassimopizza.dk and they can do so by
going to this webshop through a computer, tablet or mobile phone. Since the users
backgrounds are daily users of IT and therefore have better knowledge of using for instance
the World Wide Web than most.
12.2 Summary of Usability test
I think this is a very important design step and constantly test own design, whether it is from
the interface or interaction design, in order to reach what the user need and expect, I always do
the usability test. At the beginning I draw a lot of interface designing by prototyping on the
paper, then I brought the papers to discuss with a number of physically with customer and
shop owner, who are all exist customer related to ordering food via webshop. I got a lot of
useful feedback and suggestions from them, which really helped me to design my project.
During the project making process I made a lot of changes from my own thoughts and others
suggestions, such as how to order food every step like food category, food name, description,
quantity, size, price and delivery method, shipping information, payment option etc. how to
place the content of the WebPages..
Why do these tests? The reason is that as a web-developer should always understand users
demand, in other words web should be designed to enable the user quickly and easily have
access to the website, and follow the instruction of navigation and get the information that they
want. This is best way how I can optimize the design and the reason why I did so many the
usability tests. On my webshop I did with a dynamic function of processing on order by enabling
different type of module commerce, payment, shipping module. I think my design can directly
catch the users eyes and can directly show the user that the web I made is a social network.
13. Conclusion
This new design of the webshop made my client Damassimopizza.dk satisfied. Based on the
results from analyzing the client survey and documentations of the interviews, I defined the
Damassimapizza.dk target audience is local, therefore the website is written in Danish.
Advantages or disadvantage of real shop or webshop customer will get right taste of food, in
rush hour customer has to wait in long quae with passion. Other hand webshop; it's saving time
without hassles customer will get food whenever he wants.

According to the responsive theme for the website, I have chosen to use Drupal kickstart e-
commerce cms.
The entire project and process has been successfully completed. The conceptual object has
been translated into a webshop website. Different analysis has been done and methods are
adopted to run the project in right track. Many of existing and well designed sites has been
observed to make the best layout for this site. High priority has been given to appropriate
placement of the element and nice and tidy look. Unnecessary clutter has been removed and
images are used to increase visual attractiveness. Drupal E-commerce module (kickstart) CMS
focus was centered to result best user experience. All the function works accordingly .User test
has been conducted in between and end of the project. Feedback from the user test has been
applied to increase user experience.
In my webshop I have solved these problems so customer will not get confuse to order their
favorite food with category wise, delivery or take away time, payment options to pay cash or
card, and order confirmation email. From owners side, I made a system in outlook express
which check automatically mail in each minute, when new mail comes he will get mail sound,
also computer is connected with printer and by default it will automatically print the mail and in
the mail shop owner will get the information about customer order. So, both parties will be
secured.
14. Possible extensions

There is a lot of ways this system could be extended some are mentioned earlier in this report
so below I will list all the extensions I wanted to make if I had more time to develop it.
Product Display
Better function that actually gives users without any hassles categories products list. Like
thumbnail view, list view. In list view without image product name, description, quantity, size
and price, I think it is most users friendly.
Website timely close.

When shop is close, website has to be close everyday timely. This is also most important for
shop owner for uncertain order.
Customer freedom
When customers place their order, they can choose their own flexible take away or delivery
time.
Shop owner freedom

when customer place their order, shop owner has to be rights he can accept order or cancel
order. Also owner can choose flexible time like extend time or less time.

15. References
Beginning Drupal.
Author: Jacob redding 2010
Published by: Wiley Publishing, Inc.
ISBN: 978-0-470-43851-7.
Sensory Marketing
Author: Bertil Hulten, Niklas Broweus, and Marcus Wan Dijk 2009
Published by: Pal.rave Macmillan.
ISBN: 978-0-230-57657-5.
Teacher Homepage
Poul Henriksen: http://laerer.rhs.dk/poulh
www.Google.dk
w3school:http://www.w3schools.com

Author: Wanling Feng Thomsen Year: 2013

Author: Thao Pham Year: 2012

Author: Zhun Leo Year: 2012
Web style guide: http://www.webstyleguide.com/wsg3/1-process/index.html

Web Design Process: http://www.utexas.edu/learn/designprocess/
Kuler: https://kuler.adobe.com/#themes/rating?time=30
The Best Design: http://www.thebestdesigns.com/page/15/
Design Idea: http://www.blueidea.com/tech/graph/2009/6690.asp
Drupal: http://drupal.org/
stackoverflow:http://stackoverflow.com/questions/699847/umbraco-yay-or-nay
digital-web :http://www.digital-web.com/articles/seo_and_your_web_site/
usability : http://www.usability.gov/templates/wireframes.pdf
Drupal Tutorial:
http://www.youtube.com/watch?v=ViS2xFvnZwc
http://www.youtube.com/watch?v=RZcb32r-dHo&list=PL4ED4DE47B6EB5760
http://www.youtube.com/watch?v=MZlZ7qy0TEE

Bachelor Project, Webshop: Da Massimo Pizza Webshop

Uploaded by

Document Information

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Bachelor Project, Webshop: Da Massimo Pizza Webshop

Uploaded by

Copyright:

Available Formats

Web Development Final Thesis

Submitted by: Debashis Das Page 2

6.2.1 Project technical specification .............................................................. 15

6.3. 1st Interaction ........................................................................................... 16

6.4. Visual design ........................................................................................... 19

6.5.1 Visual Design of individual webpage ..................................................... 22

Submitted by: Debashis Das Page 3

6.5.5 Single product page................................................................................. 25

7. After Sending Order what Happen? ................................................................. 28

Submitted by: Debashis Das Page 4

Name: Poul Henriksen, E-Mail:pohe@easj.dk

3. Project vision and Goal

Submitted by: Debashis Das Page 5

4.1 Research questions

5. Analysis & Method

It is a very popular effective result oriented project development method. Theoretically, it is

Submitted by: Debashis Das Page 6

Submitted by: Debashis Das Page 7

5.2 Stakeholder Analysis

Submitted by: Debashis Das Page 8

5.3 SWOT Analysis:

5.4 Competitor analysis:

Competitor analysis is another step of the analysis. Though www.webshop.bcasdenmark.org is

Submitted by: Debashis Das Page 9

5.5 Risk Analysis and management.

5.6 Target group analysis

Submitted by: Debashis Das Page 10

6. The webshop and development process is as follows:

6.1.3 Client Interview

6.1.4 Target Audience

It is important to define my target audience because how I present my information has a

Submitted by: Debashis Das Page 11

6.1.5. Project Brief

Da Massimo Pizza Project Brief

Design a new version of webshop for Da Massimo pizza matching the

Current- complicate, duplication, not responsive also not functional.

Submitted by: Debashis Das Page 12

Da Massimo webshop fully dynamic and simple functional webshop, and it

Submitted by: Debashis Das Page 13

Submitted by: Debashis Das Page 14

6.2.1 Project technical specification:

Tools: HTML 5, CSS3, Jquery, Ajax and PHP

Style Sheets: CSS

Browser Compatibility: Internet Explorer, Firefox, Google Chrome, Safari.

Platforms: Macintosh, PC, Smart phone, Tablet.

Page Download Size: (typical page) 50 to 200k.

6.2.2 Developing the project plan

Layout & basic

Submitted by: Debashis Das Page 15

6.3 1st Interaction

6.3.1 Site structure and Information architecture

6.3.3 Content Outline

Submitted by: Debashis Das Page 16

6.3.4. Main structure of WebPages

Here is an example of the Home page of Da Massimo Pizza.

Submitted by: Debashis Das Page 17

6.3.5 Site Diagram

A site diagram is a representation an overview of the website structure. Da Massimo Pizza is

Bestil Online Kommentar Kontakt Om Us

Produkts Shopping Checkout

Submitted by: Debashis Das Page 18

Colors and Using contrast

Submitted by: Debashis Das Page 19