Bali proposal by quyenpui

BALI

DIM3 - Group 1 - A1 Web Interface Design Team: Live Nguyen Mai Anh - s3360598 Tran Quoc Hy - s3357968 Le Thi Nguyet Minh - s3372661 Bui Xuan Quyen - s3372672

1.1. The Design Team 1..2. Project Introducion 1.3. Concept Outline 1.4. Project Scenario

10-11 12-13 14

3.1. What We Will Fix 3.2. New Features 3.3. Recommendation

54-57 58-59 60-62

2.Analysis

4.New Design

2.1. Bali Garden Beach Resort 20-24 Analysis 25 2.2. Branding Attributes 2.3. Current Website Analysis

4.1. Branding 66-72 4.2. Iconographic 73 4.3. Mock-ups and Style Guides

26-39

2.4. Competitors Analysis 40-44 2.5. Target Audience & Personas 45-49

74-124

TABLE OF COTENTS

3.Proposals

1.Introduction

4. New Design

3. Proposal

2. Analysis

1. Introduciton

I. THE DESIGN TEAM We are Live! The Spirit Live is a team of four enthusiastic designers. We represent endless energy of youth and the promises of new lives, new experiences. We paint the world with our imagination. We spark lives with creativity. We turn dreams into reality. The Promises Live, with a crazy love for arts and design, makes a promise to ourselves and to our clients that: Every creation is the finest creation. Every design is hatched with passion and perfection. We put life in every work and give it a unique identity. The Reputation Sine founded in 2011, as a team and individuals, Live has won more than 50 HDs* in various fields of design. Our products are recognized by top designers in the industry and published in multi-languages across countries. Some of our previous clients include: Albatros Hotel, Vespa Vietnam, Schmoelling&Froese Architects and many other interactive/identity/graphic designs. *HD: a version of Oscar in the Design industry

The Team

Mai Anh Project Manager Graphic Designer

Nguyet Minh Web Designer

Quoc Hy Xuan Quyen Interactive Designer Interactive Designer Copywriter

4. New Design

3. Proposal

2. Analysis

1. Introduciton

II. PROJECT INTRODUCTION Project Description: Clients: Bali Garden Beach Resort, Bali, Indonesia. Project: Redesign the Website for Bali Garden Beach Resort Project Timeline: From 17/10/2013 to 14/11/2013 On 17/10/2013, we had our first meeting with the representatives of Bali Garden Beach Resort to discuss about the resort’s website and how to improve it. After exploring the website, researching about Bali and knowing the resort through words and photographs, Live was mesmerized by the beauty of Bali and the Resort itself. We also found many interesting information about the Resort that inspires us to design the website’s interface. Understanding the client’s expectation for a beautiful and efficient website, inspired by the information and the beauty of the Resort, Live decided to depart on this journey: Designing the website for Bali Garden Beach Resort.

Project Goals: The goal of this project is making a new interface for the website of Bali Garden Beach Resort which fulfilled these criteria: ȩȩ Modern style with clean &beautiful look ȩȩ Efficient interactivity; Easy to use and understand ȩȩ Present the Resort’s values and services in the best way ȩȩ Attract attention from the audience

Project Timeline: 1st Consultation with client

Thurs, 31.10.2013, 1pm

2nd Consultation with client

Thurs, 7.11.2013, 1pm

Deliver Design Proposal

Thurs, 14.11.2013, 1pm

4. New Design

3. Proposal

2. Analysis

1. Introduciton

III. CONCEPT OUTLINE The concept for the website’s new interface is: New Experiences. ȩȩ

New experiences for the visitors when interacting with the website in term of function and images

ȩȩ

New experiences for the client when watching their in formation displayed in logical & interesting way

ȩȩ

New experiences for the designers when exploring new trends & inspirations

Design directions: Modern, Elegant, User Friendly and Unique.

IV. PROJECT SCENARIO Stated in the center of the beautiful landscapes of Kuta, Bali Garden Beach Resort is a 4 Stars Resort with international quality. Over 25 years of successful business, the Resort is ranked 18th over 160 hotels& resorts in Kuta and received great feedbacks from its customers. In order to promote and introduce the Resort to worldwide customers, Bali Garden Beach Resort has its own website providing detail information with an online reservation system. Ideally, the website also helps the Resort to get more customers. However, the website was complained by users as “not 4 stars quality”, “so complicated”, “boring”, “can’t understand” etc. As a result, Bali Garden Beach Resort decided to hire a design agency to redesign the website. Live is the chosen agency. In this Design Proposal, 4 designers of Live had worked together to produce the best solutions for Bali Garden Beach Resort’s new interface. In order to do that, we need to understand our client and audience. Therefore, we made researches and analyses on the Resort, the current Website and find the target audience. 15

2.Analysis

4. New Design

3. Proposal

2. Analysis

1. Introduciton

I. BALI GARDEN BEACH RESORT ANALYSIS Target Customers

