1

2

BCG looks forward to the opportunity to work with CSIC for the re-design and deployment of their expanded corporate web pages and first time ever mobile application and blog. BCG currently estimates that the required time to complete the Design and Deployment aspect of this project is 96 days. The project is scheduled as beginning on March 21st when BCG began work on the storyboard and webmap. The next step is the proposal acceptance by CSIC which if received by April 1st will allow for the new website to be officially released on July 18th. The Design and Deployment Phase will conclude on August 1st following the decommissioning of the legacy servers.

3

4

5

The page structure being proposed is a hierarchical mapping beginning at the topic level with the CSIC home page. The map recommends seven level two landing zone: Services, Resource Center, Locations, Blog, About Us, Contact Us, and Employee Portal. The map identifies 14 level two landing zones which include one page for the current services plus one additional page for each of the five new services, one page for each of the five locations, and three access controlled, internal pages including a launch page to the re-hosted legacy website. The proposed site map includes 22 pages total.

6

The following mockups are being provided. These items were indicated by a red star on the site map.

7

The home page is comprised of eight major elements. The page layout seen on the home page is repeated on all pages throughout the site; this provides branding and identification. Maintaining a consistent template design and style throughout the site enhances the overall user experience by ensuring links, tabs, and buttons are consistently in the same location. The first of the eight elements is the improved logo found in the top left hand corner of every page hosted on the site. Clicking on the logo will return the user to the homepage. The logo has been updated and simplified. The color palette for the logo was intentionally selected to be country generic. Red is the common color found in the flags of all five countries where CSIC currently has office; it was selected as the accent color for this reason. The logo is updatable; the two to three word slogan can be changed by using the content management system. The second element, found in the top right hand corner is a multi-use module for sign-up/sign-in, subscribe, and search. The block’s default mode is expanded, as seen in Figure One, but users have the option of collapsing the menu to the right with a single mouse click. The multi-use module includes a search box that allows users to perform keyword searches of the sites content. The search box supports submissions in English, French, Spanish, and Japanese. The multi-use module provides six social media buttons to the top social media sites of 2013 (Ahmad, 2014). At the top of the module users will find buttons to sign-in to the site, which also dual serves as a request account button, and a button to access the restricted employee portal.

8

The third element on the page is a navigation bar with drop-down menus. The navigation bar is hard coded and the location cannot be changed through the content management system. The titles that appear on the drop down menu bar can be updated and changed by using the content management system. By maintaining a consistent navigation bar, users have a known location on every page for moving to the next page. The navigation bar will be prepopulated with seven menu items, in accordance with the site map found in Appendix Two. All pages one level and two levels below the home page can be directly accessed via the main navigation bar. Hovering the mouse over the navigation bar item expands the drop down menu; clicking on the menu item is not required unless the user desires to navigate to the page. The items listed on the navigation bar are repeated on the page footer. Whether a user is at the top of the page or has scrolled to the bottom of the page, their next page is just one click away. The fourth element on the page is the main image window found in the center of the screen. This window is set on a three second rotating interval and will switch between images, as demonstrated by Figure One, Two, and Three. The window has initially been pre-populated with five images; a landscape city pictures of each of CSIC’s locations. When the user clicks on the image, they will be linked to the city specific page. The images, the overall quantity, and the rotation speed can be changed and adjusted through the content management system.

9

