Context

I worked on a small team at MITRE to create this internal news site called "Radar." As MITRE works closely with the Air Force, Radar was targeted to MITRE and Air Force Center employees with the goal of becoming the standard news site in the office. The customizable site could include news for Defense, the Air Force, MITRE at the corporate and departmental levels, as well as external news.

My teammate created the initial mock-up (inspired by Google News) and I worked with her daily to create the beta design. I implemented the design into XHTML and CSS, designed a few icons and made user interface decisions (such as color scheme and line length).

Process: Lead Story

The lead story is the headline news for the Air Force Center at the MITRE Bedford campus. It stands out as important by sitting in the top left corner of the page (where the user looks first), by having its own news box and by taking up more space than the other stories through the use of a larger photo (which catches the eye).

Although users can customize Radar via a link in the silver global header (created by a co-worker), the lead story cannot be changed. This constraint is intentional so that all Radar users will know the headline of the day, connecting employees and promoting a culture of communication at the office.

Process: News Sections

Radar is made up of news sections, created by the internal and external news that the user chooses, such as "AFC News" or "New York Times." The content is broken up by clean, stylized boxes, which are defined by the gray border and the slate green header and footer.

The story headlines link to the full stories, using an underline and slate green to look different from the plain text and to visually unify the site. A short description of the news story is given just below its headline, displayed in the most usable line length of 7-10 words.

The "email article" icon, the news source and the date complete the story blurb in a light gray, showing that the information is less important than the story while matching the gray box border. I designed the mini envelope for the "email article" icon after seeing a standard look in the email icons on other news sites.

Process: Visuals

Since users can submit a story, they can include a corresponding image. To fit the space, all images are resized to no more than 80 pixels in width or height. The thumbnails link to their stories and wear a border to match the clean design, improving aesthetics and usability as they break up the text and cater to people's preference for visuals.

Process: Utilization of Space

Users can expand and collapse their news sections by toggling the arrows (to view this, click the arrow at left). These preferences would be automatically saved so that users can leave and come back to their page as they left it. By displaying only the news that a user wants to see at a given time, the toggling utilizes screen space.

Process: News Story Page

When users click on the link for a story, they are taken to the page devoted to that story. The page includes the full story and its details (such as source, author, date), the option to email the story, the Radar Poll of the Day and links to related news. The design stays consistent with that of the Radar homepage and incorporates the larger version of the story's photo (seen as a thumbnail on the homepage when not for the lead story).

In the prototype, you can reach the story page by clicking the link for the lead story.

Process: Submit a News Story

Users can submit a news story to Radar by filling out the form on this submit page. The form includes required story information (title, summary, source, content) as well as optional information, such as a photo or additional links. To conform to Radar's design, the form incorporates constraints for text length (character limit) and photo size (pixel limit).

To assist users in keeping within constraints, every form field having a character limit includes a parenthetical note defining that limit (example: "Limit of 200 characters — 200"). The second number (the second "200" in this example) represents the number of characters left, which counts down in real time as the user types.

Users also receive feedback if there is an error when submitting the story. For example, if the user forgets to fill in the required field for the article's source but tries to submit the story, the submit page remains on the screen and a red error message ("Please enter a source for the article.") displays above that field.