Final Presentation: Morning Glass Surf Shop and Coffeehouse Final Presentation: Morning Glass Surf Shop And Coffeehouse Ryan Thurm Course# IMD December 13

Table of Contents 1. Title Page 2. Table of Contents 3. Stakeholder Profile 4. Objectives 5. Goals 6. Goals (cont’d) 7. Demographics Needs 8. Demographics Objs. 9. User Persona User Persona User Persona User Scenario 13. User Scenario (cont’d) 14.Fuctional Specs: Home page 15. Fuctional Specs: (cont’d) 16. Features Table: Home Page 17. Assets Table: Home page 18. Fuctional Specs: About Us Page 19. Fuctional Specs: (cont’d) 20. Features Table: About Us Page 21. Assets Table: About Us Page 22. Fuctional Specs: Events page 23. Fuctional Specs: (cont’d) 24. Features Table: Events Page 25. Assets Table: Events page 26. Architecture Diagram 27. Home Page Wire Frame Home Page Wire Frame About Us Page Wire Frame About Us Page Wire Frame Style Guide 32. Home Page Mock Up 33. About Us Page Mock Up 34. Events Page Mock Up 35. Works Cited 36. Contact

Who is Morning Glass Surf Shop and coffee house? MGSC is exactly what their name says they are. A surf shop and coffee house wrapped into one! Located in the Central Coast of California, MGSC is the heart of one of the best surfing communities in California. What they provide is a casual coffee shop environment for community networking, while at the same time, offering an inventory of locally made and industry standard equipment for the surfing community.

Project Objectives: MGSC Website MGSC is looking to create a user friendly website that serves as an interactive profile to the shop itself, while at the same time offering users the option to browse, order and purchase surf accessories either online or for in-store pickup. They looking for a clean site with more emphasis on drawing customers to the shop rather than being heavy with advertisements and retail catalogs.

Project Goals: MGSC Website MGSC is pursuing this project with the intention of having a site that accomplishes the following: A clean Homepage that conveys the dual concept of the business without confusing the user. All relevant Store Location and Contact information should be in plain site. Users should be able to navigate easily between the Shop Profile and Inventory Sections without feeling lost. MGSC is interested in offering a membership incentive program and wants to make sure that users can sign up online without any confusion.

Project Goals: Continued They want a “Points for Dollars” system that members can accrue and then use online or in the store. MGSC can’t stress enough that they want a clean site and would like to offer an online PDF catalog for members that are interested in seeing the entire inventory. They’ve expressed some interest in creating a blog page on the site, but at this point are more concerned about Introducing the concept. The site should be engaging enough with links to surf information and highlights, up and coming in-house events, prices, locations and contact information.!

User Demographics and Needs Assessment Target Group: Surfers and Coffee lovers Gender : M/F Age: 10 to 70 Education: All Levels Computer Experience: Basic to Intermediate Previous Knowledge: Both concepts should be self- explanatory.

User Demographics Objectives The purpose of this site would be to provide a clear profile of the business and concept, location and hours and any contact information if they wish to call in person. Beyond that, MGSC wants the user to be able to browse and purchase surf accessories, offer easy links to local surf conditions as well as offer an incentive program for members. For the casual or first time user, the site should offer some basic information about surfing, Santa Cruz itself and encourage them to want to come down and check it out in person.

User Persona #1

User Persona #2

User Persona #3

User Scenario : Brent McKeaver Brent McKeaver, being the artist and coffee lover that he is, was browsing the web for local new coffee shops and businesses that might be possible showcases for his work. Beyond that, he loves coffee and is always interested in any new spot that might be opening up in town. Since he’s been surfing his whole life, and he loves coffee, Morning Glass Surf Shop and Coffee House peaked his interest right away. Since he wasn’t really looking to buy any surf gear, he followed the link to the “Coffee House” info page to see what it looks like. He easily found the owner contact information and made a note to contact them about showcasing some work at their shop.

User Scenario : Brent McKeaver (cont’d) After checking out the shop itself, he quickly browsed thru the surf shop inventory to see what kind of boards they might have in stock. He never knows where he might find that hidden gem. Overall, the site was easy to navigate and loved the fact that the local surf report was posted with links to surfline.com and stormsurf.com for extra information. Brent really took to the concept and has every intention of checking the place out.

