Boutique HoiAn Storyboard

Sutrix Media (Vietnam) JSC.

72/4 Truong Quoc Dung Street, Ward 10,

Phu Nhuan District, Ho Chi Minh City, Vietnam

Sutrix Media HK Limited.

Unit 706, 7/F., South Seas Centre, Tower 2,

75 Mody Road, TsimShaTsui, Hong Kong Boutique Hoi An Resort

[Boutique Hoi An Storyboard]

CONTENT OWNER:

Sutrix Media

All future revisions to this document shall be approved by the content owner prior to release.

The information contained herein is PROPRIETARY to The Sutrixmedia Joint Stock Company

and shall not be reproduced or disclosed in whole or in part or used for any purpose except when the

user possesses direct, written authorization from

The Sutrixmedia Joint Stock Company

Project deadline: [01/07/2011 – static pages]







Perface

Signature

Originator By: [Thang Tran] Date: 17/06/2011

Prepared By: Thang Tran

Date: ….17/06/2013...

Approved By:

Date: ….../…..../……….

Reviewed By:

Distributed To: Boutique Hoi An Resort







Perface

Signature Revision History

Version Date A*, M, D Change Description Author Approved By

1.0 17/06/2011 [A] • [Page 26 - 17/06 – Initial document] [Thang Tran] [???]

*A – Added, M – Modified, D - Deleted







Perface

Convention Used in this storyboard New

• Text color: black

Update change request

• Text color: Blue

SUTRIX MEDIA Boutique Hoi An Resort Sutrix Media (Vietnam) JSC.





75 Mody Road, TsimShaTsui, Hong Kong

Project Brief

Team Project Client:

• [Boutique Hoi An]

• Contact name: Nguyen Thi Kieu Hoa and Nguyen Duc Truc

• Email: [email protected] and [email protected]

Sutrix: • Project manager: Tran Quoc Thang

• Email: [email protected]

• Skype ID: hiquocthang

• Project team: – PM: Thang Tran

– HTML Designer:

– Developer:

– Tester:

mailto:[email protected]

mailto:[email protected]







Project Brief

Summary Technologies used OTI (Object Technology International) in Brief

• XHTML 1.0; CSS 2.0; JavaScript;

• WordPress CMS will be used

Note: [Description]







Project Brief

Site Map







Front - End







Home page

1. Boutique Hoi An logo

2. Website header menu

3. Boutique Hoi An

photos slideshow

4. Ancient Charm block

5. Modern Living block

6. Beach Front block

7. FastBooking submit

form

8. Footer Menu

9. Boutique HoiAn’s

addresses

10. Subscribe NewsLetter

11. Boutique HoiAn’s

facebook fan page and

social sharing buttons

12. Boutique Hoi An’s

certificate of excellence







Ancient Charm

1. The Ancient Charm

block will link to

service page by

clicking on Go

button

2. Services & Facilities

Contents







Ancient Charm cont.

1. Display Tours & Excursions

section

2. Display Tours & Excursion article

content.

3. Thumbnail image

4. Download the price (PDF file)







Modern Living

1. Modern living block will

link to Accommodation

page

2. Accommodation content

3. List of Room type where

you can see the

description for them and

you can book it.

4. Room type thumbnail.

5. Room type description.

6. The booking of this room

type.

7. Click on this header the

content will be

expanded.

8. Room type catalog, it will

collage and expand if

you click on it’s header.







Beach front

1. Beach front block will link

to Location page.

2. Download Boutique Hoi

An’s map.

3. The content of location

such as address, map….







Dining

1. This page will be

displayed when user.

click on Dining menu.

2. The Dinning slideshow

photo.

3. The avatar of Dining

page.

4. The Dining content.







Meeting & Event


displayed when user. click

on Meeting & Event menu.

2. The Meeting & Event

slideshow photo.

3. The avatar of Meeting &

Event page.

4. The short Meeting & Event

content.

5. By clicking on View

Details, the user will be

redirected to details of

Meeting & Event.







Meeting & Event cont.

1. The full url Meeting & Event detail

page.

2. The content of Meeting & Event

page.

3. Go back to Meeting & Event

page.







Meeting & Event cont.

1. The Meeting & Event article.

2. The image avatar of Meeting &

Event.

3. By clicking on View details, user

will be redirected to the full

content of specify article.







Rate


displayed when user click

on Rate menu.

2. The Rate slideshow photo.

3. The avatar of Rate page.

4. Allow user download rate’s

PDF content

5. The Rate content.







Gallery


displayed when user. click

on Gallery menu.

2. The Gallery slideshow

photo.

3. The avatar of Gallery

