UX/UI Wireframes Examples for the U.S. Army Reserves

•

For Who?

U.S. Army Family

Supported IE7

Project Date
Nov. 2011 - March 2012

UX/UI, Wireframes, CSS, Images

This project shows how I went from approved wireframes to the final "pixel perfect" comps. The wireframe stage works-out all human factoring and UI design challenges; whereas, the pixel-perfect stage works-out all branding and color palette decisions to demo before a client, for sign-off. It also serves a dual purpose as the design blueprint for developers to follow while building the final, functional product.

EVENT CREATION

'Survey' Response Approach

1) Accordion Panel, 2) 'Survey' Response Disclosure

Accordion over carousel was chosen primarily due to the volume of information required to be recorded and worked with on one page. A Family Planner Coordinator has to be able to rapidly scan pages and work with data. We could have adapted the carousel panels I designed 9 years earlier, but in a rapidly changing development environment (where feedback from clients changes on a daily basis), it takes longer to program. It maybe a better approach with certain forms in the future, once all the required data is "locked down".

EVENT EDIT MANAGEMENT EXPANDED
Event Progress Bread Crumbs

This example shows the respondent answering true to every question, with every element expanded.

Marketing Efforts:
Target Audience

EVENT MANAGEMENT

7 Pending Registration Approval Example

To minimize content and reduce "eye-scanning", each question is presented with a check box. If the respondent answers true, the user will check the box and form element will appear to fill out.

EVENT MANAGEMENT:

Attendees E-Mail Event Updates

(Recipient Contacts, Message Updates, Attachments, Text Formatting)

Event Management

To minimize content and reduce "eye-scanning", each question is presented with a check box. If the respondent answers true, the user will check the box and form element will appear to fill out.