Challenge Summary
Welcome to the Autocognita - Literacy Android Application Concept Design Challenge.
We are designing a challenging application for a target audience that requires the most sensitive thoughts around the user experience, where the main goal is to set them up with tools that teach them how to read through a playful, engaging and usable application.
Best of luck.
2. Sign Up/Login
4. Menu
5. Unit Intro
13. Match screen
- Please provide a MarvelApp Presentation (see details below).
- Make sure all pages have correct flow! Use correct file numbering. (00, 01, 02, 03)
1. Welcome
2. Sign Up/Login
3. Instruction
4. Menu
5. Unit Intro
6. Lesson Complete
7. Unit Complete
8. Level Complete
9. Progress
10. Ad
11. Choose screen
12. Fill screen
13. Match screen
14. Build screen
15. Type screen
- Please provide a MarvelApp Presentation (see details below).
- Make sure all pages have correct flow! Use correct file numbering. (00, 01, 02, 03).
The goal of this competition is to come up with the look and feel of a mobile android application. We are looking forward to seeing concepts that showcase the best possible UX for navigating the app content and consuming lessons.
Resources
Find the available documentation in the following Drive folder - https://drive.google.com/open?id=1-TQVLdTTTlrEmomtiNbqmiJpAGrv8d3-
1. Design Brief: explains how the application works through notes, task flow and mockups.
2. Persona: initial persona description.
3. Logo: project owner branding identity.
Concept Design Goals
AutoCognita’s Click Learn Grow is a mobile Android app that aims to help millions of low-literacy adults acquire basic reading skills needed to lead a fulfilling life. Users will learn anytime, anywhere with this mobile app. See files #4 and #5 from the resources folder for more information about the users, you’re encouraged to absorb this information in order to empathise with the user as much as possible.
- The goal of the concept design challenge is to design the best possible UX for the navigation and lesson screens described in this document.
- The app teaches phonics, words, sentences, reading fluency and comprehension, through personalized learning paths and user engagement tools.
- Visual style should be bold, flat, fun, bright and clean.
Screens Requirements
Overall
- Think of providing a seamlessly navigation through the features of the app, not just a main navigation menu, all of it across the engaging experience.
- Design screens highlighted in red in the design brief PPT. The screens that are not highlited in red are out of scope.
1. Welcome/onboarding
See file #1 ~ slide 4.
- Create an onboarding screen (s) that lets the user know what they are about to engage and how to use the application overall.
2. Sign Up/Login
See file #1 ~ slide 4.
- User should be able to register to the app. It’s mandatory to be registered in order to be able to use the app.
- Do not use email and password for these pages. It might be complicated to them. It is also possible that our target audience may not even have email, and do not understand what to do with passwords. Figuring out a way to make this easy, and still fulfills our requirement that the app knows which user is using the app at any time, is an important design challenge.
- Use phone number as user ID to register and login. Make sure the UX is simple enough that people know what to do.
3. Instruction
See file #1 ~ slide 4.
4. Menu
See file #1 ~ slide 5.
5. Unit Intro
See file #1 ~ slide 5.
6. Lesson Complete
See file #1 ~ slide 7.
- Include each of the levels of completion: lesson, unit and level respectively.
7. Unit Complete
See file #1 ~ slide 7.
8. Level Complete
See file #1 ~ slide 7.
9. Progress
See file #1 ~ slide 8.
- User should be able to see the current state of earned and available certificates and badges respectively.
10. Ad
See file #1 ~ slide 8.
- After completing a lesson, display a full page ad placeholder with an obvious mechanism to close it.
- Make sure that the user can easily find her way back to the app.
11. Choose Screen
See file #1 ~ slide 11.
- Design only the pointed out screen.
12. Fill Screen
See file #1 ~ slide 12.
- Design only the pointed out screen.
13. Match Screen
See file #1 ~ slide 13.
- Design only the pointed out screen.
14. Build Screen
See file #1 ~ slide 14.
- Design only the pointed out screen.
15. Type Screen
See file #1 ~ slide 15.
- Design only the pointed out screen.
References
DO NOT COPY ANYTHING! This is just for inspiration purposes.
- Duolingo Mobile App: we like the playful engagement and gamification aspects of the app, as well as the consistent look and feel.
- A design template for Duolingo can be found https://www.duolingo.com/design/here as a reference of what we like visually.
Branding Guidelines
- Author project logo is provided, however, the app name should be: Click Learn Grow.
- Colors are open to suggestion.
- Typography are open to suggestions.
- Follow Google Material Design Guidelines. Make sure to pay attention to layout, navigation, typography and color guidelines above all.
Screen Specifications
- Mobile: 1080 x 1920 px, portrait view only.
- Make sure your work is in a vector format, for retina scaling and high fidelity.
MarvelApp Presentation
- Request a MarvelApp prototype from me (mahestro@copilots.topcoder.com).
- Do not use the forums to request for MarvelApp.
- Provide clickable spots (hotzones) to link your screens and showcase the flow of the solution.
- Provide the MarvelApp shareable link in your notes during submission upload. See example.
Stock Artwork (Illustrations, Icons, Photography)
- Stock artwork is allowed for this challenge.
- Make sure to declare all your assets properly or you might fail screening.
- You don’t want to fail screening? Read this.
Target User
Low-literacy adults who want to learn how to read. Sample persona is provided, see file #2 from the provided resources.
Judging Criteria
- Interpretation of the user experience.
- Is the application visually appealing?
- Is the application easy to use?
- Cleanliness of your graphics and design.
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, Adobe XD or Sketch. Layers should be named and well organized.
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.
We are designing a challenging application for a target audience that requires the most sensitive thoughts around the user experience, where the main goal is to set them up with tools that teach them how to read through a playful, engaging and usable application.
Best of luck.
Round 1
Submit your design for a checkpoint feedback.2. Sign Up/Login
4. Menu
5. Unit Intro
13. Match screen
- Please provide a MarvelApp Presentation (see details below).
- Make sure all pages have correct flow! Use correct file numbering. (00, 01, 02, 03)
Round 2
Submit your final design plus checkpoint feedback.1. Welcome
2. Sign Up/Login
3. Instruction
4. Menu
5. Unit Intro
6. Lesson Complete
7. Unit Complete
8. Level Complete
9. Progress
10. Ad
11. Choose screen
12. Fill screen
13. Match screen
14. Build screen
15. Type screen
- Please provide a MarvelApp Presentation (see details below).
- Make sure all pages have correct flow! Use correct file numbering. (00, 01, 02, 03).
The goal of this competition is to come up with the look and feel of a mobile android application. We are looking forward to seeing concepts that showcase the best possible UX for navigating the app content and consuming lessons.
Resources
Find the available documentation in the following Drive folder - https://drive.google.com/open?id=1-TQVLdTTTlrEmomtiNbqmiJpAGrv8d3-
1. Design Brief: explains how the application works through notes, task flow and mockups.
2. Persona: initial persona description.
3. Logo: project owner branding identity.
Concept Design Goals
AutoCognita’s Click Learn Grow is a mobile Android app that aims to help millions of low-literacy adults acquire basic reading skills needed to lead a fulfilling life. Users will learn anytime, anywhere with this mobile app. See files #4 and #5 from the resources folder for more information about the users, you’re encouraged to absorb this information in order to empathise with the user as much as possible.
- The goal of the concept design challenge is to design the best possible UX for the navigation and lesson screens described in this document.
- The app teaches phonics, words, sentences, reading fluency and comprehension, through personalized learning paths and user engagement tools.
- Visual style should be bold, flat, fun, bright and clean.
Screens Requirements
Overall
- Think of providing a seamlessly navigation through the features of the app, not just a main navigation menu, all of it across the engaging experience.
- Design screens highlighted in red in the design brief PPT. The screens that are not highlited in red are out of scope.
1. Welcome/onboarding
See file #1 ~ slide 4.
- Create an onboarding screen (s) that lets the user know what they are about to engage and how to use the application overall.
2. Sign Up/Login
See file #1 ~ slide 4.
- User should be able to register to the app. It’s mandatory to be registered in order to be able to use the app.
- Do not use email and password for these pages. It might be complicated to them. It is also possible that our target audience may not even have email, and do not understand what to do with passwords. Figuring out a way to make this easy, and still fulfills our requirement that the app knows which user is using the app at any time, is an important design challenge.
- Use phone number as user ID to register and login. Make sure the UX is simple enough that people know what to do.
3. Instruction
See file #1 ~ slide 4.
4. Menu
See file #1 ~ slide 5.
5. Unit Intro
See file #1 ~ slide 5.
6. Lesson Complete
See file #1 ~ slide 7.
- Include each of the levels of completion: lesson, unit and level respectively.
7. Unit Complete
See file #1 ~ slide 7.
8. Level Complete
See file #1 ~ slide 7.
9. Progress
See file #1 ~ slide 8.
- User should be able to see the current state of earned and available certificates and badges respectively.
10. Ad
See file #1 ~ slide 8.
- After completing a lesson, display a full page ad placeholder with an obvious mechanism to close it.
- Make sure that the user can easily find her way back to the app.
11. Choose Screen
See file #1 ~ slide 11.
- Design only the pointed out screen.
12. Fill Screen
See file #1 ~ slide 12.
- Design only the pointed out screen.
13. Match Screen
See file #1 ~ slide 13.
- Design only the pointed out screen.
14. Build Screen
See file #1 ~ slide 14.
- Design only the pointed out screen.
15. Type Screen
See file #1 ~ slide 15.
- Design only the pointed out screen.
References
DO NOT COPY ANYTHING! This is just for inspiration purposes.
- Duolingo Mobile App: we like the playful engagement and gamification aspects of the app, as well as the consistent look and feel.
- A design template for Duolingo can be found https://www.duolingo.com/design/here as a reference of what we like visually.
Branding Guidelines
- Author project logo is provided, however, the app name should be: Click Learn Grow.
- Colors are open to suggestion.
- Typography are open to suggestions.
- Follow Google Material Design Guidelines. Make sure to pay attention to layout, navigation, typography and color guidelines above all.
Screen Specifications
- Mobile: 1080 x 1920 px, portrait view only.
- Make sure your work is in a vector format, for retina scaling and high fidelity.
MarvelApp Presentation
- Request a MarvelApp prototype from me (mahestro@copilots.topcoder.com).
- Do not use the forums to request for MarvelApp.
- Provide clickable spots (hotzones) to link your screens and showcase the flow of the solution.
- Provide the MarvelApp shareable link in your notes during submission upload. See example.
Stock Artwork (Illustrations, Icons, Photography)
- Stock artwork is allowed for this challenge.
- Make sure to declare all your assets properly or you might fail screening.
- You don’t want to fail screening? Read this.
Target User
Low-literacy adults who want to learn how to read. Sample persona is provided, see file #2 from the provided resources.
Judging Criteria
- Interpretation of the user experience.
- Is the application visually appealing?
- Is the application easy to use?
- Cleanliness of your graphics and design.
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, Adobe XD or Sketch. Layers should be named and well organized.
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.