the blue lotus cafÉ and deli website plan fleur nachand user centered information design dr....

THE BLUE LOTUS CAFÉ AND DELI WEBSITE PLAN

Fleur Nachand

User Centered Information Design

Dr. Natalie Hruska

5 August 2014

Table of Contents

Stakeholder Overview 3Stakeholder Objectives 4-5User Demographics 6User Needs 7User Personas 8-10User Scenario 11 Functional Content 12-13 Specifications

Content Table 14-19Assets Table 20-22Architectural Map 23Wireframes 24-27Style Guide 28Prototype 29-31Works Cited 32Contact Information 33

The Blue Lotus Cafe and Deli Website Plan 2

Stakeholder Overview


The Blue Lotus Café and Deli is a family owned and operated business. Morgan Rokosz and Ruth Schiattone, the stakeholders opened the deli early this spring with a vision to offer the community with different food and textiles from across the globe. Morgan and Ruth have a love for travel and wanted to bring their experiences of different cultures back with them for everyone to enjoy.

Stakeholder Objectives


Currently, The Blue Lotus Café and Deli has a website stating the location, hours and basic information. The stakeholders want a website the incorporates what they have to offer such as their menu, monthly event calendar, online shopping and check out, and blog “Mother and Son World Travels.”

The stakeholders want to make sure that this website will be able to be easily edited by management to change the merchandise, menu along with the weekly specials.

Stakeholder Objectives (Continued)


Where the website will be informational, the websites primary purpose will be to bring in new customers through shopping online, and brining them in through events.

Currently the business has been using their Facebook page to gain new customers, the stakeholder wants to make sure that when customers go to their Facebook page that leads to an aesthetically pleasing and functional website that is a well balanced website in organization, rich with imagery and information

User Demographics


The Blue Lotus Café and Deli is a business that welcomes everyone. There is no target for age, gender or education. Rather, the business targets different every personality, at this deli there is something for everyone. Where the website will require basic computer knowledge along with previous knowledge of the business it will still remain a place for everyone.

7

User Needs


Customers of the Blue Lotus Café and Deli are looking for a website that allows them to browse the menu and weekly specials rather than having to call or stop in. The different textiles often go out of stock because they are currently in high demand, as the deli is the only place that sells them in the area. It would be convenient for the customer to be able to order online. There are many events that are posted online the day of the event and the customers would prefer if they could plan ahead to fit different events into their schedule. Lastly, some of the customers are busy and would like to have an option to place their order online.

User Persona 1


Cecelia lives in Traverse City, MI. She is the managing business partners for one of the CPA firms in the city. On her free time she enjoys bargain shopping, reading and enjoying food with friends.

Internet Use:

Cecelia uses the internet on a daily basis for work, checking stocks and managing accounts. Her experience is above average

User Persona 2


Gabbin Lives in Kingsley, Michigan. He is one of the members of Team USA Shooting Clays, and he also enjoys speaking for charity events. When he is not traveling he enjoys spending time outdoors and enjoying what local businesses have to offer.

Internet Usage:

Daily to check email and scheduling. Gabbin also has basic computer knowledge.

User Persona 3


Makenzie is a high school student in Suttons Bay, MI. She spends most of her time on studying and extracurricular activities. When she has free time she enjoys spending time with her girlfriends. She loves to read, write, and spend time outdoors.

Internet Usage:

Makenzie uses the internet on a daily basis that varies. If she had the option everything would be done online. She conducts research, catches up with her friends and shops online.

11

User Scenario


Cecelia is a now the managing partner in her CPA firm; she married her husband while they were both on active duty in the military. As, Cecelia and her husband have lived all over the world they like to find different locations with different venues. Often on her lunch breaks she likes to find relaxing restaurants where she can dine-in and enjoy a book.

Earlier in the week on of her co-workers had told her about The Blue Lotus Café and Deli, so she thought she would give it a try. Before she went to the Deli she wanted to take a look at the menu to see the prices and the food that was available. When she was on the website she was amazed that she could find everything that she was looking for and more. Cecelia and her husband enjoyed attending local events such as poetry readings, and listening to different local acoustic artists, she stumbled upon that information on the site as well. She is now planning on attending a few of the events hosted by the Blue Lotus Café and Deli, but before she left the site she read a story in the blog on the site. She was intrigued and looking forward to grabbing lunch, and most importantly she was impressed with the layout of the website and the fact that they incorporated everything that she needed and more.

