Challenge Summary
Welcome to "FAST - Offline Sync Mobile App Design Concepts Challenge". In this challenge, we need your help to create a new UI/UX for our mobile Offline Sync application where the user can add/edit/delete and manage all employees data effective and efficient. The user will be able to use this mobile application online and offline by using the Sync features that available in the app.
Read the challenge specification carefully and watch the forums for any questions or feedback concerning this challenge. Let us know if you have any questions in the challenge forum!
Timeline:
- Challenge Start: Monday, 08th January 2018 10.00 AM EST
- Rolling Checkpoint Review Start: Thursday, 11st January 2018 10.00 AM
- Challenge End: Saturday, 13th January 2018 10.00 AM EST
*Client will provide feedback within 1-2 hours after rolling checkpoint deadline ends. We will select 5 designs that submitted in rolling checkpoint phase to receive rolling checkpoint prizes ($50 per-designers)
Background Overview
We are in need to create a mobile application where all the application user will be able to manage employees data using their mobile devices and will be able to use the app whether they have a connection to the server or not. The application will have Sync features that can manage the data in client side so when it’s offline, the data will be saved temporarily in the mobile device and once user got the connection, the app will push the data back to the server.
Here are the main features of the app that needs to be created in this challenge:
- User should be able to perform an action in offline as well as on online mode.
- User should be able to sync with another user who has downloaded the same data in offline mode.
- User should be able to sync the data back with the server.
- User should be able to download the data from the server.
- Once data is synced/downloaded, the user should be able to perform add/update/delete the data.
- User should be able to sync the data back with the server.
- Conflict resolution has to be done on the client side if any.
- If any conflict is there user should be able to select the correct data.
Design Considerations
- How quickly could you find information? Online/Offline Status? Sync in progress? Latest Updates?
- The interface will be easy and intuitive to navigate
- Give importance to the overall layout and think on how a user would interact with the content on the page.
- Show all the screens and provide a user flow/click-path and navigation, so we can see how the interactions fit together in the application
- Easy to understand flow from page to page.
- Each page is not overcrowded with information
- This app will be using ReactJS, Redux, Cordova, and IBM mobile first for offline data storage (JSON storage) for the Technology
Target Devices
We are looking to create it as Hybrid Mobile App (Only Android Needed for now)
- Android: 1080x1920px
Branding Guidelines
- Modern, Professional, Crisp and Clean look and feel
- Font, Colors and Design Style are Open to designers
Challenge Forum
If you have any doubts or questions regarding challenge requirements, please ask in our challenge forum:
https://apps.topcoder.com/forums/?module=ThreadList&forumID=619933
Screen Requirements
For this challenge, we are looking for the below pages to be designed/considered in your concepts. The screen functionality details listed below are suggested functionality for consideration. Do not allow the suggestions below to impact the creativity of design. If there is a better way to accomplish the same goal, then feel free to take creative liberties.
0) General Requirements
- The application must have the ability to run and store data locally on the end user’s system, while not connected to any network (able to perform all primary function in offline mode).
- It must also have the capability to sync data back to the central database, via a “sync” button, when the user is online.
1) Login Screen
Reference Wireframe Page 1
- Before able to use the application, user will need to login first to the app
- Ordinary login features (username/password) and ability to remember login credential
- Needs error scenario when user enter the wrong credential
- Social media login? Register? Wrong password? Let us know your idea for the app!
2) View All Data Screens
Reference Wireframe Page 3
- Once user successfully logged in to the app, this screen will appear by default
- User can see all employees data on this screen
- Show list of latest data updates (10 records only) on this screen
- Pagination? Sorting? Filter? Search? What else can be added to help the user find any data here?
- Needs to see data in different views (list/card)
- Show us your creativity to simplify user interaction in this screen.
- Need the ability to see sync status here, is it online/offline? If it’s offline, is there any way to sync force it to online? If it’s offline, how long has it been offline?
- Show Pending data that not yet pushed to the server?
- Easy access to main navigation and all main features in the app
- User latest log activity?
- Notification area to show all activity in the app?
- Ability to download the latest data manually?
- Message? Communication with other user or ability to create notes?
- Show latest data updates in the app and which user adding it?
- Ability to see the data in various view (list/cards)?
- Needs to have Sync Button where the user can push/get the data manually from the server.
- Show us how a user can manage any conflict from a server or from other users in this screen?
- Needs to have a scenario where the user can choose and decide the correct data when conflicts happen.
3) Add/ Edit Data Screens
Reference Wireframe Page 2
- User will be able to add new employees data from this screen
- Provide form validation scenario for any new required fields
- Needs to be able to see clear status about user connection
- Show us what kind of interactions should be done if user has internet connection? And what should be done if user doesn’t have a connection? How to manage the data online and offline?
- What if the employees' data already available in the system? How can we manage the interaction to notify the user about the data? And how can user manage this when they are offline?
- Edit, User also will be able to modify employees data via this screen
- Edit, Need to be able to see any data sync status in each form fields, whether it’s updated or outdated.
Important:
- Keep things consistent. This means all graphics styles should work together.
- All of the graphics should have a similar feel and general aesthetic appearance
Marvel Prototype
- We need you to upload your screens to Marvel App.
- Please send your marvel app request to fajar.mln@gmail.com
- You MUST include your Marvel app URL (in your marvel app prototype, click on share and then copy the link & share it within your notes/comment this link while you upload).
Documentation
https://drive.google.com/file/d/1cjrbxpZI3HJrvJUFuTOwhDXuUreP8VAx/view?usp=sharing
- Rough Wireframe for Screen Requirements (Project_Sync_App.pptx)
Target Audience
- Internal Employees
Judging Criteria
Your submission will be judged on the following criteria:
- Overall idea and execution of concepts
- How well does your design align with the objectives of the challenge
- Execution and thoughtfulness put into the solving the problem
- Overall design and user experience
- Cleanliness of screen design and user flow
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 image files based on Challenge submission requirements stated above.
- MarvelApp link for review and to provide feedback
Source Files
All source files of all graphics created in either Adobe Photoshop/Illustrator/Sketch and saved as editable layer
Final Fixes
As part of the final fixes phase, you may be asked to modify your graphics (sizes or colors) or modify overall colors.
Read the challenge specification carefully and watch the forums for any questions or feedback concerning this challenge. Let us know if you have any questions in the challenge forum!
Timeline:
- Challenge Start: Monday, 08th January 2018 10.00 AM EST
- Rolling Checkpoint Review Start: Thursday, 11st January 2018 10.00 AM
- Challenge End: Saturday, 13th January 2018 10.00 AM EST
*Client will provide feedback within 1-2 hours after rolling checkpoint deadline ends. We will select 5 designs that submitted in rolling checkpoint phase to receive rolling checkpoint prizes ($50 per-designers)
Background Overview
We are in need to create a mobile application where all the application user will be able to manage employees data using their mobile devices and will be able to use the app whether they have a connection to the server or not. The application will have Sync features that can manage the data in client side so when it’s offline, the data will be saved temporarily in the mobile device and once user got the connection, the app will push the data back to the server.
Here are the main features of the app that needs to be created in this challenge:
- User should be able to perform an action in offline as well as on online mode.
- User should be able to sync with another user who has downloaded the same data in offline mode.
- User should be able to sync the data back with the server.
- User should be able to download the data from the server.
- Once data is synced/downloaded, the user should be able to perform add/update/delete the data.
- User should be able to sync the data back with the server.
- Conflict resolution has to be done on the client side if any.
- If any conflict is there user should be able to select the correct data.
Design Considerations
- How quickly could you find information? Online/Offline Status? Sync in progress? Latest Updates?
- The interface will be easy and intuitive to navigate
- Give importance to the overall layout and think on how a user would interact with the content on the page.
- Show all the screens and provide a user flow/click-path and navigation, so we can see how the interactions fit together in the application
- Easy to understand flow from page to page.
- Each page is not overcrowded with information
- This app will be using ReactJS, Redux, Cordova, and IBM mobile first for offline data storage (JSON storage) for the Technology
Target Devices
We are looking to create it as Hybrid Mobile App (Only Android Needed for now)
- Android: 1080x1920px
Branding Guidelines
- Modern, Professional, Crisp and Clean look and feel
- Font, Colors and Design Style are Open to designers
Challenge Forum
If you have any doubts or questions regarding challenge requirements, please ask in our challenge forum:
https://apps.topcoder.com/forums/?module=ThreadList&forumID=619933
Screen Requirements
For this challenge, we are looking for the below pages to be designed/considered in your concepts. The screen functionality details listed below are suggested functionality for consideration. Do not allow the suggestions below to impact the creativity of design. If there is a better way to accomplish the same goal, then feel free to take creative liberties.
0) General Requirements
- The application must have the ability to run and store data locally on the end user’s system, while not connected to any network (able to perform all primary function in offline mode).
- It must also have the capability to sync data back to the central database, via a “sync” button, when the user is online.
1) Login Screen
Reference Wireframe Page 1
- Before able to use the application, user will need to login first to the app
- Ordinary login features (username/password) and ability to remember login credential
- Needs error scenario when user enter the wrong credential
- Social media login? Register? Wrong password? Let us know your idea for the app!
2) View All Data Screens
Reference Wireframe Page 3
- Once user successfully logged in to the app, this screen will appear by default
- User can see all employees data on this screen
- Show list of latest data updates (10 records only) on this screen
- Pagination? Sorting? Filter? Search? What else can be added to help the user find any data here?
- Needs to see data in different views (list/card)
- Show us your creativity to simplify user interaction in this screen.
- Need the ability to see sync status here, is it online/offline? If it’s offline, is there any way to sync force it to online? If it’s offline, how long has it been offline?
- Show Pending data that not yet pushed to the server?
- Easy access to main navigation and all main features in the app
- User latest log activity?
- Notification area to show all activity in the app?
- Ability to download the latest data manually?
- Message? Communication with other user or ability to create notes?
- Show latest data updates in the app and which user adding it?
- Ability to see the data in various view (list/cards)?
- Needs to have Sync Button where the user can push/get the data manually from the server.
- Show us how a user can manage any conflict from a server or from other users in this screen?
- Needs to have a scenario where the user can choose and decide the correct data when conflicts happen.
3) Add/ Edit Data Screens
Reference Wireframe Page 2
- User will be able to add new employees data from this screen
- Provide form validation scenario for any new required fields
- Needs to be able to see clear status about user connection
- Show us what kind of interactions should be done if user has internet connection? And what should be done if user doesn’t have a connection? How to manage the data online and offline?
- What if the employees' data already available in the system? How can we manage the interaction to notify the user about the data? And how can user manage this when they are offline?
- Edit, User also will be able to modify employees data via this screen
- Edit, Need to be able to see any data sync status in each form fields, whether it’s updated or outdated.
Important:
- Keep things consistent. This means all graphics styles should work together.
- All of the graphics should have a similar feel and general aesthetic appearance
Marvel Prototype
- We need you to upload your screens to Marvel App.
- Please send your marvel app request to fajar.mln@gmail.com
- You MUST include your Marvel app URL (in your marvel app prototype, click on share and then copy the link & share it within your notes/comment this link while you upload).
Documentation
https://drive.google.com/file/d/1cjrbxpZI3HJrvJUFuTOwhDXuUreP8VAx/view?usp=sharing
- Rough Wireframe for Screen Requirements (Project_Sync_App.pptx)
Target Audience
- Internal Employees
Judging Criteria
Your submission will be judged on the following criteria:
- Overall idea and execution of concepts
- How well does your design align with the objectives of the challenge
- Execution and thoughtfulness put into the solving the problem
- Overall design and user experience
- Cleanliness of screen design and user flow
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 image files based on Challenge submission requirements stated above.
- MarvelApp link for review and to provide feedback
Source Files
All source files of all graphics created in either Adobe Photoshop/Illustrator/Sketch and saved as editable layer
Final Fixes
As part of the final fixes phase, you may be asked to modify your graphics (sizes or colors) or modify overall colors.
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.