Challenge Summary
Summary
Welcome to the “Novus Onboarding Mobile Application Design Challenge”! In this challenge we are looking to design a hybrid mobile application for our customer to onboard their new employees. There is a lot of data to be shown so we need your help to design a clean interface with good content hierarchy to simplify the user experience.
Challenge Objectives
Submit your final designs for round 2 and checkpoint updates as per feedback:
Project Background
Full Description & Project Guide
Our customer, Novus, working in the telecommunication industry, is hiring hundreds of employees every year, and there is always a large amount of information that needs to be communicated to new employees in order to successfully onboard them (from setting up a Novus employee account, to finding the building a person has to work in, how to track their time and get paid, and many others). They already have a portal called Novus-Nation with that information, which is available to users once they have an employee ID and login created on Novus, but they would like us to create a mobile hybrid application for faster and easy access. This application will show some of that information before the user logs in, and the rest after logging in.
Basically, once a person gets recruited, they will be sent a text or email linking to this application. He/she is then able to check some more details about the company and how to get on track fast with essentials needed for their first few weeks of employment. Once he/she gets the ID, he/she will see and have access to even more personalized data.
Note: we are linking below the screens features to existing items on the Novus-Nation site. Some of them are just links/ images to the site, while others need to be more detailed design (all the items before login, need to be designed as their own stand alone pages and content, while everything after login can be a link to the Novus Nation). Here’s a list of all the features and when they should be displayed. Please keep the above in mind when planning your navigation for this application. For the scope of this challenge we are going to focus only on the Site Info screens.
Below are the screens we need to be designed for this project:
1 Main Page:
This is the page the user sees when he opens the application. From here, he can go to different sections as interest such as, the ones listed below:
We need to see this Main page designed Before Login and After Login (the option after login will include the items marked with *show only after login* as well and also a countdown clock to his day 1 start date for the new employee). The items shown only after login, will have only icons as links to those pages on Novus-Nation portal (the new employees portal) while the other pages will be designed in this challenge and future ones.
2 Site Info
The site information will help the user get around his office, find his location and room number as well as any food options. The user can either manually select his location or he can input his location name in the search location tool which will help him get the exact details of where he has to go.
For this page we need to show the following information below (note: by default the items listed are before logging in and anything showing up after login has a special note about it).
The items below will be different based on the location, the user is working in:
3 Building Address
When the use opens this page he will see a list of the existing customer’ sites per different campuses across the United States as displayed here:
4 Site Details
Once the new employee has selected the location where he is working on he can tap it to city the exact address. In this case we assume he was hired in Washington at Bellevue Headquarters in Building 3. He will then view a photo of the building and the exact address as well as a map on how to get there.
5 Search Location Interactive Tool
The user can enter the details of the location on the main site info page or a separate (up to you). He will be able to input the state, location, building and room number and then a google map will be displayed that will take him from current location to the exact address.
6 Map Details
This page will show the map details when the user is walking to the site. Details to display:
7 Location Facilities
Once the user knows in which location he will work, he can see on this page details about:
The Security and ITA Help Desk, should be shown as links (buttons/icons/etc) to the exact content as they will reside on the Novus Nation portal and the users will have access to it after login. We need to see this page designed Before Login and After Login (the option after login will include the last 2 options as well and an icon/profile photo/ indicator that the user is logged in ).
The ITA Help Desk is showing the user how to get help online, how to handle an incident report or request for a service (content that you see here on Service Desk area).
The Security has this info about building security and how to get access in different places.
8 Fitness Center Access
This page will show the exact location of the Fitness Center Area: Newport Tower 1st Floor and the user will have a link to review and submit the Newport Tower Fitness Center Rules & Release Form to FormTenantServicesNCC@NewportCorpCenter.com to gain access (this can be shown on the same page).
9 Parking & Transportation
This section will help the user get to the office, either by using shuttles, Lyft rides (credits available) or private car depending on which location he is at.
10 Parking
The user can see a map of the location where he is and where are the parking places. See map here (HQ Campus Parking & Amenities). He will also be able to read the details about the parking places as mentioned in this document, Parking section (Parking, Offsite Parking and FAQ).
11 Transportation Program
If the user prefers to travel with the shuttle, he will see
12 Badging (building access)
There are three ways to obtain access to campus buildings.
13 Food Options
There are 3 options for the employees to eat while being at work: either in the building, or from food trucks or going nearby.
1. Light Fare
Walla Walla Café: Newport Two - 2nd Floor
Walla Walla Café: Newport Five - 1st Floor
Avanti Marketplace: Tower - 4th Floor
2. Food Trucks
Newport Five Plaza Deck: Food truck schedule (this will be a link to a site which shows the schedule)
3. Nearby Options
We need to see a google map here with options to eat around
Form Factors
Target Audience
Judging criteria
Your submission will be judged on the following criteria:
Branding Guidelines
Stock Photography
Marvel Projects
For this challenge you should submit your designs in Marvel. You can request one Marvel project in the forums or email at keyla. blue1@gmail.com
Final Deliverables
Welcome to the “Novus Onboarding Mobile Application Design Challenge”! In this challenge we are looking to design a hybrid mobile application for our customer to onboard their new employees. There is a lot of data to be shown so we need your help to design a clean interface with good content hierarchy to simplify the user experience.
Challenge Objectives
- The application is based on an existing employee portal
- 13 screens
- Hybrid mobile application
Round 1
Submit your initial designs and concepts for checkpoint review:- Main Page
- Site Info
- Building Address
- Site Details
- Search Location Interactive Tool
- Map Details
- Location Facilities
Round 2
Round 2Submit your final designs for round 2 and checkpoint updates as per feedback:
- Main Page
- Site Info
- Building Address
- Site Details
- Search Location Interactive Tool
- Map Details
- Location Facilities
- Fitness Center Area
- Parking & Transportation
- Parking
- Transportation Program
- Badging (building access)
- Food Options
Project Background
- The purpose of this project is to develop a mobile application that will be used by Novus new employees from the moment they accept hiring until they are 2+ months experienced
- By using this onboarding application, the employees will have access to all the info they need to know to find their way around campus, view the company hierarchy, understand how to get paid, request access to different tools, etc.
- The application will facilitate communication with the manager as well, prior to employee’s first day on campus
Full Description & Project Guide
Our customer, Novus, working in the telecommunication industry, is hiring hundreds of employees every year, and there is always a large amount of information that needs to be communicated to new employees in order to successfully onboard them (from setting up a Novus employee account, to finding the building a person has to work in, how to track their time and get paid, and many others). They already have a portal called Novus-Nation with that information, which is available to users once they have an employee ID and login created on Novus, but they would like us to create a mobile hybrid application for faster and easy access. This application will show some of that information before the user logs in, and the rest after logging in.
Basically, once a person gets recruited, they will be sent a text or email linking to this application. He/she is then able to check some more details about the company and how to get on track fast with essentials needed for their first few weeks of employment. Once he/she gets the ID, he/she will see and have access to even more personalized data.
Note: we are linking below the screens features to existing items on the Novus-Nation site. Some of them are just links/ images to the site, while others need to be more detailed design (all the items before login, need to be designed as their own stand alone pages and content, while everything after login can be a link to the Novus Nation). Here’s a list of all the features and when they should be displayed. Please keep the above in mind when planning your navigation for this application. For the scope of this challenge we are going to focus only on the Site Info screens.
Below are the screens we need to be designed for this project:
1 Main Page:
This is the page the user sees when he opens the application. From here, he can go to different sections as interest such as, the ones listed below:
- Login option
- Site Info (Food options, Parking & Transportation, etc.) - the details are listed below
- Meet your Employee Success Partner (show only after login) - This option allows the user, once he has an ID, to connect with his Employee Success Partner, which is actually the Human Resource person that hired him.
- Internal Hierarchy (show only after login) - from this page, the user is able to go and see who the leaders of the company are as well as his team members
- Novus-Nation overview (show only after login) - this page has links to major areas such as the New Hire Portal, Diversity and Inclusion, Technology Service Desk, etc.
- About Novus - the user can see general information about the Novus organization and culture, what does community and responsibility within the company mean.
- Awesome Novus products - this page is showing the latest products Novus has developed such as a tool that will help users with road assistance or another one to track pets, etc.
- Getting Paid (show only after login) - shows information to the user on how to get paid, about salaries, setting up deposit and holidays, etc.
- Employee Perks - this is displaying the benefits of being a Novus employee such as various discounts, free gears, etc.
- There’s a Tool for That (show only after login) - the page shows different tools Novus owns to speed up work productivity such as Kronos, Workday, etc.
- Product & Technology Rhythm of Business (show only after login) - is the place from where the user can get access to different product and technologies useful pages such as employee recognition, learning hub, etc.
- Chat Feature - this feature allows the new employee to talk 1-1 with his manager
- Configuration and Schedule (only for manager) - this page is the place where the manager only, can setup the configuration for the employee and build schedule features for them.
We need to see this Main page designed Before Login and After Login (the option after login will include the items marked with *show only after login* as well and also a countdown clock to his day 1 start date for the new employee). The items shown only after login, will have only icons as links to those pages on Novus-Nation portal (the new employees portal) while the other pages will be designed in this challenge and future ones.
2 Site Info
The site information will help the user get around his office, find his location and room number as well as any food options. The user can either manually select his location or he can input his location name in the search location tool which will help him get the exact details of where he has to go.
For this page we need to show the following information below (note: by default the items listed are before logging in and anything showing up after login has a special note about it).
- Building addresses
- Search location: the user can input state, location, building number and room number and get directions to go there or a map (this is an interactive tool)
The items below will be different based on the location, the user is working in:
- Fitness center access
- Badging
- Food Options: onsite and nearby
- Parking and Transportation
- Security (show only after login)
- ITA Help Desk (show only after login)
3 Building Address
When the use opens this page he will see a list of the existing customer’ sites per different campuses across the United States as displayed here:
- Campus Puget Sound: state: Washington, location: Canyon Pointe, Building 14
- Campus Central: state Illinois, location: Downers Grove
- Northeast: state New Jersey, location: Parsippany + state: Pennsylvania, location Allentown
- West: state California, location Concord
- South: state Texas, location Frisco + location Richardson
- Southeast: state Georgia, location Ravinia
4 Site Details
Once the new employee has selected the location where he is working on he can tap it to city the exact address. In this case we assume he was hired in Washington at Bellevue Headquarters in Building 3. He will then view a photo of the building and the exact address as well as a map on how to get there.
- Address: Bellevue Headquarters, 12920 SE 38 Street, Bellevue, WA 98006
- Map link (note: the map is not interactive)
5 Search Location Interactive Tool
The user can enter the details of the location on the main site info page or a separate (up to you). He will be able to input the state, location, building and room number and then a google map will be displayed that will take him from current location to the exact address.
6 Map Details
This page will show the map details when the user is walking to the site. Details to display:
- map with location where the user is
- time left until destination
- distance left until destination
- text direction to get there
- anything else you see fit
7 Location Facilities
Once the user knows in which location he will work, he can see on this page details about:
- Fitness Center Access
- Parking and Transportation
- Badging
- Food Options: onsite and nearby
- Security (show only after login)
- ITA Help Desk (show only after login)
The Security and ITA Help Desk, should be shown as links (buttons/icons/etc) to the exact content as they will reside on the Novus Nation portal and the users will have access to it after login. We need to see this page designed Before Login and After Login (the option after login will include the last 2 options as well and an icon/profile photo/ indicator that the user is logged in ).
The ITA Help Desk is showing the user how to get help online, how to handle an incident report or request for a service (content that you see here on Service Desk area).
The Security has this info about building security and how to get access in different places.
8 Fitness Center Access
This page will show the exact location of the Fitness Center Area: Newport Tower 1st Floor and the user will have a link to review and submit the Newport Tower Fitness Center Rules & Release Form to FormTenantServicesNCC@NewportCorpCenter.com to gain access (this can be shown on the same page).
9 Parking & Transportation
This section will help the user get to the office, either by using shuttles, Lyft rides (credits available) or private car depending on which location he is at.
- Parking and shuttles
- Transportation Programs
10 Parking
The user can see a map of the location where he is and where are the parking places. See map here (HQ Campus Parking & Amenities). He will also be able to read the details about the parking places as mentioned in this document, Parking section (Parking, Offsite Parking and FAQ).
11 Transportation Program
If the user prefers to travel with the shuttle, he will see
- General info about shuttles and operations time as shown here with a simple map
- The offsite shuttle schedules
12 Badging (building access)
There are three ways to obtain access to campus buildings.
- Picture Badge (new hires or replacements): Submit Access Request Form (pre populated form with employee ID and name) to the Tower 1st floor Security Desk between 8am - 1pm PT
- Temporary Badge (forgotten badge or unescorted guests): Visit the Security Desk in any building
- Visitor Name Badge (escorted guests): Direct visitors to the Newport Five Reception Desk
13 Food Options
There are 3 options for the employees to eat while being at work: either in the building, or from food trucks or going nearby.
1. Light Fare
Walla Walla Café: Newport Two - 2nd Floor
Walla Walla Café: Newport Five - 1st Floor
Avanti Marketplace: Tower - 4th Floor
2. Food Trucks
Newport Five Plaza Deck: Food truck schedule (this will be a link to a site which shows the schedule)
3. Nearby Options
We need to see a google map here with options to eat around
Form Factors
- Please make sure your design supports these form factors:
- Hybrid Mobile Portrait application – 750 x 1334 px (keep in mind that this application will be used for iOS and Android so the style should fit both)
Target Audience
- Novus new employees
Judging criteria
Your submission will be judged on the following criteria:
- How personalized is the application to the employee
- How well you plan the user experience and capture your ideas visually.
- Overall idea and execution of concepts.
Branding Guidelines
- For this challenge, make sure to follow the customer’s branding guidelines in terms of colors, typography, style, etc.
- Font: Tele Grotesk Next Ultra (for headlines) and SF Pro (as default font for regular text)
Stock Photography
- Stock Photos are allowed as per Topcoder Policies
- Stock icons are allowed as per Topcoder Policies
Marvel Projects
For this challenge you should submit your designs in Marvel. You can request one Marvel project in the forums or email at keyla. blue1@gmail.com
Final Deliverables
- Source.zip – All original source files.
- All source files of all graphics created in vector format in either Adobe Illustrator or any similar software should be saved as editable files.
- Submission.zip – PNG/JPG files
- Submit JPG/PNG image files based on the Challenge submission requirements stated above.
- Preview.png – Your preview image
- Please create your preview image as one (1) 1024x1024px JPG or PNG file in RGB color mode at 72 dpi and place a screenshot of your submission within it.
- Declarations.txt – All your declarations and notes
- This file must contain your notes if any, fonts used, links to the stock images and icons used and the link to your Marvel project
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.