According to tripadvisor.com, BGBRâ&#x20AC;&#x2122;s customers are usually: families, couples and businessman. In addition, the statistic also stated that Australians, Chinese, Japanese and Malaysians are the top 4 nationalities of the total tourists in Bali in recent years, followed by Europeans and Americans (Balihotelsassociation.com, 2013). If combine the ranges of ages of each nationality of people that have family, in love, are businessman together, we will have an average range of people from 20 to 60 years-old (Balihotelsassociation.com, 2013). Even though the number might not be precise, but it is appropriate enough to narrow down the age of the resort target customers. On the other hand, in order to travel to Bali and stays in BGBR, the customers must have appropriate budget. We made a small research on living cost, room rates and flight cost in Bali based on the room rate from BGBR (baligardenbeachresort. com, 2013) and travel budget of some travelers (lastworldtour.com, 2012), the result is: the average budget to visit Bali in 3 days for one person is $2000 upward. Therefore, people travel to Bali must be middle class upward. To conclude, the target customer of Bali Garden Beach Resort is around 20 to 60 years old comes from Australia, Asia Pacific countries, Europe, America and is middle class upward. 20

Strength ȩȩ

Online Reservation System: Online reservation system allows customer to book for their stay in the resort right at home > Fast and Convenient

ȩȩ Wide Choice of Suites and many Special Offers/Packages: This allows customers to choose the service that best suits their budget ȩȩ

Wide range of services and trusted partners

ȩȩ 4 Stars Resort, international quality with reasonable price

ȩȩ

Professional and friendly staffs

ȩȩ

Good reputation of Eco –Friendly Resort with excellent security system

ȩȩ

Located right in the center of many landscapes of Kuta Beach, Bali Island – the paradise of tourism Bali Island is one of the most visited tourist destination with world-class surfing and diving spots, a large number of cultural, historical, natural and archaeological attractions.

4. New Design

3. Proposal

2. Analysis

1. Introduciton

Weaknesses

ȩȩ

Brand identity is not strong enough due to lack of branding activities

ȩȩ

Website – being the main online communication medium – but isn’t well designed and organized to attract more potential customers or promote effective ly for the Resort.

ȩȩ

Lack of WIFI, it is only available for free at the boardwalk and pool areas of the Resort.

Opportunity ȩȩ In term of building the brand popularity, there are many opportunities for Bali Garden Beach Resort at the time being. ȩȩ 1st, Technology growth and IT development allow the website of the Resort to be accessed easily by anyone with a good enough phone, tablets, etc. Consequently, the Resort has bigger chance to reach a wider range of customers around the world. ȩȩ 2nd, Massive growth in social media users and its impact make social media a great tool to promote for the Bali Garden Beach Resort. The Resort can open Facebook/ Twitter account to come closer to potential customers. On the other hand, the Resort can also buy advertisement spaces in these social media to be more well-known between social media users. ȩȩ 3rd, the growth of travel websites provide many chances for the Resort to be recommended, mentioned and able to advertise itself (such as tripadvisor.com.au, Expedia.com.au etc.). These websites have large number of worldwide travelers, thus it is a great opportunities to get new customers from these website.

4. New Design

3. Proposal

2. Analysis

1. Introduciton

Threat ȩȩ ȩȩ

Hotels and Resorts in Bali Island, especially Kuta Beach Natural Disasters in Indonesia and Terrorism

II. BRANDING ATTRIBUTES

Professional and Friendly staff

Beautiful Views

Eco-friendly resort

Bali ambience

Diverse and High quality Services & Security System

Convenient Location

Relaxing & re f re s h i n g atmosphere

26 4. New Design

3. Proposal

2. Analysis

1. Introduciton

2 III. CURRENT WEBSITE ANALYSIS

Strength Content Many detail and useful information for the audience to not only knows about the resort but also about Bali.

4. New Design

3. Proposal

2. Analysis

1. Introduciton

Strength Content Two very useful pages are Travel Tips, which give tips to get visa for different types of travelers, and Bali Activities, which recommends places to go in Bali

Bali activities Travel tips

Strength Design Clear presentation, sections are separated clearly.

4. New Design

3. Proposal

2. Analysis

1. Introduciton

Strength Features There are 2 stand-out features that the current website has: ȩȩ 360 Virtual Tours : gives the audience a new experience to see 360 view of some spaes in the Resort ȩȩ “What’s nearby?” Widget in Map & Location: provides a map that shows ways to famous landscapes, trustworthy restaurants and hotels in Bali for travelers. The widget is also linked to tripadvisor.com for more advises for travelling in Bali.

360 view “What’s nearby?” Widget in Map & Location 30

Weakness Content ȩȩ

Copywriting Writing style is not interesting and friendly enough to capture reader’s attention. Even though using bullet points is a good way to show information quickly and avoid tiresome , but some specific content need better copywriting to keep the reader’s interest in the Resort , for example : the introduction paragraph in the home page need to be re-written to give good 1st impression

ȩȩ

Information architecture

Information is repeated many times, unnecessary or redundant Too many information are presented in one single page, which might cause information overloading, confusion and tiresome to the audience. Information is not well organized in categories (ex: left-side navigation bar) Reading flow is not designed logically and smoothly (ex: content in the homepage)

4. New Design

3. Proposal

2. Analysis

1. Introduciton

Weakness Design ȩȩ

