Challenge Summary
Introduction:
The client for this project has decided to convert a "printed reference guide" PDF document (that explains measurements and calculations of industrial gases and cryogenic fluid) into a mobile application. We have already run a design concept challenge that does a great job of capturing the look-and-feel for this new Data Booklet mobile application. We have also run a new wireframe challenge to define the full UI for this mobile app.
For this challenge, we need you to create the final screen designs for the new Data Booklet mobile application. We have provided the design concepts screen for you to understand what the look-and-feel / style the client wants for the final screens. Your submission should apply the look-and-feel of the design concept screens to the new wireframes.
We look forward to seeing your creative designs!
Primary Goals
The goal for this project is to build a new mobile application based on an existing "printed reference guide" PDF document that explains measurements and calculations of industrial gases and cryogenic fluid. For this challenge, we need you to create a the Frontend Design (Storyboard) for the new Data Booklet Mobile application (based on the Wireframes and design concept screens).
Project Description:
The client for this project runs a business where they deal with industrial gases and cryogenic fluid. Currently, salesman and customers use a "printed reference guide" (see PDF download) that explains measurements and calculations of industrial gases and cryogenic fluid. After running a designs concept challenge, the client has decided to move forward and convert this reference guide into a mobile application!
General Requirements:
- Produce a front-end design (Storyboard) that can be used to demonstrate all screens / mentioned functionality as required in the wireframes.
- Required designs are for a new, cross-platform PhoneGap mobile application (the Data Booklet mobile application).
- The design should have a clean, modern, look-and-feel that matches the design concept screens.
- The design must be very easy to use and intuitive. Keep that in mind when designing your solution.
- You MUST cover all screens mentioned in contest round details (and described in the contest spec / wireframes).
- Your design must represents all pages and flows from the Wireframes. You should use these Wireframes as a guide, but if there is better way to display any information, feel free to reflect that on your design.
- The 6 icons on the Home screen should be re-designed and included in your submission. See the attached doc "Updated Landing Page.docx" for some basic client feedback on these icons.
- Screens should be numbered correctly to explain the storyboard flow to us.
- Please check screen notes for each page in the Wireframes to see the various interactions in those pages. You need to include those in your submission.
Branding and Guidelines:
- Your design must fit mutiple mobile devices: iOS (iPhone 5 should be 640x1136 px) and Android (720x1280px) screen resolutions. The mobile app is being created in PhoneGap so your design should be scalable for different devices.
- As for color requirements, please stick to similar colors to the design concept screens.
- The attached design concept screens show the design details the client prefers. Please use this as a guideline, but creativity is also welcome!
- Use web-safe fonts for the pages content. Please make sure to declaring your fonts according to the Studio font policies.
- Show all the hover states for all UI elements you create (buttons, hyperlinks, dropdowns, etc).
Storyboard Requirements:
Overall:
- Follow the workflow and layout guidance from the Wireframes. You need to create storyboards to cover all the pages in these Wireframes.
- IMPORTANT: You should apply the look-and-feel of the design concept screens to the screens in the Wireframes.
- Make sure to provide screens for popups, collapase/expandable features, error forms, and so on.
- As a suggestion, look at all the buttons in the forms to understand the interaction features of the application.
- Pay attention to the notes included on the Wireframe pages.
Screens:
This challenge will focus on the following screens for the new application:
1) Home Page (note: the 6 icons on the Home screen should be re-designed and included in your submission. See the attached doc "Updated Landing Page.docx" for some basic client feedback on these icons.)
2) Gases
3) Converter
4) Gas Tanks and Cylinders
5) Gas Blends
6) Encyclopedia
7) Links and Resources
NOTE: If anything is unclear, please ask for clarification on the forum and we will be happy to help!
Project Documentation:
1) Wireframes: Descibes the screens / flows in the new application. Your Storyboard Design should be based mainly on this.
2) Design Concept Screens (including source files): The design concepts for the new application. Shows the look-and-feel / style the client wants for the final screens. Please use this as a guideline, but creativity is also welcome!
3) Updated Landing Page.docx - Basic client feedback on the Home page icons.
Target Audience
Users of the existing Data Booklet PDF.
Judging Criteria
- Overall look and feel of the design
- Simplicity and consistency in the design
- Completeness and accuracy of how the design matches the screens / flow of the wireframe.
- How well you follow the client's branding / design guidelines.
- Any suggestions, interactions and user flows you recommend (provide any notes or comments for the client)
What to Submit
Preview JPG/PNG Image File
Please create your preview image as one (1) 1024x1024px JPG or PNG file in RGB color mode at 72dpi and place a screenshot of your submission within it.
Submission ZIP File
All requested contest requirements/screens as JPG or PNG files.
Source ZIP File
All fully editable original source files of the submitted design as required by the contest under "Source Files" in the side bar.
Final Fixes
As part of the final fixes phase you may be asked to complete one round of minor changes to ensure your submission meets the stated requirements of this contest. See more information about Final Fixes.
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.