Device and Alarm App Design Challenge

Welcome to the "Device and Alarm App Design Challenge". In this challenge, our customer is looking for a unique and engaging design concept that helps their employees monitor meters and take actions on the alerts produced by these devices.

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:

1. Home page Dashboard (Desktop and Phone)
2. Devices Screen (Desktop and Phone)
3. Devices Detail Screen (Desktop and Phone) 
4. Alarms Screen (Desktop and Phone)

• 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:

1. Home page Dashboard (Desktop and Phone)
2. Devices Screen (Desktop and Phone)
3. Devices Detail Screen (Desktop and Phone) 
4. Alarms Screen (Desktop and Phone)
5. Event Screen (Desktop and Phone)
6. Approval Screen (Desktop and Phone)

• 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

• Design concepts for a Responsive web application (Desktop and Phone)
• Understanding the problem and providing an engaging solution

• Our customer is a water company that supplies water throughout the city for its customers.
• The water is supplied through pipes and it is the company’s duty to monitor flow, leakages or any other issues that might come in the distribution process. 
• There are teams that monitor the systems (meters) for usage and in order to proactively respond to the issues (leakage etc.), they are building a system, where the data from the meters area captured and important metrics are monitored in a dashboard.

• The goal of this design concept challenge is to design the dashboard and relevant screens. We want to explore new ways and easy ways to visually show important metrics, Alerts and action items in the dashboard.

• This application would be used by a group of people that have the following characteristic, make sure to consider these while you design the solution:
  • Involved in day to day operations or maintenance of the meters and pipelines
  • Age group between 20 to 50
  • Any gender or level of knowledge
  • Color Combinations suitable for Visually Impaired Users

• Your design graph/chart needs to be intuitive and have a great, quick response experience. It needs to be interactive, clickable, and able to show an amount of necessary information to the user.
• Your design solution needs to be able provide clear and easy navigation to the user. Users should be able to navigate anywhere in the app easily and they should be able to track their pages. Multi select feature,  drill down feature, breadcrumbs, and other feature that able to simplify and offer minimum clicks should be adopted in the app

• For this challenge, we are sharing screenshots of some of the existing designs that we have experimented with
• You are free to redesign these screens, add any new features and/or add interesting ways to represent the data in the screens, as long as they are in line with the flow since this is a design concept challenge. 
• Please note that they could be monitoring data from a million devices, so please make sure your designs are feasible, help monitor huge amount of data generated by the devices and at the same time easy to manage and search for alerts coming up in the system. 

• This is the landing page for any user
• The dashboard summarizes the important parameters like Alerts and number of devices
• This page also has links in the form of tiles that will help users to navigate to other sections of the app
• Please feel free to recommend your own layout, graph styles, and fonts
• Please keep in mind the following points while designing the dashboard:
  • There will be data from 100K devices, which the dashboard should be able to handle
  • Users should be able to view various metrics like: 
    • Missed payload based on Telco
    • Number of new Alarms generated/ cleared since yesterday
    • Water consumption
    • missed payload data
    • New Alarms data
    • various other metrics that are important for water utility customers
  • 100K devices will generate approximately 4-5 million alarms. Categorized on the basis of priority. (High, Med, Low). Users would want to view a few selected, high priority alarms based on their preference

• This screen should have 2 sections:
  • A section that summarizes important parameters related to devices and 
  • Another section that will list all the devices
• The data in the list should be easy to see, searchable, the ability to add/remove and sort the columns should be considered while designing the screen
• Please feel free to redesign the layout, look and feel of the screen
• Add hotspot to data in "Device id" column and upon clicking that we have to display the devices details page

• In the “Devices” screen, when you click on the devices Id, you will land on the "Device details Screen"
• Here you will be able to see various parameters related to this particular device, its location on the map and readings for following parameters:
  • Flow registration readings.
  • Flow interval readings
  • Daily maximum flow rate readings
  • Temperature readings
  • Pressure readings
  • Battery readings
  • Comms activity readings