Style Doesn’t present well the values of Bali Garden Beach Resort: relaxation; 4 stars quality; luxury; Bali Culture; etc. Doesn’t have a strong & interesting visual theme to attract the audience.

Weakness Design ȩȩ

Visual Clutter Even though information is shown in separated areas, the website can’t avoid visual clutter because there are too many boxes of information/ images, which are put in no particular categories/ relationships

No space to breathe 33

4. New Design

3. Proposal

2. Analysis

1. Introduciton

Weakness Design ȩȩ

Images Images are small and not well chosen – not beautiful. Uncomfortable experience: whenever opening an image another window pops out.

Weakness Design ČŠČŠ

Logo Logo isnâ&#x20AC;&#x2122;t used efficiently as an identity of the hotel. The logo is small and not stand-out in the website, which will be hard for the audience to remember the name, the brand of the Resort.

4. New Design

3. Proposal

2. Analysis

1. Introduciton

Weakness Function > Navigation ȩȩ

Many buttons in a same page (in both horizontal and vertical bars) can suffocate the audience with too many options.

ȩȩ

Buttons aren’t put in categories can cause confusion and make it difficult to navigate. There is no indicator to show which page the user is currently are at. Buttons are not consistent and change multiple times in different pages. Both can make the users fell lost, frustrated and leave the website.

Weakness Function > Usability It is hard and uncomfortable to use the current website of Bali Garden Beach Resort, for these reasons below: 1. Inconsistent navigations -> confuse the user 2. New windows opened when view images -> occupy the user’s desktop screen -> annoy the user 3. Use PDF files for online reading. PDF file has different customization than the website -> difficult to navigate, break the using flow of the website 4. Too many long forms for reservations -> cause boredom and frustrations 5. Many links can’t be opened because HTPPS server has expired certificate -> user can’t access to the information needed 6. No search bar ->make it harder for the user to find information needed

4. New Design

3. Proposal

2. Analysis

1. Introduciton

Opporturnity The website can maintain views from old customers of the Resort because it provides many useful and detail information, but this only happens if the services in the Resort had satisfied the customer and made them wanted to use those services again or try other ones. In this case, the website can also gain new audience from friends and family of the old customer. Even though the current website might be hard to use, but great reputation of the Resort and useful information in the website will help it gains more viewers and new customers. On the other hand, among other competitorsâ&#x20AC;&#x2122; websites, Bali Garden Beach Resortâ&#x20AC;&#x2122;s website is one of the few that has 360 Virtual Tours feature. If this feature is improved with better interactivity with the 3600 view of more spaces in the Resort, it can be a promotion tool and draw more audience to the website.

Threat Since the usability level of the current website is quite low with many deficiencies (as mentioned in the Weakness section), it is hard to get new customers for the. Resort through the website. First-time users will probably be confused and get lost in it; consequently, they won’t do further exploration about the Resort through the website to come to the decision whether to book a service or not. Furthermore, the design of the website is not attractive enough to keep the audience’s interest. It also doesn’t reflect the 4 stars quality of the Resort, which might make the audiences doubt about the real quality of this Resort at the first impression, and as a result, they go looking for another hotels/ resorts. In a nutshell, there is a great chance that the website will lose many audiences to better-designed websites of Bali Garden Beach Resort’s competitors.

4. New Design

3. Proposal

2. Analysis

1. Introduciton

IV. COMPETITORS ANALYSIS Competitors of Bali Garden Beach Resort are other hotels and resorts in Bali Island. In this section, we choose 4 websites of those competitors to see what are good/ bad in these designs, to learn from them and to make a suitable design strategy for Bali Garden Beach Resortâ&#x20AC;&#x2122;s Website so it can stand out.

Villa Helen Bali – 3 Stars Villa

Visual design:

ȩȩ Clear, clean and simple, consistent with minimal style but a bit boring ȩȩ Brand name is clear and stands out ȩȩ Easy to navigate and identify needed information ȩȩ Reservation interface is well designed ȩȩ Big and high resolution images

Feature:

ȩȩ Google map for finding location is used effectively ȩȩ Search bar

<http://www.villahelenbali.com/>

4. New Design

3. Proposal

2. Analysis

1. Introduciton

St. Regis Bali Resort – 5 Stars Resort

Visual design:

ȩȩ Slideshow with motion clips is interesting ȩȩ Gallery has videos and live webcam ȩȩ Buttons with drop menu are poorly designed; look quite messy.

Feature:

ȩȩ Room Reservation is decided based on the view ȩȩ Have language options

<http://www.stregisbali.com/> 42

Fontana Hotel Bali – 4 Stars Hotel ȩȩ ȩȩ ȩȩ ȩȩ ȩȩ

Visual design: Big background photographs of a same concept interesting, make the viewer want to see the rest of the photographs Interesting way of placing logo Simple and organized Information Architecture Background relates to the topic of the page Some text can’t be seen because of the background

<http://www.fontanahotelbali.com/> 43

4. New Design

3. Proposal

2. Analysis

1. Introduciton

Bali Mandira Beach Resort & Spa – 4 Stars Resort ȩȩ ȩȩ ȩȩ ȩȩ ȩȩ ȩȩ

Visual design:

