Challenge Summary

Welcome to “Unit-Hub Web App Design Challenge”!

Unit-Hub is a web app developed on the ServiceNow platform. The objective of this project is to enhance the UI of this web app. The app serves as a Virtual helpdesk for employees of the companies who will host this application. Through this challenge, Topcoder hopes to leverage the expertise of our community designers to create responsive designs for Unit-Hub. We want the new UI design to work as per ServiceNow platform standards.

We need you to research and design as per what is supported in the ServiceNow platform, as that is critical in this project. For instance, the ServiceNow platform does not support iFrame, Pop-overs, etc. You can start your research by making yourself aware about the Now Experience UI Builder.

Please read the challenge specifications carefully and let us know if you have any questions in the forums.
 

Challenge Objective

• 10-15 Screens
• Desktop Web app design
• Hosted on ServiceNow platform

Round 1

Submit your initial designs for checkpoint feedback.
01 App Navigation
02 Landing page 
03A Techbar - Book an Appointment
05 My Meetings - Book a room
07 My Tickets

As part of your checkpoint submission, upload your designs into MarvelApp prototype so we can provide direct feedback on your designs. Please include the MarvelApp Prototype URL in your notes.txt. Make sure all pages have the correct flow. Use the proper file numbers, (1, 2, 3, etc.)

Round 2

Submit your final designs for checkpoint feedback.
01 App Navigation
02 Landing page 
03A Techbar - Book an Appointment
03B Techbar - My Appointments
04A Hardware and Peripherals -  Order Peripherals
04B Hardware and Peripherals -  New/Refresh Laptop
05 My Meetings - Book a room
06A Approvals and 06B Requests
07 My Tickets

• As part of your final submission, you must replace your checkpoint submission with the final submission into the MarvelApp prototype so we can provide direct feedback on your designs. Please include the MarvelApp Prototype URL in your notes.txt. Make sure all pages have the correct flow. Use the proper file numbers, (1, 2, 3, etc.)
• If you're not submitting in the Checkpoint/Round 1, you are not eligible to submit in the Final/Round 2.

Project Overview

Our client has created a Unit-Hub workspace app on the ServiceNow platform which they offer as an app to their customers. Unit-Hub app allows their employees to manage a lot of use cases around day to day work. The client is hoping to improve the user experience of their app by relooking both UI design and the ways in which use cases are presented. We are open to reimagine the information and use case hierarchy on the app. There is a lot of functionality that this web app provides and we want to make it user friendly and make it easier for employees to find and do anything on the app in not more than 3 steps. Being able to use this app as a quick control center for anything related in the context of workspace was the intention behind this app.

Designer is advised to make themself aware about both the features and limitations in ServiceNow platform which is what the web app is built and hosted on. Please go through ServiceNow App Demo and other relevant resources.
 

Workflow

1. The user opens the app from a system that is authorized by the employer or from their personal device.
2. The user logins with their employee credentials, that is email and password.
3. The user is presented with a landing screen that has all the use cases available to them to access.
4. The user can either perform any of the use cases like booking an appointment at tech bar (for assistance) with their devices/machine, place an order to request, hardware/peripherals, softwares, book a meeting room, create a ticket to support team for help on any matters pertinent in their workspace. 
5. The user can also access information related to prior tickets, requests, approvals, notifications within the same page with as few steps as possible.
6. There will be an option to access support chat to access easily available information, and if it does not suffice them, the user can raise the ticket to the support team.
    

Audience
Employees of company who use Unit-Hub workspace app
 

Screen/Features

Please create the following screens/features into the new UI based on the screenshots of the current app provided in the challenge forum. It is important for you to know that we are open to changing them as per suitability to improve the current design. Do not just reskin the existing screenshots! Once again, we rely on your understanding of what is possible with the ServiceNow platform.

01 App Navigation

• Refer Page 1 in existing-app-screenshots.pdf
• Persistent global navigation at the top of web app across all screens
• App logo
• In the current app, the user can navigate to these sub-pages
  • Approvals
  • My Tickets
  • Get Help
  • Requests
  • Notifications
  • My Surveys
  • Chat
  • Cart 
  • Name of Logged in user, to access Account details and logout
    • Link to User Profile
    • Logout
• We’re open to new ideas to improve the existing navigation.

02 Landing Page