• The current design shared shows a sample of how each of the above parameters is represented in Graph. All the parameters are measured on a timeline and these details are captured from meters at "30 minutes interval". We want you to redesign the graph so that:
  • They are easy to read
  • Occupy the screen space optimally
  • We should be able to see side by side graphs of 2 or more parameters for comparison
  • Able to select a custom date range
  • Show mean, max and min of each parameter for the selected duration
  • The time can be at 30 min interval (for a particular day), daily interval (for a month or set of days selected) and Weekly/Monthly interval. So, based on the time period selected in the search bar, please show the graphs accordingly, with the ability to drill down to the lowest level (Month -> Week -> day -> 30 min interval)
• Add a new feature where users have an ability to perform analysis to find information by seeing the device details history. In our existing app, the app is only able to show data that is coming at regular intervals. For example: a “Battery readings” parameter will show the battery charge of the device every 30 min. Now, we want to capture all previous data/information so the user can look and analyze any irregularities from historical data. Provide filters, sort, search and any other ability that will make the user easily to analyze the historical data 
• Ability to compare the graphs. For example: if pressure readings are showing different, can the user quickly compare the temperature reading and see if there is a change there? Because sometimes the pressure is changing due to temperature, etc.

• There are 8 different types of alarms that could be sent by meters:
  • Tamper Alarm
  • Continuous usage alarm
  • Exceed max registered read value in payload
  • Empty pipe alarm
  • Flickering meter alarm
  • Negative registered read
  • Unresponsive Meter Alarm
  • Low Pressure Alarm
• A device can send 1 or many of these alarms at a time. Each of these alarms is classified into 3 priority buckets:
  • High
  • Medium
  • Low
• The operator can acknowledge that he has taken a note/ taken action on the alarm by selecting the “Acknowledge” button. Once Acknowledged, the Button changes to “Acknowledged” and will change the color.
• Redesign the screen so that:
  • Users are able to efficiently filter, sort and manage alarms.
  • Gain insights through Graphs. (Currently it's just a circle with number but see if you have better ways to represent the information).
  • Represent the alarms on the map. It should be easy to read and zoom in/out.
• Add a new feature where users have an ability to perform analysis to find information by seeing the alarm history. For example: let say a device gives an alarm - no water. can it show historical issues for the same device and say this is not the first time this issue has occurred in this device.

• This screen will list all the events associated with the devices.

• There are 5 types of approval requested. 
• The Top screen should summarize the approval according to categories and the bottom screen has to list the items.

• Any other screen/concepts for this application? This is a design concept challenge. This is the space where you can shine/showcase your thoughts.

• Keep things consistent. This means all graphics styles should work together
• All of the graphics should have a similar feel and general aesthetic appearance

• 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)

• Desktop: min 1366px width and height as required
• Responsive Phone 750px width and height as required

• Google Drive: https://drive.google.com/drive/folders/1M8DL998TX3T4t1zNBSwJR9aCRMOkZnsC?usp=sharing 
  • Design Guidelines.pdf
  • Screen_references.pdf

• Branding is open
• Typography is opened to designers
• Use our Design Guidelines.pdf for layout, usability, and responsiveness recommendations
• Stock photos and stock icons are allowed from the approved sources

• Operations team
• Metering team
• Billing team

• Your submission will be judged on the following criteria:
  • Overall idea and execution of concepts.
  • How well do the concepts engage the user in a better learning experience
  • Cleanliness of screen design and user flow.

• 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.

• Submit JPG/PNG image files based on Challenge submission requirements stated above
• MarvelApp link for review and to provide feedback

• All source files of all graphics created in either Adobe Photoshop, Illustrator (Might need to convert it to PSD later), XD, or Sketch and saved as an editable layer

• As part of the final fixes phase, you may be asked to modify your graphics (sizes or colors) or modify overall colors.