The background image and slideshow appear at the same time is very distracting Sometime the logo disappear in the background Inconsistent style among pages and navigations make it hard to use the website Using gradient background make the website luck cheaper Logo design is complex and childish – not suitable for a luxury Resort. Slideshow has nice animation

<http://www.balimandira.com/>

V. TARGET AUDIENCE & PERSONAS Target audience: The audience of Bali Garden Beach Resort (BGBR) WEBSITE can be identified by 2 factors: 1 – they must be internet user, 2 – They are planning or having the intention to go to Bali. There is a great chance that one with these two factors will come across Bali Garden Beach Resort’s WEBSITE while searching for place to stay in their Bali trip. ȩȩ

Factor 1 – they must be internet user. According to the demographic research on internet user made by Pew Research Center (2013), the demographics pattern of internet user has the majority of people that: ȩȩ Are High School to College Educated (over 90% of them use the Internet) ȩȩ Live in urban and suburban areas, however, people lives in rural areas also use internet moderately (around 80% of them use the Internet) ȩȩ Age from 18 to 49 (over 90% of them use the Internet)

ȩȩ

In factor 2 – they are basically BGBR’s potential customer: who is around 20 to 60 years old comes from Australia, Asia Pacific countries and is middle class upward.

When combining the result of the above 2 factors, we have the target audience for BGBR’s WEBSITE. Who is around 20 to 50 years, middle class upward, has High School Edu cation or more and comes from Australia, Asia Pacific, Europe, and America. In order to serve this wide range of audience, Live is looking for a design style that is mutual and appropriate for audience with different background. Base on the age range, and education level, because they are all young adults or adults , Live will use a mature style , which is modern, clean and clear . On the other hand, acknowledge of the audience’s requirement to be attracted to the design, we will use creative design with beautiful elements and interesting interactivity (such as buttons, photographs, shape and colors) to capture the audience attention. In term of usability, Live will also make sure that the interface is simple enough for the audience to navigate and find information. 45

4. New Design

3. Proposal

2. Analysis

1. Introduciton

Akimoto Kumiko ȩȩ

52-year-old, Japanese, Female

ȩȩ

Retired, Lives in Osaka, Japan

ȩȩ

Used to be geography high school teacher

ȩȩ

Settled down with her big family

ȩȩ

Passionate with Jazz, cooking and social activity

Akimoto loves travelling; she has visited French, Egypt, Greece, Italy and many other countries in Europe. This autumn, she is looking for a different destination, somewhere energetic, exotic and tropical. She looks up in the Intern et in order to research and consider her choices. Some of Akimoto friends recommended her to go to Bali – one of the most beautiful islands in the world. Akimoto goes searching about Bali in the Internet and immediately fall in love with this island. She decides to go to Bali and is looking for a hotel. While going through some hotel websites in Bali, the Bali Garden Beach Resort website attracts Akimoto by the modern and beautiful look with user-friendly interface. She can easily find the information needed and knows more interesting facts about Bali. The next day, she introduces the website to her husband and family. Through the website, they can see photographs of the resort as well as its prices. They all love the rooms, and the prices match their budget. Therefore, Akimoto decides to stay in this resort on her Bali trip, she books the family room on Bali Garden Beach Resort website.

Felix Woodman ȩȩ

24-year-old, Australian, Male

ȩȩ

Businessman, Financial manager in Myer Company in Brisbane

ȩȩ

Loves Asian food and Mozart

ȩȩ

Currently single, lives in an apartment

Felix has a business abroad in Bali, Indonesia but the company didn’t arrange a place for him to stay. Therefore, he is searching for some hotels/resorts that he can stay during his trip. Felix want a comfortable room with great view, he also looking for using some spa services while spending his time in the hotel. His co-workers recommend him to Bali Garden Beach Resort because he has stayed there before and were very satisfied. As a young & modern businessman, Felix is absolutely comfort with the Internet, so he goes looking for information about this Resort on the website. He is amazed by the 360view gallery and he finds the view from Bali Garden Beach Resort fantastic. When looking for the spa service, to save time, Felix searches for it in the search bar of the website; he is very happy that it directed him instantly to the information needed. Finally, Felix decided to stay in Bali Beach Garden Resort, he reserved his room online through the Reservation page.

4. New Design

3. Proposal

2. Analysis

1. Introduciton

Christine Xuan Nghi Nguyen ȩȩ

30-year-old, Vietnamese, Female

ȩȩ

Fashion designer

ȩȩ

A beach lover and enjoys classical music

ȩȩ

Born in Toronto, Canada

ȩȩ

Just married and moved to Vietnam since 2008

Christine married with her Vietnamese husband in Vietnam and wants to have a sweet honeymoon oversea. Bali Island is her dream honeymoon destination since she was a teenager. Therefore, Christine goes straight to the Internet to look for a resort for the honeymoon. She want a romantic place with beach view and beautiful rooms, she is also looking for some activities for her husband and herself to do together. After going through many website of hotel/ resort in Bali, Christine stops at the website of Bali Garden Beach Research. She liked the interface very much, as a fashion designer, the design of the website really matches her taste: modern, simple but still attractive. Thanks to the information in the Homepage, Christine is very pleased to know that the resort is stated right in Kuta beach so she can watch the sun set and have dinners on the beach with her husband. There are also many couple massage services in the Beauty Services page which Christine wants to try with her husband. She discusses about it with him and after that she immediately booked couple room for their honeymoon. 48

