Challenge Overview
Welcome to Mjolnir Project Mobile Application Convert Design to Ionic Prototype Challenge Part 1.
Introduction
Dental offices and patients meet the ultimate application to help them finding the perfect match for their needs! We leveraged the Topcoder community to come up with a fun and engaging design in earlier challenges. Now, we want to translate the design into an Ionic prototype. This is the first out of the two challenges that we’ll be running to build out the Ionic prototype.
Application Users
The application will be used by two types of persons, employer (also referred to as business user) (dental practical office) and employee. Both of them are searching for matches to either hire or to be hired respectively.
Note that an application user can be both dental practical office and employee at the same time. This particular challenge focuses on the business user flow for the application
See Matching Interaction Workflow.xlsx to understand the application workflow.
Assets provided in Forums (available on registration)
-
MarvelApp Link
-
Design Sources
-
Matching Interaction Workflow
-
Client wireframes
Screen Requirements
The following screens are in scope (not necessarily different screens but we’ll use the nomenclature in Marvelapp to be consistent)
0.1 Onboarding
0.1 permission for notification
1.0 welcome
1.1 sign up
1.2 where did you hear
1.3 where did you hear
1.4 select use case
2.0 divert to user profile
2.1 sign up address
2.1 sign up google plus
2.2 specialisation
2.3 staffing
2.4 contact info
2.5 office timings
2.6 Add Office Manager
2.6 endorsements
2.6 endorsement-modal
2.7 existing employees
2.8 office culture
2.9 photos
2.9 photos modal
2.9 photos uploaded
2.10 online review connect
2.10 online review connect modal
2.11 - modal
3.0 - dashboard
3.1 - dashboard animation
3.2 - dashboard
3.2 - dashboard animation
3.3 - dashboard
3.3 - multi function button
3.4 - dashboard to benches translation
3.5 - benches
3.5 - dashboard to connect translation
3.6 - dashboard connect
Detailed Requirements
There is no separate splash screen. Please implement a simple fade transition from black to 0.1 onboarding for splash.
0.1 - Onboarding
The carousel should work as shown. It should be possible to swipe left/ right to view the various carousel screens
0.1 - Permission for Notification
This should be the native permissions dialog that shows up in iOS and Android.
1.0 - Welcome
- The two clickable actions on this screen are Sign Up and Log in buttons. Stub the Log in click action for now
1.1 - sign up
- All fields are mandatory
- Implement format validation for email field
- Mask the password field
- If any of the fields is not filled up and use presses Sign Up, highlight the empty field with a red border
1.2 & 1.3
- This shows the selected and unselected state for each button. Only one option can be in selected state at any time
- The Other (Please mention) text field should be hidden unless the user has selected the ‘Other’ button
1.4
- User should be able to select either of the options. For this challenge, we’ll only support business profile
2.0
- User must click ‘OK’ to move further from this screen. Upon clicking ‘OK’ user moves to 2.1 google plus modal (not to 2.1 sign up address)
2.1 sign up address
- Business Name is an autocomplete field.
- City & States are text fields
- Once the fields are clicked and user moves to next step, this section is collapsed as a tick mark. The user should be able to click on the tick mark to expand the section and change it as needed. For every subsequent step, the user should be able to click on the number box. All other number boxes except the next one should be in disabled state. The user should only be able to access the next step.
2.1 sign up google plus modal
User should be able to click either of the 3 options on this screen. Stub out the click actions for now. Clicking ‘OK’ take the user to 2.1 sign up address
2.2 & 2.3
User should be able to select multiple specialisations as shown. Note the selected and unselected states for various checkboxes
User can also add text in the other field
2.4 contact info
- Implement format validation for email, phone fields
- Add dummy values for Preferred Option & Alternate Option dropdowns
2.5 Office timings
- For Start & End, add hour markers from 00 to 23
- There should be a way to have tuesday through friday auto populate with Mondays hours once monday (or any other) is entered. Many offices have the same hours 4-5 days per week
2.6 Add Office Manager
- Note the user can skip this screen by clicking Skip
- If the user does not skip, all fields are mandatory
- Clicking Add Another Office Manager should clear out the fields filled by user
2.6 Peer to Peer Endorsements
- All fields are mandatory
- Clicking Add Another Peer should clear out the fields filled by user and show the modal - 2.6 endorsements-modal
2.7 existing employees
- Clicking the ? opens the modal dialog
- User needs to click OK to move ahead
- User should be able to add title on any existing boxes where it says ‘Add Title’
- They should be able to add a box by clicking the + sign - it should add a new box there with ‘Add Title’
2.8 Office culture
- This is a text area
- User can press SKIP to move to next step
2.9 photos
- Once the user reaches this step, the person has 1 spot for profile picture and 5 for other pictures. If and when he uploads all 6, a "Add Additional Picture" button shows up below in case he wants to add more pictures.
- When clicking on each of the photos, user is shown the modal to pick photo from the social network
2.9 photos uploaded
- Once user uploads a photo, show the thumbnail image
- User can click ‘x’ to remove a particular photo
2.10 online review connect
- User can skip this step
- Clicking the highlighted section opens the modal
2.11 - This is the last step
- All actions must be clickable
- Stub the ‘Copy this office’ click action
- Clicking on ‘Start from scratch’ should take the user back to 2.1
- Clicking ‘No I’ll do it later’ should take the user to 3.0 - dashboard
3.0 - dashboard to 3.3
- Profiles should be selected by default as shown
- Friends should be selected by default as shown
Read the section called ‘Dashboard transition requirements’ below as well
3.4 multi function button
Clicking in the first button in the bottom bar should make these buttons appear
3.4 dashboard to benches
- This screen is shown when the user is moving from PROFILES to BENCHES in the top menu
- Note how the profile and New matches are each shown partially
3.5 benches
- This is shown when the user is now on the BENCHES option in the top menu
3.5 - dashboard to connect transition
- This shows the transition when the user is moving from PROFILES to FRIENDS in the top menu
3.6 - dashboard connect
- This is the friends view
3.7 - connect to menu transition
- This shows the transition when user moves from FRIENDS to left menu
Background Video
The screens 1.0 through 2.11 should play a video in the background. The video file is provided in the challenge assets in the forums
Benches
Please note on how the benches work
-
Benches on the benches screen are recognizable like in an Apple Device. You press and hold and they become changeable.
-
New matches should work the same in benches as in Friends.
-
When tapping on each bench the bench screen should come on from the right.
-
New Matches swipes left and right and the other benches scroll up and down.
-
When a new match is clicked and held down it becomes mobile and can be placed in the other benches. If there are more benches that aren't visible on the screen then when the mobile card is moved to the bottom of the screen the benches that are off the screen on the bottom start to scroll up.
-
In the individual bench pages the cards can be selected and viewed in the same way all cards can be, but if clicked and help then they all become mobile, like apps on the iPhone, and they can be rearranged and deleted.
Dashboard Transitions
-
The dashboard is one canvas and the color changes dynamically,frame by frame,smoothly in such a way that it should look like it is a part of the canvas we're seeing and each part has it's own color and identity. The menu indicator moves with the color.
-
When toggling between Friends and Opportunities/Potential Hires the deck should shuffle itself somehow, which afterwards shows the appropriate type of card.
-
When pressing and holding a card the card should move with the finger until it is pushed to the right, left, up or down, at which time it should go off the screen that way. If it goes to the right and that person has already swiped right on you then an "It's a Match" screen appears, which is what you already created. The two profile square cards of the user that is swiping and the person they matched with should come onto the screen from the left and right, meet in the middle, and then the option to message them or keep swiping should pop up. If the user chooses to message them then the message screen should sink away into the middle of the screen, while becoming translucent at the same time that it sink, exposing the profile page behind it, and then the messages screen should slide in from the right instantly.
-
When pressing the "multi-use" button the menu for the button should emerge from the button up.
-
When pressing the parameters button on the bottom right the parameters screen should come up from the bottom.
-
The multi function button on the Expanded User/Practice profile should be fixed with respect to the bottom of the screen. They should move down alongside as we scroll.
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 (ask for access in the forums).
- 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.
Final Submission Guidelines
Final Submission Guidelines
- 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