Digital Trainer AR App Challenge

Welcome to the “Digital Trainer AR App Challenge”. 

In this challenge, we need your help to create the best possible UI/UX for our app that will help Medical professionals to get certified operating complex medical equipment. The app will utilize the AR ( Augmented Reality ) system, which is expected to be more visual and interactive than traditional text and video-based learning approaches. This level of immersion leads to more engaging and effective training experiences. We have provided the demo for you as a reference to understand the behaviour only. Please use the GUI provided for styling, behaviour and colour. We are looking for an improved and more elevated application design from the demo.

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

SCREENS REQUIREMENT
Please provide the following screens for the checkpoint along with your clickable Marvel prototype with hotspots. 

1. Login flow

2. Landing Page

3. Explore Training Listings

4. Training Details

5. Course Details

6. AR process flow

Round 2

 

1. Login flow

2. Landing Page

3. Explore Training Listings

4. Assigned Training

5. Certified Page

6. Certification List

7. Training Details

8. Course Details

9. AR process flow

10. Search Page

11. Profile Page

12. Settings Page

CHALLENGE OBJECTIVES

• To create the UI for an app that allows the user to get certified for specific equipment provided by the enterprise. 

• The UI should be practical and easy to use for tracking trainee progress and stimulating them to finish their current assigned module.

• Hybrid app that will be accessed both by IOS and Android systems.
   

APPLICATION OVERVIEW

Digital trainer is an AR App training tool. The app allows trainees to take part in a training module for a particular piece of equipment with an experience much closer to real-life than is possible with other approaches. The app also allows trainees to take evaluations and tests to get certified on the equipment and get a digital certificate on completion of the training. The app will also allow trainees to track their certified module and retake after the certification expires. 

 

AUDIENCE

Medical Professionals/Graduate or enthusiasts who need to become certified to operate specific medical equipment provided by the enterprise.

 

PERSONA

Name: Gary

Occupation: Nurse

Goals: 

• To easily use the app to learn new material with an AR-based module

• To track his current training progress

• To recall or retake the training for certification

Frustration:

• The current app has issues with poor readability.

• It is difficult to track the progress of currently assigned modules

• Supporting documents need to be more visible as they are easily missed.

Wants:

• Gary can easily start taking modules or to find material he would like to learn.

• He can pause and continue the training anytime.

• Starting the training should not be complicated. He should see a clear summary of what he will learn. 

• Once he begins training, he should clearly see his progress.

• Want to see the app is aesthetically clean and simple, content-focused and inspired by the Apple minimal interface styling and behaviour.

• Gary wants the app is engaging and motivate him to continue his training, and see his learning curve from beginner to expert.

 

USER STORY

Gary is being assigned to get trained how to use the ventilator machine, he logged in to the app and he can see the list of the courses he needs to complete on his dashboard. He taps on the module and he can see the brief of the training, how many steps he had to complete so he can get certified. 

He could stop and continue the training whenever needed, and when he continues the ongoing training he can see the progress, how far he is done, he can open the supporting resources such as pdf/video to understand the module as well.

Gary can tap on his profiles and he sees his achievement, unlocking badges as a bragging right, he can see the list of certification, in progress, finished and due. Gary noticed his MRI machine certification is no longer valid, it expired last month, and he needed to retake the assessment for the certification to be valid again, he tapped on it and he can choose to retake the lesson or he could jump to the test process.

DESIGN GOALS & PRINCIPLES

• Easy to use interface, user can be not technology savvy so the app shouldn’t be too difficult to operate. We want apps to be easy to use without a high level of proficiency in technology.

• Designs must follow the GUI Kit provided for the palette, font styling, icons etc

• An attractive and functional dashboard that user comfortable to use for many hours

• Create a unique UI design that is an improvement to the reference Demo App. DO NOT replicate the layout and style seen in the Demo app. They are meant for content and functionality guidance only.

• Check the inspiration folder in the Branding section, this is a current extended family app being developed, you can get inspired to see how it feels and when users see your design they should be able to identify this is a part of the whole same family application.

    

EXPLORATION SCORE

Creativity: 5

1: barely new ideas

10: a utopic product with features not proven to be able to be fully implemented

Aesthetics: 7

1: low-fidelity design, wireframe or plain sketch

10: top-notch finished looking visual design

Exploration: 7 

1: strictly follow an existing reference or production guideline

10: open to alternative workflows/features not listed here that would help the overall application

Branding: 8

1: don’t care at all about the branding just functionality

10: without a properly branded product there is no success

 

GLOSSARY

AR - Augmented Reality is an interactive experience of a real-world environment where the objects that reside in the real world are enhanced by computer-generated perceptual information. 

 