Eric Lee ȩȩ

21-year-old, Singaporean, Male

ȩȩ

University student, Hospitality major

ȩȩ

Love Dancing, KPop music, Camping, Experiencing new things.

ȩȩ

Currently lives with parents

Eric wants to spend his vacation with his family on his semester break. He really wants to enjoy the trip with his parents and little sister but they have different time schedules. So he want to find somewhere near Singapore to save travelling time. He looks for some places in Google and decides to go to Bali. Eric wants a place with reasonable price so he only looking for the room price in every hotel website that he found. When visited Bali Garden Beach Resort website, Eric can find the room prices easily thanks to the search bar in the website. He checks the gallery and the beautiful photographs of the resort facilities as well as the beach views capture his eyes immediately. Because the price is affordable, Eric shows the website to his family, together they look for more information and really like the tours that the Resort offers. Consequently, agreed by the family, Eric books the family room in Bali Garden Beach Resort.

References Baligardenbeachresort.com, 2013, ‘Book Your Room Now and Get Instant Confirmation - Bali Garden Beach Resort - Room Rates’, reviewed 31 October 2013, < https://www.baligardenbeachresort.com/rates.html/ > Balihotelsassociation.com, 2013, ‘Bali Hotels Association - Visitor Statistics’, balihotelsassociation.com, reviewed 28 October 2013, <http://www.balihotelsassociation.com/media-centre/stats/> Pewinternet.org, 2013, ‘Who’s Online: Internet User Demographics | Pew Research Center’s Internet & American Life Project’, 19 May, reviewed 31 October 2013, < http://pewinternet.org/Trend-Data-(Adults)/Whos-Online.aspx/> Tripadvisor.com, 2013, ‘Bali Garden Beach Resort (Kuta) - Hotel Reviews – TripAdvisor’, tripadvisor.com, reviewed 31 October 2013, < http://www.tripadvisor.com/Hotel_Review-g297697-d1197452-Reviews-Bali_Garden_Beach_Resort-Kuta_Bali.html/> Worldtour, L, 2013, ‘BALI TRAVEL TIPS: Costs of Budget Travel Around Bali in 2012’, 4 October, reviewed 31 October 2013, <http://www.lashworldtour.com/2012/10/bali-travel-tips-costs-budget-travel-bali-2012.html>

3.Proposal

4. New Design

3. Proposal

2. Analysis

1. Introduciton

I. WHAT WE WILL FIX After analyzing the resort, the current website and its competitors as well as targeting the audience of the website, we propose to fix the website as following:

Rewrite the site map to make better information architecture for the website, with information being categorized in logical order. As a result, user will be able to find the information quickly and easily.

Welcome

about us

accomodation

services

reservations

introduction

testimonial

prices

caretaker

special offer

tours

rooms

bar and restaurant

and certificates

is clicked,a new page

superior

third navigation

wedding

360 view0

men

beauty service travel tips

Main navigation

and location

tours

swimming pool

When a navigation

second navigation

map

rooms

villas

will be opened

beauty service

partners

awards

gallery

deluxe

visa

family

Bali hotspots

women package pleasure couple package reflexology

4. New Design

3. Proposal

2. Analysis

1. Introduciton

We will redesign the wire frame of the website to put buttons and display information & images appropriately and consistently through all the pages of the website. This will help the user use the website much easier and more comfortable. The information in the website will be revised for better copywriting. There will be chances in writing style and word choices to best capture the target audience’s attention. For example :

Instead of this original writing for Introduction:

“Experience the perfect seaside holiday at the Bali Garden Beach Resort. Located right on the beach, next to Discovery Shopping Mall, across the road from Waterbom Park and a short stroll to the Matahari Shopping Square and the Seni Art Market, the resort is the most convenient place to stay. With three swimming pools, four restaurants, four bars and a spa, plus the style, service and warm welcoming smiles that make Bali famous, the Bali Garden Beach Resort offers fantastic value in a stunning oceanfront location.” We rewrote it to:

“Halo! Welcome to Bali Garden Beach Resort. This is the place for you to spend the best time in Bali Island. Located in the heart of Kuta Beach, our resort not only offers you stunning views from your room’s window but also gives you chances to experience Bali’s culture and visit many near-by landscapes. With 4 stars quality services, we have had over 25 years of successful business and bought joy & satisfaction to customers across countries. Let’s us bring you a wonderful time as well!”

We will design the Reservation forms to make them simpler and cost less time to finish. In fact, we will combine all Reservation forms into one form, whenever the customer needs to book a service they will be directed to one Reservation Page to fill in the form. The customer can also click on the reservation button directly to book services in one single page. We also redesign the identity of the resort in order to best represent the resortâ&#x20AC;&#x2122;s values through this identity design. The old Logo, as mentioned in the analysis, is a weak and unprofessional design. Therefore, it is necessary to make a new-and-better Logo for the resort since the logo represents Bali Garden Beach Resort in every spectrum of visual communication.

