Novus Onboarding - Ionic Prototype Challenge

Novus Onboarding App - Ionic Prototype Challenge 1

 

1. Project Context:

Create a hybrid app for employee onboarding. 

 

2. Expected Outcome:

Create an ionic prototype for the required screens. 

 

3. Challenge Details

INDIVIDUAL REQUIREMENTS

Tile Structure

The tiles displayed on the page are role-specific, and it’s configurable in the backend. So in this challenge, you should render the screen based upon a tile structure configuration JSON for each role. 

The following roles are defined in this app

• anonymous role

• user role

• manager role

And there are two types of tiles:

• page tile - when tapped, it opens an external web page

• group tile - it groups a list page tiles and child group tiles

 

Anonymous role tile structure is as below. https://marvelapp.com/prototype/abhabfd/screen/68690415, it has following tiles:

• awesome products: https://marvelapp.com/prototype/abhabfd/screen/69122155, and it has the following page tiles

  • basic plans/offerings

  • syncUp drive

  • syncUp pets

  • family mode

  • digits

  • Novus Tuesday

  • N-Vision

  • Novus Money

• about us: https://marvelapp.com/prototype/abhabfd/screen/69122145, and it contains the following page tiles:

  • Un-Carrier Moves

  • How We Pay

  • Network & Innovation

  • Leadership

  • Responsibility

  • Community

• #beyou - this is a page title

• employee perks: https://marvelapp.com/prototype/abhabfd/screen/69435540, and it contains the following page tiles:

  • Overview of Novus employee discounts

  • BeMagenta

 

User role tile structure has the following tiles: 

• Novus Culture: https://marvelapp.com/prototype/abhabfd/screen/68690418 - it has the following tiles:

  • Site Info - this is a page tile

  • About Us - similar as anonymous role, it’s a group tile with multiple page tiles

  • Leadership - this is a page tile

  • N-Nation Overview: https://marvelapp.com/prototype/abhabfd/screen/69122144, it’s a group tile with many page tiles:

    • Site Info

    • P&T New Hire Portal

    • How We Play

    • Un-Carrier History

    • Diversity and Inclusion

    • Employee Care

    • Technology Service Desk

    • N-Life

    • Employee Handbook

• Career Wise: https://marvelapp.com/prototype/abhabfd/screen/68690419, it has following tiles:

  • Your N-Life - it’s a page tile

  • Getting Paid - it’s a page tile

  • Employee Perks: https://marvelapp.com/prototype/abhabfd/screen/69435541, it has the following page tiles:

    • Overview of Novus employee discounts

    • BeMagenta

    • How to switch to Novus employee account

• Products & Tools:  https://marvelapp.com/prototype/abhabfd/screen/68690420, it has following tiles:

  • Awesome Products - same as anonymous role

  • Collaboration Tools - it’s a page tile

  • There’s a Tool for That: https://marvelapp.com/prototype/abhabfd/screen/69435543, it has following page tiles:

    • Kronos

    • Workday

  • ITA Help Desk - it’s a page tile

 

The manager role is similar as the user role, except the Product & Tools tile is different:

• Products & Tools: https://marvelapp.com/prototype/abhabfd/screen/68690422, it has following tiles:

  • Awesome Products - same as user role

  • There’s a Tool for That - same as user role

  • ITA Help Desk - same as user role

  • Configuration and Schedule - it’s a page tile

For page tile, at least the following properties should be configured in JSON:

• name

• url - the web page url

• icon name - to identity the icon

For group tile, at least the following properties should be configured in JSON:

• name

• child tiles

• icon name

• displayMode - carousel or card

Page Requirements

• Login page - please create 2 test users with user and manager roles respectively

• Main page - after logged in, the user info as well as the checklist should be displayed on main page. The checklist should be loaded from a JSON file. 

• The web page corresponding to the page tile is not in scope, and you can configure any URL for the demonstration. All the other screens in the design are in scope. 

• Make sure the code best practice is followed. 

 

Technology Stack

• Ionic latest

• Android 8+

• iOS 12+

 

Final Deliverables

• Source Code

• Verification Guide

Final Submission Guidelines

See above