Challenge Summary
Welcome to QED Learning Library Mobile Application Design Challenge.
We need your help to come up with creative solutions for a data-intensive library application that will help users finding information to solve common issues in their technical fields as well as providing further education. We invite you to do extensive research and come up with creative solutions (suggestions) for this people who needs your help!
Best of luck.
1. Home (Phone only)
3. Browse Content (Phone only)
5. Profile (Phone only)
6. Reports (Desktop only)
- Please provide a MarvelApp Presentation (see details below).
- Make sure all pages have correct flow! Use correct file numbering. (00, 01, 02, 03)
1. Home (Phone and Desktop)
2. Login/Register (Phone only)
3. Browse Content (Phone and Desktop)
4. Bookmarks (Phone only)
5. Profile (Phone only)
6. Reports (Desktop only)
7. Onboarding Process (Phone only)
- 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 challenge is to design the look and feel of a mobile application that will be used to help users finding information that at the same time will help them solve some problems. We are also going to need a few desktop screens to see how this will transition into a larger media.
The Problem
Remote staff from the company requires basic, in-service, and advanced training as well as continued performance support. The challenges of convening formal, instructor-led training for these staff are not new to us (costs, travel, security, prolonged absence from the primary work site, etc.). Further, updating these staff on new client activities, evolved tools, and revised operating procedures present similar challenges. Combined with a custom application ("The QED Learning Library"), hand held devices offer an available solution.
Workflow
- The first step in the application is to allow users selecting a role.
- Once inside, the application should show a "Bookshelf". From that "Bookshelf", the user selects a vertically displayed book from the many on the shelf.
- Each “book” is labeled with a single topic (books are highlighted in colors denoting, "Required and not completed" or "Completed" or "Support Tools").
- Once a "Book" is selected, topic-specific content is offered (video instruction, self-paced instruction, etc.) while making best use of screen size and minimizing required text.
- Required testing is offered similarly. Additional links to topic-tools, web sources, etc. are made available as well, possibly the last page of each "Book".
- Performance Support tools (ready-reference checklists, go-by's, sample outputs, SOPs (Standard Operation Procedures), templates, reminders, best practice lists, tips and tricks, etc.) are offered similarly on a shelf and selectable for full screen display.
Concept Design Goals
Since the amount of information will be intense, we need to provide an easy mechanism to display the information in a very simple way, don’t make the users wonder how to get to X specific content they are looking for. We can not leave the visual appealing factor behind but the simplicity and ease of access approach is very important.
2. The main bookshelf features, as well as the ability to allow users to save their place, leave reviews, and rate content.
3. Nothing childish or with too much going on. This meant to be a professional app.
4. We prefer flat/solid/clean design without looking too dul
Screens Requirements
Overall
- Show hover/active states for buttons, dropdowns, breadcrumbs, errors/success states, elements with interaction, etc.
- Please suggest how to organize this content and group them into screens, we are looking forward to see your unique proposals, be bold. The following screens orders are just initial suggestions but we think content could be organized in a different way, go for it!
1. Home (Phone and Desktop)
Initial screen of the application. It should be very welcoming and also explain what the application is about. Maybe add some introductory slides before logging in.
Use "Welcome to the QED Learning Library" and integrate imagery nicely. We don’t much content to provide so far but we’d like to see how a page would look with more information about the application and how to use it maybe. Ideas are welcomed.
2. Login/Register (Phone only)
User can enter credentials using email and password. User can login or register through Facebook and Twitter accounts.
3. Browse Content (Phone and Desktop)
Initially, user should be able to select a role. Depending on the selected role he/she would received some specific information about the items available for the role, what makes more sense for them.
- Field Monitor, Enumerator.
- Supervisor.
- Research Assistant.
- Data Specialist.
- Guest *with limited access.
This is where the magic happens. Users get to see a set of available topics. We have the bookshelf idea but it doesn’t have to necessarily be an actual bookshelf. We are open to see different representations of a library. Since the content will be multimedia, books may not be appropriate always.
Books/Items List
Users are able to see the list of content that has been tagged for their role. Each item/book should have a title, author and a thumbnail/image.
Users can mark and see books as read.
Books/Items Details
Upon clicking on a “Book” the user will first see a summary page, that includes brief description of the content, with:
- Title.
- Author.
- Page length (or time necessary to be read).
- Ratings.
- Comments.
- Tags.
Specific content will include videos, PDFs, audio, etc. Create scenarios to display different types of multimedia content, create scenarios where content is very extensive (images, videos, audio, bullets, quotes, etc). If you want to see sample document please check the attached Sample Item.pdf, it’s just one of the many possible content that has to be allocated in the design. Keep in mind what we previously stated (videos, audios, etc).
There will be options for the users to rate, share, favorite, and comment on each content.
There will be also be the option of “bookmarking” or saving the place in each book, so the user can then return easily to their book.
4. Bookmarks (Phone only)
It should display a list of bookmarked books/items. User can delete them or open them from this screen. Make sure to display delete confirmations when a user desires to delete a bookmark.
5. Profile (Phone only)
User should be able to complete or edit a profile:
- Name.
- Last Name.
- Email.
- Password.
- Profile picture.
- User role (only modifiable by an admin user, otherwise fixed).
6. Reports (Desktop only)
Admin user should have access to this page. It will show high level information about the usage of the application, such as:
- Number of page visits over time.
- Content most frequently accessed.
- Most bookmarked items.
- Etc, we’re open to suggestions, please add analytics that you find useful.
7. Onboarding Process (Phone only)
Please show us a friendly onboarding strategy to explain the user what the different sections are about and how to use them. We like the Slack approach, using floating hints/overlays to point out with messages the goals of the UI features.
Implement a walk through flow from registration until content browsing. It should cover everything to educate the users.
Branding Guidelines
- Follow the attached branding book for colors, style and typography.
- Keep things consistent. This means all graphic styles should work together.
References
Books/content applications such as iBooks, Kindle, Flipboard, etc. Please browse and do some research.
Screen Specifications
- Mobile: 750px width. Height as much as needed.
- Desktop: 1280px width. Height as much as needed. Only for certain screens, see screens requirements for those labeled as “desktop”.
- Make sure your work is in a vector format, for retina scaling and high fidelity.
MarvelApp Presentation
- Provide a MarvelApp presentation of your design to help us understand your design concept.
- Request a MarvelApp prototype from me (mahestro@copilots.topcoder.com) and/or Adroc (adroc@topcoder.com).
- Provide the MarvelApp shareable link in your notes during submission upload.
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.
Target User
Primarily QED staff in the field, but will open select Guest access for additional audiences outside of QED.
Judging Criteria
- Interpretation of the user experience.
- Is the application visually appealing?
- Is the concept cross-cultural appropriate?
- Is the application easy to use?
- Are mobile-first considerations appropriately applied to the design concept?
- 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, Illustrator 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 need your help to come up with creative solutions for a data-intensive library application that will help users finding information to solve common issues in their technical fields as well as providing further education. We invite you to do extensive research and come up with creative solutions (suggestions) for this people who needs your help!
Best of luck.
Round 1
Submit your design for a checkpoint feedback.1. Home (Phone only)
3. Browse Content (Phone only)
5. Profile (Phone only)
6. Reports (Desktop only)
- 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 (ALL VIEWS).1. Home (Phone and Desktop)
2. Login/Register (Phone only)
3. Browse Content (Phone and Desktop)
4. Bookmarks (Phone only)
5. Profile (Phone only)
6. Reports (Desktop only)
7. Onboarding Process (Phone only)
- 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 challenge is to design the look and feel of a mobile application that will be used to help users finding information that at the same time will help them solve some problems. We are also going to need a few desktop screens to see how this will transition into a larger media.
The Problem
Remote staff from the company requires basic, in-service, and advanced training as well as continued performance support. The challenges of convening formal, instructor-led training for these staff are not new to us (costs, travel, security, prolonged absence from the primary work site, etc.). Further, updating these staff on new client activities, evolved tools, and revised operating procedures present similar challenges. Combined with a custom application ("The QED Learning Library"), hand held devices offer an available solution.
Workflow
- The first step in the application is to allow users selecting a role.
- Once inside, the application should show a "Bookshelf". From that "Bookshelf", the user selects a vertically displayed book from the many on the shelf.
- Each “book” is labeled with a single topic (books are highlighted in colors denoting, "Required and not completed" or "Completed" or "Support Tools").
- Once a "Book" is selected, topic-specific content is offered (video instruction, self-paced instruction, etc.) while making best use of screen size and minimizing required text.
- Required testing is offered similarly. Additional links to topic-tools, web sources, etc. are made available as well, possibly the last page of each "Book".
- Performance Support tools (ready-reference checklists, go-by's, sample outputs, SOPs (Standard Operation Procedures), templates, reminders, best practice lists, tips and tricks, etc.) are offered similarly on a shelf and selectable for full screen display.
Concept Design Goals
Since the amount of information will be intense, we need to provide an easy mechanism to display the information in a very simple way, don’t make the users wonder how to get to X specific content they are looking for. We can not leave the visual appealing factor behind but the simplicity and ease of access approach is very important.
2. The main bookshelf features, as well as the ability to allow users to save their place, leave reviews, and rate content.
3. Nothing childish or with too much going on. This meant to be a professional app.
4. We prefer flat/solid/clean design without looking too dul
Screens Requirements
Overall
- Show hover/active states for buttons, dropdowns, breadcrumbs, errors/success states, elements with interaction, etc.
- Please suggest how to organize this content and group them into screens, we are looking forward to see your unique proposals, be bold. The following screens orders are just initial suggestions but we think content could be organized in a different way, go for it!
1. Home (Phone and Desktop)
Initial screen of the application. It should be very welcoming and also explain what the application is about. Maybe add some introductory slides before logging in.
Use "Welcome to the QED Learning Library" and integrate imagery nicely. We don’t much content to provide so far but we’d like to see how a page would look with more information about the application and how to use it maybe. Ideas are welcomed.
2. Login/Register (Phone only)
User can enter credentials using email and password. User can login or register through Facebook and Twitter accounts.
3. Browse Content (Phone and Desktop)
Initially, user should be able to select a role. Depending on the selected role he/she would received some specific information about the items available for the role, what makes more sense for them.
- Field Monitor, Enumerator.
- Supervisor.
- Research Assistant.
- Data Specialist.
- Guest *with limited access.
This is where the magic happens. Users get to see a set of available topics. We have the bookshelf idea but it doesn’t have to necessarily be an actual bookshelf. We are open to see different representations of a library. Since the content will be multimedia, books may not be appropriate always.
Books/Items List
Users are able to see the list of content that has been tagged for their role. Each item/book should have a title, author and a thumbnail/image.
Users can mark and see books as read.
Books/Items Details
Upon clicking on a “Book” the user will first see a summary page, that includes brief description of the content, with:
- Title.
- Author.
- Page length (or time necessary to be read).
- Ratings.
- Comments.
- Tags.
Specific content will include videos, PDFs, audio, etc. Create scenarios to display different types of multimedia content, create scenarios where content is very extensive (images, videos, audio, bullets, quotes, etc). If you want to see sample document please check the attached Sample Item.pdf, it’s just one of the many possible content that has to be allocated in the design. Keep in mind what we previously stated (videos, audios, etc).
There will be options for the users to rate, share, favorite, and comment on each content.
There will be also be the option of “bookmarking” or saving the place in each book, so the user can then return easily to their book.
4. Bookmarks (Phone only)
It should display a list of bookmarked books/items. User can delete them or open them from this screen. Make sure to display delete confirmations when a user desires to delete a bookmark.
5. Profile (Phone only)
User should be able to complete or edit a profile:
- Name.
- Last Name.
- Email.
- Password.
- Profile picture.
- User role (only modifiable by an admin user, otherwise fixed).
6. Reports (Desktop only)
Admin user should have access to this page. It will show high level information about the usage of the application, such as:
- Number of page visits over time.
- Content most frequently accessed.
- Most bookmarked items.
- Etc, we’re open to suggestions, please add analytics that you find useful.
7. Onboarding Process (Phone only)
Please show us a friendly onboarding strategy to explain the user what the different sections are about and how to use them. We like the Slack approach, using floating hints/overlays to point out with messages the goals of the UI features.
Implement a walk through flow from registration until content browsing. It should cover everything to educate the users.
Branding Guidelines
- Follow the attached branding book for colors, style and typography.
- Keep things consistent. This means all graphic styles should work together.
References
Books/content applications such as iBooks, Kindle, Flipboard, etc. Please browse and do some research.
Screen Specifications
- Mobile: 750px width. Height as much as needed.
- Desktop: 1280px width. Height as much as needed. Only for certain screens, see screens requirements for those labeled as “desktop”.
- Make sure your work is in a vector format, for retina scaling and high fidelity.
MarvelApp Presentation
- Provide a MarvelApp presentation of your design to help us understand your design concept.
- Request a MarvelApp prototype from me (mahestro@copilots.topcoder.com) and/or Adroc (adroc@topcoder.com).
- Provide the MarvelApp shareable link in your notes during submission upload.
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.
Target User
Primarily QED staff in the field, but will open select Guest access for additional audiences outside of QED.
Judging Criteria
- Interpretation of the user experience.
- Is the application visually appealing?
- Is the concept cross-cultural appropriate?
- Is the application easy to use?
- Are mobile-first considerations appropriately applied to the design concept?
- 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, Illustrator 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.