Context
I worked on a team at MITRE to create this portal for employees at the company. As MITRE works alongside the Air Force, the portal was called "AFC@Work" ("AFC" for "Air Force Center") and was designed to be an office homepage. The customizable portal aggregated MITRE and Air Force information and services to one place and allowed users to save their preferences.
After my teammate created the portal's initial design, I thought up the final color scheme and influenced the evolving design. I decided on design and user interface details (such as spacing and width) while implementing the portal's design into a web prototype using XHTML and CSS.
Process: Navigation Bar
My teammate and I designed this customizable navigation bar and I implemented it into XHTML and CSS. A welcome note starts the bar to let the user know that he or she is logged in and to add a sense of personalization.
The icons are links, with the first set staying static and representing MITRE services. A simple white bar divides the static from the dynamic, as the dynamic icons include saved "Favorites," followed by recently visited sites ("Recent"). By clicking the big arrow button, users can customize the icon selection and choose the number of Favorites and Recent icons shown.
I designed half of the icons, targeted mostly to users in need of large, distinct visuals.
Process: Recent Searches
This column of white text links to recent searches that the user typed in the search box of the MITRE global header (the silver header at the top of the portal, created by a teammate). With these links, users can access their recently sought information in just one click!
Although I like the white text, I think that the links should have a visual cue, such as a dashed or solid underline, so that users know that they are links and not plain text. While I encouraged the use of an underline for links, my team decided against it for the sake of design, justifying that users will learn that the searches are links. The rollover state of the links, however, uses a solid underline.
Process: News Box
This box acts as a news feed from MITRE's internal news service Radar. Just as Radar users can customize their news, users choose the Radar news topics and the number of articles from each topic that they want to display in this feed. The button or link to customize the feed was not yet implemented, but it would have been placed in the top right corner of the white section of the box so that users see it and connect it to the news that it customizes below.
The Radar icon is a link to Radar while the news feed inside the lemon yellow header represents the lead story from Radar. Unlike the rest of the news box, the user cannot delete the lead story. This constraint is intentional so that all users will see the Radar headline of the day, connecting employees and improving internal communication. Then if the sky is falling, even the office hobbits will know!