BENN Mobile App Design Challenge

Welcome to the "BENN Mobile App Design Challenge". In this challenge, we need your help to create a mobile application that will be used by our employees to get information, gain insight, check status, monitor, and perform an action to the equipment in our plant and operating facilities.

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 the checkpoint review. Feel free to add any screens which are necessary to explain your concept:

Screens For Primary User
01) Landing Page
03) Equipment Hierarchy Page
04) Equipment Item Details Page
05) Tasks List Page
06) Permits Page

• 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 plus checkpoint feedback implemented for the final round. Feel free to add any screens which are necessary to explain your concept:

All Screens For Primary User
01) Landing Page
02) Search Pages
03) Equipment Hierarchy Page
04) Equipment Item Details Page
05) Tasks List Page
06) Permits Page
07) Create Task Page

Secondary User Alternative Screens:
08) Landing Page
09) Equipment Hierarchy Page
10) Equipment Item Details Page

• 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

BACKGROUND OVERVIEW

• The purpose of the app is to enable the organization's employees to access the digital twin of our operating facilities while in the field
• They are able to access their tasks, information about the operating state of the plant, and perform actions in the field 
• It also will be used to provide situational awareness of the operating facilities anywhere, anytime
• This application will merge data, people, process, insights, and actions together

DESIGN CONSIDERATION

• This app will be created as a Hybrid Mobile application
• Preferable to have the design created using Google Material Design or Microsoft Fluent Design, At the moment the app will mostly use a Material design but we may move towards Fluent design, so it would be good if the design can be sympathetic to both styles
• There are two kinds of application users: 
  • Primary users will be our employees that will often be using the Mobile App outdoors and be wearing safety sunglasses (typically non-polarised). It should be noted that when the users are in the field, they will often be wearing industrial gloves, so we need to try to make the buttons or the design elements larger for in-field users
  • Secondary users will be our employees in an office. So, potentially the ability to swap between normal and dark mode could be a preference
• Focus on creating a screen for our user who is doing an outdoor activity (Primary user)
• If possible, we want to see one or two screen variations from the below requirements created for the office-based user too. Provide an alternative layout for any screen requirements below where we can see a layout variation for our secondary users. We want to look at how the layout will look like whether the users are wearing gloves or not, indoors or outdoors or wearing sunglasses or not
• Use colors or great visual contrast to highlight a comparison of important information.
• Intuitive for the user; should never be left asking "what do I do next?"
• Simplify the display for pages that may be over overcrowded with information

SCREEN REQUIREMENTS
For this challenge, we are looking for the below screens to be created in your submission. The functionality details listed below need to be included in your solution:

01) Landing Page
Reference "Screen 1 - Home.png"

• There are 4 main features on this page:
  • Ability to find and search for equipment and tags data using various methods (using keyword text, or audio, or equipment near user location, or scan equipment tags, or browse all data using the equipment hierarchy)
  • Ability to see Task summary information related to the user or equipment 
  • Ability to see Work Permits summary  in the app
  • Ability to create a new task in the mobile app via clicking the "+" button
• The user also will be able to see the weather condition information in his location (top area, showing Example: sunny day 23-degree Celsius, High 27 Celsius, Low 14 Celsius, with Strong Wind 24kms)
• A Task is basically an activity or action that the users have to do in the field
• A Permit is basically an approval for work that needs to be done on the equipment
• We need this page created for both Primary User (Outdoor person) and Secondary User (Office person)

02) Search Pages
References "Screen 2 - Search.png" -> "Screen 3 - Range picker from.png" -> "Screen 4 - Search results.png"

• If the user wants to find equipment data from the app (equipment information, log history, condition status, etc) using keywords, he can navigate by typing the equipment info in the search box on the "Look Up" section, which will activate the search box and show date and time fields range (a default time range of the previous week will be displayed, the user can change the "From" and "To" date and time by clicking on the to and from values- show us this interaction).
• This feature enables users to choose a date range for viewing equipment data and go back in time and investigate something at a previous point.
• Once the user finishes entering the equipment/tags and date and time range information, it should show a search list result of equipment that the user can click on and navigate to the details of the page (Equipment Hierarchy Page)

03) Equipment Hierarchy Page
References "Screen 5 - Equipment Hierarchy contracted.png" -> "Screen 5 - Equipment Hierarchy expanded.png"

• The equipment hierarchy is a way of organizing the equipment. 
• It starts with the Site -> then the Unit or an area of the plant -> then packages with the unit -> then equipment -> then instruments (see the breadcrumbs at the top of the wireframe page that show the hierarchy and then the items list with accordions feature to show all equipment and instruments details)
• Each layer rolls up into the next layer up. The hierarchy can have additional levels, for example, there could be sub-packages or no packages in the hierarchy
• The equipment item list is clickable and the user will be redirected to equipment item details page
• We need this page created for both Primary User (Outdoor person) and Secondary User (Office person)

