CHAPTER ONE

Introduction

Nowadays, a webpage is an important part of any business in our society (Nsairi 2013). It

serves as a reference, advertising and guarantee tool for partners, perspective and current

customers.

For automotive business, it is particularly essential to have a modern, efficient webpage,

because it reflects the quality of services offered. As Gardner (2013) states in his article,

information presented may vary, being the opening hours, contact details, specifications

of services and qualifications of the specialists. Furthermore, a webpage should comply

with company’s digital marketing strategy, whereby it provides business owners with

tools to control the customer flow cycles and analyse the effects of outside factors on the

business operations.

Goals, scope and constraints

The main goal of this project is to design a web page for Automagia automotive business

in order to increase company’s competitive advantage at the new location, attract

customers and keep old ones it is necessary to design a new web page, which would

comply with company’s Digital Marketing Strategy and provide customers with

necessary information about the services and guarantees provided. An example of Digital

Marketing Strategy element may be a company’s logo and social networks integration.

Information available for customers may be location details and photos of past successful

projects conducted.

The scope of the project is to provide the customer with a complete web page design,

ready to be implemented by the web developers. This would allow to include the best

practices of the current web trends and conduct surveys among potential customers in

order to determine whether the designed elements were successfully implemented.

1
Time constraint may be the most significant threat to the project, as the customer is eager

to provide potential customers with a new web page, while complete implementation

exceeds the scope of the following project.

2
 CHAPTER TWO

LITERATURE REVIEW

2.1 Web Design Fundamentals

The essential task of web design is provide the best user experience possible. Several

factors fall under UX, such as location of elements, color scheme, font of the text and

dynamic elements.

2.2.1 Website Types

Websites may be categorized depending on different factors, such as context. Plumley

(2013) identifies two main types, being static and dynamic web pages. A static website

presents ready content to the user, based on the files kept on servers. The very first

websites created were of static type. On the other hand, a dynamic website’s content is

based on data fetched from any source by a script or an alorithm. From the user’s

perspective this classification may not be significant, because it would be challenging to

determain which type of a web page it is.

The second main feature, which is helping at differentiating websites is the functional

purpose (Dix 2009). Web pages may serve as online-representation of businesses or

individuals, or trading platforms that aim at creating profit. Additionally, websites may be

news or information sources. The first group may be categorised as commercial or web-

representation, while the second one is information resource based.

Table 1: Types of websites

Website types presented in Table 1 provide general sub-division of commonly used online

platforms. An example of an eCommerce is Finnish tori.fi, where users and enterprises

may sell and buy items all over Finland. Facebook is an example of a Platform website

type, because it has a wide variety of functions, posts, comments and multimedia data.

3
2.2.2 Website Structure

Based on James Garrett (2010) identification, the structure of the site is a tree-like

hierarchical representation of all elements of the site, including information sections and

their subsections. Meaning, it is a web-resource base, which is subsequently filled with

text and graphic information.

Most web sources are built according to the block principle. According to Frain (2015), at

the top is a header, on the left - the menu, on the right - the block of advertising, in the

middle the information, and below (in the footer of the site) it is written - "Copyright - all

rights reserved".

The structure of the site can be complicated, with an additional menu under the header and

its duplicate above the footer. Also navigational links are placed on the right instead of

advertising. Location of elements depends on the purpose of the webpage. The following

structure is good for an information portal, since a lot of space is left for links of different

sections (Peterson 2013).

There are three main types of web site structure:

Linear Structure: This is the simplest structure of a web site, in which the data is not

divided into levels. All pages of such a web site are hierarchically equivalent and is fairly

simple to implement, but due to its simplicity its application is limited.

Figure 3: Linear structure of web components

Tree structure is the most popular type of structure. This is a universal structure, suitable

for web sites of various types. This structure is hierarchical, as it contains sections, which

in turn include several subsections and so on. Thus, different pages of the site have

different levels of nesting.

4
Figure 4: Tree-like structure of web components

Grid Structure: is the most complex of the structures. Its difference from the Tree

structure is that the user can navigate through the pages of the web site both vertically and

horizontally, i.e. between pages of different levels. It is often used for catalogues.

Figure 5: Grid structure of web components

The structure of a web page may also include text sections and various program modules,

such as voting, feedback form, etc.

2.2.3 Navigation

The navigation menu is a reflection of the structure of the site that the user sees when

visiting the page. Jon Duckett (2013) stresses the fact that the user should always be able