The fifth element sits just beneath the large image window and is comprised of a series of five or six text block / image buttons that directly link the user to either a specific service page or location page. The fifth element also includes a text box to accompany the buttons. A mouse click on the services buttons or the locations buttons will take the user directly to the respective page. These buttons are editable using the content management system. The default timing will be set to six seconds and will rotate with the main image window, changes between the two views can be seen in Figures Two and Three. The inclusion of this element allows for CSIC’s new services and locations to be highlighted on the home page and throughout the site. The sixth element is found near the bottom of the page and is a call to action. In most cases, a website is a gateway to an action such as making a sale, providing information, or gather contact information (Cousins, 2013). BCG recommends CSIC use this call to action space for one of two purposes. The first is to inform the users and provide a downloadable reference document on the types of services offered and why a business may choose these. The second is to connect users directly to the call/chat center for quotes and inquiries. This web element is editable using the content management system and may be added or removed as a complete element from any page to allow additional space for narratives. The seventh element is the footer. The page footer contains the same links as the main navigation bar in additional to a link to the site map as well as options to display the pages in different languages. The eighth element is the overall design and layout. The design is simple and clean and takes advantage of screen real-estate while

10

maintaining adequate blank space. Three variations of the three-bar design are proposed and can be used throughout the site.

10

Two different styles of narrative pages are available through the use of the standard templates. This demonstrates a list style narrative with the option to add images. Through the use of the content management system, the number of columns can be set from 1 to 4 and the number of rolls is indefinite enabled by the use of page scrolling. The content management systems also allows for the entry of the narrative blocks as well as image selection and automatic resizing. In order to fully highlight the new services, the services page will be prepopulated with the new services. The services page maintains the same general template style as seen on the homepage but has been adapted to allow for more and richer content. A user click on any of the services narratives or images will take the user to the request quote form, unless CSIC specifically chooses to develop a page for each service individuals.

11

The second style of narrative page allows for full paragraph posting. Through the use of the content management system, this template can be altered to display text in a single paragraph or in a two or three column layout. The content management system also allows for the content to be edited and replaced.

12

When a user clicks on one of the language links at the bottom of the page, the site refreshes and the user’s view is then displayed accordingly. As seen in Figure 6, the page layout and design is maintained. CSIC recommends and has budgeted for a linguistic and cultural expert to review the initial translations and pages. If the pages are accurate, then BCG recommends CSIC not mirror the site to create cultural specific pages. If the translations are not accurate or the cultural differences cannot be accommodated through the use of a single site, then BCG recommends CSIC fund the efforts to develop an Asian culture centric mirrored site.

13

A user that selects the locations menu on the home page will be taken to the Locations page. The Locations main page includes an interactive map that geographically highlights CSIC’s five locations. A user can select the country specific page either by hovering over the main navigation panel and selecting the respective location from the drop-down, clicking on the flag or city name on the map, or selecting one of the five buttons found in section six, near the bottom of the screen.

14

This is an example of a country specific page . If the branch has a country or region specific logo, BCG will update the logo if desired. The logo or in the absence of a logo, the country flag will be used on each location specific page. To better highlight each of the five locations, BCG has developed a partially narrative template.

15

Two blog designs are included for CSIC’s consideration and selection. The first design, reference Figure 9, is a text based blog view. Information including the author and links to comment are included in line with the blog post. Blog’s are organized through a table structure; the menu is accessible in the panel on the right hand side of the screen. In order to help CSIC with encouraging their employees to participate in the blog, BCG recommends CSIC name a blogger of the month. This employee will have their profile accessible directly from the blog and users can access a summary of that individual’s posts. BCG also recommends CSIC consider an additional incentive or award be provided to employees who are named blogger of the month.

16

The alternate blog view presented is an image based blog. This blog contains very little narrative content but does include an image for each post. In order for users to review the article or post additional comments, they will need to click on the item. BCG will work with CSIC to help with registering the blog site to ensure maximum exposure to crawlers. This will aid in increasing the frequency of updates to the page, moving CSIC’s page further to the top of the recommended pages a user will discover through the use of a search engine.

17

This app maintains the same style and color palette as the full pages with reduced content for mobile accessibility. The mobile app content is automatically generated based on the full site content and can be reviewed or overwritten through the content management system. The mobile app uses expandable menu items allowing the users to access the same pages identified in the site map, reference Appendix B. The mobile application can also be displayed in four languages, just as the fill site can be, and provides users direct access to the full site if desired.

18