1

FINAL PROJECT PRESENTATION

Justin Weist

IMD123

Week 6 Assignment 1

2

TABLE OF CONTENTS

Title-1

Contents-2

Stakeholder Overview-3

Stakeholder Goals and Objectives-4

User Demographics-5

User Needs-6

User Persona’s-7

User Scenario-10

Meeting the Objectives-11

• Functional/Content Specifications-12

• Features Table-15

• Content Table-17

• Architectural Map-19

• Wire Frames-20

• Style Guide-24

• Mock Ups-26

• Citations-29

• Contact Information-32

3

STAKEHOLDER OVERVIEW

Ghoulish Getaways is a new company seeking to promote its line of horror retreats. These horror retreats will allow the customer to live out the role of someone in a classic horror movie scenario for the night. The idea started from a conversation about what the stakeholders would do in the same scenario, while watching a movie, and took off from there. To really get the stakeholders unique service to the public, there is a great need for a website.

4

STAKEHOLDER GOALS AND OBJECTIVES The website needs to be informative, easy to navigate, and able to capture the feel of the project. The website itself has to contain the following:

• Information on all of the available scenarios, and prices

• A page for making reservations

• A page about the stakeholder

• Contact information for the stakeholder

• A page with information about personal safety, and health limitations

5

USER DEMOGRAPHIC

• Age: 17-60

• Gender: Male and Female

• Education: High school and up

• Computer Experience: Basic or greater

• Previous Knowledge: Little knowledge or very knowledgeable

• Functionality: Any

• Income: 25,000$/year and up

• Likes: Horror movies and entertainment, unique adventures, and live entertainment.

6

USER NEEDS

Users will expect an easily accessible site, able to be used by any skill level. The user also needs plenty of information on the services offered, as well as an easy way to book said services. The reason the user would use this site, is to be able to plan an experience that no other company is offering.

7

PERSONA 1

8

PERSONA 2

9

PERSONA 3

10

USER SCENARIO

Jeff and Karen came across the stakeholders site while looking for something fun to do with their best friends after their wedding. Since they both enjoy a good adventure, and are into horror movies, they thought the idea sounded promising. Digging deeper into the site, and reading all of the information on the available experiences, they knew this was something for them. After deciding this was what they wanted to do, they went to the booking page, where they were able to easily book a date that worked for them. Overall, the easy navigation of the site, coupled with the detailed information about the packages, and the creepy way they were presented, where what really sold them.

11

MEETING THE OBJECTIVES

In order to meet the objectives of both the Stakeholder and the User, the site needs to first and foremost be easy to navigate. In order to accomplish this, the site will have a uniform means of navigation on all of the main pages of the site, located at the top of the page, where the user can easily find and identify it.

The next step in meeting the objectives is making sure the site itself is informative, easy to understand, and fits with the stakeholder’s idea, and the users expectations. To accomplish this, the site will use a mix of visual materials and text content that both appeal to the target audience and contain all relevant information about the stakeholder and the stakeholder’s services, while not being filled with information that is unnecessary.

12

FUNCTIONAL/CONTENT SPECIFICATIONS

The header at the top of the page contains the Logo for Ghoulish Getaways. Below that lies the navigation bar, with links to the home page, getaway packages, prices and booking, about us, safety information, and contact. These two items will remain constant throughout the site. Below that lies the content section of the page. On the home page, this will include a short introductory paragraph introducing the user to what the site is for. There will also be a slideshow below this, showing images from the different locations. Below the content area, is the footer, which will include a link for quick contact through email, as well as the number for Ghoulish Getaways customer support. This will also remain a constant throughout the site.

13

FUNCTIONAL/CONTENT SPECS CONT.

The next page is the getaway packages. On this page, the content area will have a picture for each package showing the outside of the area they can stay at. Clicking this image will take the user to a page containing more pictures of the area, and will also include an area of text that details this particular package. There will also be a short video for each area included, which is filmed to add a creepy, ominous vibe to the user watching it. There will also be a sidebar in main getaway packages page, which gives the user the option to choose between different types of experiences, like zombies, slashers, and ghosts. Clicking one of these hypertext links, will allow the user to be taken to a subpage that contains packages that meet that specific criteria.

