Challenge Summary
Welcome to "Incident Reporter mobile apps Design Challenge - realworldswift". We want to build a mobile application that let's the application user to report any incidents happens in their environment to related official agency who will track and resolve the issues. This is a straight forward design challenge with only few screens needed, wireframes is available for your references and with the great prizes available, you should join us NOW!!
Round 1
00. Navigation
01. Splash Screen
02. Landing Page Screen
03. Reporting Screen
04. Map Screen
Round 2
00. Navigation
01. Splash Screen
02. Landing Page Screen
03. Reporting Screen
04. Map Screen
05. Settings Screen
06. Any additional Screens
Challenge Brief
This application lets users report issues to an agency who will track and resolve the issue. For example users might report something suspicious, report a problem, report a pot hole, report a broken bathroom at a campsite, or many other types of problems via their iOS device. The reports feed into a case management back end application in Salesforce. The application will be built in SWIFT as part of the Summer of SWIFT challenge.
Challenge Goals
- How should this mobile application look?
- Read the screen requirements and decide what should the priority features be (what is the priority navigation for this user?)
- How quickly the user can find what he wants?
- The application should be easy to use.
- Think simple but effective solutions! Have fun creating this - let us know how you think it should work!
- We want this to be MODERN application design!
User Story
This application will be used by general society and the incident reports can be vary from kitchen incidents to hit n run incidents depends on the user current environment. It varies greatly based on what context it's being used in. Campers will report broken bathrooms at a campground, passengers will report suspicious behavior at an airport, shoppers will report broken escalators at the mall, etc.
Screen Requirements
00. Navigation
- How does the user navigate this application?
- Include navigation that you think fits with this application
- Focus on the priority items and how things should be sized
01. Splash Screen
- This screen will show by default when user open the application in their mobile.
- Simple logo for the application?
- Loading bar needed to show how long before the apps can be open in user mobile phone.
- This screen will only show for few seconds, so design needs to be creative.
02. Landing Page Screen
- check references.zip -> screen_rf1.jpg -> left image to see our rough ideas about this screen.
- This is the main page and the user can navigate to the report page, settings page or a configurable URL.
- By default, this page will show up after splash screen disappear.
- check references.zip -> screen_rf1.jpg -> left image to see our rough ideas about this screen.
- Provides an icons for each menus to help our user easily understand the menus items.
- Explore how this screens needs to be created, be creative!
03. Reporting Screen
- check references.zip -> screen_rf1.jpg -> right image to see our rough ideas about this screen.
- This is the page where the user actually reports the problem.
- They can cancel (return to the landing page) or submit.
- Submitting the report will either give an error message (if some required fields are missing or if there is no internet connection) or it will give a success message and then return the user to the landing page again.
- This report page will let the user provide Type, Subtype, Date, Time, Location and Description.
- It will also have a number of configurable fields that will change based on the selected Type and Subtype.
- Clicking on the Map button by location will take the user to the Map page so they can specify a location.
- Any additional ideas? Maybe some field like selecbox to indicates where should this report should be addressed?
- Explore how this screens needs to be created, be creative!
04. Map Screen
- check references.zip -> screen_rf2.jpg -> left image to see our rough ideas about this screen.
- The map page allows the user to specify the location of the incident.
- The save button will save the selected location and take the user back to the report page.
- The back button will simply take the user back to the report page without saving the location.
- The user can enter a specific address on this page, select to use my "current location" (bottom left button) if location services are on.
- The location will display in the map area and the full address and/or geolocation data will display at the bottom of the page.
- Explore how this screens needs to be created, be creative!
05. Settings Screen
- check references.zip -> screen_rf2.jpg -> right image to see our rough ideas about this screen.
- This page lets the user specify if the app should use the current location as the default location when submitting a new report.
- It lets the user specify if reports are submitted anonymously.
- If not anonymous, then the contact information specified on this page will be submitted along with the report (name and phone number).
- Explore how this screens needs to be created, be creative!
06. Any additional Screens
- Provide us any additional screens that you think is necessary for the apps.
Branding Guidelines
- Font : Open to designer, make sure your font selection is easily readable for our audience.
- Colors : Open to designer.
- Style : Popular design style for mobiles.
- Orientation : Open to designer.
Notes : This application will be used by different user category, different background, ages, gender, tribes, etc. So, please put this to your consideration when design the storyboard.
Documentation
- Wireframes (references.zip)
Target Devices
Multiplatform devices (please create your design for both devices)
- iOs : 1136-by-640 resolution 326 ppi
- Android : 1280 x 720
Target Users
- General Society from various ages, gender, tribe.
Judging Criteria
- How well you translate the wireframes and source designs into an attractive and usable design.
- Cleanliness of your graphics and design.
- Design and User Experience.
Submission & Source Files
Preview Image
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 File
Submit JPG/PNG for your submission files.
Source Files
All original source files of the submitted design. Files should be created in Adobe Photoshop and saved as layered PSD file, or Adobe Illustrator as a layered AI file.
Final Fixes
As part of the final fixes phase you may be asked to modify your graphics (sizes or colors) or modify overall colors. We may ask you to update your design or graphics based on checkpoint feedback.
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.