to see the so called guiding thread, which is the button to return to the previous section

(page). Also on each page of the site there should be a link - "return to home page". A link

to the feedback form is also required if the site involves interaction with the user. All these

links and buttons do not replace the menu, but only complement it, therefore enhancing

user experience.

Thus, the user should understand where he is and where he should move next.

5
Consequently, correctly placed links not only simplify navigation, but also may guide the

user to perform a certain action. For example, place an order, buy a product, download a

movie, etc.

There are several types of navigation:

 Menu

 Drop-down menu

 Search

 Page search

The menu is the most common navigation system, it is similar to the table of contents for a

book. The menu consists of short text active links to specific pages of the site. The menu

should be visible from any page of the website, then the user can utilise it at any time

(Sklar 2011).

Then, the drop-down menu comes to the rescue, i.e. when a person clicks on a link, several

additional links that describe the subsection are opened. Designer can place several menus:

one under the two others on the sides - right and left. If the web site is small, it is better to

limit the formation of the menu in the right column of the site, because it is convenient and

common for the user. On the right side, according to Joel Sklar, it is better to have the most

important links to sections, because this area is most visible on the site, possibly due to

user commonly seeing it because of the closing tab action.

Search form on the site is useful for large web pages, where it is physically impossible to

fit all the names of sections in the menu. The advantages of "searching" is that thanks to it

the user finds several texts in which the desired word was encountered, therefore has the

opportunity to become more fully acquainted with the information of interest.

The disadvantage of the search is that often there is a substandard sorting and in response

to the request is a heap of documents containing the search word (or phrase) issued in a

6
different context. This prevents correct filtering of the information and makes it harder to

capture.

2.2.4 Grid system

Modular grid is a layout system which builds a specific composition of the website.

Figure 6: Grid net example

In practice, modular grid is a set of vertical (in some cases horizontal) lines, to which the

main elements of the website are attached. Figure 4 shows, that all elements belong to certain

columns. Most modern webpages use the grid system.

One of the advantages of using a grid system is that it makes it easier to create a design

(LaGrone 2013). The process of arranging the elements on the page is therefore simplified. It

provides guidelines, which intuitively suggest the best way of arranging the elements. It also

allows to add new elements without overloading the design of the whole layout.

7
Another advantage of using the grid net is clear and fast layout. When front-end developer is

working on the web site based on the grid layout, he/she is able to use the ready-made CSS

generators to quickly create a complete layout.

8
2.2.5 Golden Ratio

The key indicator of the quality of web design is how naturally and easily it is perceived by

the users. The use of Golden ratio helps at making a web page functional and informative. It

is believed that this ratio generates harmony, which is why the rule of the Golden ratio has

gained popularity in art and design (Pilgrim 2010). The ratio is based on the mathematical

proportion, which forms harmonious relation between parts of the whole. It can be obtained

by dividing the whole into two parts, so that the ratio of the first part to the second is the

same as the ratio of the whole to the first part. The approximate value of the ratio is 1.6180.

Figure 7: Golden ratio example

For instance, if one side of an image has size of 300px, then the other side will be

300*1.6180, which is approximately 485px. The figure size values may then be divided by

the ratio to decrease in size further and further, as Figure 5 shows.

9
By using the ratio, it is possible to arrange elements on the page in a scientific way, locate

and determine the sight of the user and ultimately provide better user experience, which is the

end goal.

2.2.6 Typography

There are a lot of different font classifications. Some of them do not comply with others,

which makes it easy to get mixed up in them. The simpliest way to look at them is following

Stephen Boss (2016), whereby there are two distinct fonts: with serifs (antiques), without

serifs (grotesques) and all the rest.

Figure 8: Font types

The grotesques group includes handwritten fonts (they imitate handwriting or calligraphy),

monospaced fonts (as in typewriters or in the code editor), symbolic (icons, symbols, emoji)

and accidents - so called any decorative fonts for large inscriptions, headings and logos

(Shenoy 2016).

The size of font should be between 10 and 12 points for printed documents, and 15 to 25

pixels for web projects. According to Rob Huddleston (2017), this is based on the different

ways users perceive the information and the overall way a document or a webpage looks.

Perhaps, a problem is not solved by choosing a "beautiful" font, but using the correct

principles of typography. In a completed layout, the final result is affected not only by the

10
selected font, but also by its size, shape (for example, bold or italic), line spacing (leading),

