Challenge Summary
Welcome to "LoadMobile - One Stop Solution Mobile App Design Sprint Challenge". In this challenge, we need your creative skills to help us create a modern and intuitive user interface for our new mobile application. The application allows users to access and consolidate all work-related applications and services into one mobile application. You can think of this application as a "container" that houses all of the application and services used the companies employees. The goal is the allow the user to login to the LoadMobile app once, and have access to all their other company application without logging in and out.
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!
NOTE: This Design Sprint Challenge will run for 5 straight days with one Iteration available in the middle of submission phase, make sure to watch the timeline!! As a part of the "Design Sprint" we already have scoped some follow up tasks for the winner. More incentive to do great work and "go for the win"!
Challenge Timeline and Iteration/Rolling Checkpoint
- Challenge Starts: Thursday, 31st May 2018 23.30 PM EDT
- Rolling Checkpoint will start: Monday, 04th June 2018 09.00 AM EDT
- Challenge Ends: Tuesday, 05th June 2018 23.30 PM EDT
*5 placements for Iteration/Rolling Checkpoint prizes @$100 each!
Background Overview
The purpose of this project is to develop a mobile application that can be used by all internal employees, worldwide, where the application will consolidate all work-related applications and services into a single application. The application should also be easy for the user to customize.
Work-related applications include:
- Outlook
- OneDrive for business
- Skype for business
- Workday
- Concur application
The application will also allow users to get quick and easy ways to fix technical issues by using ChatBot technology. The integration with additional backend services will allow users to find KB articles and wiki documentation that may resolve their problems without the need to contact the Help Desk.
In addition, the mobile application will provide the user with a way to create their own incidents and track them. The user can also request an item from our technology catalog from one device. Items include hardware, software, etc.
Challenge Goal
Create a new look and feel that will help the user manage all work related application under one centralized app.
Application Features
- Consolidate all applications and services into one centralized location (This LoadMobile App)
- Needs the ability to reset, change, or unlock user network login id
- Allow the user to chat with help desk "ChatBOT" for IT related questions. Such as: "How to install onedrive", or "How to fix Sync issue with Onedrive".
- Ability to allow the user to search for name or location and be able to dial or get directions to a company Location.
- Ability to open an incident report via ServiceNow with all their information pre-filled.
- The ability to search the catalog in ServiceNow for IT related products and Hardware/software. Prefilled with all fields from ServiceNow.
Design Consideration
- New, Professional, Simple, and Modern look and feel.
- Simplicity to view and add necessary information
- Mobile Native application (Follow Mobile Design Best Practice)
- Easy to navigate on a wide variety of mobile devices
- Easy to read information on small screens
- Short concise content
- Easy to use mobile search interface
- Easy to fill out forms with dropdowns and checkboxes
- Most links on pages shall link to mobile pages (exceptions will indicate with an icon that links are not mobile friendly)
- All phone numbers shall also be links that automatically call
- All email addresses shall also be links that automatically send email
- All Addresses shall also be able to open default map on mobile device
- SMS Services shall be easy to use and provide user with pertinent content. All SMS services shall also be mimicked with an email service
- Easy to understand flow from page to page
- Intuitive for the user; should never be left asking "what do I do next?"
- Easy viewing for pages that may be over overcrowded with information
- Navigation/Forms: The site navigation and forms need to be quick and easy to use for users with touchscreen capabilities
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=627943
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.
00) General Requirements
- Provide simple logo for the application (This will serve as a placeholder for now). Don't spend a ton of time on this, as it's not the focus of the challenge.
- User will be able to go back to previous page, or back to home page from any screen
- The navigation shall look consistent on all pages
- The navigation shall be easy to use
- All links shall have an alphanumeric link assigned to it (1, 2, 3, etc.)
- The footer shall look consistent on all pages
- There needs to be a "Settings" link somewhere in the application design, we will design the actual "Settings Screen" page as a follow-up to this challenge
01) Login Page
- The landing page shall have a login information. Security credential tied to Azure AD
- Must have the ability to lock application with passcode and Fingerprint
- A link to reset password in case user forgot password
02) Home Page
- First time user should be able to see onboarding Wiki, that show basic information about the app functionality (User can skip it, can be carousel, highlight important features, etc).
- The ability to have all work related applications such as:
-- Outlook
-- Onedrive
-- Yammer
-- Unity
-- Skype for business
-- Workday
-- ServiceNow
-- Concur
-- and user ID Portal (internal company portal) open within the container and be able to authenticate once
- Note: You do not need to design the above applications (obviously). This application is just allowing the user to access and view these applications WITHIN the LoadMobile app. Think of the LoadMobile app as a "wrapper" around the above apps.
- The home page also needs to include:
-- Directory Assistance
-- ChatBOT
- Account Assistance
- Room for/ ways to manage additional applications being added in the future (your design should not be restrictive)
- Notifications:
-- What kinds of notifications would be useful to the user?
-- Per app/ service notifications and/ or alert icons of missed messages, updated information, etc.
-- Global notification. If someone is using Onedrive, but receives a Skype call, what does that notification look like?
-- These are just some ideas. We are looking for the best user experience here and open to your ideas.
- Search option (See Detailed requirements below)
- News Alerts (and view alert details), For example:
-- System downtime.
-- WebCast announcement
-- Special Yammer sessions
- Customize my Home Screen. Allow the user to put in the application(s) they want on the home screen or the web part they think it is relevant to them.
- We are looking for the best user experience for the Homepage/Dashboard. The average user should have access to their 6-8 main apps/ services BUT be able to access all application just as easily.
03) Directory Assistance Page
- Be able to locate anyone I am looking for within the company.
- Be able to search for specific locations that the company may have across the world.
- Be able to click on the location and see that information in a Map View
-- Show/ represent different types of locations: Retails, corporate office, warehouse somehow. Maybe various icons?
- Allow the user to see what stores, Building around him so they can get a direction to that location. This could be a link to the user default Map application on their phone (Google Maps, Apple Maps, etc.)
- Locations Near me, Allow associate to see what stores, Buildings are around him so they can get a direction to that location
04) ChatBOT Conversation Page
- Ability to chat with BOT to help me resolve key issues
- The BOT should be able to pull information from ServiceNow and SharePoint KB articles.
- If an issue was not resolved, then the user can open a ticket using the companies ServiceNow service
05) Search Page
- The search homepage shall use the LoadMobile header and footer
- The search homepage shall incorporate the search icon
- It shall provide links to parent and related resources
- The search form shall use dropdowns and checkboxes when possible
- The search form shall allow a quick search and advanced search on one page
- A quick search shall use pre-populated advanced search options
- The search shall provide options to search name, location, and/or keywords
- The search form shall provide filtering options such as number of results and branches
- Key Words search, What does key acronym means - Translate company vocabulary into business meaning
06) Search Results Page
- The search results page shall use the LoadMobile header and footer and include the search icon
- The results page shall be paginated into smaller result sets that is preset to 5 or set by user through filtering option
- The results page shall display Picture, name, title, Location, Work/Cell number, and availability on Skype
- List vs. Map views where it makes sense
- In the event that more than one search result is found the results page shall only show the 2 names with a link to "view more"
- The Persons name shall link to detailed record (07 Item/ Personal Detail Page)
- The search results page shall provide a link to start a new search
07) Item/Person Detail Page
- An item's/Person record page shall display picture, name, title, Location, Work/Cell number, and availability on Skype, Manager Name, Brand
- It shall include a link back to search results and to start a new search
- An item's record shall provide pagination through the results records without having to go back to the search results page
08) Open Ticket Page
- Allow users to open tickets (using ServiceNow) with one click.
- Who's who, Who supports which application. For example, "Contact Billy for Network needs"
- Allow users to see all open tickets for them (Tracking their own tickets)
- Allow users to search for a ticket
- Chat with Service Desk agent
09) Open Request Page
- Allow users to open a Request for hardware or software (using ServiceNow) with one click.
- Allow users to see all open request for them, and its status
- Chat with Service Desk agent
10) Search Orders Page
- Provide the ability to search for an order (alphanumeric number)
- Show the order status & a status bar (similar to shipment tracking or a pizza order status bar)
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 (Challenge Copilot)
- You MUST include your Marvel app URL (in your marvel app prototype, click on share and then copy the link & share it with your notes/comment this link while you upload).
Branding Guidelines
01) Colors:
- Light Blue (CTAs, buttons, links, etc.): #00a8ff
- Dark Blue: #002b81
- White: #ffffff
- Various shades of Grays
- Red (alerts): #cd0000
02) Fonts:
- You can download and use the fonts directly from Google Fonts
- Oswald (Headlines, main navigation): https://fonts.google.com/specimen/Oswald
- Open Sans (Body copy, everything else): https://fonts.google.com/specimen/Open+Sans
03) Imagery:
- We have supplied some sample images that you are free to use
- You are not limited to these images. You can use additional stock images as needed, but they should follow these same visual "themes" and style.
Documentation
- Wireframes References (available in challenge attachment)
- Sample Images (available in challenge attachment)
Target Devices
- We are targeting for Mobile application (iPhone only for now)
- Due to the varying number of screen sizes, pages will have to be designed to accommodate both larger screens of the iPhone, Android, etc.
- Screen size: 1125 x 2436px (iPhone X)
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
- The overall design and user experience
- Cleanliness of screen design and user flow
- Ease of use
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, Adobe XD or Sketch and saved as an 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!
NOTE: This Design Sprint Challenge will run for 5 straight days with one Iteration available in the middle of submission phase, make sure to watch the timeline!! As a part of the "Design Sprint" we already have scoped some follow up tasks for the winner. More incentive to do great work and "go for the win"!
Challenge Timeline and Iteration/Rolling Checkpoint
- Challenge Starts: Thursday, 31st May 2018 23.30 PM EDT
- Rolling Checkpoint will start: Monday, 04th June 2018 09.00 AM EDT
- Challenge Ends: Tuesday, 05th June 2018 23.30 PM EDT
*5 placements for Iteration/Rolling Checkpoint prizes @$100 each!
Background Overview
The purpose of this project is to develop a mobile application that can be used by all internal employees, worldwide, where the application will consolidate all work-related applications and services into a single application. The application should also be easy for the user to customize.
Work-related applications include:
- Outlook
- OneDrive for business
- Skype for business
- Workday
- Concur application
The application will also allow users to get quick and easy ways to fix technical issues by using ChatBot technology. The integration with additional backend services will allow users to find KB articles and wiki documentation that may resolve their problems without the need to contact the Help Desk.
In addition, the mobile application will provide the user with a way to create their own incidents and track them. The user can also request an item from our technology catalog from one device. Items include hardware, software, etc.
Challenge Goal
Create a new look and feel that will help the user manage all work related application under one centralized app.
Application Features
- Consolidate all applications and services into one centralized location (This LoadMobile App)
- Needs the ability to reset, change, or unlock user network login id
- Allow the user to chat with help desk "ChatBOT" for IT related questions. Such as: "How to install onedrive", or "How to fix Sync issue with Onedrive".
- Ability to allow the user to search for name or location and be able to dial or get directions to a company Location.
- Ability to open an incident report via ServiceNow with all their information pre-filled.
- The ability to search the catalog in ServiceNow for IT related products and Hardware/software. Prefilled with all fields from ServiceNow.
Design Consideration
- New, Professional, Simple, and Modern look and feel.
- Simplicity to view and add necessary information
- Mobile Native application (Follow Mobile Design Best Practice)
- Easy to navigate on a wide variety of mobile devices
- Easy to read information on small screens
- Short concise content
- Easy to use mobile search interface
- Easy to fill out forms with dropdowns and checkboxes
- Most links on pages shall link to mobile pages (exceptions will indicate with an icon that links are not mobile friendly)
- All phone numbers shall also be links that automatically call
- All email addresses shall also be links that automatically send email
- All Addresses shall also be able to open default map on mobile device
- SMS Services shall be easy to use and provide user with pertinent content. All SMS services shall also be mimicked with an email service
- Easy to understand flow from page to page
- Intuitive for the user; should never be left asking "what do I do next?"
- Easy viewing for pages that may be over overcrowded with information
- Navigation/Forms: The site navigation and forms need to be quick and easy to use for users with touchscreen capabilities
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=627943
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.
00) General Requirements
- Provide simple logo for the application (This will serve as a placeholder for now). Don't spend a ton of time on this, as it's not the focus of the challenge.
- User will be able to go back to previous page, or back to home page from any screen
- The navigation shall look consistent on all pages
- The navigation shall be easy to use
- All links shall have an alphanumeric link assigned to it (1, 2, 3, etc.)
- The footer shall look consistent on all pages
- There needs to be a "Settings" link somewhere in the application design, we will design the actual "Settings Screen" page as a follow-up to this challenge
01) Login Page
- The landing page shall have a login information. Security credential tied to Azure AD
- Must have the ability to lock application with passcode and Fingerprint
- A link to reset password in case user forgot password
02) Home Page
- First time user should be able to see onboarding Wiki, that show basic information about the app functionality (User can skip it, can be carousel, highlight important features, etc).
- The ability to have all work related applications such as:
-- Outlook
-- Onedrive
-- Yammer
-- Unity
-- Skype for business
-- Workday
-- ServiceNow
-- Concur
-- and user ID Portal (internal company portal) open within the container and be able to authenticate once
- Note: You do not need to design the above applications (obviously). This application is just allowing the user to access and view these applications WITHIN the LoadMobile app. Think of the LoadMobile app as a "wrapper" around the above apps.
- The home page also needs to include:
-- Directory Assistance
-- ChatBOT
- Account Assistance
- Room for/ ways to manage additional applications being added in the future (your design should not be restrictive)
- Notifications:
-- What kinds of notifications would be useful to the user?
-- Per app/ service notifications and/ or alert icons of missed messages, updated information, etc.
-- Global notification. If someone is using Onedrive, but receives a Skype call, what does that notification look like?
-- These are just some ideas. We are looking for the best user experience here and open to your ideas.
- Search option (See Detailed requirements below)
- News Alerts (and view alert details), For example:
-- System downtime.
-- WebCast announcement
-- Special Yammer sessions
- Customize my Home Screen. Allow the user to put in the application(s) they want on the home screen or the web part they think it is relevant to them.
- We are looking for the best user experience for the Homepage/Dashboard. The average user should have access to their 6-8 main apps/ services BUT be able to access all application just as easily.
03) Directory Assistance Page
- Be able to locate anyone I am looking for within the company.
- Be able to search for specific locations that the company may have across the world.
- Be able to click on the location and see that information in a Map View
-- Show/ represent different types of locations: Retails, corporate office, warehouse somehow. Maybe various icons?
- Allow the user to see what stores, Building around him so they can get a direction to that location. This could be a link to the user default Map application on their phone (Google Maps, Apple Maps, etc.)
- Locations Near me, Allow associate to see what stores, Buildings are around him so they can get a direction to that location
04) ChatBOT Conversation Page
- Ability to chat with BOT to help me resolve key issues
- The BOT should be able to pull information from ServiceNow and SharePoint KB articles.
- If an issue was not resolved, then the user can open a ticket using the companies ServiceNow service
05) Search Page
- The search homepage shall use the LoadMobile header and footer
- The search homepage shall incorporate the search icon
- It shall provide links to parent and related resources
- The search form shall use dropdowns and checkboxes when possible
- The search form shall allow a quick search and advanced search on one page
- A quick search shall use pre-populated advanced search options
- The search shall provide options to search name, location, and/or keywords
- The search form shall provide filtering options such as number of results and branches
- Key Words search, What does key acronym means - Translate company vocabulary into business meaning
06) Search Results Page
- The search results page shall use the LoadMobile header and footer and include the search icon
- The results page shall be paginated into smaller result sets that is preset to 5 or set by user through filtering option
- The results page shall display Picture, name, title, Location, Work/Cell number, and availability on Skype
- List vs. Map views where it makes sense
- In the event that more than one search result is found the results page shall only show the 2 names with a link to "view more"
- The Persons name shall link to detailed record (07 Item/ Personal Detail Page)
- The search results page shall provide a link to start a new search
07) Item/Person Detail Page
- An item's/Person record page shall display picture, name, title, Location, Work/Cell number, and availability on Skype, Manager Name, Brand
- It shall include a link back to search results and to start a new search
- An item's record shall provide pagination through the results records without having to go back to the search results page
08) Open Ticket Page
- Allow users to open tickets (using ServiceNow) with one click.
- Who's who, Who supports which application. For example, "Contact Billy for Network needs"
- Allow users to see all open tickets for them (Tracking their own tickets)
- Allow users to search for a ticket
- Chat with Service Desk agent
09) Open Request Page
- Allow users to open a Request for hardware or software (using ServiceNow) with one click.
- Allow users to see all open request for them, and its status
- Chat with Service Desk agent
10) Search Orders Page
- Provide the ability to search for an order (alphanumeric number)
- Show the order status & a status bar (similar to shipment tracking or a pizza order status bar)
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 (Challenge Copilot)
- You MUST include your Marvel app URL (in your marvel app prototype, click on share and then copy the link & share it with your notes/comment this link while you upload).
Branding Guidelines
01) Colors:
- Light Blue (CTAs, buttons, links, etc.): #00a8ff
- Dark Blue: #002b81
- White: #ffffff
- Various shades of Grays
- Red (alerts): #cd0000
02) Fonts:
- You can download and use the fonts directly from Google Fonts
- Oswald (Headlines, main navigation): https://fonts.google.com/specimen/Oswald
- Open Sans (Body copy, everything else): https://fonts.google.com/specimen/Open+Sans
03) Imagery:
- We have supplied some sample images that you are free to use
- You are not limited to these images. You can use additional stock images as needed, but they should follow these same visual "themes" and style.
Documentation
- Wireframes References (available in challenge attachment)
- Sample Images (available in challenge attachment)
Target Devices
- We are targeting for Mobile application (iPhone only for now)
- Due to the varying number of screen sizes, pages will have to be designed to accommodate both larger screens of the iPhone, Android, etc.
- Screen size: 1125 x 2436px (iPhone X)
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
- The overall design and user experience
- Cleanliness of screen design and user flow
- Ease of use
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, Adobe XD or Sketch and saved as an 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.