12

Functional Content Specifications


The Blue Lotus Café and Deli’s website was created with the user in mind. The entire websites color scheme follows a white background alongside Light blue navigational features with royal blue text. As the user scrolls over the navigational buttons they turn a soft grey. Although not all of the buttons have dropdowns a few of them do. Also located within the header is the logo, as the user navigates throughout the site if they click on the logo it will bring them directly to the home page. On the footer of the page the user will find links to the different social networking sites and copy write information. On every page of the website will be the same header and footer.

When the user first arrives to the website the first noticeable feature is the rotating images on the slider. It is filled with bright and colorful descriptive photos of the different food, textiles, different hosted events, and of the location. The user can click on some of the images to go further into the website. There is minimal text, which is easy to read, and meshes well with the site, it has introductory information as to why customers would enjoy the deli. On the right side bar is a royal blue button for online ordering, when they click on the button it will take the user to a forum where they can fill out their information and select their order. Where ever the user decides to go throughout the website they can click on this button to order.

13

Functional Content Specifications (Continued)


On the About Us page the user will be able to read the stakeholders story, the text describes how they came to be. Fitted within the text are images of the owners, staff, and the restaurant. At the bottom of the page is another light blue button called ‘Subscribe to our Blog,’ this will take the user to the owners blog about their world travels and different ethnic food choices.

Finally, as the user reaches the ‘menu’ page they will notice that on the bottom left hand corner of the menu is the dark blue ‘Download Menu’ button. This button will download a printable .PDF version of the menu for the users easy access, which they can also save on their computer for future reference. Next to this button is an image slider that hosts imagery of the different types of food and drinks that the restaurant has to offer. Next to the image sider is the image of the graphic version of the menu. This is in place so that the user can quickly view the menu to see what type of food the restaurant has to offer.

This site is easy to navigate, as the only thing that changes when the user goes from page to page is the main content. The header and footer remain the same, along with the easy access to make an order online and view the menu from anywhere in the site.


Project Feature

How will the feature be implemented

What concerns do we have about this feature

Content

The Blue Lotus Café and Deli

Logo

The Logo will be placed on each page throughout the website, for convenience the user may click on the logo to lead them directly to the home page.

The user may be unaware of this feature leading them to rather use the navigational features. The user may be unaware of this feature leading them to rather use the navigational features.

-HTML-CSS

“Place an Order” button

This will bring users to a form to input personal information, and the user can make a selection to place their order.

The user may not want to add personal information; therefor they would be unable to place an order online.

-HTML-CSS

“View Menu” Button

This will bring the user to the Menu page that has a printable version of the menu.

The user may not have Adobe Acrobat, or have it updated. If that is the case they will not be able to view the menu.

-HTML-CSS

Navigation This feature will be applied with a global menu, so that some of the categories may have sub sections to view.

Making sure that the links are

compatible with all the browsers. -HTML-CSS

-Hyperlinks

Image slider

The image slider will consist of photos of different events, the food, specials and featured textiles. The user will be able to click on some of the images for more

Not every image will link to a page in the website.

-HTML-CSS

-Flash -Java Script

Search Bar The search function will be used for the users that know what they are looking for, therefore giving them instant gratification finding the desired information.

The search bar will only be associated with the website, therefore it will not directly link with other search sites.

-Customized

search -Spell check

feature/ suggestions

-Results page

-Error page

Features Table – Homepage


Features Table – Homepage Continued

Project Feature How will the feature be implemented

What concerns do we have about this

feature

Content

Site Log in Within this function the user has the ability to shop conveniently online. There will be options to save preferences and credit card information to make future purchases.

The user may be concerned with site security.

-HTML

-CSS

Social Networking The Blue Lotus Café and Deli has made it easy to access their social networking sites such as Facebook and Twitter.