page.

4. The category of

Accommodation and

Service & Facilities.

5. The gallery slideshow of

Accommodation and

Service & Facilities.

6. By clicking on single photo

of gallery content, the user

will see the big image of

that photo.







Gallery cont.

1. Close this popup photo.

2. Allow user to navigate

next or previous of photos

gallery.

3. The name of Gallery.







Top header menu

1. The title of specify page

such as contact page.

2. The option allow user

change their prefer

language to display.

3. The top header menu







Contact Us

1. The Contact Us menu

2. The Contact Us slideshow

photo.

3. The avatar of Contact Us

page

4. The Contact Us content

such as: email, phone…







Contact Us cont.

1. The Contact Us form

2. The Captcha function to

against hack or bot engine

3. The user click in this

button to send email to us.







Special offer

1. The special full url

2. The Special’s slideshow

photos

3. The avatar of Special

page

4. The category of Special

page.

5. The content of specify

category

6. By clicking on this header

the content will be

expanded.







Back - End







[Login page] [Login page]

No.1: This is username field

No.2: This is a password field

No.3: This is a button login button

Login page

3

2

1







[Content page] [List content page]

No.1: This is a default menu of

wordpress

No.2: This is a list content page

When mouse over in content title

then users can EDIT

Edit: Edit content

No.3: This is a add new content

No.4: This is a search content and

paging page (default of

wordpress)

Content page - List

3

2

1

4







[Content page] [Add content page]

No.1: This is a title of content

No.2: This is a short description of

content (display in homepage)

No.3: This is a description of

content

No.4: This is a thumbnail of content

for homepage

No.5: This is a thumbnail of content

No.6: This is a upload function for

slideshow

No.7: This is a add another photo

for slideshow

No.8: This is the download file for

page

No.9: This is a save draft button.

When users click on it then save

content but not yet publish to front

end.

No.10: This is a preview button.

When users click on it then can see

the content.

No.11: This is a publish button.

When users click on it then the

content was save and publish.

Content page – Add new

1

2

3

4

5

6 7

9

11

8

10







[Post page] [List room page]


wordpress

No.2: This is a list post page

When mouse over in room title

then users can EDIT|QUICK

EIDT|TRASH|VIEW

Edit: Edit room

Quick edit: edit quickly in current

page

No.3: This is a add new post

No.4: This is a search room and


wordpress)

Post page

3

2

1

4







[Post page] [Add post page]

No.1: This is a title

No.2: This is a book now link.

No.3: This is a description of post

No.4: we can upload images for

the post

No.5: This is a upload file of post

No.6: This is a save draft button.

When users click on it then save

content but not yet publish to front

end.

No.7: This is a preview button.

When users click on it then can see

the content.

No.8: This is a publish button. When

users click on it then the content

was save and publish.

Post page – Add new

1

3

4

6 7

8

2

5







[Media page] [List Media page]


wordpress

No.2: This is a list media

When mouse over in Gallery title

then users can EDIT|DELETE

PERMANENTLY|VIEW

Edit: Edit media

No.3: This is a add new media

No.4: This is a search Tours &

Excusions and paging page

(default of wordpress)

Media page - List Media

3

2

1

4







[Media page] [Add Media page]

No.1: User will select file for upload

No.2: This is a description of photo

No.3: This is a button save this

photo.

Note: To assign this photo media

page. Admin need back to list

gallery page then click attach and

choose page

Media page – Add new Media

1

2

3







[User page] [User page]


wordpress

No.2: This is a list User

When mouse over in Meetings &

Events title then users can

EDIT|DELETE

Edit: Edit User

Delete: Delete user include all the

posts or not

No.3: This is a add new User

No.4: This is a search User and


wordpress)

User page - List Users

3

2 1

4







[User page] [Add User page]

No.1: This is username

No.2: This is email

No.3: This is first name

No.4: This is last name

No.5: This is website

No.6: This is strength security

indicator. We should do like the

hint

No.7: Check this to send password

to new user by email.

No.8: Choose the role for user.

http://codex.wordpress.org/Roles_

and_Capabilities

No.9: Button add new user.

User page – Add new User

1

2

3

4 5

6

7

8

9

http://codex.wordpress.org/Roles_and_Capabilities









[User page] [Edit User page]

No.1: check disable the visual

editor when writing

No.2: Choose color Scheme

No.3: Username can’t change

No.4: Modify role

No.5: Display name

No.6: Enter password for changing

No.7: Save change.

User page – Edit User

1

2

3

4

5

6

7







Thank you

Boutique HoiAn Storyboard

Documents

Transcript of Boutique HoiAn Storyboard