Challenge Summary
Welcome to iOS Design - AppXpress – TVI One Stop App Design Concepts Challenge!
This challenge is focused on creating design concepts/visual ideas for creating an application that allows Teachers of the Visually Impaired (TVI) to crowdsource content that would be helpful in educating students.
In order for this new app to be useful, it should be designed and organized in a way that TVI’s can learn from others in their field and share best practices and resources that have been collected over time. Today, listservs are the tool-of-choice for this type of sharing.
Round 1
Submit your design for a Checkpoint feedback:
- Initial Design.
- 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
Submit your final design:
- Final Design with checkpoint feedback implemented.
- 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).
Challenge Description:
The goal of this challenge is to create an application to allow Teacher of the Visually Impaired (TVI) to crowdsource content that would be helpful in educating students. We are looking for the Topcoder design community to help us with planning our application and "user experience" (UX).
IMPORTANT: Designing for the Visually Impaired:
1. Definition:
The definition of vision impairment by the Centers for Disease Control and Prevention (CDC) says a visually impaired person’s eyesight cannot be corrected to a “normal level”.
It may be said that visual impairment is the functional limitation of the eye or eyes or the vision system. This leads to one or more of the following:
- Loss of visual acuity and inability of the person to see objects as clearly as a healthy person.
- Loss of visual field meaning inability of an individual to see as wide an area as the average person without moving the eyes or turning the head.
- Photophobia – inability to look at light.
- Diplopia – double vision.
- Visual distortion or distortion of images.
- Visual perceptual difficulties or difficulties of perception.
- Or any combination of the above features.
You can read more about visual impairment here:
http://www.news-medical.net/health/What-is-visual-impairment.aspx
2. DESIGN Best Practices:
- Ensure your font size is big enough for people to read.
-- Use at least 12-point fonts as the default.
-- Should let users increase text size as desired.
- Ensure design consistency:
-- Most senior citizens are generally aware of the standard colors for links and would usually assume an item with that color is a link. Avoid trying to implement new design colors for links and other active interaction elements.
- Choose your font correctly:
-- Be careful of the font you choose in your site as that is critical with how readable with your site. Hence try to avoid condensed fonts.
-- Use a sans serif typeface, such as Helvetica, that is not condensed. Avoid the use of serif, novelty, and display typefaces.
- Usage of color:
-- Certain colors can be difficult for people with limited vision to perceive.
-- There are also different types of colorblindness and you need to ensure that the colors you select can be understood by people with limited vision or even color blindness.
-- Also, ensure the color contrast is significantly high so that users can read the content without having to strain.
3. Useful Links:
- http://mashable.com/2011/04/20/design-for-visually-impaired/
- https://www.amherst.edu/help/make_accessible
- http://webaim.org/articles/visual/blind
Understanding Accessibility on iOS:
- Zoom. Magnifies the entire device screen.
- White on Black. Inverts the colors on the display.
- Mono Audio. Combines the sound of the left and right channels into a mono signal played on both sides.
- Speak Auto-text. Speaks the text corrections and suggestions iPhone makes while users type.
- Voice Control. Allows users to make phone calls and control iPod playback using voice commands
- VoiceOver:
-- VoiceOver is Apple’s innovative screen-reading technology, which gives users control over their devices without having to see the screen. VoiceOver does this by acting as an intermediary between an application's user interface and the user's touch, providing audible descriptions of elements and actions in the application. When VoiceOver is active, users don’t have to worry about accidentally deleting a contact or calling a phone number, because VoiceOver tells them where they are in the user interface, what actions they can take, and what the results of those actions will be.
- An application is accessible when all user interface elements with which users can interact are accessible. A user interface element is accessible when it properly reports itself as an accessibility element.
Challenge Details:
Design Considerations:
- Focus on the user experience of each page and make sure each page has a complete flow.
- Give importance to the overall layout and think about how a user would interact with the content on the page.
- Show all the screens and provide a user flow/click-path, so we can see how the interactions fit together in the application.
Main Features:
1. Sharing resources along a variety of topics/subjects.
2. Voting/rating of resources.
3. App must be accessible to blind/visually impaired.
User Flow:
1. Share useful resources:
-- Upload content.
-- Post to social media.
-- Comment on resources.
-- Rating resources.
2. Rate usefulness of resources.
Required Features:
- We currently do not have any formal requirements. We are looking for you to provide design concepts and click-paths.
- This is the first step in planning our user experience.
- Please read the user flow and target audience sections and make sure to capture what the client is looking for.
- For this challenge we need you to submit an accessible word document or a PDF with your graphics described as text as one of the reviewers will be a visually impaired person.
Suggested Screens:
- We would like YOU to suggest features/screens that this app should incorporate.
1. Sign In Page:
- Each user needs to sign in by filling:
-- Username.
-- Password.
-- Forgot password link.
-- Remember me checkbox.
-- Login button.
- Add the ability to sign in via voice commands.
2. Dashboard Page:
- On Dashboard we need to show:
-- All Shared resources.
- The ability to filter resources:
-- Expanded Core Curriculum.
-- Braille.
-- Camps & Summer Employment.
-- Guidelines for Schools.
-- Assessments.
-- Employment & Career.
-- Family Resources.
-- Brag Board
-- Assistive Technology.
-- Products & Services.
-- TVI Classifieds.
-- Latest Research & News.
-- Conferences & Training.
- The ability to rate resources to define the usefulness of resources.
- Share resources button.
3. Share Resources Page:
-- Expanded Core Curriculum.
-- Braille.
-- Camps & Summer Employment.
-- Guidelines for Schools.
-- Assessments.
-- Employment & Career.
-- Family Resources.
-- Brag Board
-- Assistive Technology.
-- Products & Services.
-- TVI Classifieds.
-- Latest Research & News.
-- Conferences & Training.
Supporting Documents:
- Branding Guidelines (Perkins_School_for_the_Blind_-_Graphic_Standards.pdf.)
- Adjusted Color Palette (Enterprise Color Palette-adjusted.pdf.).
Screen Sizes:
- Mobile Resolution: Design for iPhone 6 Retina Display 750px x 1334px.
- Tablet Resolution: Design for iPad 2 Retina Display 2048px x 1536px.
Make sure you create graphic in 'shape' format, so when we resize graphics will still look sharp! It will be great if you can provide the landscape version.
Important:
- Keep things consistent. This means all graphic styles should work together.
- All of the graphics should have a similar feel and general aesthetic appearance
Target Audience:
- Teachers of the Visually Impaired, potentially related services providers like Teacher Assistants.
Judging Criteria:
- How well you plan the user experience and design for the visually impaired.
- Cleanliness of your graphics and design.
- Your design should possible to build and make sense as a mobile application.
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.
- For this challenge we need you to submit an accessible word document or a PDF with your graphics described as text as one of the reviewers will be a visually impaired person.
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.