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 15
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
>
1.Introduction
>
4. New Design
3. Proposal
2. Analysis
1. Introduciton
1
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
10
The Team
Mai Anh Project Manager -Graphic Designer
Nguyet Minh Web Designer
Quoc Hy Interactive Designer
Xuan Quyen Programmer Copywriter
Contact Us: Phone: 01204460913 Email: Livedesign@gmail.com
11
4. New Design
3. Proposal
2. Analysis
1. Introduciton
1
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.
12
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
13
4. New Design
3. Proposal
2. Analysis
1. Introduciton
1
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.
14
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
2
I. BALI GARDEN BEACH RESORT ANALYSIS Target Customers
According to tripadvisor.com, BGBR’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.
21
4. New Design
3. Proposal
2. Analysis
1. Introduciton
2
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.
22
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.
23
4. New Design
3. Proposal
2. Analysis
1. Introduciton
2
Threat › ›
24
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
25
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.
27
4. New Design
3. Proposal
2. Analysis
1. Introduciton
2
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
28
Strength Design Clear presentation, sections are separated clearly.
29
4. New Design
3. Proposal
2. Analysis
1. Introduciton
2
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)
31
4. New Design
3. Proposal
2. Analysis
1. Introduciton
2
Weakness Design ›
32
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
2
Weakness Design ›
34
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’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.
35
4. New Design
3. Proposal
2. Analysis
1. Introduciton
2
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.
36
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
37
4. New Design
3. Proposal
2. Analysis
1. Introduciton
2
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’ websites, Bali Garden Beach Resort’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.
38
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.
39
4. New Design
3. Proposal
2. Analysis
1. Introduciton
2
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’s Website so it can stand out.
40
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/>
41
4. New Design
3. Proposal
2. Analysis
1. Introduciton
2
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
2
Bali Mandira Beach Resort & Spa – 4 Stars Resort › › › › › ›
Visual design:
44
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
2
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.
46
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.
47
4. New Design
3. Proposal
2. Analysis
1. Introduciton
2
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.
49
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>
50
51
>
3.Proposal
>
4. New Design
3. Proposal
2. Analysis
1. Introduciton
3
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:
1.
54
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
contact us
beauty service
partners
awards
gallery
deluxe
visa
family
Bali hotspots
women package pleasure couple package reflexology
55
4. New Design
3. Proposal
2. Analysis
1. Introduciton
3 2.
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.
3.
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!”
56
4.
5.
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.
6.
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.
7.
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.
57
4. New Design
3. Proposal
2. Analysis
1. Introduciton
3
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.
58
â&#x20AC;ş
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.
â&#x20AC;ş
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
3
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.
60
›
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.
61
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.
62
63
>
4.New Design
>
4. New Design
3. Proposal
2. Analysis
1. Introduciton
4
I. BRANDING Live designed a new logo for the Bali Garden Beach Resort
66
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.
67
4. New Design
3. Proposal
2. Analysis
1. Introduciton
4
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.
70
Existence-Light 71
4. New Design
3. Proposal
2. Analysis
1. Introduciton
4
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:
72
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.
$
24
$
24
$
24
73
74 4. New Design
3. Proposal
2. Analysis
1. Introduciton
4 III. MOCK-UPS & STYLE GUIDES
Mai Anh
75
Wireframe Welcome
76
Wireframe About us
77
Wireframe Accommodation (SUITES)
78
Wireframe Reservation (BOOKING)
79
Wireframe Gallery
80
Mock - ups Welcome
81
Mock - ups About us
82
Mock - ups Suites
83
Mock - ups Booking
84
Mock - ups Gallery
85
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
88
Wireframe About us
87
Wireframe Accommodation
90
Wireframe Reservation
91
Wireframe Gallery
92
Mock - ups About us
93
Mock - ups Accommodation
94
Mock - ups Reservation
95
Mock - ups Gallery
96
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 ›
›
98
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
99
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