The grid system used for the mock-ups will be 960px since this is one of the most useful grid systems for website design. On the other hand, the number is divisible by many numbers which makes it easier to design the website layout for many screen resolution. We also suggest building the website with responsive design & grid system so the design can fit with any screen resolution.

We will change the visual scheme of the current website with different color schemes, font types, different styles and other design elements. This is in order to attract the audience with beautiful and clear interface. All of these changes are to make sure that we can achieve the projectâ&#x20AC;&#x2122;s goals of this project - making a new interface for the website of Bali Garden Beach Resort that fulfilled all the criteria for a user-centered design.

4. New Design

3. Proposal

2. Analysis

1. Introduciton

II. NEW FEATURES Live believes that adding these features below to the website will make it much easier for user when using the website. These features are made upon the user-center design approach – take the user as the center of the design in order to serve them best. ȩȩ

Search Bar This is a very necessary feature that almost every website has. As a matter of fact, search engine sometime can be more powerful than navigation, it save our visitors’ time by allowing them find information easily and quickly.

ȩȩ

Bali Hotspots This is an updated version of the current website’s “Bali Activities” page, which is put in the “Travel Tips” category. Bali Hotspots provides useful advises to travel in Bali Island: special places to visit, DOs and DON’Ts in Bali, things need to try in Bali, etc. This feature will be an attraction for the website to get more, once the viewers like the information provided they will like the website and the resort as well.

ȩȩ

Language options feature Website information is needed to be written in language that its target audience could understand. The resort serves international customers from all over the world. According to our target audience research, customers of Bali Garden Beach Resort come from different countries with different languages. Therefore it is a good idea for the website to have language options feature so everyone can understand and get the information needed.

ȩȩ

Quick Reservation We will make the reservations in the website much quicker and easier by only require the customers to fill their information once, in the first reservation. In the next reservations for other services they will only need to provide their passport number/ ID then the managing system will automatically recognize this customer and retrieve further information provided in the 1st reservation.

24 59

4. New Design

3. Proposal

2. Analysis

1. Introduciton

III. RECOMMENDATIONS ȩȩ

Website’s size We suggest building the website with responsive design and grid system so the design can fit with any available screen resolution nowadays. This will help the website to maintain the visual scheme in different resolutions, as a result, the viewer will see the website with its original design and intend.

ȩȩ

Bali festival tours The website should establish festival tours during local holidays in Bali such as Saraswati (January 12) or Tawur Agung Kesanga (March 11). The point is to introduce to tourists the unique culture in Bali with the high quality service from the resort. Consequently, they will decide to purchase services in the resorts in these certain occasions. The festival tours can be reserved in the Reservations on the website.

ȩȩ

Gallery with diverse and beautiful images The website needs more images that are big, high quality and beautiful photographed in order to capture the viewer’s eyes. The gallery needs to provide more images of different services in the resort and images needs to be presented in better interaction rather than open up a new window when a photo is clicked. In this proposal, we use slideshows and other techniques to show the photographs.

ȩȩ

Copywriting: It is also recommended that the content on the website should be rewritten to best match the customer’s interest. The current website, even though has useful information, only states the facts while not paying attention on the writing style which can make the reader enjoy reading.

ȩȩ

Contact page The page should provide more information to contact the resort easily: phone numbers, fax numbers, addresses of the resort or representative agencies in different country.

ȩȩ

Flights information The website should provide information of flights to Bali, in order to help the customer reserve their rooms/ services in the Resort in appropriate days. It will also keep the customer on the website rather than go looking for flights information in other website.

ȩȩ

Welcome Page & Video introduction There should be a welcome page when the viewer first visited the website. The page should include a short and fancy introduction about the resort or show a short introduction video to make the viewer interested.

4. New Design

3. Proposal

2. Analysis

1. Introduciton

3 ȩȩ

Naming The current name of the resort is quite long and not memorable enough. The name should show the resort’s quality, should be short and unique to make the customer remember. However, having “Bali” in the name is a good strategy since when the customer looking for Bali-related topics, the resort name will likely to appear in the search result.

ȩȩ

Social Network We recognize that the resort has a Facebook account; however, it is not updated frequently and doesn’t interact well with the viewer on Facebook. Social Network has a huge impact on people lives nowadays, almost everyone uses social network and relate a lot on it. Therefore, the resort should update its Facebook page frequently with news and special offer. On the other hand, since part of Bali Garden Beach Resort’s customer is from Europe, it is necessary to have a Twitter account also (European uses Twitter more than Facebook). Additionally, the Resort can buy advertisement space in these social networks to promote for itself effectively.

ȩȩ

Change Server Some of the pages in the current website can’t be opened because of the expired https server. The Resort should have an IT technician to fix problem or simply change the server. Or else, the viewer can’t get access to the information needed and they will choose another website - another hotels/ resorts.

4.New Design

4. New Design

3. Proposal

2. Analysis

1. Introduciton

I. BRANDING Live designed a new logo for the Bali Garden Beach Resort

