Challenge Summary
Welcome to NASA SMG Tool Storyboards Design Challenge. We’re happy to present this challenge to our talented community, a NASA project!
We need you to come up with the look and feel of a knowledge-based web application that has a public view and administration tool. We need fresh graphics, modern design and lots of thoughts regarding to user experience in order to make this easy to understand and use. Best of lucks!
Round 1
For your R1 deliverables please submit the following screens:
NASA SMG (Public View)
1) Login
2) Home
3) Identify Solutions (Grid view only).
3.1) Full Details view (“Solution - Detail” from wireframes).
3.2) Compare View (“Compare Solutions” from wireframes)
Admin Panel
1) Manage Solutions
1.1) Add/Edit Solutions
2) Manage Characteristics
2.1) Add new Characteristic
Feel free to add some notes (jpg or text file) to comment your design features for the client.
Number your screens (01, 02, 03 etc.) – it’s easier to review.
Round 2
Final design will contain all the requested screens under the "Storyboards Requirements" section plus any updates from client feedback.
Feel free to add some notes (jpg or text file) to comment your design features for the client.
Number your screens (01, 02, 03 etc.) – it’s easier to review.
The primary goal of this challenge is to design the look and feel of the NASA SMG (Solution Mechanism Guide) Application. The functionality is similar to an airline ticketing system. It provides content through a wide variety of filters and contributes with a learning process. It has a public view and an admin environment to update the content and filters.
The purpose of this tool is for professional use, but we want users to feel they are enjoying a helpful, interesting, motivating experience using the tool. Therefore we want the graphics to create an interesting and fresh experience for our users when jumping on the SMG site and using the tool. We want this site to be appealing, for the graphics to draw the user in and aid in the experience of using the tool.
Branding and Guidelines
- Follow Wireframes.zip as guidance for the required pages/features.
- Use a placeholder for the site name/logo.
- Use web-safe fonts for the pages content. Beware of declaring your fonts according to the Studio font’s policies.
- Your design must fit 1024 pixels wide screen resolution.
- Colors are open to designers. Seek colors that match with new, strong, fresh, useful keywords.
- Consider as a plus that we want this user interface created such a way that it could easily be translated to other devices (mobile, etc) without much extra effort.
- We don’t want our users to feel the site is cumbersome or difficult to use and/or navigate; we want them to feel this is a state-of-the-art or even futuristic tool and the graphics should help convey that message.
- We don’t want the graphics to overpower the message of the tool. We don’t want the graphics to make it difficult for users to use our tool. We don’t want pretty, delicate, fluffy but something with substance.
Storyboard Requirements
NASA SMG (Public View)
Overall
- Make sure to explore the interactions offered in the wireframes so you can cover those design details. Click all the buttons, see the overlays, adding/deleting features, and so on.
- Show Tips overlays from “?” marks.
- Print-friendly pages are out of scope for this challenge. Design the print link/button only for the public pages but not the print-friendly pages.
- "Home > Examples" and "Admin > Manage Help" items are out of scope for this challenge.
1) Login
- Add a feature on the login page that shows a content area (title to introduce the Solution Mechanism Guide, definition and a few instructions, maybe a small graphic or two, etc).
2) Home (“User Home” from wireframes)
- Make items in “Identify the Solution Mechanisms that fit your needs” without columns.
3) Identify Solutions (“Solutions - Filtered” from wireframes)
- Show both Grid and List views.
- Show details overlay (click on any Solution title on the right side).
3.1) Full Details view (“Solution - Detail” from wireframes).
3.2) Compare View (“Compare Solutions” from wireframes)
- Make sure to show the compare feature when clicking compare checkbox or compare button on the details overlay.
4) Educational Topics
4.1) Educational Topic Details
Admin Panel
1) Manage Solutions
1.1) Add/Edit Solutions (“Edit” and “New Solution” from wireframes)
1.2) View Solution Details (“Solution Detail View” from wireframes)
2) Manage Characteristics
2.1) Add new Characteristic
3) Manage Search Parameters
3.1) View Filter
3.2) New Filter
- Show overlays
- Show how organization works (move up, down, etc).
Target Audience
Employees across NASA with a range of skills using a computer and interacting with web-based tools; thus, our desire for simplicity, interesting and eye-catching.
Judging Criteria
- Creativity.
- Quality of design.
- User Experience.
Submission File
All requested contest requirements/screens as JPG or PNG files at 72dpi.
Source Files
All original source files of the submitted design. Files should be created in Adobe Photoshop and saved as layered PSD files.
Preview Image
Create a 1024x1024 JPG or PNG file in RGB color mode and place a screenshot from your submission within it.
Please read the challenge specification carefully and watch the forums for any questions or feedback concerning this challenge. It is important that you monitor any updates provided by the client or Studio Admins in the forums. Please post any questions you might have for the client in the forums.