Challenge Summary
Welcome to iOS Design - Pivot Mobile App Design Concepts Challenge!
In this challenge we are looking for your best mobile UI designs and concepts to design a mobile app that will provide people with disabilities a custom maps application that allows them to crowd source barriers and hazards to accessibility and reroute users around them.
It will also provide crowd sourced data to governments in order to fix non-ADA (Americans with Disabilities Act) compliant infrastructure in a responsive and timely way.
Round 1
Submit your design for a Checkpoint feedback:
01 Landing Page
02 Sign Up Page
03 Sign In Page
04 Map Page
05 Main Menu (Navigation)
06 Report an Impediment Page
- If you have time - please provide us with a click map for your design.
- Readme.jpg : Provide notes about your submission.
- Make sure all pages have correct flow! Use correct file numbering. (00, 01, 02, 03)
Round 2
Final Design plus any Checkpoint feedback:
01 Landing Page
02 Sign Up Page
03 Sign In Page
04 Map Page
05 Main Menu (Navigation)
06 Report an Impediment Page
07 Thank You Page
08 List Directions Page
09 History Page
10 Pivot Updates Page
11 Help Page
- If you have time - please provide us with a click map for your design.
Challenge Description:
The goal of this challenge is to design a mobile application to provide people with disabilities a custom maps application that allows them to crowd source barriers and hazards to accessibility and reroute users around them. The design, functions, and feature sets MUST meet ADA compliance. There is some great information in the below links about what that means. We are not just targeting one disability so your app designs should be as accessible as possible. Make sure your contrast ratios are enough for people with sight disabilities to be able to see items and tap them (font sizes should be legible). Additional helpful features could be voice input options, or speech-to-text capabilities.
- https://www.viget.com/articles/designing-for-accessibility-what-to-watch-for
- http://code.viget.com/interactive-wcag/#responsibility=design&level=aa (the Design and UX filters at the top are the most useful)
We are looking for the Topcoder Design Community to help us with planning our new "user experience" (UX) and UI designs. These are concepts, so we are looking for your best ideas. Really think through the problem and the target user and propose and designs solutions that help solve these problems.
Required Screens:
01 Landing Page:
- App name: Pivot.
- App logo. An exploration is fine here but designing a logo is not a requirement here.
- Sign in button.
- Sign up button.
02 Sign Up Page:
- Welcome message at top:
-- Welcome to Pivot.
- First Name.
- Last Name.
- Current City:
-- The ability to GEO locate.
- Disability Info:
-- Drop down list.
-- Optional field.
- Username.
- Password.
- Confirm password.
- Stay logged in checkbox.
- Sign up button.
03 Sign In Page:
- App name: Pivot.
- App logo.
- Username.
- Password.
- Forgot password link.
- Remember me checkbox.
- Sign in button
04 Map Page:
You can use Google maps for this page with some modifications and design improvements to make it more ADA compliant and accessible.
- Provide a flow showing how a voice and/or a visual warning would come up on the APP when a user is on a route that would alert the user to an upcoming impediment or obstacle
- Also consider how this approach would impact turn by turn navigation prompts for the user
- We need a main menu button.
- Starting point (Your location).
-- Auto geolocate; just show the user current location.
- Where are you going to?
-- Drop a pin on map.
- Start route button; get directions.
- While a user is on a route...we need a way for the user to trigger the “report an impediment” flow. If a user encounters an impediment that was not marked on the provided route...they need a way to be able to report the impediment. Consider multiple ways to trigger this...either voice activated, contextual menu, ect.
05 Main Menu (Navigation):
- User profile photo.
- Username.
- Report an impediment
- List Directions
- History
- Pivot updates
- Help
06 Report an Impediment Page:
Used to report obstacles or barriers that would restrict a disabled person and/ or make it harder for them. This could be a construction site, stairs without an elevator or ramps, wheelchair inaccessible entrance, etc. This needs to be able to be triggered from the map page while a user is on a current route.
- Location.
-- Checkbox GEOlocate to current.
- Photo: Take a photo and attach it to the report
-- Upload button
- Description:
-- Text area
- Severity: A selectable scale of 1 to 5. 1 is the least severe and 5 being the most severe.
07 Thank You Page:
- This page will appear at completion of route.
- A thank you message will be displayed:
-- “Thank you for using Pivot App”.
- “We have reported your impediment(s) to Lawrence city system”.
-- Display contact information for city system.
- Rate us:
-- 5 Starts rating.
08 List Directions Page:
- This page will include a step-by-step list of instructions for the user (much like GoogleMaps)
- Each direction should be simple and specific (ie. Turn right at Cambridge street; Proceed 400 feet to Michigan street, etc.)
- There will be an option to convey directions via audio.
09 History Page:
- Your reported impediments to city system list
10 Pivot Updates Page:
- This includes any updates from the app administrators including software updates, promotions, milestones for the app (ie. 50 impediments reported in Boston this month; 30 fixed so far.) etc.
11 Help Page:
- Show help content on how to use the application.
Branding:
- Branding is open, however your color usage and contrast ratios should be carefully accessed.
- Make sure your app remains clean and modern, and more importantly, extremely easy to use and understand.
Screen Requirements:
Target iPhone 6: 750px by 1334px (Portrait orientation)
- height can expand if needed, but scrolling should be minimal and avoided if possible.
Target Audience:
- People with disabilities.
Judging Criteria:
- How well your designs align to ADA Compliance.
- Concepts and ideas presented.
- Overall UI design and layouts.
- How well the UX follows modern flows and current best practices.
Submissions & 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. Make sure you are labeling and numbering your files in the correct order. Example: 01FileName.png, 02FileName.png, 03aFileName.png, 03bFileName.png, etc.
Source Files
All original source files of the submitted design. Files should be created in Adobe Photoshop and saved as layered PSD files.
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. 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.