04) Equipment Item Details Page
Reference "Screen 6 - Equipment Details - Data.png" and "Screen 7 - Equipment Details - Operations.png"

• This page consists of two tabs, "Data" and "Operations" that have different contents:
• Data Tab:
  • This tab will show data from sensors and user input related to the equipment
  • The top area showing a summary of the current data values
  • Users can scroll down and see more data relating to the summary values including sound clips, images, sensor data trends, etc 
• Operations Tab:
  • This tab showing all tasks and permits related to the equipment and displays it in a card list
  • Each card in the list will be categorized based on groups (Field Tasks, OPAM Tasks, etc)
  • Clicking any card in the list will bring the user to the task details page
• We need this page created for both Primary User (Outdoor person) and Secondary User (Office person)

05) Tasks List Page
References "Screen 7 - Field Tasks – Sort options.png" -> "Screen 7 - Field Tasks – Sort by.png"

• From the landing page, the user can click on the "See Tasks" link and get redirected to the "Tasks List" page and see all tasks related to their current location and/or tasks that have been assigned to them.
• Tabs at the top area of the page serve as task categories. The number of categories will  increase in the future, so please consider how to accommodate this in your design
• The user will be able to see a list of tasks that are open or closed in each tab
• Clicking any task on the list will bring the user to the task details page (the task details page is out of scope) 
• Under each task that is open is a "Complete" button that links the user to a page containing a form to complete/close the task (the completion form is out of scope, but the button needs to be available on any open task on the list)
• Filling out the completion form marks the task as complete/closed
• Users will also be able to hide close tasks or sort the task list based on several criteria by clicking the three dots at the top right area of the page

06) Permits Page
References "Screen 10 - Permits Default.png" -> "Screen 10 - Permits Zoomed A.png" -> "Screen 10 - Permits Zoomed tapped.png"

• From the landing page, the user can click on "See Permits" link and gets redirected to Permits page
• Permits page will be using map view as the appearance
• This page will show the locations that have a permit first, and then the user will be able to zoom into locations that have permits 
• Clicking on any dots in the permits map view will open the permit summary information details as an overlay/popup, and clicking the overlay will open the details information of that particular Permits 
• The user only able to see information on this page, no action needed, just read-only information

07) Create Task Page
References "Screen 9 - Create Task - Details.png" -> "Screen 8 - Complete Field Task - Add image.png" -> "Screen 6 - Equipment Details - Data Snackbar.png"

• Users can create a new task by clicking the "+" button that is available from all pages on the app except pages where the user is completing it creating a task
• This enables users to create tasks/reminders when working in the field for themselves or assign to someone else
• If the user chooses to create a task from task details, permit details, or equipment details page, the task will be associated to it. If they create a task from a screen such as a homepage or a listing page they can search for equipment to associate it to
• Uses will also define the Task type,  task details description. Can add an audio file and images, and assign the task to someone or the user him/her self
• In terms of the Tasks content, usually, a task will be about: 
  • Notification (identified that maintenance needs to be performed)
  • Work Order (scheduled maintenance activity), A Work Order can exist outside of a Campaign when there is reactive fix, for example, something is broken and needs to be actioned quickly
  • Campaign (grouping of Work Orders) in planned mass maintenance activity
• Needs to have confirmation that the Task is created successfully in a snack bar modal window

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 request for marvel app 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)

DOCUMENTATION

• Wireframe Screenshots (Use it only as References, DO NOT COPY the layout)

BRANDING

• The company is forward-thinking, modern, and innovative and is situated in the resources sector
• Please use Google Material Design or Microsoft Fluent Design standard for the rest of the design layouts

TARGET DEVICE

• Mobile Device: 1440px (w) x 2960px (h) 
• The infield devices are based on a "Samsung Galaxy S9". Device sample: https://www.ecom-ex.com/products/communication/cell-phones/smart-ex-01/ 

TARGET AUDIENCE
Varying personas in the resources sector but predominantly whose roles are on the ground operating natural resource production sites, Most are 20 or older, probably most of the workforce is between 25 to 60, and their roles in the company are:

• Industrial operators (Primary User)
• Office users

JUDGING CRITERIA
Your submission will be judged on the following criteria:

• Overall idea and execution of concepts
• 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 all JPG/PNG image files based on Challenge submission requirements stated above

Source File

• All source files of all graphics created in either Adobe XD (Client Tool Recommendation) or Sketch and saved as an editable layer

Declaration File  

• Declaration files document contains the following information:
  • Stock Photos Name and Source Links from an allowed sources
  • Stock Art/Icons Name and Source Links from an allowed sources
  • Fonts Name and Source Links source from an allowed sources
  • MarvelApp share link for review 

FINAL FIXES

• As part of the final fixes phase, you may be asked to modify content or user click paths