spacing (letters), indents and margins. For instance, use of typographic symbols, long dashes

and color, composition, visual hierarchy, the presence of other graphic elements and much

more.

2.2.7 Color Theory

Color theory is the study of the way color is previewed by the user visually, psychologically

and symbolically. When designing a web page, colors have a primary role of creating the

atmosphere and connecting with the user (O’Grady 2017).

Artists and scientist have been trying to arrange the colors in a certain order, to separate the

basic and derived colors. Whereby yellow, blue and read are the main colors, mixing them

will produce all the other shades. In 1676 Isaac Newton has created a color circle, where

main colors were identified, being yellow, green, blue, indigo, violet, red and orange.

Figure 9: Newton’s color circle

11
Newton’s color circle, as shown in Figure 7, served as the base for future scientists and artist

to mix and understand the effect of color scheme on humans. Color harmony arose as a result,

being derived from color perception. Color harmony is a result of a balance of two and more

colors, as well as group of colors.

Therefore, colors affect users in different ways. For example, red and orange are warm

colors, while yellow stimulates for action, irritation (Lupton 2015). Cold colors, such as

purple, blue, indigo muffle and reduce irritation. Additionally, warm colors are perceived as

close to the user, while cold ones emphasize distance.

Furthermore, the color theory applies to everyday lives as much as web design. Northern

countries with a lack of sunshine often use warm colors in home decorations. While residents

of Southern countries, with lots of sunshine, prefer cold or neutral colors in their clothes and

interior. For better user perception of the color scheme of the web page, it is better to

combine colors which derive from the same bases colors and do not derive discomfort and

distract from consuming information.

2.2.8 User-Centered Design

The before discussed topics of design and usability combine under the term of user-centered

design. Its task is simply to provide the user with the best online experience possible,

whichever the task may be. A few examples of user-centered design include reducing the

amount of unnecessary and irrelevant information, reducing the number of clicks needed for

user to find information or using visually attractive elements such as graphics or animated

actions (Shneiderman 2016).

2.3 Digital Marketing Strategy

Digital Marketing Strategy is a term which may be described as a plan for achieving

company’s goals via digital services and using them in order to distinguish competitive

advantage (Peppard 2016). The Figure 8 below is a DMS map, which provides company’s

12
management and marketing team with pathways for specific actions necessary for particular

marketing techniques, that may be applied.

Figure 10: Digital Marketing Strategy map

A new web page design is a part of client company Automagia’s Digital Marketing Strategy,

aimed at increasing sales and widening the circle of permanent customers and partners. The

particular tasks received from the client regarding the website designed being aligned with

company’s DMS.

A web page is the primary tool for Automagia to communicate with its clients, therefore

design of it may affect the business directly.

Based on the information received from the client, the DMS is based on the following:

 The main aim is to attract new customers by having a web page with pleasant and

modern design, which appeals to the perspective customers.

 The average customer’s age may vary, but the need for website to reassure of good

customer service and work guarantees is definite.

 Automagia has a competitive advantage of specializing in VAG concern automabiles,

as well as BMW and Mercedes-Benz. It should be reflected in the design.

13
  Web page must have proper description and images for reassurance and search engine

findings.

 Web design must contain social network connectivity (Facebook and Instagram), so

that customer has an option of following the latest offers and updates of the com-

pany.

 Contact information and address must be clear and visible to unexperienced web user.

2. 4 Web Site Design

Before actually implementing a project, it is necessary to brainstorm and put together a plan

for the overall structure of the design. The design of a web page is itself based on the logical

structure of the information needed to be displayed for the viewer to see. Once the needs of

perspective users are clear, it is possible to orginize their online paths into a visual design,

with elements supporting each other and creating an overall pleasant user-friendly

experience.

2.4.1 Structure

Figure 11: Web site map

The website map for this project, shown in Figure 9, is clear and has an underlining idea of

enabling the user to access a necessary part of the web site with minimum amount of clicks.

14
Next, web site mock ups were created. Figure 10 consists of four pages with similar design

elements, but different content and data provided. Such technique allows for designer to

allocate space for parts of the web page, making use of architecture and logical flow of

information for the user to see. Additionally, the same web page design may not by applied to

mobile devices, due to a difference in position and context it is viewed. In Figure 11, it may

be seen, that the web site map structure is still used, but menus are allocated in a way of

accumulating the most important and relevant information at the fingertips of the user. This is

done due to the lack of perspective of the user on the web site and the fact that less time must

