Challenge Summary
Welcome to Mjolnir Project Mobile Application Concept Design Challenge.
Dental offices and patients meet the ultimate application to help them finding the perfect match for their needs! We need your collaboration to come up with design concepts for this mobile hybrid application. It should be friendly, fun and full of gestures. Interesting, jump in now.
Best of luck!
2. Register
3. Employer Profile Completion
4. Employer Dashboard
4.1. Navigation
4.2. Search/filter
4.5. Employee Quick Profile View (both free and premium views)
- 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. Register
3. Employer Profile Completion
4. Employer Dashboard (all features)
5. Employer Profile Page (viewed by Employee)
- 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 match dentist office employers with potential candidates, in a fun and casual way. This is an hybrid application, it will share the same user experience for both Android and iOS platforms.
You are provided with wireframes that show the data to be used and click path connecting all scenarios. Use it as a baseline model, don’t just reskin it, you are encouraged to come up with your own solution.
Concept Design Goals
The application will be free for all users but will also have a premium status, which allows user enabling special features to enhance their experience and chances. Inspired by date matching apps like Tinder or OkCupid, the feeling of this app should be something on the same direction, very friendly and easy to use (graphics and icons help!).
From a design perspective, we want to avoid seeing cluttered, hideous or boring designs. We envision the site to flow effortlessly, beautiful rounded edges with a modern, social and fun feel to it. We are building a tool that will make staffing and job hunting fun. Smooth transitions from one page to the next. We prefer rounded edging vs sharp edges but are not locked in either way, we like the page to have depth and not a flat feel. Definitely modern, fun, social, beautiful & clean.
Consider the following features as key for the user experience:
A) The Search/Swipe/Match functionality to request a match needs to be beautiful and clean. We need the profile cards to have an incredibly intuitive layout and tell a great story on a single pain of glass.
B) The initial profile creation and ongoing updating of a Profile should be very easy and generate a beautiful and clean profile/resume.
C) The ability for a business and employee to build a Bench where they can rank them is a key differentiator for our business. Having this functionality work well from a business perspective to allow them to proactively plan and constantly engage with their potential next employee is huge.
D) Messaging - Keeping the two sides of the platform on the app 100% will be driven by their ability to communicate in app, this can not be a hindrance, message, voice and in app appointment creation is important.
Workflow
The application will be used by two types of persons, employer (dental practical office) and employee. Both of them are searching for matches to either hire or to be hired respectively. In the screen requirements you will find references to both users, all the scenarios must be present for both users.
Note that an application user can be both dental practical office and employee at the same time. A method for switching account/role must be considered in the app (menu most likely).
See Matching Interaction Workflow.xlsx for more information about the application workflow.
Screens Requirements
Overall
- Show hover/active states for buttons, dropdowns, breadcrumbs, errors/success states, elements with interaction, etc.
- Show all data from the wireframes dropdowns in your design solution.
- Consider you can suggest layout, disposition of elements and best UX practices. You are encouraged to. Wireframes are just for references, not to be skinned.
- See UX Notes.jpg for a more refined version of the client vision. This was made by the client to show you what the envision in some areas of the application overall.
1. Welcome (onboarding)
See “App Profile Build out Wireframe” sheet for reference.
User should be able to see a welcoming message.
Would be valuable to have a set of swapping screens explaining what the app is about and some hints (not mandatory though).
2. Register
See “App Profile Build out Wireframe” sheet for reference.
User should be able to register using: First Name, Last Name, Email and Password.
User should be able to login using social networks.
After completing the register process (via form or social network), user should see a “Thank you” note and be able to choose an option to state how he heard about the app.
At the end of the registration, user gets to choose which type of account he creates, Employer or Employee.
Note that at this stage, status field is not editable as it appears in the wireframes.
3. Employer Profile Completion
See “App Profile Build out Wireframe” sheet for reference.
User must complete a series of questions. His workflow path starts from the orange section in the provided wireframes. The full workflow must be showcased in your solution.
It’s important to have a profile completeness indicator visible. The more information the user completes the better the changes to find the “perfect match”.
User can set a current status anytime during the process.
After completing the profile, user lands in the dashboard ~ #5 in requirements here.
3.1. Complete Profile by Manual Input
User completes the profile as shown in the wireframes.
3.2. Create Profile by Importing G+
User can initially import some data from his G+ Business profile, as the wireframes. This importing process is not mandatory for users, but most dental practices have a google page with google reviews. We want to thoroughly encourage all practice profiles to use this.
4. Employer Dashboard
See “Company Profile In-App View” sheet for reference.
Each section must be present in your design, benches, office culture, positions employed, technology and so on. Overall, the data for these sections can be better understood after reviewing the profile completion. And this data can be managed (edited, deleted) from the sections in the dashboard view.
User is able to prominently see the swappable/scrollable list of matches. As well as other two interactive benches.
User should be able to drag and drop the employee from the Matched/Match Request list down to their Bench.
User should be able to drag and drop the employee on their bench to add/remove or move them up or down their bench.
User can edit all of the required information fields directly from this page.
User should be able to easily activate a “I’m hiring” status through a button. This action updates their "Status" to "I'm Hiring" and notifies all the employees they are connected to on the platform. We’re open to suggestions about this flow.
4.1. Navigation
User should be able to navigate all the sections of the app. Think of cool/fresh interactions for the navigation.
Add a button/link that reads "One Dental Match Plus". It's not in the wireframes, needs to be added.
4.2. Search/filter
User should be able to search and apply filter parameters to find the perfect match. Show a filters configuration and also search results page.
We’re open to suggestions about the way these parameters will be used and organized. Consider that it should be extremely friendly and cover important data extracted from the employer profile creation, e.g. technical skills, specialities, practice amenities, and so on.
Free version view
User can have only one filter state for the parameters he configures.
Premium version view
User can save, edit/delete several filters. Each filter should have an identifier name.
4.3. Endorsements
User should be able to see a set of endorsements received from external users and internal employees. An endorsement is a formal validation provided from another app user. Basically, it acknowledges the existence of the user and works as a reference of trust.
Users can request for endorsements through email, just as they can do it in the profile completion page. Once an endorsement is submitted, it is only posted once the user being endorsed approves it.
Users should be able to remove endorsements.
4.4. Organizational Structure
This section should be interactive. Allowing user to drag and organize the structure.
The origin list of Confirmed Employees to be added comes from a verification process Employer vs Employee. You must display a solution for this particular workflow:
- Employer is able to search/match users as a normal operation already available in the app.
- In the quick profile view of this employee, an employer can identify him as a member of the organization.
- This selected/marked member receives a notification. If he accepts it, then he would be part of the available Confirmed Employees of that business.
- Employee is notified that the can now be added to the Organizational Structure chart.
4.5. Employee Quick Profile View
Clicking on any profile from the benches would activate a quick profile view where the user can perform some actions.
User should be able to click a contact button to start a conversation with this other user. Should be able to send a “request to match” (button). Should be able to dismiss (remove from bench). Should be able to save for later.
On mobile, the interactions just mentioned, should be done by swapping the image (see Wireframes and Tinder reference).
Free version view
Create a quick profile view with the following state only for free accounts.
- Blurred Photo
- City/State
- Speciality
- Years of career
- Contact button sends private message.
Premium version view
Create a quick profile view with the following state only for premium accounts.
- Photo (not blurred)
- City/State
- Speciality
- Years of career
- Contact button allows choosing among sending private message or call).
4.6. Update Photo Library
User should be able to update his photo library up to 5 images.
4.7. Messages
User should be able to start conversation threads with selected users.
4.8. Notifications
User should be able to see notifications from any kind of activity and interactions with other users.
4.9. Manage Match Requests
User should be able to manage match requests, including view quick profile from the sender, replying and deleting/ignoring.
User should manage incoming and outgoing requests (Inbound, Outbound).
Free version view
When user receives an inbound request, he can contact back the sender by message only. Display this scenario.
Premium version view
When user receives an inbound request, he can contact back the sender by message and call too. Display this scenario.
5. Employer Profile Page (viewed by Employee)
See “Employer Profile In-App View” sheet for reference. User can not edit anything here. It’s a display only view.
Free version view
As the wireframes. Display this screen.
Premium version view
Place a “Request a Match” button somewhere on the office profile page that the employee is scrolling through. Employee can match back with Employer. This allows the Employer to contact the Employee. Display this scenario.
Branding Guidelines
- Dental colors are typically Blue/Teal/Lavender but we are open to suggestions for a good sharp contrasting palette. Consider they have to play along with the logo colors.
- Use the provided logo.
- Keep things consistent. This means all graphic styles should work together.
References
Some designs for inspiration. DON’T COPY ANYTHING.
- Tinder ~ Swapping features for liking could be a match for the application employer/employee browser.
- OkCupid ~ Friendly filters creation feature.
Screen Specifications
- Mobile: 750px width. Height as much as needed.
- 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
Dental offices, employers and patients in the US.
Judging Criteria
- Is the application fun to use?
- 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.
Dental offices and patients meet the ultimate application to help them finding the perfect match for their needs! We need your collaboration to come up with design concepts for this mobile hybrid application. It should be friendly, fun and full of gestures. Interesting, jump in now.
Best of luck!
Round 1
Submit your design for a checkpoint feedback.2. Register
3. Employer Profile Completion
4. Employer Dashboard
4.1. Navigation
4.2. Search/filter
4.5. Employee Quick Profile View (both free and premium views)
- 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. Welcome
2. Register
3. Employer Profile Completion
4. Employer Dashboard (all features)
5. Employer Profile Page (viewed by Employee)
- 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 match dentist office employers with potential candidates, in a fun and casual way. This is an hybrid application, it will share the same user experience for both Android and iOS platforms.
You are provided with wireframes that show the data to be used and click path connecting all scenarios. Use it as a baseline model, don’t just reskin it, you are encouraged to come up with your own solution.
Concept Design Goals
The application will be free for all users but will also have a premium status, which allows user enabling special features to enhance their experience and chances. Inspired by date matching apps like Tinder or OkCupid, the feeling of this app should be something on the same direction, very friendly and easy to use (graphics and icons help!).
From a design perspective, we want to avoid seeing cluttered, hideous or boring designs. We envision the site to flow effortlessly, beautiful rounded edges with a modern, social and fun feel to it. We are building a tool that will make staffing and job hunting fun. Smooth transitions from one page to the next. We prefer rounded edging vs sharp edges but are not locked in either way, we like the page to have depth and not a flat feel. Definitely modern, fun, social, beautiful & clean.
Consider the following features as key for the user experience:
A) The Search/Swipe/Match functionality to request a match needs to be beautiful and clean. We need the profile cards to have an incredibly intuitive layout and tell a great story on a single pain of glass.
B) The initial profile creation and ongoing updating of a Profile should be very easy and generate a beautiful and clean profile/resume.
C) The ability for a business and employee to build a Bench where they can rank them is a key differentiator for our business. Having this functionality work well from a business perspective to allow them to proactively plan and constantly engage with their potential next employee is huge.
D) Messaging - Keeping the two sides of the platform on the app 100% will be driven by their ability to communicate in app, this can not be a hindrance, message, voice and in app appointment creation is important.
Workflow
The application will be used by two types of persons, employer (dental practical office) and employee. Both of them are searching for matches to either hire or to be hired respectively. In the screen requirements you will find references to both users, all the scenarios must be present for both users.
Note that an application user can be both dental practical office and employee at the same time. A method for switching account/role must be considered in the app (menu most likely).
See Matching Interaction Workflow.xlsx for more information about the application workflow.
Screens Requirements
Overall
- Show hover/active states for buttons, dropdowns, breadcrumbs, errors/success states, elements with interaction, etc.
- Show all data from the wireframes dropdowns in your design solution.
- Consider you can suggest layout, disposition of elements and best UX practices. You are encouraged to. Wireframes are just for references, not to be skinned.
- See UX Notes.jpg for a more refined version of the client vision. This was made by the client to show you what the envision in some areas of the application overall.
1. Welcome (onboarding)
See “App Profile Build out Wireframe” sheet for reference.
User should be able to see a welcoming message.
Would be valuable to have a set of swapping screens explaining what the app is about and some hints (not mandatory though).
2. Register
See “App Profile Build out Wireframe” sheet for reference.
User should be able to register using: First Name, Last Name, Email and Password.
User should be able to login using social networks.
After completing the register process (via form or social network), user should see a “Thank you” note and be able to choose an option to state how he heard about the app.
At the end of the registration, user gets to choose which type of account he creates, Employer or Employee.
Note that at this stage, status field is not editable as it appears in the wireframes.
3. Employer Profile Completion
See “App Profile Build out Wireframe” sheet for reference.
User must complete a series of questions. His workflow path starts from the orange section in the provided wireframes. The full workflow must be showcased in your solution.
It’s important to have a profile completeness indicator visible. The more information the user completes the better the changes to find the “perfect match”.
User can set a current status anytime during the process.
After completing the profile, user lands in the dashboard ~ #5 in requirements here.
3.1. Complete Profile by Manual Input
User completes the profile as shown in the wireframes.
3.2. Create Profile by Importing G+
User can initially import some data from his G+ Business profile, as the wireframes. This importing process is not mandatory for users, but most dental practices have a google page with google reviews. We want to thoroughly encourage all practice profiles to use this.
4. Employer Dashboard
See “Company Profile In-App View” sheet for reference.
Each section must be present in your design, benches, office culture, positions employed, technology and so on. Overall, the data for these sections can be better understood after reviewing the profile completion. And this data can be managed (edited, deleted) from the sections in the dashboard view.
User is able to prominently see the swappable/scrollable list of matches. As well as other two interactive benches.
User should be able to drag and drop the employee from the Matched/Match Request list down to their Bench.
User should be able to drag and drop the employee on their bench to add/remove or move them up or down their bench.
User can edit all of the required information fields directly from this page.
User should be able to easily activate a “I’m hiring” status through a button. This action updates their "Status" to "I'm Hiring" and notifies all the employees they are connected to on the platform. We’re open to suggestions about this flow.
4.1. Navigation
User should be able to navigate all the sections of the app. Think of cool/fresh interactions for the navigation.
Add a button/link that reads "One Dental Match Plus". It's not in the wireframes, needs to be added.
4.2. Search/filter
User should be able to search and apply filter parameters to find the perfect match. Show a filters configuration and also search results page.
We’re open to suggestions about the way these parameters will be used and organized. Consider that it should be extremely friendly and cover important data extracted from the employer profile creation, e.g. technical skills, specialities, practice amenities, and so on.
Free version view
User can have only one filter state for the parameters he configures.
Premium version view
User can save, edit/delete several filters. Each filter should have an identifier name.
4.3. Endorsements
User should be able to see a set of endorsements received from external users and internal employees. An endorsement is a formal validation provided from another app user. Basically, it acknowledges the existence of the user and works as a reference of trust.
Users can request for endorsements through email, just as they can do it in the profile completion page. Once an endorsement is submitted, it is only posted once the user being endorsed approves it.
Users should be able to remove endorsements.
4.4. Organizational Structure
This section should be interactive. Allowing user to drag and organize the structure.
The origin list of Confirmed Employees to be added comes from a verification process Employer vs Employee. You must display a solution for this particular workflow:
- Employer is able to search/match users as a normal operation already available in the app.
- In the quick profile view of this employee, an employer can identify him as a member of the organization.
- This selected/marked member receives a notification. If he accepts it, then he would be part of the available Confirmed Employees of that business.
- Employee is notified that the can now be added to the Organizational Structure chart.
4.5. Employee Quick Profile View
Clicking on any profile from the benches would activate a quick profile view where the user can perform some actions.
User should be able to click a contact button to start a conversation with this other user. Should be able to send a “request to match” (button). Should be able to dismiss (remove from bench). Should be able to save for later.
On mobile, the interactions just mentioned, should be done by swapping the image (see Wireframes and Tinder reference).
Free version view
Create a quick profile view with the following state only for free accounts.
- Blurred Photo
- City/State
- Speciality
- Years of career
- Contact button sends private message.
Premium version view
Create a quick profile view with the following state only for premium accounts.
- Photo (not blurred)
- City/State
- Speciality
- Years of career
- Contact button allows choosing among sending private message or call).
4.6. Update Photo Library
User should be able to update his photo library up to 5 images.
4.7. Messages
User should be able to start conversation threads with selected users.
4.8. Notifications
User should be able to see notifications from any kind of activity and interactions with other users.
4.9. Manage Match Requests
User should be able to manage match requests, including view quick profile from the sender, replying and deleting/ignoring.
User should manage incoming and outgoing requests (Inbound, Outbound).
Free version view
When user receives an inbound request, he can contact back the sender by message only. Display this scenario.
Premium version view
When user receives an inbound request, he can contact back the sender by message and call too. Display this scenario.
5. Employer Profile Page (viewed by Employee)
See “Employer Profile In-App View” sheet for reference. User can not edit anything here. It’s a display only view.
Free version view
As the wireframes. Display this screen.
Premium version view
Place a “Request a Match” button somewhere on the office profile page that the employee is scrolling through. Employee can match back with Employer. This allows the Employer to contact the Employee. Display this scenario.
Branding Guidelines
- Dental colors are typically Blue/Teal/Lavender but we are open to suggestions for a good sharp contrasting palette. Consider they have to play along with the logo colors.
- Use the provided logo.
- Keep things consistent. This means all graphic styles should work together.
References
Some designs for inspiration. DON’T COPY ANYTHING.
- Tinder ~ Swapping features for liking could be a match for the application employer/employee browser.
- OkCupid ~ Friendly filters creation feature.
Screen Specifications
- Mobile: 750px width. Height as much as needed.
- 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
Dental offices, employers and patients in the US.
Judging Criteria
- Is the application fun to use?
- 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.