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 3
Stakeholder Objectives 4-5
User Demographics
6
User Needs
7
User Personas
8-10
User Scenario
11
Functional Content
12-13
Specifications
Content Table
14-19
Assets Table
20-22
Architectural Map
23
Wireframes
24-27
Style Guide
28
Prototype
29-31
Works Cited
32
Contact 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.
The Blue Lotus Cafe and Deli Website Plan
3
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.
The Blue Lotus Cafe and Deli Website Plan
4
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
The Blue Lotus Cafe and Deli Website Plan
5
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.
The Blue Lotus Cafe and Deli Website Plan
6
User Needs
8

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.
The Blue Lotus Cafe and Deli Website Plan
7
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
The Blue Lotus Cafe and Deli Website Plan
8
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.
The Blue Lotus Cafe and Deli Website Plan
9
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.
The Blue Lotus Cafe and Deli Website Plan
10
User Scenario
12


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.
The Blue Lotus Cafe and Deli Website Plan
11
Functional Content Specifications
13


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.
The Blue Lotus Cafe and Deli Website Plan
12
Functional Content Specifications
(Continued)
14



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.
The Blue Lotus Cafe and Deli Website Plan
13
Features Table – Homepage
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
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
browsers.
The Blue Lotus Cafe and Deli Website Plan
-HTML
-CSS
-Hyperlinks
14
Features Table – Homepage
Continued
Project Feature
How will the feature be
implemented
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 Blue Lotus Café and Deli has
made it easy to access their social
networking sites such as Facebook
and Twitter.
Social Networking
What concerns do we have
about this feature
Content
The user may be concerned with
site security.
-HTML
The social networking links may
lead customers to only view these
sites rather that the main site
business site.
-HTML
-CSS
-CSS
-Java Script
-Hyper links
The Blue Lotus Cafe and Deli Website Plan
15
Features Table – About Us Page
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
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
browsers.
The Blue Lotus Cafe and Deli Website Plan
-HTML
-CSS
-Hyperlinks
16
Features Table – About Us Page
Continued
Project Feature
How will the feature be
implemented
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 Blue Lotus Café and Deli has
made it easy to access their social
networking sites such as Facebook
and Twitter.
Social Networking
“Subscribe to Our Blog” Button
What concerns do we have
about this feature
Content
The user may be concerned with
site security.
-HTML
The social networking links may
lead customers to only view these
sites rather that the main site
business site.
-HTML
This button would direct the user to The customer may not want to
another forum within the site so
enter personal information; therefor
that the user may subscribe to the
they would not be able to subscribe.
blog.
The Blue Lotus Cafe and Deli Website Plan
-CSS
-CSS
-Java Script
-Hyper links
-HTML
-CSS
-Hyperlink
17
Features Table – Menu Page
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
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
browsers.
The Blue Lotus Cafe and Deli Website Plan
-HTML
-CSS
-Hyperlinks
18
Features Table – Menu Page
Continued
Project Feature
Site Log in
Social Networking
How will the feature be
implemented
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 Blue Lotus Café and Deli has
made it easy to access their social
networking sites such as Facebook
and Twitter.
What concerns do we have
about this feature
Content
The user may be concerned with
site security.
-HTML
The social networking links may
lead customers to only view these
sites rather that the main site
business site.
-HTML
-CSS
-CSS
-Java Script
-Hyper links
The Blue Lotus Cafe and Deli Website Plan
19
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
jQuery Sheet
This item has yet to be
created.
Rotation of images of the
Deli, including food,
employees, and textiles.
The Blue Lotus Cafe and Deli Website Plan
20
Assets Table – About Us Page
Asset
Format
Description
Logo
.png
Main Content Images
.jpg
Navigational Links
.png
About Us Content
Text
Menu
.pdf
Associated
Assets/Media (if
any)
The logo is simple and
Identifiable with dark blue
text and a light blue lotus
flower.
There are 3 images to
showcase the business and
owners.
User-friendly links that take
the viewer to eight different
locations within the
website.
The story of how the
business has gotten started.
Printable version of the
menu for the users
convenience.
The Blue Lotus Cafe and Deli Website Plan
Other Information
Animated logo
The logo is already created
and ready to be
implemented.
Images/CSS
Images are aesthetically
pleasing and visually
descriptive.
The links provide the user
easy access to desired
locations.
HTML/CSS
HTML
HTML
Information that grabs the
users attention and wants
to know more.
The Menu is already
created and ready to be
implemented.
21
Assets Table – Menu Page
Asset
Format
Description
Logo
.png
Main Content Images
.jpg
Navigational Links
.png
Menu Content
Text
Menu
.pdf
Associated
Assets/Media (if
any)
The logo is simple and
Identifiable with dark blue
text and a light blue lotus
flower.
There are 3 images to
showcase the business and
owners.
User-friendly links that take
the viewer to eight different
locations within the
website.
Showcases information on
the businesses food choices
and preparation.
Printable version of the
menu for the users
convenience.
The Blue Lotus Cafe and Deli Website Plan
Other Information
Animated logo
The logo is already created
and ready to be
implemented.
Images/CSS
Images are aesthetically
pleasing and visually
descriptive.
The links provide the user
easy access to desired
locations.
HTML/CSS
HTML
Information that grabs the
users attention and wants
to know more.
HTML
The Menu is already
created and ready to be
implemented.
22
The Blue Lotus Cafe and Deli Website Plan
23
Wirefram
e Example 1
Homepage
The Blue Lotus Cafe and Deli Website Plan
24
Wireframe
Example 1
About Us
Page
The Blue Lotus Cafe and Deli Website Plan
25
Wireframe
Example 2
Homepage
The Blue Lotus Cafe and Deli Website Plan
26
Wireframe
Example 2
About Us
Page
The Blue Lotus Cafe and Deli Website Plan
27
The Blue Lotus Cafe and Deli Website Plan
28
Homepage Prototype
The Blue Lotus Cafe and Deli Website Plan
29
About Us Page Prototype
The Blue Lotus Cafe and Deli Website Plan
30
Menu Page Prototype
The Blue Lotus Cafe and Deli Website Plan
31
Works Cited
33
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.
The Blue Lotus Cafe and Deli Website Plan
32
Contact Information
34
Fleur Nachand
4665 West Fletcher Road
Roscommon, Michigan 48653
Email- fleur.nachand@gmail.com
Office- 231.590.8808
Mobile- 928.502.2480
The Blue Lotus Cafe and Deli Website Plan
33