The social networking links may lead customers to only view these sites rather that the main site business site.

-HTML

-CSS

-Java Script

-Hyper links


Project Feature



Content


Logo



-HTML-CSS




-HTML-CSS




-HTML-CSS




-Hyperlinks

Image slider



-HTML-CSS

-Flash -Java Script



-Customized

search -Spell check


-Results page

-Error page

Features Table – About Us Page


Features Table – About Us Page

Continued



feature

Content



-HTML

-CSS



-HTML

-CSS

-Java Script

-Hyper links

“Subscribe to Our Blog” Button

This button would direct the user to another forum within the site so that the user may subscribe to the blog.

The customer may not want to enter personal information; therefor they would not be able to subscribe.

-HTML

-CSS

-Hyperlink


Project Feature



Content


Logo



-HTML-CSS




-HTML-CSS




-HTML-CSS




-Hyperlinks

Image slider



-HTML-CSS

-Flash -Java Script



-Customized

search -Spell check


-Results page

-Error page

Features Table – Menu Page


Features Table – Menu Page Continued



feature

Content



-HTML

-CSS



-HTML

-CSS

-Java Script

-Hyper links


Assets Table – Homepage Asset Format Description Associated

Assets/Media (if any)

Other Information

Logo .png The AI logo is simple and Identifiable with dark blue text and a light blue lotus flower.

Animated logo The logo is already created and ready to be implemented.

Main Content Images

.jpg There are 6 images incorporated to showcase the food and textiles.

Images/CSS Images are aesthetically pleasing and visually descriptive.

Navigational Links .png User-friendly links that take the viewer to eight different locations within the website.

HTML/CSS The links provide the user easy access to desired locations.

Introductory content text This is a short introduction on what the Blue Lotus Café and Deli has to offer.

HTML Information that grabs the users attention and wants to know more.

Menu .pdf Printable version of the menu for the users convenience.

HTML The Menu is already created and ready to be implemented.

Image Slider jQuery Rotation of images of the Deli, including food, employees, and textiles.

jQuery Sheet This item has yet to be created.


Assets Table – About Us Page

Asset Format Description Associated Assets/Media (if any)

Other Information

Logo .png The logo is simple and Identifiable with dark blue text and a light blue lotus flower.


Main Content Images

.jpg There are 3 images to showcase the business and owners.




About Us Content Text The story of how the business has gotten started.





Assets Table – Menu Page

Asset Format Description Associated Assets/Media (if any)

Other Information

Logo .png The logo is simple and Identifiable with dark blue text and a light blue lotus flower.


Main Content Images

.jpg There are 3 images to showcase the business and owners.




Menu Content Text Showcases information on the businesses food choices and preparation.





Wireframe

Example 1

Homepage


Wireframe

Example 1About Us

Page


Wireframe

Example 2Homepage


Wireframe

Example 2About Us

Page


Homepage Prototype


About Us Page Prototype


Menu Page Prototype

32

Works Cited


Bedford, Thaddius M. Gabbin Miles. 2013. Liquid Image, Inc. Online Database.

Facebook. No Titles. 2011. Online.

Image Quest. Egypt. N.d. Duncan, Alistar. Kindersley, Dorling. Universal Images Group. Online Database.

Image Quest. Indian Food, Chicken tikka marsala. N.d.

Tondini, Nico. Robert Harding World Imagery.

Universal Images Group. Online Database.

Image Quest. Middle-aged Woman Sitting Behind a Stack of Folders. N.d. LWA. Blend. Learning Pictures. Universal Images Group. Online Database.

Image Quest. Mixed Race Teenage Girl Studying. N.d. Ross, Anderson. Blend. Learning Pictures. Universal Images Group. Online Database.

Image Quest. Toasted Sandwich. N.d. Food and Drink Photos. Universal Images Group. Online Database.

33

Contact Information


Fleur Nachand 4665 West Fletcher Road

Roscommon, Michigan 48653

Email- [email protected] Office- 231.590.8808 Mobile- 928.502.2480

the blue lotus cafÉ and deli website plan fleur nachand user centered information design dr....

Documents