Challenge Overview
Challenge Overview
QED is a mobile application that will be used to help users find information that at the same time will help them solve some problems. We have completed the design for both the desktop web dashboard and the mobile app. For this challenge, we’d like to convert the design to an ionic based prototype app that will run on iOS and Android devices.
Please only focus on the mobile design for this challenge.
All screens from the mobile design are in scope.
Assets provided in Forums (available on registration)
MarvelApp Link
Design Sources
Screens Requirements
Overall
- Overall the screen flow is pretty clear if you follow the MarvelApp link, so please carefully check that.
- Show hover/active states for buttons, dropdowns, breadcrumbs, errors/success states, elements with interaction, etc.
Screen Notes
- 01-6Welcome-Screens.jpg: for this screen, just play some video from Youtube for now.
- 04-3Notifications.jpg: when View Old Notifications is pressed, just load more notifications into the list and make it scrollable (if not already). Push notification is NOT in scope of this prototype.
- 04-4Search-Content.jpg: remove the Content and Tags tabs, just keep the search bar and the recent searches sections.
- 05-1Content-Details.jpg: for video type content, hitting the image should bring up a player that plays a video from Youtube; for audio type content, hitting the image should play the audio.
- 08-1Settings.jpg: ignore the Update Password section here.
General Notes
- You are building an Ionic Cordova app in this contest, with Android and iOS as the target platforms. Please use Ionic 2.x
- The app will be locked to Portrait mode. Landscape mode is NOT in scope
- Consider iOS 10.0+ and Android 6.0 as the baseline versions
- The application is for phones and is expected to run on tablets in scaled mode
- The design asset sources and Marvelapp link are provided in the forum
- Use Ionic components/directives (ion-list, ion-item, etc.) as much as possible, providing they exactly match the behaviour and styling of the HTML prototype (see below). You can use the Sass variables for the ionic directives for customising the style to fit the app.
- If the Ionic component/directive does not exactly match the design, then you should create an Ionic component/directive
- Consider how you might employ view caching to improve the user experience
- We strongly recommend using this seed project as a starting point. Clean up anything that you don’t need.
- The converted prototype should exactly match the provided design including the screen transitions.
- For data for all screens, use JSON files and use methods that read data off these files. The idea is that we should be able to replace the URL in these methods to point to actual backend at a later stage for minimal changes. Do NOT hardcode data into the code.
Final Submission Guidelines
Submission Deliverables
- Zipped project source code
- Verification video covering both iOS & Android
- Provide detailed deployment document that covers the following :
- How to setup the environment, required software and dependencies in order to run the apps
- How to build the app, package it into both iOS and Android platforms, and run it in emulators