Grandview

Grind
WEBSITE REDESIGN
Justin Cline, Jordan Flowers, Matthew Kapp, Carly Temple



Table of Contents

Contents
Proposal & Goals ______________________________________________________ 1
Home Page ___________________________________________________________ 2
About Us Page ________________________________________________________ 3
Menu Page ___________________________________________________________ 4
Contact Page _________________________________________________________ 5


Pg. 1

Redesign Proposal


Redesign Proposal
In an effort to revitalize local business Grandview Grind a website redesign will be
implemented. The purpose of this is to generate additional traffic to the site as well as the
coffee shop.
WHAT PEOPLE WANT:
Many important aspects of the coffee shop are absent the website, the redesign will apply
these to better suit the needs of Grandview Grinds current and potential customers. These
changes include:
A more refined menu, which offers prices of each item.
A contact page, which has all of the company information including the location of the
coffee shop. In addition, a uniform contact (phone and email) will be present
throughout the website.
An easy to navigate and easy on the eye website.
AVERAGE USERS:
The current and anticipated patrons of Grandview Grind are local grad students, young
professionals, young families, and college students and employees. The website redesign will
be catered to these users, offering a more modern approach to the coffee shops website.
CUSTOMIZATION:
One of the biggest problems is the look and feel of the current site, more welcoming visual
content that provides the warmth of a fresh cup of coffee will be implemented throughout. In
addition, the layout will be completely restructured by collapsing some pages into others,
moving the website header above the navigation bar, offering prices and products, linking the
brand to their social networking profiles, and providing contact information throughout.


Redesign
Objectives:
Inform
public about
company
Present
more
aesthetically
appealing
website
Restructure
website
layout for
easier
navigation
Pg. 2

Home Page Redesign


Home Page Redesign

The current sites home page (above) is not too messy, but could use some touching up. One
of the biggest problems is the variation of font; in total there are 5 differing fonts. This should
be reduced to 2, maximum.
In addition to the fonts, the color scheme is off putting. Though somewhat reflective of the gold
in the logo, it can easily be tweaked to warmer and more welcoming colors. A darker color
would achieve this. The image of Impero Coffees homepage uses brown coffee beans in the
background, and is all around more appealing. A similar concept will be implemented.
The navigation is also too much. The new navigation bar will be reduced to the following
pages: Home, About Us, Menu, and Contact. The site is not deep enough to require a more
congested feel with such larger navigation, and some of the pages are not required. The
navigation bar will also be moved below the website header, and the Grandview Grind logo will
always link back to the home page.
Home Page
Objectives:
Refine
Navigation
Clean Up
Aesthetics
-New Color Scheme
-Less Font Diversity
-Image Gallery
Fix Contacts
Incorporate
Social Media
Pg. 2

Home Page Redesign


The contact information will be moved, and uniform through. It will be put up in the right hand
corner of the page along with social media icons.
Finally, the page will be less busy with random looking pinnings on a corkboard and replaced
with a scrolling photo gallery of the environment, products, and customers.
IMPERO COFFEE WEBSITE ANALYSIS

The above photo of Impero Coffee is a good example of a successful website. Some of the
discussed features that are successful are the deep, warm, inviting colors which give it a
coffee feel, the scrolling photo gallery, more focused top navigation, fewer and more uniform
fonts, and the contact/social media being mounted in the top right throughout the entirety of the
site.
Imperos website has a much more fluid layout, navigation is easier and gone are links to extra
pages that can be consolidated (combining Grandview Grinds Location page with a new
Contact page, combining Drinks and Pastries page into one Menu page). The site has
what any user would expect, no more and no less.


Pg. 3

About Us Page Redesign


About Us Page Redesign





About Us Page
Objectives:
Give the
companys core
values
Provide a list of
what the
company offers
State the
companys main
objective
CURRENT ABOUT US
(PUBLICITY) PAGE:
The heading used for the page is
Publicity, which neither effectively
describes the section nor merits its
own page as it is only one article.
The only purpose of this page is to
give a link to an outside website
which has an article about the
company. The page has a picture of
a woman yet it does not tell us who
she is or why the picture is there.
Everything but the link on this page
appears to be space filler.
A proper About Us page needs
to have more information than this
page provides its clientele. This
page is more confusing than it is
helpful. One coffee shop website
that lends an appropriate and well
thought out About Us page is
Caribou Coffee.
Pg. 3

About Us Page Redesign




CARIBOU COFFEE
WEBSITE ANALYSIS
The title of the page is
appropriate and signifies
what the viewer will be
reading about. The page
offers a variety of articles
to read based on who
their audience is. The
empty space is filled with
useful items such as the
Caribou Location locator.
The particular page is
much more successful
than Grandview Grinds
version, and will be
instrumental in the
redesign.
Caribous page not only includes links to different facets of the company but also a link
describing the companys culture. This page lists the companys core values, gives a
short synopsis of why Caribou stands apart from other companies, and lets the
customer know that Caribou aspires to be the place in the community that everyone
loves.
Similar design and information will be available for the restructured Grandview Grind
websites About Us page.
Pg. 4

Menu Page Redesign

The list of food included in the Pastries section
CURRENT MENU PAGE:
Grandview Grinds current menu design
divides Drinks and Pastries into two
separate pages, neither of which is well
organized or informative.
The website often includes
unnecessary pictures like this
coffee cup that are aesthetically uninteresting
and do little more than crowd the page.
The Pastries page of grandveiwgrind.com
leads users to another series of formatting
mistakes. Aside from awkwardly ignoring
plurality (scone, bagel, etc).