be spent on the mobile version to find the needed information. A specific design for a tablet is

not necessary, because both desktop and mobile versions are tablet friendly. Also, according

to Global Stats tablet market in Finland is only 7% of all devices.

15
Figure 12: Web page mockups

16
Figure 13: Mobile version mockup

2.4.2 Design Implementation

The implementation of the website design is possible once its underlining structure and

sketches are made. Such preparation work is not necessarily binding for the designer, but

rather helpful at orginizing ideas and functionality of the project in question.

Figure 14: Design result of home page

17
The design presented in Figure 14 is the proposed Home page for the client. Final

implementation included designing three menus being Home, Services and Contact page.

Figure 15: Design result of services page

18
Client’s requirements of following the Digital Marketing Strategy were met, through

applying the corporate color scheme, social network integration and User Centered design. A

perspective client may find the contact details of the company on each page, located in

website’s header and footer. Additionally, users may use submit-forms, whereby company

representative is to contact the user back with an answer to a submitted query. Figure 15

shows the Services page of website design, which follows the overall design structure while

providing client’s photos as proof of complexity and professionally of provided services.

Figure 16: Design result of responsive mobile version

Another requirement of the client and part of User Centered Design was website’s

responsiveness to smaller screens, such as mobile phones and tablets. Figure 16 showcases

the way design converts to reduce dimensions, while providing informative and simple

guidance for the user. Contact details, social networks and feedback form are all integrated

into responsive design version.

Additionally, while designing webpages, it is advised to consider site loading time, which is

directly affected by the amount of information and menu tabs. Nonetheless, including

Contacts page was a strategic decision, based on the assumption that even when provided

19
with phone number and address on other pages, user may find it easier to search for the

particular button. Most webpages follow similar logic, which is based on a thought-map of

internet users, therefore such functionality must be implemented.

Figure 17: Design result of Contact page

20
 CHAPTER THREE

RESEARCH METHODOLOGY

3.1 Survey

A survey was used in order to receive opinions of potential users of the website. The

condition was for test-users to be IT students and/or specialists in the technical field, to

acquire insights and professional feedback. The survey is demonstrated in Appendix 1.

3.2 Survey Structure

The survey used was based on the screenshots of old and new designs of the webpage for the

client. Recipients were asked to describe their experience based on particular questions. For

instance, the new and old color scheme and menu combinations were to be compared. Digital

Marketing Strategy was tested in form of social media integration, as well as confidence in

the company and its impact on overall experience.

Test users were asked to acquire information from the new website in mobile form and

compare its usability to the full-screen version. The answers received were brief opinions on

asked queries and comparison questions.

Interview questions to gather basic information, the most important is the specialization of

the subject (IT or Business), whether subject is a car owner and/or has he/she ever used or

looked for similar services.

21
 CHAPTER FOUR

DATA ANALYSIS AND PRESENTATION

4.1 Survey Results Analysis

The usability testing of the design by IT students and web professionals has proven a

successful project implementation. Most of the answers were positive about the design,

content and trend changes in the new version of the web page as per Figure 18 below.

The organization of objects on the page and navigation was found to be mostly improved. As

well as responsiveness and user confidence. It was brought up that no posts as well as blogs

were implemented, making it harder to share on the social media. Students highlighted the

fact that old design had no social networks integrated, while the new one contains multiple

links in places that remind the visitor. Additionally, the structure of the new web page was

considered “lighter” and therefore more user friendly.

Some have mentioned that new design has a smaller map then the predecessor. It may be

compensated by an address, which users plug-into their navigators. It is a solid improvement

nonetheless.

The mobile version of the project’s design was considered normal, as it is a common trend

and is necessary for implementation. All in all, the survey answers have shown an upward

trend it their content review and therefore confirm successful implementation of the project

on the user design level.

Figure 18: Graphical representation of the survey conducted

22
 CHAPTER FIVE

SUMMARY, CONCLUSION AND RECOMMENDATION

5.1 Summary

The project was set to design a web page for a local automotive business company. Some of

the tasks included following the new trends in design, implementing parts of client’s Digital

Marketing Strategy and testing the result through surveys.

Research conducted on the topic has proven to be useful, with multiple outcomes being used

in the final design of the web page. Development process included experiments and some

setbacks, which nonetheless allowed for progress.

The customer has approved the project result presented to be successful and useful. I received

no definite answer when software implementation will take place, but will most probably be a

