InstaBook Website
Design Proposal
Systems redesign and implementation to better support the business and
customers and maximize profits
Four Olives Web Design
Julie Briguglio
Tiffany Maiorana
Christopher Phillips
Bryan Yohe
March 23, 2014
Executive Summary
On behalf of Four Olives Web Design, we are very pleased to participate in the InstaBook RFP
and offer our proposal. We are confident that our proposed solution will deliver a world class,
future ready website solution that will enhance InstaBook’s customers experience by creating a
new, faster and easier electronic delivery mechanism that will consequently increase sales.
The purpose of the following proposal is to outline a solution to provide InstaBook a robust and
reliable website that will drive the business into the future and maximize profits. With the
implementation of this system, InstaBook will be better suited to provide their customers with
the efficient and feature rich online experience they need and deserve.
As the management and ownership of InstaBook, you are aware that to be competitive and
profitable, you must be willing to invest in the future of technology for the business. This not
only makes the business more attractive to new clientele, but also makes it safer for users and
online transactions not to mention, state of the art. While InstaBook may not be the first to
enter into this sector, you can certainly set yourself apart from the competition with a quality
product that delivers on a consistent basis.
Adding InstaBook to our current cloud based service allows for consistent treatment being
delivered to your customers regardless of delivery method chosen. The technical architecture
of our platform is easily organized and will allow for quick and intuitive customer searching
ability.
Our team will work on a phased approach to deliver the seamless migration from your current
website. We are confident that these changes can be completed in the necessary timeframes
to support InstaBook business needs.
Four Olive’s business philosophy is based on a close working relationship with our customers.
The quality of our service is proven by the high satisfaction rates of our customers. We look
forward to your positive response to our RFP. Thank you for your consideration and we are
available for any questions related to our response.
1
Project Plan
We believe the personel needed to complete this project will be a combination of project
management, software engineering, graphic artists, programmers and writers. To keep the
project on the targeted timeline we will need to be aggressive in our execution. This will include
InstaBook management flexibility, user cooperation, and intensive testing to validate and
ensure the website will exceed the expectations of InstaBook and the customer.
The team will be lead by the project manager. The project manager that will be running this
project for InstaBook, has several years of large scale project management for Fortune 500
companies. He has handled several website designs, and brings a wealth of experience in this
particular arena. The project manager will be tasked with keeping the project on task, and
managing the software engineers, graphic artists, programmers and writers. The project
manager will be responsible for keeping InstaBook management up to date with frequent
status updates and weekly meetings to communicate progress and any potential obstacles that
need high level attention and resolution. The project manager will also be the point of contact
for all issues relating to the design, programming, and integration of the new website.
The software engineers, graphic artists, programmers, and writers will be tasked with
redesigning the website, developing and integrating a backend database to hold the book and
articles, as well as making sure the page flow is even and fluent for users. They will also be
responsible for testing of the site to make sure that all products are easily searchable and
download of purchases is smooth for the InstaBook binding equipment.
The following examples in this document shows well laid out designs that can be implemented
for InstaBook.
This architecture was designed to:
 Organize main categories related in a way so that their order is important
 Create access from any page (home page, shopping cart, search box, contact us, help)
 Provide a menu of the main categories and related subcategories available on all
pages
 Group similar information
For your customers our website will:
 Drive meaningful, intuitive information from the start of the website, improving sales
 Securely maintain information entered or derived from self-service interactions
 Push rich web content on multiple browsers
 Enable informed interactions that deliver value to your customers
2
Four Olives Web Design
Project Team:
 Julie Briguglio
 Tiffany Maiorana
 Christopher Phillips
 Bryan Yohe
Memorandum of Understanding
Project Goal/Objectives:
Provide a design solution presentation for InstaBook Web Site including multimedia
components and complete storyboard. This proposal must take into account the current
manual method customers must use to produce their own product and the new streamlined
way for the company to move into the future. We will be proposing changes to implement now
and possibilities for expansion in the future.
Project Description:
Create a website proposal for InstaBook. Our proposal for a revamped product will empower
the end user to make all decisions on their own with little or no involvement from InstaBook for
the actual product creation. This will not only add to the speed for the customer, but free up
resources within the company to develop more products and offerings. The ease with which a
customer can create their own product will also aid in expanding the customer base as word of
mouth is the best advertisement.
Scope of Work:


Develop a comprehensive storyboard for the proposed InstaBook Web Site
Produce and deliver a presentation on our web site design
Major Deliverables:



Provide a clear flow chart of the site
Provide clear demonstration of site’s navigation system
Ensure clear accessibility, and appropriate browser/display considerations on web site
3
End User Analysis
In this Request for Proposal (RFP), we will address the concerns, both internal and external to
InstaBook. We have conducted interviews with the Vice Presidents of each division to come to
a consensus of what the final product should look like and how it should function. We will break
this down into three separate sections: User Profile, Data Sources, and Future Data Collection
Plans.
The User Profile will address the concerns and desires of the final product of the Vice
Presidents of each department, and will define the typical user of InstaBook today. The Data
Sourcing section will detail how we conducted our end user analysis. The Future Data
Collection Plans explains how we would like to gather additional data to ensure InstaBook
stays current with their end user needs.
User Profile
Today the current end user base of InstaBook is Industry Trainers. The trainers have been
attracted to InstaBook for the customization that is offered. Prior to the website, growth of the
company has come from trade shows, and word of mouth. We will address how they are
currently accessing the internet within the Style Guide.
Currently the United States Census Bureau states that 20% of the US population has a
disability (Census, 2012). As such, the final product will have to comply with Section 508 of the
Rehabilitation Act of 1973. This Act provides for reasonable accommodations for those with
disabilities, and Section 508 address specifically access to Information Technology for those
with physical, sensor, or cognitive disabilities (Section508.gov). This will addressed within the
Style Guide.
Currently it takes at least 1 day to onboard new customers for an InstaBook Binder. Sales
orders are hand delivered and processed via FedEx. In addition, when an end user wants to
create a new InstaBook they are required to call into the Sales department to acquire the
codes for the rights to the material that they are creating. The end customers are looking for a
streamlined process and increased ease of the overall user experience. They have stated that
they would like to be able to process new material through entering their information directly to
InstaBook electronically. Below is a lists of potential request from the customers and internal to
InstaBook to improve the End User’s experience.

Increase the visual appeal of the site
4



o Better interface – Currently DOS interface requires ineffective search
strings
Clearly define structure of who to call (i.e. Sales, Customer Service and
Technical Assistance)
Technical Support Online for self-guided solutions
A better understanding of the Company
The implementation of the website will address many of these end user wishes. At the same
time this will drive additional sales and streamline the customer service and technical support
processes.
Data Sources
This data was collected through a variety of sources. Interviews were conducted with all of the
Vice President of the various departments. This allowed for the best understanding of the
internal workings of InstaBook. Harold Kern, President of InstaBook, provided detailed
feedback from Ima Customer. This has allowed for an understanding of what the current
customers are looking for in the next phase of InstaBook.
Both sources of feedback were taken into consideration for this RFP response and will be
present in the final product.
Future Data Collection Plans
As the business needs change, the website will need to change with them. InstaBook will need
to be agile in making the correct changes to the site based on the current user base. As stated
above, the current user base is Industry Trainers. The site will need to change if there is a
change within the end user base.
With the buyout of MegaBooks, InstaBook now has a larger portfolio of potential customers.
For example, Instabook can now target education customers which may result in a change in
the end user experience of the website. As you will see in the Style Guide, currently 60% of the
customers use Internet Explorer for browsing the web. If the user base extends to the
educational arena, there will be an increase in browsers such as Safari and FireFox, and Apple
tools will be needed since many in the education field are Mac users.
We will gather future end user data through the use of third party surveys and cookies. The
surveys will also allow InstaBook to collect additional feedback on the supplementary features
that the end users will be looking for InstaBook to provide. Cookies will allow for InstaBook to
collect additional information about a customer’s browsing habits and previous purchases to
provide better suggestions and servicing for future purchases.
5
Style Guide and User Specs
General Look and Feel
A cohesive web presence not only makes it easier for InstaBook users to find information, it
reinforces the company’s strengths. The web pages will be dynamic and will give InstaBook
the ability to update and add new content to the site as needed. This will create a more
functional website. The site will also meet accessibility standards and we will conduct
additional testing with accessibility validation tools.
Page Layout Description
Common Elements
Header - The header is the primary means of creating a consistent experience across the
sites. The header will have pages at the top-level of the site and include the InstaBooks logo in
the top left position and the utility navigation and search controls in the top right position.
Footer - The footer will contain navigation in a horizontal list with the copyright information
below. When it’s necessary to have additional information in the footer, this content should be
added above the footer area, at the bottom of the center column. The navigation in the global
footer should remain intact.
Logo - the logo should be reproduced at a size that maintains the integrity of the mark and
yields clean and legible lettering and art detail. The minimum size for the insignia of the logo is
7/8-inch diameter. There must be sufficient space around the logo to make it stand apart from
other visual elements. Text, headlines, photographs, or illustrations should never be closer to
the logo than one-quarter the diameter of the insignia.
Best Practices
Cognitive/Visual/Accessibility (Robbins, 2012):
 All links will be clearly labeled
 Easy to use controls and navigation
 Each page of the site will have a clear way for users to return to homepage of the
web site
 No underlining used unless a hyperlink
 Italic type will not be used
 Search engine will search the entire site
 Custom 404 page will be created
 Navigational icons will be used with a text label
 Use meaningful ALT tags will be used on images
6






CSS3 used for headings, lists, fonts and colors
Tables are clearly named
No frames used
Site will be 508 compliant
Accessibility validations tools that will be used:
- AChecker
- EtreAccessibility Check
- Functional Accessibility Evaluator 1.1
Limited use of streaming video or plug-ins. If the customer cannot view the Company
video, the brochure is also attached which details the same information. A link to
download any document or player will be included on the site.
Target Technical Audience - Screen Resolution and Recommended Browses
Minimum User Requirements:
Screen Resolution
1024 X 768
Browsers for Testing Firefox, Microsoft IE, Chrome
and Safari
Color
24 bit



