Challenge Summary
Welcome to “Loki Chief Engineer AR Application Design Challenge”. The goal of this challenge is to design an application based on augmented reality to help engineers solve problems when they are in the field, more easier.
Overview:
We already have existing wireframes that we are providing in this challenge.
Please read the challenge specification carefully and let us know if you have any questions.
- Please ask in the Forum for a MarvelApp prototype link. You will receive 1 MarvelApp prototype for Desktop.
- Make sure to include a URL/Link to your design within your "notes.txt", Important!
- Make sure all pages have the correct flow! Use correct file numbering. (00, 01, 02, 03).
- Use the same MarvelApp prototype you received incheckpoint.
- Make sure to include a URL/Link to your design within your "notes.txt" Important!
- Make sure all pages have the correct flow! Use correct file numbering. (00, 01, 02, 03).
Project Background
Background Information
In this challenge we are looking to design an application which would help industrial workers all across the world to use the Realwear wearable in identifying and fixing different equipment through Augmented Reality (AR). Realwear is a head mounted wearable computer with a small display near the eyes that can be used for document navigation, video calling, guided workflow, forms, data visualization, etc. You can see more about how this looks and works here.
This application is controlled by both the AR ware as well as an iOS application. Most of the times, the iOS application will mirror the ARware, which works based on voice commands, but sometimes, the iOS will provide additional information who would complement the ARwear information.
Workflow
The user is opening the application using the Realware he will start by scanning a QR code of an equipment to find out more information about it. A menu shows up with items specific for that equipment like Product Manual, Troubleshoot, Videos, Forms, etc. and the user can select one of them to see more details.
Here is a video describing the workflows better. We are providing wireframes for this challenge which should be followed as the base of your design for both Realware and iOS. Please note, the wireframe should be used for guidance and you can come up with your suggestion to make this application look and function better. Any workflow improvement is welcomed.
Below are the screens we would like to tackle for this workflow.
1.Splash Page (Realwear + iOS)
See 1. Splash Screen.png
The user comes to the application page and sees the Loki logo and powered by Wipro section.
2. Product Identification (Realwear + iOS)
See 2. Product Identification.png
Realwear: On this page, the user has two options to choose: Scan a QR code to identify a product or Speak option which will take the user to a screen where he can manually dictate the unique identifier code of the equipment (this is a screen below)
iOS: The mobile will show a button to Select QR Code Photo or go to Equipment Identification page.
For the background, feel free to use any photo from here or here that will show an equipment.
3. Scan equipment (Realwear + iOS)
On this page the user will scan the equipment or a photo of the equipment using the AR wear or he will use his mobile camera to identify it. Note: the video is showing the scan of QR code, but that was just for demo.
4. Main Menu (Realwear + iOS)
See 3. Main Menu.png
This page will show the same options for both devices. The user can go to one of the following menu elements:
To navigate to one of these pages, the worker will use the vocal commands like “Product Manual” for example and then use vocal command “Go Back” to return to the menu.
4. Product Manual (Realwear + iOS)
See 4. Product Manual.png
Here the user will see all available manuals for the scanned equipment and has the option to open them.
5. Videos (Realwear + iOS)
See 5. Videos.png
Here the user will see all available videos for the scanned equipment with a short description and has the option to open them.
6. Overview (Realwear + iOS)
See 6. Overview.png
This page shows general information of the T-Node (scanned device) that can be edited as well here.
7. Troubleshoot – Issues List (Realwear + iOS)
See 7. Troubleshoot.png
A worker who comes to this page, will discover the list of common/current issues happening with this device. The user can also open one issue to see its details and also how to solve the problem with predefined steps. He will also see videos and/or illustrations that will help him find the solution.
9. Issues Details (Realwear + iOS)
The issue details page will show a couple of steps on how to solve that problem. He will also see videos and/or illustrations that will help him find the solution. You can use as text and illustration an example from here.
10. Forms Splash Page (Realwear + iOS)
See 8. Forms Splash Screen.png
The forms are used by workers to input details captured while they are doing their job: the role of them can be to show that an equipment needs to be maintained or just to set up a reminder to check it again later. The user can create a new ticket or see the previous service history.
11. New Ticket (Realwear + iOS)
See 9. New Ticket.png
On this page the user will see a form where they can input their information. Please follow the existing wireframe to see the fields to be added. The form can be completed either with voice command (AR-wear) or through manual input on iphone.
12. Service History (Realwear + iOS)
See 10. Service History.png
Here the worker can see a list of previous tickets raised with a few details like the notification type, service date, etc.
13. Product Overlay (Realwear + iOS)
This page will show how AG object is projected in a real environment (check top photo from this article for example).
14. Speak (Realwear + iOS)
See 11. Speak.png
The user will go to this page from page 3 - Scan QR of Equipment Identification, in the situation that he can’t scan a QR code and he has to dictate the data manually. For the Realware device he will just dictate it, while on mobile he can input the text manually.
Operating Systems
Please make sure your design supports these form factors:
Branding Guidelines
The style of the application should follow the site branding elements: https://www.realwear.com/
Design Assets
Target Audience
Industrial workers and engineers
Judging Criteria
Your submission will be judged on the following criteria:
Marvel Prototype
Submission & Source Files
Preview Image
Please create your preview image as one (1) 1024x1024px JPG or PNG file in RGB color mode at 72dpi and place a screenshot of your submission within it.
Submission File
Source Files
All source files of all graphics created in either Adobe Photoshop, Sketch, XD, AI saved as editable layer.
Final Fixes
As part of the final fixes phase, you may be asked to modify your graphics (sizes or colours) or modify overall colours.
Overview:
- User interface design
- 11-15 unique screens
- iOS App
We already have existing wireframes that we are providing in this challenge.
Please read the challenge specification carefully and let us know if you have any questions.
Round 1
Submit your initial designs for checkpoint review for Realwear and iOS mobile application:- Splash Page
- Product Identification
- Scan Equipment
- Main Menu
- Product Manual
- Videos
- Overview
- Please ask in the Forum for a MarvelApp prototype link. You will receive 1 MarvelApp prototype for Desktop.
- Make sure to include a URL/Link to your design within your "notes.txt", Important!
- Make sure all pages have the correct flow! Use correct file numbering. (00, 01, 02, 03).
Round 2
Submit your final designs plus checkpoint feedback implemented for Realwear and iOS mobile application:- Splash Page
- Product Identification
- Scan Equipment
- Main Menu
- Product Manual
- Videos
- Overview
- Troubleshoot – Issues List
- Issues Details
- Forms Splash Page
- New Ticket
- Service History
- Product Overlay
- Speak
- Use the same MarvelApp prototype you received incheckpoint.
- Make sure to include a URL/Link to your design within your "notes.txt" Important!
- Make sure all pages have the correct flow! Use correct file numbering. (00, 01, 02, 03).
Project Background
- The purpose of this project is to develop an application that will be controlled by both AR ware and an iOS application to help chief engineers on field
- Through AR ware the application will assist them in identifying the equipment easier
- The application will be used in different industries like: oil and gas, electrical, automotive, manufacturing, etc.
Background Information
In this challenge we are looking to design an application which would help industrial workers all across the world to use the Realwear wearable in identifying and fixing different equipment through Augmented Reality (AR). Realwear is a head mounted wearable computer with a small display near the eyes that can be used for document navigation, video calling, guided workflow, forms, data visualization, etc. You can see more about how this looks and works here.
This application is controlled by both the AR ware as well as an iOS application. Most of the times, the iOS application will mirror the ARware, which works based on voice commands, but sometimes, the iOS will provide additional information who would complement the ARwear information.
Workflow
The user is opening the application using the Realware he will start by scanning a QR code of an equipment to find out more information about it. A menu shows up with items specific for that equipment like Product Manual, Troubleshoot, Videos, Forms, etc. and the user can select one of them to see more details.
Here is a video describing the workflows better. We are providing wireframes for this challenge which should be followed as the base of your design for both Realware and iOS. Please note, the wireframe should be used for guidance and you can come up with your suggestion to make this application look and function better. Any workflow improvement is welcomed.
Below are the screens we would like to tackle for this workflow.
1.Splash Page (Realwear + iOS)
See 1. Splash Screen.png
The user comes to the application page and sees the Loki logo and powered by Wipro section.
2. Product Identification (Realwear + iOS)
See 2. Product Identification.png
Realwear: On this page, the user has two options to choose: Scan a QR code to identify a product or Speak option which will take the user to a screen where he can manually dictate the unique identifier code of the equipment (this is a screen below)
iOS: The mobile will show a button to Select QR Code Photo or go to Equipment Identification page.
For the background, feel free to use any photo from here or here that will show an equipment.
3. Scan equipment (Realwear + iOS)
On this page the user will scan the equipment or a photo of the equipment using the AR wear or he will use his mobile camera to identify it. Note: the video is showing the scan of QR code, but that was just for demo.
4. Main Menu (Realwear + iOS)
See 3. Main Menu.png
This page will show the same options for both devices. The user can go to one of the following menu elements:
- Product manuals
- Product Overlay
- Troubleshoot
- Overview
- Videos
- Forms
To navigate to one of these pages, the worker will use the vocal commands like “Product Manual” for example and then use vocal command “Go Back” to return to the menu.
4. Product Manual (Realwear + iOS)
See 4. Product Manual.png
Here the user will see all available manuals for the scanned equipment and has the option to open them.
5. Videos (Realwear + iOS)
See 5. Videos.png
Here the user will see all available videos for the scanned equipment with a short description and has the option to open them.
6. Overview (Realwear + iOS)
See 6. Overview.png
This page shows general information of the T-Node (scanned device) that can be edited as well here.
7. Troubleshoot – Issues List (Realwear + iOS)
See 7. Troubleshoot.png
A worker who comes to this page, will discover the list of common/current issues happening with this device. The user can also open one issue to see its details and also how to solve the problem with predefined steps. He will also see videos and/or illustrations that will help him find the solution.
9. Issues Details (Realwear + iOS)
The issue details page will show a couple of steps on how to solve that problem. He will also see videos and/or illustrations that will help him find the solution. You can use as text and illustration an example from here.
10. Forms Splash Page (Realwear + iOS)
See 8. Forms Splash Screen.png
The forms are used by workers to input details captured while they are doing their job: the role of them can be to show that an equipment needs to be maintained or just to set up a reminder to check it again later. The user can create a new ticket or see the previous service history.
11. New Ticket (Realwear + iOS)
See 9. New Ticket.png
On this page the user will see a form where they can input their information. Please follow the existing wireframe to see the fields to be added. The form can be completed either with voice command (AR-wear) or through manual input on iphone.
- We need an option to import a photo as well
- User is able to compress the form and export and export it to send to relevant parties
12. Service History (Realwear + iOS)
See 10. Service History.png
Here the worker can see a list of previous tickets raised with a few details like the notification type, service date, etc.
13. Product Overlay (Realwear + iOS)
This page will show how AG object is projected in a real environment (check top photo from this article for example).
14. Speak (Realwear + iOS)
See 11. Speak.png
The user will go to this page from page 3 - Scan QR of Equipment Identification, in the situation that he can’t scan a QR code and he has to dictate the data manually. For the Realware device he will just dictate it, while on mobile he can input the text manually.
Operating Systems
Please make sure your design supports these form factors:
- Realwear:
854 x 380px854 x 480 px (Safe area content: Even though users should be able to see all four corners of the GUI, it is a good idea to keep any important information inset ~30 to 40px from the outer edges. (854x480 resolution minus 40 = 774x400 safe area) - iOS Mobile portrait at 750 x 1334px (height can be extended as much as needed)
Branding Guidelines
The style of the application should follow the site branding elements: https://www.realwear.com/
Design Assets
- Wireframes
- Video on how the application works
- Document which contains example of steps and illustration for solving an issue
Target Audience
Industrial workers and engineers
Judging Criteria
Your submission will be judged on the following criteria:
- Overall idea and execution of concepts
- Cleanliness of screen design and user flow
- How easy to use is the application for both ARwear and iOS application
Marvel Prototype
- We need you to upload your screens to Marvel App.
- Please send your marvel app request to keyla.blue1@gmail.com
- You MUST include your Marvel app URL as a text file in your final submission labeled “MarvelApp URL” (in your marvel app prototype, click on share and then copy the link).
Submission & Source Files
Preview Image
Please create your preview image as one (1) 1024x1024px JPG or PNG file in RGB color mode at 72dpi and place a screenshot of your submission within it.
Submission File
- Submit JPG/PNG image files based on Challenge submission requirements stated above
- MarvelApp link for review and to provide feedback
Source Files
All source files of all graphics created in either Adobe Photoshop, Sketch, XD, AI saved as editable layer.
Final Fixes
As part of the final fixes phase, you may be asked to modify your graphics (sizes or colours) or modify overall colours.
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.