part of it due to this project.

5.2 Conclusion

Through the following project, I was able to conduct a full product development cycle as a

web designer. The challenges which seemed critical and tough at first required additional

time and research.

Additionally, the particular part of research for the project has taken the majority of the time.

Conducting it, while documenting and keeping notes have provided me with experience of

independent academic work, which will surely prove to be useful skills in the future.

All in all, the project has challenged me professionally and time-wise. The development part

has taught me not to pause when something does not go as planned, continue developing or

better reading on the subject. As a learning outcome of the research and development work

conducted, I feel that this experience has made me better.

23
5.3 Recommendation

The customer has been presented with the findings and developments of this project. The

results were found satisfactory, according to own judgment and survey results. The client

may continue with the process of developing the new web page, which also may have to be

edited due to English-Finnish translation and additional text and multimedia the client may

request to be presented to the user.

24
References

Boss, S. Teague, J. 2016. The New Web Typography: Create a Visual Hierarchy with
Responsive Web Design. CRC Press.
Dix, A. 2009. Human-computer interaction. In Encyclopedia of database systems (pp. 1327-
1331). Springer US.
Duckett, J. 2011. HTML and CSS: design and build websites. John Wiley & Sons.
Dunlap, R. 1997. The golden ratio and Fibonacci numbers. World Scientific.
Fleming, J., Koman, R. 1998. Web navigation: designing the user experience (p. 166).
Sebastopol, CA: O'reilly.
Frain, B. 2012. Responsive web design with HTML5 and CSS3. Packt Publishing Ltd.
Gardner, B. 2011. Responsive web design: Enriching the user experience. Sigma Journal:
Inside the Digital Ecosystem, 11(1), 13-19.
Garrett, J. 2010. Elements of user experience, the: user-centered design for the web and be-
yond. Pearson Education.
Huddleston, R. 2017. Introduction to Adobe Experience Design. In Beginning Adobe
Experience Design (pp. 7-21). Apress, Berkeley, CA.
LaGrone, B. 2013. HTML5 and CSS3 Responsive Web Design Cookbook. Packt Publishing
Ltd.
Lupton, E., Phillips, J. C. 2015. Graphic Design: The New Basics: Revised and Expanded.
Chronicle Books.
Nsairi, Z., Khadraoui, M. 2013. Website Satisfaction: Determinants and Consequences on
Web-site Loyalty. International Business Research.
O'Grady, J. V., O'Grady, K. V. 2017. A Designer's Research Manual, Updated and Expanded:
Succeed in Design by Knowing Your Clients and Understanding what They Really
Need. Rock-port. Accessed on 15 November 2017. https://books.google.fi/books?
hl=fi&lr=&id=vGstDwAAQBAJ&oi=fnd&pg=PP1&dq=colour+the-
ory+web+design&ots=3fnx
8mJS6&sig=ifidwmSV4caCvTf1vccunkoCqOc&redir_esc=y#v=onep-
age&q&f=false
Peppard, J., Ward, J. 2016. The strategic management of information systems: Building a
dig-ital strategy. John Wiley & Sons.
Pilgrim, M. 2010. HTML5: Up and Running: Dive into the Future of Web Development.
O'Reilly Media, Inc.
Plumley, G. 2013. Website design and development. Hoboken, N.J.: Wiley.
Shenoy, A. 2016. Typography, Navigation, and Media Attributes. In Introducing Zurb
Foundation 6 (pp. 29-48). Apress.
Shneiderman, B., Plaisant, C., Cohen, M. S., Jacobs, S., Elmqvist, N., & Diakopoulos, N.
2016. Designing the user interface: strategies for effective human-computer
interaction. Pearson.
Sklar, J. 2011. Principles of web design: the web technologies series. Cengage Learning.

25
 APPENDIX
Website Design Questionnaire
The following is a series of questions regarding the new website design and it functionality
for a Thesis project.
1. Does following Website Design appeal to the potential customer? If so why?
2. Does the Website align with User Centred design?
3. Would you use the social button links such as Instagram to connect with this
business?
4. Are elements in the following webpage grouped logically?
5. Do composition and color scheme inspire confidence in the company and the service
it provides?
6. Does this design fall under responsive website configuration?
7. Does it provide sufficient information and usability?
8. May the new design be considered an improvement in comparison to the above
version?
9. Does this website version contain social network integration?
10. Would you please provide an email for statistical verification?

Thank You for your time.

26