The LOGO is the image of a Bali dancer wearing a cultural flower hat. It represents the culture of Bali with popular dances like Kecak Dance, Legong Dance and the Bumble Bees Dance. The flower in the hat shows a beautiful traditional aspect in Bali- where flowers are respected and used in every kind of ceremonies. We used Bali traditional flower â&#x20AC;&#x201C; the Jasmine â&#x20AC;&#x201C; as the inspiration for the hat of this Logo. Additionally, the Jasmine is also used to decorate the hat for the dancers.

4. New Design

3. Proposal

2. Analysis

1. Introduciton

By using those traditional elements, we believe the LOGO will attract the viewers because they are looking for visiting Bali to see and experience the culture. On the other hand, the smooth and soft stroke along with and thin typeface bring an elegant and luxury feeling to the LOGO, which represents well the 4 stars quality of the resort. The LOGO looking light and delicate also suggests the relaxation and refreshing feeling of a resort.

Existence-Light 71

4. New Design

3. Proposal

2. Analysis

1. Introduciton

Overall, this new LOGO can represent the Resortâ&#x20AC;&#x2122;s values as well as meet the viewerâ&#x20AC;&#x2122;s interest. Below are some color variations for the LOGO that can be used in different designs:

II. ICONOGRAPHIC We also designed a set of icons, which can be used for different purposes (brochures, poster, websiteâ&#x20AC;&#x2122;s buttons, etc.). We believe that the icons will make the design look more interesting and professional.

74 4. New Design

3. Proposal

2. Analysis

1. Introduciton

4 III. MOCK-UPS & STYLE GUIDES

Mai Anh

Wireframe Welcome

Wireframe About us

Wireframe Accommodation (SUITES)

Wireframe Reservation (BOOKING)

Wireframe Gallery

Mock - ups Welcome

Mock - ups About us

Mock - ups Suites

Mock - ups Booking

Mock - ups Gallery

Style guide ȩȩ

Style Minimal. Refreshing. Clear & Simple The website uses vertical direction for all text blocks so the audience can adapt to it easily and get comfortable to all the pages. The tone of the design is light and bright with whitespaces and minimal elements. It is simple enough to make it easy for the users to use the webpage, yet still transfers the refreshing atmosphere of a beach vacation in Bali. On the other hand, the website can keep the audience interest with beautiful background image and interesting navigation system.

ȩȩ

Font A harmony of Sans- serif and Serif fonts. The Sans-serif font is light with thin stems, round shapes, which makes the design looks modern and elegant at the same time. In addition to that is the serif font with subtle curves, thick and thin stems, which looks classic and familiar in reading materials. All together, they are a good combination for readability purpose and also match the design’s aesthetic. Existence –Light:

ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghIjklmnopqrstuvwxyz Adobe Caslon Pro:

ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghIjklmnopqrstuvwxyz 86

ȩȩ

Color Pallete Orange – White – Blue– Grey The color scheme takes inspiration from the sea color pallete with pale blue as the theme color and dark orange as the complimentary color. The orange color is taken from the logo to keep the color harmony in the design. The combination of blue and orange expresses the refresh air of the sea and the energetic atmosphere of a tropical island.

R: 192 G: 72 B: 8

R: 79 G: 81 B: 84

R: 130 GT: 203 B: 205 O: 60%

R: 125 G: 125 B: 129

R: 225 G: 225 B: 225

HEX: C04808

HEX: 4F5154

HEX: 82CBCD

HEX: 7A7D81

HEX: FFFFFF

Guide: Header: font - Existence –Light, style – capital; color – orange/ blue Main Navigations’ names: font - Elegant –Light; style – capital; color – orange. When clicked: size – bigger size than normal 2nd Navigations’ names: font - Elegant –Light; style – capital; color – white/ orange When clicked: color – grey/ orange Text: font – Adobe Caslon Pro; color – Grey Link: font - Adobe Caslon Pro; style – underline, color – Grey. When clicked: Orange 87

Quoc Hy

Wireframe About us

Wireframe Accommodation

Wireframe Reservation

Wireframe Gallery

Mock - ups About us

Mock - ups Accommodation

Mock - ups Reservation

Mock - ups Gallery

Style guide ȩȩ

Style Modern. Neat. Luxury. The design uses image background with blocks of text standing out in the whole visual scheme. Icons are also applied for navigations.

ȩȩ

Font Sans-serif fonts. Light. Thin. The typographic system can show the elegant and luxury feelings of the hotel but also illustrates the hotel’s modernity by using sans-serif fonts. In readability aspect, even though the fonts are light with thin stems, they are totally readable when put in a clear surface of color blocks. Existence –Light: used for Header

ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghIjklmnopqrstuvwxyz Elegant –Light: used for Navigation (Buttons) ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghIjklmnopqrstuvwxyz Proxima Nova Alt Condensed: used for Body Text

ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghIjklmnopqrstuvwxyz 97

Style guide ȩȩ

ȩȩ

Color scheme Orange analogous. The colors strictly follow the hue of the logo; therefore, create a harmony color system in the whole design. Additionally, the color scheme also reflects the Indonesian’s culture in related to its traditional costume; orange analogous with warm colors brings the feelings of a tropical atmosphere to the viewer – which they are looking for in Bali.

R: 236 G: 179 B: 139

R: 105 G: 43 B: 0

R: 232 G: 95 B: 0

R: 105 G: 61 B: 31

HEX: ECB38B

HEX: 692B00

HEX: E85F00

HEX: 693D1F

Guide Icons for Main Navigations: Normal – grey Orange Icon indicates the current page. Icon for 2nd Navigation: Normal - brown (692b00) Header: font - Existence –Light; color - e85f00 & b54a00 Main Navigations’ names: font - Elegant –Light; color – white 2nd Navigations’ names: font - Elegant –Light; color – black Text: font - Proxima Nova Alt Condensed; color – black & 692b00 Link: font - Proxima Nova Alt Condensed; color – e85f00

R: 181 G: 74 B: 0 HEX: B54A00

Nguyet Minh

Wireframe About us

100

Wireframe Accommodation

101

Wireframe Reservation

102

Wireframe Gallery

103

Mock - ups Welcome

104

Mock - ups About us

105

Mock - ups Accommodation

106

Mock - ups Reservation

107

Mock - ups Gallery

108

Style guide ȩȩ

Style Minimal. Modern. Flat design Blocks of texts and images are used in the design to best display the content of the website in the easiest way for the viewer to read and scan for information. Simple elements used in harmony with icons provides an interesting & confortable experience for the viewer when exploring the website. On the other hand, the minimalism style also portraits the professional and luxury aspects of the resort.

ȩȩ

Font Sans- serif. Modern Roboto font is used for all of texts in the website include navigation, headlines, subhead and the body text. The font has straight, thin and light strokes that are very elegant, clean and modern therefore it fits the design’s aesthetic. Moreover, using Roboto typeface can generate the consistent within the website because the letters have square corner and which match the square elements in the design Roboto

ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghIjklmnopqrstuvwxyz

109

Style guide ȩȩ

ȩȩ

110

Color scheme Orange analogous The main colors in the design are orange – white – grey. To follow the minimal style, subtle colors are used to keep the design simple, clean and clear while stills keep the modern touch of it. Orange is used as the standing out color to make the design looks lively and also to match the color of the logo.

R: 217 G: 121 B: 26

R: 216 G: 120 B: 24 O: 60%

HEX: D9791A

HEX:E5A370

R: 191 G: 212 B: 229 O: 20% HEX: DDDCDB

R: 225 G: 225 B: 225 HEX: FFFFFF

Guide Icons for Main Navigations: Normal – white Orange (D9791A) Icon indicates the current page. Header: Style- Capital, Italic; color – white Sub-Header: Style- Lowercase, Italic; color – white Main Navigations’ names: style – lowercase; color – white. When clicked: color- orange (D9791A) 2nd Navigations’ names: style – lowercase; color - orange Text: style – lowercase; color – white Link: style – lowercase; color – orange

Xuan Quyen

111

Wireframe About us

112

Wireframe Accommodation

113

Wireframe Reservation

114

Wireframe Gallery

115

Mock - ups Welcome

116

Mock - ups About us

117

Mock - ups About us - Roll Down

118

Mock - ups Accommodation

119

Mock - ups Reservation

120

Mock - ups Gallery

121

Mock - ups Gallery - Pop up

122

(when an image was clicked on)

Style guide ȩȩ

Style Luxury. Modern. The website is designed with a very modern visual scheme in order to represent the Resort’s 4 stars quality. Icons are used in harmony with the dark color scheme and long blocks of texts and images, which, together, bring the luxury feelings to the website design.

ȩȩ

Font Sans- serif and Serif fonts. Modern. The three fonts used in the design looks quite alike, which give a smooth reading flow. However, they are different in some details (the foot, the stems and curve) that are enough to use them for different purposes. Additionally, the thick stems in the fonts also make it easy for the viewer to read the content. All together, they manage to keep the modern visual scheme of the website. GreyscaleBasic

A B C D E F G H I J K L M N O P Q R ST U V W X Y Z abcdefghIjklmnopqrstuvwxyz Powdah:

ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghIjklmnopqrstuvwxyz Chelsea:

ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghIjklmnopqrstuvwxyz 123

Style guide ȩȩ

ȩȩ

124

Color scheme Orange analogous The main colors in the design are orange – white – black. In which, black is used heavily to generate the luxury and modern aesthetic. Orange is used for consistency with the logo and also to make the design look interesting and energetic.

R: 217 G: 121 B: 26

R: 229 G: 163 B: 112

HEX: D9791A

HEX:E5A370

R: 221 G: 220 B: 219 HEX: DDDCDB

R: 0 G: 0 B: 0 HEX: 000000

R: 225 G: 225 B: 225 HEX: FFFFFF

Guide Icons for Main Navigations: Normal – white Orange (D9791A) Icon indicates the current page. Header: font- Chelsea; color- White; style- Capital Sub-Header: font- Chelsea; color- White; Style- Capital, smaller size than header Main Navigations’ names: font- Greyscalebasic; color- Black. When clicked: color - orange (D9791A) 2nd Navigations’ names: font- Greyscalebasic; color- White. When clicked: Style – Grey (DDDCDB) Highlight Text: font- Powdah, color- White

This proposal is made by Live