Functional Specifications: Home Page The homepage of the Morning Glass Surf Shop and Coffeehouse is clean and basic with an all white backdrop, as they intended it to be. Void of any sidebars and containing limited content, the page consists of a header, navigation bar, content and footer. Starting in the upper-left corner, the header begins with their company name, Morning Glass Surf Shop and Coffeehouse. “Morning Glass” is the dominant text in a large bold black font, while the sub-heading, “Surf Shop and Coffeehouse”, lies just beneath it. “Surf Shop” uses a script font whereas the Coffeehouse utilizes the same Myriad Pro as the rest of the title. This distinction helps differentiate between the two concepts without destroying the connection. Directly to the right of their name, the right two thirds of the header has the coloring of a sunrise with a white sun bleeding into yellows and eventually orange. This portion of the header also contains the navigation bar running across the bottom.

The bar itself uses a complimentary blue background to help distinguish its presence, while also being the only element to utilize white text. The navigation categories are as follows: Home, About Us, Events, Surf Shop and Contacts. As the user hovers over the links, the white text turns orange, and when the user selects a page, the blue background turns to a lighter blue. This indicates that the user has selected that page and also what page the user is on. One neat feature is the fact that as the user goes thru the pages, the white sun in the navigation bar corresponds to whatever page the user is on by moving above the link in the navigation bar. Just below the header, taking up two thirds of the width, is a JPEG image of the storefront with a text welcoming the viewer to the site. Every few seconds the image slides to the left and is replaced by another image or notice. Some of these images are links, if relevant, and the cursor changes to a hand if it is. Other than that, the user does have the option of scrolling thru the posts by clicking on the white bubbles in the bottom corner of the content box. As you click the circle, it responds by turning orange.

Project Features: Home Page

Project Assets: Home Page

Functional Specifications: About Us Page The About Us page is just that. Rather than clutter the homepage with the story behind Morning Glass, they decided to put that information on a second page so users who are drawn in by the concept have the option of reading a bit more. Employing the same header and navigation bar, the only differences are that the “Surf Shop and Coffeehouse” has been replaced by; “About Us” (the page the user is on) and the link in the navigation bar will have a lighter background. As mentioned before, the sunrise illustration in the header has also adjusted to place the sun above the link. It’s a subtle but efficient indicator as to what page the user is on. Below the header, running the width of the page is a short description (in Myriad Pro) describing the purpose behind Morning Glass. They just want to emphasize the fact that coffee and surfing are forever tied, and Morning Glass is trying to bring back the communal atmosphere of the old school surf shops by incorporating it into a coffeehouse.

Rather than bore the user with a lengthy story about the stakeholder’s background and business plan, MGSC made this page interactive and simple by adding some simple text and a few images. The center portion is completely white with the words “why we love…” followed by and image of a steaming cup of coffee on the left, and a picture of a person surfing on the right. Below each image is the appropriate heading, “Coffee” or “Surfing”, and if the user hovers anywhere over the image (or clicks), a list pops-out of the image bullet points explaining why MGSC loves coffee and surfing. It gives the user something to do, but more importantly, it’s a glimpse into the characters of who’s behind Morning Glass. This might seem irrelevant, but users might connect with their approaches and make a point to check the place out. It really adds a sense of ownership to the concept. The footer on this page is the same width and height as the homepage, but rather than a JPEG link to the surf shop, a link to the shop page is placed by using a small blue box with the words “check out the Surf Shop”.

Project Features: About Us Page

Project Assests: About Us Page

Functional Specifications: Events Page Just as the previous two pages, the Events page uses the same familiar header. And just as the About Us page, the only differences are the label beneath “Morning Glass”, the blue color behind the navigation link and the sun has once again moved. The purpose of the events page is informing the user of future and past events. Below the header, running the width of the page and taking up about two thirds of the main content space, the viewer is presented with a large blue bounding box that has a scrolling image and announcement box. The box behaves just as the scrolling images do on the homepage; where they will automatically alternate without interactivity, but the user can also manually scroll buy using the white bubbles located at the left corner of the box. As each announcement is displayed, a more thorough description corresponding to the event or announcement appears to the right of it.

Below this content box lies the Calendar, which displays one large calendar with thumbnails of the current, past and present months. Rather than just be a calendar, an asterisk indicates events, and if the user clicks on the date, a detailed description will pop up to the right with any contact information for further questions or comments. Once again, the footer is like that of the About Us page where it’s a simple blue line with a link to the Surf Shop at the right.

Project Features: Events Page

Project Assets: Events Page

“About Us” Page Wire Frame #1: Morning Glass Surf Shop and Coffeehouse

Works Cited 1. Unknown Artist, “Pleasure Point” 2. Ekaterina AristovaEkaterina Aristova, “Mug in Window” 3. Unknown Artist, “Coffee beans” 4. Unknown Artist, “Santa Cruz Waves go-home/