14

FUNCTIONAL/CONTENT SPECS CONT.

After that will be the pricing and booking page. This page’s content area will include a drop down menu, for the user to pick the package they decide they want. Once a package is selected, the price will show up in the reservation form, which is located below the drop down menu. After the price information is there, the user can continue to fill out the reservation form, and choose a date for their trip. Once all that is completed, they can check out, and will be taken automatically to a page showing their trip information, a confirmation number, and contact information for the company. It will also detail in full the safety information to keep in mind when the user goes on their getaway.

15

FEATURES TABLEProject Feature How will the feature be

implementedWhat concerns do we have about this feature

Content

Home Page

Navigational

Bar

There will be a navigation bar at the top of the page, that will included links to:

Home

Getaway Packages

Prices and Booking

About Us

Safety Information

Contact

We need this feature to remain constant throughout the site, and must make sure that every link on every page works correctly, so the user has a familiar, quick, and easy way to navigate the entire site.

HTML coding and CSS styling

Slideshow A collection of images that rotate through, without user input. The user can click on it at any time and be taken to a gallery contain all of these images.

The main concern with this feature is that the slideshow is made to give the user ample time to view each image, but not to have each image linger too long and lose their interest. We also must make sure the link between the slideshow and the gallery is reliable, and works correctly.

JPEG Images, HTML, JavaScript

Email

Contact

Link

A hypertext link at the bottom of the page in the footer, which links to the company email address

We need to make sure that the link is easily found by the user, and is easily identifiable as a clickable link.

HTML coding and CSS styling

16

FEATURES TABLE CONT.Project Feature How will the feature be

implementedWhat concerns do we have about this feature

Content

Packages PageClickable Image

Links

There will be pictures of the buildings for available packages, which double as clickable links to the packages details.

The main concern with this is whether the user will be able to identify that these pictures lead to the package information. To deal with this, there shall be a small paragraph at the top explaining this.

JPEG Images, HTML

Sidebar There will be a sidebar containing Hypertext links that give the user a more specific view of available packages.

The main concern with this area is making sure it is very obvious and user friendly. All of the links also need to work effectively.

HTML coding, CSS styling

Packages SubpageVideo’s There will be videos detailing each

package in a theatrical manner that the user can click on and view.

  FLV video, Shockwave

Prices/Booking PageDrop Down Menu There will be a drop down menu that

lets the user select the package that they want.

The main concern here is making sure the information in the drop down menu is clear and concise, and accurately reflects the information provided within the main site, so the user can select their chosen package with confidence.

HTML coding, CSS

Reservation Form There will be a form for the user to select their chosen package, date, and enter their payment information, then check out.

The main concern is to make the form easy to understand, and accurate, so that the user can place their order in confidence and so that all orders go through accurately.

HTML coding, JavaScript, PHP

17

CONTENT TABLE

Asset Format Description Associated Assets/Media (if any)

Other Information

Home Page

Logo PNG This is the company logo that will appear on all pages of the site, and the top left of the page.

  This will be created in Photoshop/Illustrator

Navigation Buttons Hypertext The buttons for navigating the entire site. These will be Hypertext links with CSS styling

CSS style sheet  

Home Page Text Text This is the written content on the home page.

CSS style sheet  

Slideshow JPEG, Hypertext, JavaScript This is a slideshow on the home page, with images from the various packages available.

  These will be JPEG images, that link through the use of HTML to a gallery. The slideshow itself will be implemented with JavaScript.

Footer Contact Link Hypertext, CSS Email contact link in the footer of each page. There will also be the number for the company in the footer, which is plain text with CSS

CSS style sheet  

18

CONTENT TABLE CONT.Asset Format Description Associated Assets/Media (if

any)Other Information