The site will be developed on Adobe’s Dreamweaver to ensure the appearance is
appropriate for the specific browsers
Fonts, colors and placement will be the same for all browsers
The website will be designed for IE 9 and above, Firefox v26 and higher and
Chrome 33 and higher. There will be a disclaimer on the website that states that
older versions may experience some degradation in performance/appearance.
The recommended screen resolution for our website is 1024 X 768. However, we can
also supports 800 X 600 (with small fonts). At lower resolutions, such as 640 X 480 or
800 X 600 (large fonts), the icon bar does not appear and some parts of the InstaBook
site may appear truncated. We can address this concern in the help section of the
website.
7
Font/Color Information
Web Element Color Values/Font:
As a general guideline, Arial regular will be used for body copy and sub-headings, while
Arial Bold is used for headings and headlines.
Page Header
Main Header
Text
Background Color
Navigation Link Graphic
Font Color
Active Link
Links Unvisited
Links Visited
18 point bold
14 point, bold
Black Arial 12 point
Pastel Blue (HEX # 95b6d9)
Dark Blue (HEX #235793)
Black (Hex #000000)
Red
Blue
Purple
Primary Color Palette
Page Background
HEX # 95b6d9
Navigation Link Graphic
HEX #235793
Hyperlinks
Visited Hyperlinks
Active Link
8
Font Color
Hex #000000
Developer’s Notes
Web Design Team –














The site will be developed using Web 2.0 standards, and 508 Compliant.
CSS3 will be used as much as possible to mitigate having to make site wide changes
for maintenance and updating.
All static images and company logo will be provided by InstaBook.
Unless otherwise noted, the basic color palette will be used on all pages, Pastel Blue
(HEX #95b6d9) for the background, and Dark Blue (HEX #235793) for the navigation
link graphics.
Unless otherwise noted, all fonts will be Arial, 12 point black for all body frames. Arial 18
point bold font will be used for any Page Headers and Arial 14 point bold font will be
used for Page Headers.
All fonts will be black with the exception of hyperlinks.
o Unvisited Hyperlinks will be blue
o Visited Hyperlinks will be purple
o Active Hyperlinks will be red
The website will be developed for a base screen resolution of 1024x768
o All frames, tables, and graphics will be set to size by percentage of screen realestate to make sure that auto-sizing will occur on various resolutions.
The website will be developed and tested for Internet Explorer, Firefox, Safari and
Chrome.
Website accessibility will be checked against the Functional Accessibility Evaluator 1.1
(http://fae.cita.uiuc.edu/)
Search feature will need to be able to connect to the backend database developed by
the Database developers to return accurate search results. Functionality should be built
in that any search that returns a null from the Database will give the user the option of
emailing the Sales team to have the book, periodical, or article added to the database.
Website will need to have functionality to play Flash media to accommodate the
company video. Users will need to be directed to automatically download the correct
plugin if they do not have the functionality. Ideally it would do it without taking them
away from the InstaBook website.
All logos and static images need to have accessibility features built in for users with
disabilities. Graphics must include alternate text to describe them.
All audio and video must include a transcript file of the video or audio recording.
All navigation buttons, menus, form fields and controls need to be accessible with
keyboard controls as well as mouse controls.
9
Database Design Team –





InstaBook’s current database of books, periodicals, and articles will be redesigned. We
will build the new database server around a Windows Server 2008 platform running IIS7
and Microsoft SQL Server 2008.
The new database will need to be comprised of three new tables; books, periodicals,
and articles.
Database must be tied into the Search feature within the website design itself.
Users must be able to perform a search based on the following.
o Book name
o Periodical Name
o Article Name
o Subject
o Keywords
o Author
o ISBN Number
o Year Published
o Publisher
Book Selections page must have a dashboard that is tied into the database showing the
most searched and trending books, periodicals and articles.
10
Site Navigation
11
Search Navigation
12
13
14
15
Instabook Storyboard
16
Works Cited
Accessibility Evaluation Resources. (2013, December 20). Retrieved from Web Accessibility Initative:
http://www.w3.org/WAI/eval/preliminary.html
Colorblender. (n.d.). Retrieved from Colorblender: http://colorblender.com/
Robbins, J. (2012). Big Concepts You Need to Know. In J. Robbins, Learning Web Design (pp. 33-45).
Sebastopol: O'Reilly Media Inc.
Section 508 (2014) Retrieved from Section508.gov
United States Census Bureau (July 25, 2012) Nearly 1 in 5 People Have a Disability in the U.S., Census
Bureau Reports. Retrieved from US Census Bureau
https://www.census.gov/newsroom/releases/archives/miscellaneous/cb12-134.html
Usability Website Evaluations. (n.d.). Retrieved from usability.gov: http://www.usability.gov/what-andwhy/usability-evaluation.html
Washington, U. o. (2005-2008). How People with DIsabilities Access to Web. Retrieved from
http://www.washington.edu/accessit/webdesign/student/unit1/module3/lesson2.htm
Web Design and Applications. (n.d.). Retrieved from W3C: http://www.w3.org/standards/webdesign/
17