Users who visit the food and drink section are more likely
to be searching for prices, nutrition facts, allergy
information, and specific flavors (for example, Blueberry-
Banana Muffins instead of just Muffin).
Furthermore, Items like Hard-Boiled Egg need to be
plural, and fail to fit into the category of Pastries, as
suggested by the page title.








The Drinks page of grandviewgrind.com


Pg. 4

Menu Page Redesign

Menu Page
Objectives:
More navigable
menu
Added details of
food & drinks
Interactive menu
options
Removal of
unnecessary
pictures and
graphics


Grandview Grinds Menu
section is a flawed in
several ways; page titles
are misleading, food
names are
uninformative, and the
pages are not interactive
or well organized.
To remedy this, we propose that Grandview Grind borrow
several of the design initiatives of Starbucks. Starbucks.com includes a
substantial Menu section where users are able to navigate between Food, Drinks, and
Nutrition Information. While a local coffee shop such as Grandview Grind may not need to
include nutrition facts, a more detailed navigation system is undoubtedly needed.
A great option for the menu page of grandviewgrind.com is to divide the food and drinks
into clear categories. As shown above, Starbucks has divided the Drinks sections into
Bottled Drinks, Brewed Coffee, Smoothies, etc. Furthermore, each clearly labeled
group is clickable, and lets the user know it is a link by turning green upon hovering over
the area with a cursor.
In addition, Starbucks includes images with all of their bakery products, a tactic that
certainly makes the food more appealing. The names of the items are descriptive and
catchy Chonga Bagel instead of simply bagel and the images clearly depict the
product. Grandview Grind could easily include professional looking photographs of their
bakery items, and should be more specific in naming their products.



Starbucks.com features a menu complete with stunning pictures and detailed
bakery descriptions.
Pg. 5

Contact Page Redesign


Contact Page Redesign
















The contact information should be the easiest and most important piece of information on this
page. Currently it is hard to search through the clutter to locate this information. The phone
number is also not listed, making it harder for users to find out how to contact the company.
The pictures and advertisements are misleading in the fact that they do not have embedded
links. This being the case, their current function is simply to add unnecessary clutter.

Contact Page
Objectives:
Incorporate an
interactive map
Make contact
info easy to
locate
Make links
apparent and
clickable
Limit the page
to useful
information
List shop
hours
Make title easier to read
Omit pictures and irrelevant ads
which provide no information
Make contact info
Less hidden
Pg. 5

Contact Page Redesign














The German Village Coffee Shop has a successful contact page website, which includes an easy to
find contact information, allows users to email questions, and has an interactive map showing the
shops location. The contact information for Grandview Grind will be moved to the top of the page,
allowing users to quickly find it. In addition, it will be a permanent fixture throughout the site. The
clutter will be reduced by limiting the page to only things that are pertinent to the companys contact
information and location.
The removal of extraneous information will provide not only an easier to navigate page, but we will
also have free space, where an interactive map, linked to the address, will be displayed. Also, the
coffee shop hours will be made available through the contact page.

Interactive Map
Contact information is
easy to locate
Users are able to ask
direct questions
!""#$%&'%( *+,! !"#"$%&' )*+,+$-.
_19___!"#$ &$'()"*#"+, -./ *+",#'0
Discusses overall goals of the site. Why it exists and what users what from it.
Discusses the average user of the site. Who they are. What they like. Thinking how this site
and your new site might be customized for there needs, interests, aesthetics.
Describes the different purposes of all three pages youre going to redesign.
_19___1234' 5,326'"' -./ *+",#'0
Discusses several flaws of each page of the site.
Uses the mantra Dont make me think from the readings as well as everything else weve
learned and read in this unit thus far.
Discusses flaws in navigation, layout, color, font, legibility, etc., etc., on all three pages
youre going to redesign.
Uses specific examples that are clearly illustrated by labeled images.
_19___52#$),3#"7$' -./ *+",#'0
Provides three alternatives of sites similar to one youre redesigning.
Discusses how each alternative solves one of the major problems of your site.
Uses specific examples that are clearly illustrated by labeled images.
10?____8)+*+'32 -./ *+",#'0 6+9) :"''",; #<$ (+,(29=",; *)+*+'32 '#3#$:$,#> ? ;37$
6+9 #$, *+",#' )3#<$) #<3, @$)+ A$(39'$ ? '9**+'$ 6+9 *)+*+'$ #<",;' #<)+9;<+9# #<$
=+(9:$,#>
Uses the alternatives as well as your design knowledge from the readings to propose
several concrete changes that you will make to the website.
Provides solutions for all three pages.
Discusses these changes as related to the goals of the site, the specific users of the site, and
the users needs.
Makes it clear where you are going next. And leaves me with the knowledge that you have
a clear plan for the next step of the project.

_18___&+(9:$,# &$'";, -B/ *+",#'0
Document is customized in terms of color, header, etc., to the company you are working
designing for.
Document is browsable. Follows a formatting similar to the examples online.
Document is visually appealing.
Document is uniform.
Document uses concrete examples.

_9___C)"#",; D932"#6 -B/ *+",#'0

__86____E+#32 -B// *+",#'0