Remote Expert Mobile iOS App Design Challenge

Welcome to "Remote Expert Mobile IOS App Design Challenge". In this challenge, we need your help to create the best possible UI/UX for our new iOS (iPhone) app that will help field service personnel to identify documents, videos, and/or remote experts to assist them with solving issues in the field while they're working. The app should leverage ARKit to allow AR objects to be leveraged during live video calls that will improve the ability of remote experts to provide contextual cues to a user during a video call.

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!

Round 1

Submit your initial designs for checkpoint feedback

02) Discover - Home Screens
03) Discover - Video Call Screens

• As part of your checkpoint submission, you must upload your submission to MarvelApp so we can provide direct feedback on your designs. Please include the MarvelApp 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 with all checkpoint feedback implemented

01) Login Screen
02) Discover - Home Screens
03) Discover - Video Call Screens
04) Discover - List Expert Screens
05) Expertise - Remote Expert

• As part of your Final submission, you must replace your checkpoint submission with the final submission into MarvelApp so we can provide direct feedback on your designs. Please include the MarvelApp 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

CHALLENGE OBJECTIVES

• Create design concepts for a mobile native application focused on iOS device (iPhone)
• Understanding the problem and providing an engaging solution

BACKGROUND OVERVIEW

• This is a native iOS (iPhone) app to enable field service personnel to identify documents, videos, and/or remote experts to assist them with solving an in field issue.  
• The app should leverage ARKit to allow AR objects to be leveraged during live video calls to improve the ability of remote experts to provide contextual cues to a user during a video call.

CHALLENGE GOAL

• The goal of this design challenge is to design the best UI for this new remote expert application and cover all required scenarios in the app

 
DESIGN CONSIDERATION

• This app will be created using native iOS (Swift) application built using Xcode
• Strictly follow Apple's Human Interface Guidelines. Especially for Layout, Font, Colors, Shapes, Icons
• Use of native Apple capabilities whenever possible (e.g., iPhone, iOS, ARKit, phone app, messaging app, etc)
• Symbols/Icons should leverage the Apple SF Symbols when possible
• Other design elements should leverage the Apple iOS design resources when/where possible
• The look and feel should follow very closely to the design/layout provided in the pdf document. We are open to change, but it needs to mirror the design in pdf as much as possible.
• Use color or great visual comparison to highlight a comparison or important information
• 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

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=738720

SCREEN REQUIREMENTS
00) General Requirements

• Create GUI KIT for the application so we can easily adjust the app theme later (App Icons, Header, Text, Paragraph, Form, Colors, etc)
• Application by default should use a WiFi connection when available. However, If the wifi is not available, the application should check if a cellular network is available. If the cellular network is available, the application needs to determine if the network bandwidth is strong enough for a video call that leverages AR annotation or not. If yes, allow video calls. If not, disable video call and only allow phone/ messaging
• The documents and videos will not be preloaded (i.e., the user will need to download it)
• All downloaded documents and/or videos should be purged if: 
  • The user logs out of the app, or 
  • 24 hours after the time the document and/or video was downloaded
• The application will have 3 main menus in it: Discover, Expertise, and Settings

01) Login Screen
Reference Screen PDF page 2

• Login form with username/id, password, login button, Forgot Password
• Needs interaction screens for forgot password and error log in

02) Discover - Home Screens
Reference Screen PDF page 3, 4, 5, 6, 7, 8

• Homescreen (Page 3): This is the first screen the user should see upon successful login to the application. It will show all Assets, Documents, and Videos that the user has access to 
• Level 1 Asset Filter (page 4): When a user taps the "Assets (500)" link/button, it will show the first level of hierarchy from the Asset which is 'Categories'
• The Assets Hierarchy level are: Assets -> Category -> Type -> Model -> Procedure
• Users will have different access to Asset Hierarchy, there will be users that have access to all levels (category, type, model, procedures) and some other users might have only one access level (only procedures) 
• For this challenge, let's focus to design only for Category (page 4) and Procedures (page 5)
• You also need to design the 'favorite' interactions where they can save the asset category to their expertise, this will act as a filter (and a bookmark) that will only show content that belongs to the favorite/selected category/types/models/procedure (page 4 and 5)
• Asset/Model + 3 Procedures List experts (Page 6): Once the users navigate to the lowest level of the asset hierarchy that they can access (in this scenario, the user has access to all 4 assets levels, which makes their lowest level is procedures), the discovery screen now will show a breadcrumb that reflects the specifics assets level (i.e., Asset Name | Category 2 | Type 3| Model 1 | Procedures 3). It also will show the number of documents and/or videos associated with the specific asset/procedure(s), and all the available experts that have capability/skills for the procedures
• Reset Filters (Page 7): To "reset" the filters applied to the "asset" selection it is a sideswipe to expose the reset button. The "swipe left" should also expose a "favorites" action that the user can tap. By tapping on the favorites action the user would be presented with the Level 1 filter (Categories) but the items listed would only be those that the user has saved as a favorites
• Select an expert (Page 8): The user will now initiate a session with an available expert by "swiping left" on a given expert to expose the messaging, call, video actions. The user will then tap the action they would like to initiate. User will be available to call the experts (if the expert is available and not on a call with other users, provide some label to indicates available and non-available experts)