• Refer Page 1 and 17  in existing-app-screenshots.pdf
• Global navigation bar as designed in 01 App Navigation
• Greeting text
• Search bar to quickly find use cases or anything on the web app
• Floating button to access Chat
• Quick links to common use cases
  • Tech Bar
    • Link to Book an Appointment
    • Link to see My Appointments
  • Hardware and Peripherals
    • Link to Order Peripherals
    • Link to New/Refresh Laptop
  • My Meetings
    • Link to Book a room
    • Link to Cancel future meetings
  • Software and Applications
    • Link to Order items
  • Get Help
    • Link to Raise a Ticket
    • Link to Call Agent
• Note: We want you to think of a different approach to landing page. Think of how all of the use cases can be shown in an alternate way!
• Grouping of use cases, as of now use cases are only related to IT but in future we will be adding other use cases related to HR, finance, appraisal, health etc.
• My Tickets: List of recent tickets created by the user
• My Devices: List of user’s devices
• Top Rated Articles
• Support information

03A Techbar - Book an Appointment

• Refer page 19 and 20 in existing-app-screenshots.pdf
• Fields required:
  • Appointment type: Virtual / In person
  • Select a Tech bar: Location selector
  • Asset Details: Machine/device user needs help with
  • Meeting subject: Details of what help they need
  • Select a date: for picking a available slot to schedule the appointment
• This page also presents location information and map to the selected tech bar.
• You may think of tech bar as service center locations where experts can help users with diagnosis of their devices.

03B Techbar - My Appointments

• Refer page 21 in existing-app-screenshots.pdf
• The page presents information related to upcoming appointments at Tech bar.

04A Hardware and Peripherals -  Order Peripherals

• Refer page 23-25 in existing-app-screenshots.pdf
• The page presents a grid of available hardware and peripheral devices that user may need to request in order to use in their work.
• The user can also filter the options to search the device more easily and once they want to select a device, they can select the device and it gets added to their cart, which subsequently opens a checkout process which requires them to pay/deduct from their employee account.

04B Hardware and Peripherals - New/Refresh Laptop

• Refer page 26-29 in existing-app-screenshots.pdf
• This page lets users select a laptop from the available list of new laptops.
• The user can view, compare available laptops and select one to place a request.

05 My Meetings - Book a room

• Refer page 31 in existing-app-screenshots.pdf
• Fields required:
  • Room features (Checkboxes)
    • Audio 
    • Ethernet connectivity
    • Projector
    • Audio/Video
    • Kitchen services
    • Whiteboard
  • Location
  • Meeting room
  • Date
• Once a user submits this information, they can pick an available slot.

06A Approvals & 06B Requests

• Refer page 2 and page 11 in existing-app-screenshots.pdf
• Clicking on Approvals opens a list of requests that are approved or needs approval. 
• It is a list of requests made by the user, shown in the same way as approvals.

07 My Tickets

• Refer page 3-9 in existing-app-screenshots.pdf
• My Tickets page contains a list of tickets that involves the user.
• There are two possible tickets - Incidents and Requested items.
  • Incident details include
    • ID/Number
    • Category
    • Short description
    • Priority
  • Requested item details include
    • ID/Number
    • Task type
    • Short description
    • Priority
• Opening incident or requested item opens a more detailed page. Refer screens in the existing app screenshots to gather a understanding of how its showed in the existing app.

Challenge Assets

Please find the provided resources in the challenge forum. The resources include the screenshot of existing web apps and the branding guidelines that need to be followed.

Note: The screenshots are only for reference, please do not copy them.
 

Device Specifications

Scope: Desktop/Web
Width: 1366px
Min Height: 768px
Max Height: Based on the amount of content
 

Judging Criteria

Your submission will be judged by:

• Creativity: Impactful; the solution is different or unique from what has already been used, but needs to adhere to the ServiceNow platform.
• Exploration: Flexible; use the provided screen requirements as a starting point, and propose improvements that positively impact the users’ goals.
• Aesthetics: Hi-fidelity design; provide a top-notch finished-looking visual design.
• Branding: Follow the provided guidelines and suggest improvements that seem appropriate and inline with the goals.

 

Final Deliverables

• All original source files.
• Files should be created in Sketch, Figma or Adobe XD
• MarvelApp Prototype
  • We need you to upload your screens to the Marvel App.
  • Please send your marvel app request in the challenge forum.
  • You MUST include your Marvel app URL as a text file in your final submission labeled “MarvelApp URL” (in your app prototype, click on share and then copy the link).

Final Fixes

������As part of the final fixes phase, you may be asked to modify your graphics (sizes or colors) or modify overall colors, or complete missing requirements in the spec.