Packages

Image links JPEG, Hypertext Clickable Images which lead to another content page describing the package that the image is from.

  Photographs, altered in Photoshop

Sidebar With Links Hypertext Links to a more narrow selection of package options.

CSS style sheet  

Package Subpage

Images JPEG Images that are shown for each package

Image Hypertext Links Photographs, altered in Photoshop

Text Content Text The main text content for each individual package

Image Hypertext Links, CSS

 

Video’s FLV Video content for each individual package

Image Hypertext Links Videos in FLV format, will be implemented with Shockwave

Prices/Booking Page

Drop Down Menu Hypertext, CSS A drop down menu for the user to select their package

HTML, CSS style sheet  

Reservation Form HTML, JavaScript, PHP The reservation form for users.

HTML, CSS style sheet  

Text Content Text This content is the summary of the users order, as well as a confirmation number, contact information for the company, and safety information

HTML, CSS style sheet  

19

ARCHITECTURAL MAP

20

WIRE FRAMESHOME PAGE 1

21

WIRE FRAMESHOME PAGE 2

22

WIRE FRAMESINNER PAGE 1

23

WIRE FRAMESINNER PAGE 2

24

STYLE GUIDE

25

STYLE GUIDE CONT.

26

MOCK UPSHOME PAGE

27

MOCK UPSPACKAGES

28

MOCK UPSPACKAGES SUBPAGE

29

CITATIONS

• Close Up Of A Young Man. Photography. Encyclopedia Britannica Image Quest. Web. 12 Dec 2013. http://quest.eb.com/images/115_3956432

• Woman Kissing Man In A Tent. Photography. Encyclopedia Britannica Image Quest. Web. 12 Dec 2013. http://quest.eb.com/images/154_2891135

• Smiling Woman. Photography. Encyclopedia Britannica Image Quest. Web. 12 Dec 2013. http://quest.eb.com/images/132_1285595

• Dead Tree. Photograph. Encyclopedia Britannica Image Quest. Web. 13 Dec 2013. http://quest.eb.com/images/132_1208910

• Oak Tree. Photograph. Encyclopedia Britannica Image Quest. Web. 13 Dec 2013. http://quest.eb.com/images/132_1211846

• The Dalles, Oregon, USA. Photography. Encyclopedia Britannica Image Quest. Web. 13 Dec 2013. http://quest.eb.com/images/137_3325573

30

CITATIONS CONT.

• Lichens On Headstones. Photography. Encyclopedia Britannica Image Quest. Web. 13 Dec 2013. http://quest.eb.com/images/149_2087030

• A Small Log Cabin Setting In A Heavly Wooded Area With The Changing Leaves Of Autumn.. Photo. Encyclopedia Britannica Image Quest. Web. 13 Dec 2013. http://quest.eb.com/images/167_3984124

• Abandoned Farm Near Robsart. Photo. Encyclopedia Britannica Image Quest. Web. 13 Dec 2013. http://quest.eb.com/images/167_3987081

• DILAPIDATED HOUSE. Photography. Encyclopedia Britannica Image Quest. Web. 13 Dec 2013. http://quest.eb.com/images/300_1826525

• Cabin And Red Canoe. Photo. Encyclopedia Britannica Image Quest. Web. 13 Dec 2013. http://quest.eb.com/images/167_4048071

31

CITATION CONT.

• 1880s Ghost Town. Photograph. Encyclopedia Britannica Image Quest. Web. 13 Dec 2013. http://quest.eb.com/images/152_1595851

• 1880s Ghost Town. Photograph. Encyclopedia Britannica Image Quest. Web. 13 Dec 2013. http://quest.eb.com/images/152_1596683

• Flintham Hall. Photograph. Encyclopedia Britannica Image Quest. Web. 13 Dec 2013. http://quest.eb.com/images/111_1502759

32

CONTACT INFORMATION

Justin Weist

• Email: fourwordletter12@gmail.com

• Phone:570-470-8441