03) Discover - Video Call Screens
Reference Screens PDF page 9, 10, 11, 12

• In this screen, assume the connection/call with the expert is successfully connected and the user and experts are on a video call.
• Tap to annotate (Page 9):  If the user would like to add an annotation to the video they simply tap the annotation action button 
• Once the annotation action button is tapped, the annotation menu option appears on the screen  (Page 10). The user will have the option to select:
  • Pen/Marker
  • Highlighter
  • Eraser
  • Object (for insertion)
  • Color Palette
• IMPORTANT: All annotation added to the video should leverage augmented reality (i.e., ARKit) to remain anchored to a specific space/location (i.e., it should be spatially aware). For example, if the user moves the camera the annotation may be out of visibility but when it moves the camera back the annotation is still in the space it was originally added.
• In this screen, we will need to simulate one of the annotation menu (Page 11). Tapping on the "pen/marker" once will allow the user to start annotating. Tapping twice will present a menu for the pen/market to adjust the settings. Note: The user can also change the color by selecting the pallet's action.
• Rate Expert (Page 12): Once the issue is resolved or upon ending the video (or chat/call) the user will be asked to provide feedback on the expert that was supporting them. Once the user completes the survey they simply tap submit. After that, the user is returned to the discovery screen. Note: This feedback needs to be captured in a backend database so that analytics and average rating data can be calculated.

04) Discover - List Expert Screens
Reference Screens PDF page 13, 14

• List experts (Page 13): After completing the expert session and submitting the feedback, the user is returned to the Discovery screen with the last known asset selection made. From here, the user can also tap the "documents" button or the "videos" button to view the content
• Documents (Page 14):  If the user taps the "documents" button on the discovery tab screen,  the user will be presented with the documents that are associated with the asset selected on the discovery screen. From here, the user can click on any of the documents to launch/view them 

05) Expertise - Remote Expert
Reference Screens PDF page 15 and 16

• Once the user taps the "Expertise" tab the user will be presented with (Page 15):
  • Their name
  • Average rating from past users they have helped. 
  • Note: A rating (both in starts and number) should only be provided once the expert has helped a minimum of 10 users to ensure anonymity.
  • The number of people they have helped today.
  • The number of people they have helped all time.
  • Option to add (or remove) areas of expertise.
• Note: If the user has not added any areas of expertise, then the "Available to provide support" option is "greyed" out.
• After the user presses the "+" button on the "expertise" screen they will be presented with the first level of asset hierarchy. From the screen, the user can select an entire category by tapping the checkbox button or the user can narrow their selection by tapping the category card and viewing the next level of the hierarchy. If the user selects to choose an entire category, the checkbox should become selected and reflect that 100% of the "children" have been added to their expertise. As selections are made they should be dynamically saved/added Expertise - Favorites - Level 1 asset filter - category (Page 16)

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 in the challenge forum 
• 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 on this link while you upload)

 
TARGET DEVICES 

• iPhone X/iPhone 11 Pro: 1125px x 2436px

 
DOCUMENTATION

• Remote Expert.pdf

BRANDING GUIDELINES

• Follow Apple Human Interface Guidelines 
• Stock photos and stock icons are allowed from the approved sources
• Your design needs to be easily configurable for enterprise clients (created it as a White Label Software) 

TARGET AUDIENCE

• Field Service Personnel (Internal Employees/Technician)
• Remote Expert

JUDGING CRITERIA

• Your submission will be judged on the following criteria:
  • Overall idea and execution of concepts
  • Adherence to Apple’s Human Interface Guidelines
  • Use of Apple’s UIKit and design assets
  • How well does your design align with the objectives of the challenge
  • Execution and thoughtfulness put into solving the problem
  • The overall design and user experience
  • Cleanliness of screen design and user flow
  • Ease of use

 
SUBMISSION AND SOURCE FILES
Submission File

• Submit JPG/PNG image files based on Challenge submission requirements stated above
• MarvelApp link for review and to provide feedback
• Declaration files document contains the following information:
  • Stock Photos Name and Links from allowed sources
  • Stock Art/Icons Name and Links from allowed sources
  • Fonts Name and Links source from allowed sources

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.