SCREENS/FEATURES

Please make sure your design includes the following screens/sections. Our client is open to your suggestions about the structure of the screens as long as the screens deliver the same content and allow for the same functionality that is shown on the attached wireframes.

1. Login screen
The trainee downloads the app and Logs in with the username and password of his enterprise. It would also have Forgot password and Reset password links. Show error and success messages.     

2. Landing Page
After the user has logged in, he will need to see the list of equipment that his enterprise is providing him to get trained on. He can then choose the equipment he wants training for, and the training that is listed under that equipment.

The page should display a list of all equipment and assigned equipment ( if any ).  Also, the user should see a section displaying equipment for which he is certified - has completed training and has been issued a certification. If the user is currently taking training, then it should be shown as in progress. 

Focus on: How do we capture all of this so the user can easily identify what training has been assigned, what is in progress and what are featured modules he could explore?

3. Explore Training Listing

When the user taps on to explore all link on the landing page,  he can then see the categories are separated to 

• Recently Used - All training he has already accessed before with its progress

• New - All new training modules introduced to the app

• All training modules 
  
  Focus on: What can we improve here? Is there a better approach we could use to identify and easily differentiate the categories?

4. Certification of Completion List 
Users can track their list of certifications on this page. We can improve this page as well, readability, due certification should be taking strong attention for the user to resolve.

• Ongoing means the certification yet to be acquired, 

• Due is the list of certification expired.

• Completed is the list of finished and still valid. 
   

5. Training Detail
When a user taps on the training module, he will be able to see a brief summary of the training and objectives. On click of a particular training from the list, the user is taken to the training course detail screen.

6. Course Detail Screen
In the training course detail screen, trainees will be able to see the training brief, total number of lessons and the available resources for learning material. In the current demo app, users often miss that there are supporting documents they might want to open when completing the course. It is important to make the provided documents/videos very visible for users. 
If this is training in progress, the user’s progress should be clear. Show how much the user has completed, estimate the time of completion, and the label of the proficiency level of the courses. 

7. AR Process flow ( Start taking the training )
When the user starts to take the training there will be a few steps they need to trigger the AR experience. Check the pdf provided in the branding to get the idea of how the current AR simulation is done with this app.

• Define Floor:  The user needs to define the floor where they need to lay the object virtually, the phone will start mapping the area using the camera and render the augmented reality of the equipment he needs to learn. To understand this experience try to see video how AR is being practised from the internet if needed.

• Place Object: User decided on the mapping area to place the virtual equipment, provide guidance and help so the user knows how to start this process.

• Object: Virtual 3D imagery placed and users start to interact, they may be able to change the orientation to landscape/portrait, mute the guided audio, activate the text/description if they need to. 

8. Assigned Training Page
These are lists of training modules that have been assigned specifically to trainees by their enterprise. Users come to this page from the Landing page. The page has a list of new modules and the current/ongoing training modules.  Note: Completed modules will not be listed here anymore but will be moved to the certified page. 

9. Certified Page
On this page, trainees will be able to track their completed training modules. They can sort it based on the date, the validation of the certificate should be clear.

10. Search Page
Show us how the search result looks like, maybe put a separation of the content based on their category?

11. Profile Page
Profile page of the user should be engaging. It should have all the badges/awards that he has earned, level progress etc. The current layout can be improved so it looks more attractive, you may change the layout but keep the content like what you see in the demo.

12. Settings Page
Follow the content of the current setting: Account, Privacy, Notification, Auto-update Content, Help, Sign in as different users and Tell a friend.

BRANDING GUIDELINES

We are looking for your creativity here, you can refer to the GUI kit, use the colour and styling, the app will be accessed through IOS and Android, so the design should work well in both systems. Apply good usage of contrast and readability.

DESIGN ASSETS / INPUT DATA

Please check the here for all design assets:

• Demo app that they are currently using. 

Please use it only for your reference. Do not copy it.

• Provided GUI Kit to be followed

• Sample of AR Process used in real life in pdf format.

• Some screens of reference for the other family app currently developed for your inspiration. 

 

TARGET DEVICES    

• Mobile Portrait: 1125px x 2436px (iPhone 11 Pro)

FINAL DELIVERABLES

• All original source files

• Create files in Adobe Photoshop, Adobe XD or Sketch.

• Marvel Prototype - 

  • Upload your screens to Marvel App.

  • Send your marvel app request to seetakaurchamba@yahoo.com

  • Include your Marvel app URL as a text file in your final submission. Label it “MarvelApp URL”.

------------------------------------------------------------------------------------------------------------------------