1 MOAA-LV Secure Web Page ProjectIMD 123: Final Project Presentation February 15, 2017
2 Table of Contents Stakeholder Overview 3Stakeholder Goal & Objective 4 User Demographics & Needs 5 User Personas User Scenario 9 Meeting the Objectives 10 Functional/Content Specifications Features Table Content Assets Table 16 Architectural Map 17 Wire Frames Style Guide Mock-ups References Contact Information 27
3 Stakeholder Overview The Southern Nevada Chapter of the Military Officers Association of America (MOAA) has requested a secure link and content area for its chapter Web site, currently under revision. Established in August of 1965 and based in Las Vegas, the chapter – one of 400 nationwide – mostly serves members residing in the Las Vegas area. This idea emerged with the in-progress revision of the chapter’s Web site sparked by the need to provide digital access to member-only information. The rationale for this project is based on the status and needs of the primary user population: provide a secure source of information for older veterans and their families to receive information, that if compromised, could potentially lead to fraudulent actions against these members.
4 Stakeholder Goal & ObjectiveThe goal is to develop a means of providing member-only access to non-public information related to MOAA and the local chapter. More specifically, chapter board members desire to provide a secure means of releasing the chapter’s monthly newsletter intact, as the document contains Personally Identifiable Information (PII). Telephone numbers Addresses Death announcements (These often contain information that unscrupulous actors could use to defraud the organization’s members)
5 User Demographics & NeedsTarget Group/Users: Average age exceeds 60 – likely in the year-old range The majority of the users are male (about 84%) 80-90% hold at least one advanced degree (BA or BS) Overall computer experience is limited, given the age group; most use some form of social media/ to communicate digitally, with Facebook being the most popular medium Previous digital experience is at the novice level; most have minimal technical expertise Nearly 100% are retired on a fixed income, or only work part-time or as-needed; average income is approximately $60K-70K per year Rationale for idea: The monthly newsletter is very popular for this demographic and snail mail distribution was terminated about a year ago distribution is the norm now; however, the board of directors requested a secure link from the public chapter Web site so members could access the newsletter at will
6 User Persona
7 User Persona
8 User Persona
9 User Scenario Janet is a prolific Internet user and a frequent visitor to the MOAA Web site. She found the secure link on the chapter’s homepage, clicked on it, established her login credentials and entered the member’s only section of the site. Janet’s first awareness, once she entered the secured area, was the link to the monthly newsletter. She also noticed how each section of the newsletter was broken down into individual directories, each with its own access button. She views the entire newsletter first, checking the “legislative action” section as this is of particular interest to her. After the overall review, she backs out of the newsletter and clicks on the individual section buttons to view the photo gallery and the public affairs information. Once Janet has satisfied her interests in these particular areas, she exits the secure area to browse the remainder of the Web site.
10 Meeting the ObjectivesProviding a secure area within the MOAA-LV public Web site, provides a location for stakeholders to post sensitive information without fear of compromising member PII. Likewise, users are able to view information that was often left to the newsletter – usually considered a more secured environment – but will now be visible on-line.
11 Functional Specs: IntroductionThe header, navigation bar, and footer are the same for each page, and their descriptions appear below. The header hosts the local chapter logo placed to the far left of the header. The logo resides on a white background with the entire logo resting on top of a medium blue banner. The blue banner fills the remainder of the header with three lines of black text centered (between the logo and the right-hand border of the header) on the banner. The text reads “MOAA-LV” on line one, “Military Officers Association of America” on line two, and “Southern Nevada Chapter” on line three. The navigation bar is a lighter shade of blue (cyan)and contains five buttons with black text: Newsletter; Photo Gallery; Announcements; Roster; and Return (this button takes the user back to the “public” section of the Web site). The buttons are a rectangular shape and are separated by a white border on each side. As the user scrolls over a given button, the button background is highlighted; also, the text in the button representing the page being accessed turns to white when that page is clicked on and while it’s being viewed. The footer consists of a quote presented in one line of text: “We fight for legislation that supports all service members, veterans, families, and survivors.” The text is black and is centered from left to right between the page’s margins.
12 Functional Specs: Home pageThe Military Officers Association of America (MOAA) Web site “members only” section will contain a landing page entitled “Newsletter.” Under this page will be three inner pages, “Photo Gallery,” “Announcements,” and “Roster.” The page consists of two sections as well as two banners, one upper and one lower. The first section, “News Articles,” resides just below the top banner and contains text only, to include a graphic text box to the far left of the first section. The text is broken up by the subjects of the news content and spans from the graphic text box to the far right of the page. For example, the first article might be titled “Local Fundraiser,” followed by a description of a recent fundraising event. The second article might address the passing of a member, and so on. The second section of this page will house a link to the organization’s newsletter using a hyperlink from the text “Newsletter”. The newsletter is a pdf document that contains most of the information within this section of the Web site, as well as other information in the non-secured (public) part of the Web site, all in one place. Essentially, this is the document mailed to members who have no on-line access and prefer a printed product versus a digital medium. The footer, with the text described in the “Introduction” slide, falls immediately after the bottom banner.
13 Functional Specs: Inner page 1The Photo Gallery page will contain groupings of image thumbnails, captured in sections, stacked on top of each other. At the top of the stack, just below the navigation bar, will be a list of the section names with hotlinks that will take the user directly to that section. The user can also scroll down the page to view each section in order. Notionally, the sections will be labeled “Community Events,” Special Ceremonies,” “ROTC Awards Dinner,” “Holiday Photos,” and “General.” Each of the five sections will house thumbnails of the photos, with links to high-resolution versions of each photo. A nearly transparent photo will reside behind the middle part of the page, beginning just below the navigation bar and stopping just above the footer. The photo will also spread from side to side on the page, and can be updated as desired.
14 Functional Specs: Inner page 2Like the landing page, this page will also have two banners with text, one just below the navigation bar and one just above the footer. The top banner will feature the page title and the bottom will provide a hyperlink for users to submit announcements. This page will contain a list of announcement-type items, text only, beginning just below the top banner. Some of the information may be a repeat of newsletter content or reflective of the newsletter and photo gallery pages, and some will be new. As with the photos, the items will be stacked on top of each other with the text filling the page from left to right. For short announcements (less than a line of text), the text will occupy its own line; different items will not occupy the same line of text, but will be carried to the next line. The footer, with the text described in the “Introduction” slide, falls immediately after the bottom banner.
15 Features Table
16 Content Assets Table
17 Architectural Map Newsletter Photo Gallery Image thumbnailsentry point (secure login) Action button: The “Return” button on the navigation bar is an example of an interface element, in this case, meant to return the user to the public side of the Website without additional log-out action. This action is necessary so the of the Website and to allow the stakeholder a pathway to return by. Newsletter Photo Gallery Image thumbnails Announcements Roster pdf copy of printed Roster pdf copy of printed Newsletter exit point “Return” nav button Menu List: The “Photo Gallery” page will contain a menu list of five internal sections, each with a hypertext link to that section of the page. Since the sections are stacked vertically and the content in each section can be substantial, this menu provides a means for the stakeholder to support the user in finding images quick and efficiently. The Radial strategy provides a mechanism for the stakeholder to provide robust printed documents to the user in a direct fashion. The user, who desires these documents, has direct access and his/her needs are met quickly. Once done, the user closes the doc and is returned to the page he/she started at. The Hierarchical strategy provides a mechanism for the stakeholder to deliver information to the user while also providing the option of moving to other parts of the Website. The user saves time and is spared additional mouse clicks. Radial Hierarchical
18 Wire Frame: Home page 1 Text (News Articles)Logo Header Text Footer Text Text (News Articles) Action Button (leads to printed newsletter) Local Navigation Graphic Banner with text
19 Wire Frame: Home page 2 Action Button (leads to printed newsletter)Header Text Logo Header Text Header Text Action Button (leads to printed newsletter) Local Navigation Text (News Articles) Footer Text
20 Wire Frame: Inner page 1 Text (Menu) Image ThumbnailsLogo Footer Text Text (Menu) Local Navigation Image Thumbnails Header Text Transparent photo In the background
21 Wire Frame: Inner page 2 Text (Announcements) Footer Text LogoHeader Text Footer Text Text (Announcements) Local Navigation Banner with text
22 Style Guide Fonts Logo SOUTHERN NEVADA CHAPTERHeader: Copperplate Gothic Light, normal, 24 pt, white Navigation Bar: Aldrich, normal, 14 pt, black Section Title: Aldrich, normal, 16 pt, black Section Text: Arial, normal, 12 pt, black Nav Button (Newsletter): Aldrich, bold, 14 pt, black Footer: Aldrich, normal, 14 pt, black Blue #3350D2 51, 80, 210 Header Cyan #00FFFF 0, 255, 255 Nav Bar and Footer Fonts Black #000000 0, 0, 0 Text White #FFFFFF 255, 255, 255 Logo Note: MOAA National allows chapters to use the national logo with local ID to create a local chapter logo. Red #b5121b 181, 18, 27 Border/Divider Bar/Logo Dark Blue #003745 0, 55, 69 SOUTHERN NEVADA CHAPTER
23 Mock-up: Newsletter page
24 Mock-up: Photo Gallery page
25 Mock-up: Announcements page
26 References http://www.color-hex.com/The MOAA Brand Book, Updated 11/6/15 F-35A IOC Ceremony image
27 Contact Information Michael (Mike) Young Cell: (940) LinkedIn: https://www.linkedin.com/in/mike-young-07b98b48/