Submit a solution
The challenge is finished.

Challenge Summary


Welcome to the Anabel Hospitality IoT Alert System Design Challenge.

Anabel is planning to build an MVP for a web service that utilizes IoT technology, that will help their clients (hotel owners) with monitoring both assets in their properties and their employees’ locations, and safety within the properties for different purposes described in detail below.

  • To create the UI of 13 screens for a web application in desktop format.
  • To provide a seamless flow to complete user goals.
  • To explore the best way to present the content and functionality provided on wireframes.
  • To explore the best way to handle multiple levels of user access.

Round 1

Please provide the following screens for the checkpoint along with your clickable Marvel prototype with hotspots.
  • 1. Dashboard - Admin
  • 2. Client Details - Admin
    • 2.2 Users and User groups
    • 2.3 Sites
  • 3. Site Details - Admin
    • 3.2 Property details
    • 3.3 Team
    • 3.4 Notification settings
  • 4. Dashboard - Site Manager

Round 2

Please provide the following screens with checkpoint feedback incorporated for final review along with your clickable Marvel prototype with hotspots.
  • 1. Dashboard - Admin
  • 2. Client Details - Admin
    • 2.1 Main address and contacts
    • 2.2 Users and User groups
    • 2.3 Sites
    • 2.4 Configuration
  • 3. Site Details - Admin
    • 3.1 Site address
    • 3.2 Property details
    • 3.3 Team
    • 3.4 Notification settings
  • 4. Dashboard - Site Manager
  • 5. Clear Alert - Site Manager
  • 6. System Information - Site Manager
  • 7. Site Analytics - Site Manager

  • Anabel’s clients are Hotel owners managing one or more properties and the staff working in the properties. They offer a cloud-based IoT service that enables their clients to keep track of their assets by monitoring them via low energy consumption Bluetooth beacons. Also, it keeps track of the employees who have wearable devices (name tags) utilizing the same technology. 
  • The properties are equipped with numerous gateways that recognize the signals of the beacons and transfer them to a cloud database for further processing through Wi-Fi. The signals are both regular and automatic. Or, they can be triggered by a certain action (e.g. a staff member gets into an insecure situation when he/she can press a button on the wearable device to ask for help).
  • If anything irregular happens the system will send an alert message through SMS (for now) to the currently working team members, so they can take quick action.
  • The application will also have detailed information about the clients, their properties (hotels) and their staff.
  • It is important that the application handle multiple levels of users, with different permissions. Anabel’s admins and account managers will see multiple clients and their data. Users working with the headquarters of a client will see only the respective client’s data along with all the properties. Site managers will only have access to the respective property’s data.
  • Admin User (in scope): Anabel system admins, Anabel account managers, who will see either all the clients or a subgroup of clients along with their data.
  • HQ User (out of scope): Managers working on the HQ of hotel chains, who will see the data of all the properties belong to their company.
  • Site Manager (in scope): Site Managers leading teams at the individual properties (hotels)
Name: Doug Ireland
Occupation: Site Manager at the San Diego site of the  Acme Hotel chain
  • Manage the hotel and the staff’s everyday life.
  • Solve arising problems in a timely manner so that guests do not even realize if something goes wrong.
  • Information flow takes a long time. 
  • Many times guests realize problems, like drained remote control batteries or missing kettles.
  • Doug wants to be instantly informed about any issues in the hotel and wants the problem-solving task to be assigned immediately to the adequate staff member.
1. TV theft threat
From room #217 the sensor in the power plug for the TV set captures that the TV has been unplugged. This might mean that unauthorized people took the TV from the room, so an alert is triggered. The alert will be sent out as an SMS to the specified employees, so the closest one can check the room immediately to see if there has been a theft of someone just mistakenly unplugged the TV. After the employee found that everíthing is fine, he can notify the site manager who has the right to set the alert to resolved state.
2. Maid feels sick in a room
Maria didn’t feel well recently, but she thought it will clear up and went to work. She is a maid in the Acme Hotel San Diego, so she is cleaning in room #101 where she feels she will faint. Thankfully, she is wearing an Anabel name tag, so she can press the button on the tag to ask for help. The press of the button triggers an alert, so the specified colleagues get an SMS message with the alert. The closest one can head to room #101 and call for help for Maria when finding her on the floor. Thanks to the timely alert Maria got quick help. The SMS the alert will show up in the desktop application as well, so Doug the Site Manager can monitor what is happening and can intervene if needed.
  • Easy to use interface
  • The style should be suitable for an internal enterprise setting
  • Branding should be considered
Creativity: 4
1: barely new ideas
10: a utopic product with features not proven to be able to be fully implemented
Aesthetics: 8
1: low-fidelity design, wireframe or plain sketch
10: top-notch finished looking visual design
Exploration: 8 
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: 7
1: don’t care at all about the branding just functionality
10: without a properly branded product there is no success
  • IoT: The Internet of things is a system of interrelated computing devices, mechanical and digital machines provided with unique identifiers (UIDs) and the ability to transfer data over a network without requiring human-to-human or human-to-computer interaction.
  • Bluetooth beacon: Bluetooth beacons are hardware transmitters - a class of Bluetooth low energy (LE) devices that broadcast their identifier to nearby portable electronic devices. The technology enables smartphones, tablets and other devices to perform actions when in close proximity to a beacon. Bluetooth beacons use Bluetooth low energy proximity sensing to transmit a universally unique identifier picked up by a compatible app or operating system. The identifier and several bytes sent with it can be used to determine the device's physical location, track customers, or trigger a location-based action on the device such as a check-in on social media or a push notification.
  • Alert: An alert from the system is an incident that needs immediate attention.
  • Notification: A notification from the system is a message about an automatically captured state, that is “good to know”.
Please make sure your design includes the following screens/sections. Our client is looking for 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. You can try to combine screens if that makes sense. 
Please do not copy  the wireframes, which are provided for content reference only. They are not full screen examples and do not meet all the needs listed in requirements. The page numbers below refer to the wireframe document’s pages.
1. Dashboard - Admin User
The users will be able to log in to the app directly from Anabel’s website. On the landing screen the following content should be presented:
  • Meaningful navigation: please analyze the use cases and come up with the best solution for navigation for this application. Consider the 3 user types when making a decision. Besides the navigation to the subsections, please add the user profile, notifications and search functionality.
  • Current metrics: What metrics would be interesting to the admin user? Think of things like, how many clients and sites are there in his database and how many new, in progress and resolved alerts are there, on and offline gateways, etc. Any KPIs you can think of besides these?
  • List of clients with meaningful, actionable details (please refer to the attached material for exact content). The list should be presented in a filterable, searchable manner. Links to client details should be provided.
  • Link to add a new client should be provided.
  • Link to archive client should be provided.
  • Please show how the system notifications (bell icon) would look like.
2. Client Details - Admin User
The user will be able to drill into the information about each client. The information could be presented on tabs, or we are open to your suggestions. Consider the same screens should be used in an editable form to add new clients. The following sections must be covered:
2.1 Main address and contacts (wireframe page 1-2)
Please refer to the wireframes for the fields we would like to cover.
2.2 Users and User groups (wireframe page 3-5)
Client admin users will be added from here along with user group settings.
2.3 Sites
List of sites belong to the user with an opportunity to drill down to details, to step into edit mode and to add new sites.
2.4 Configuration (wireframe page 6)
Anabel’s services and service trials can be activated from this section, along with device selections.
3. Site Details - Admin User
The user should be able to drill down to site/property level.
3.1 Site address (wireframe page 7)
Site address and contact information will be provided in this section
3.2 Property details (wireframe page 8-10)
Information about the buildings and the floor plans and the rooms will be presented in this section along with IT settings, like what property management system the client uses and wi-fi settings. Provide a drag and drop box for floor plans and keep it editable. A list of the rooms can also be found here.
3.3 Team (wireframe page 11)
Staff members will be shown in this section along with their roles and access. 
3.4 Notification settings  (wireframe page 12-13)
In this section, the user can modify the notification settings in order to set which user groups get which type of notifications. In addition, the notification times can be set as well (e.g. how much time from a certain event should pass before the alert or notification).
4. Dashboard - Site Manager (wireframe page 14-17)
The Site Manager will be able to see the data concerning only the property he is working at. The dashboard might have a similar layout as the Admin users’ dashboard, but with data that is for his level. Consider the following content should be presented:
  • Navigation: The navigation should be similar to the Admin users’ but without the clients and the sites links if there was any on your take. 
  • Current metrics: What metrics would be interesting to the Site Manager user? Think of things like how many new, in progress and resolved alerts are there, on and offline gateways, etc. Any KPIs you can think of besides these?
  • List of alerts and notifications on the site with statuses, assignees etc. The list should be presented in a filterable, searchable manner.
  • Please show how the system notifications (bell icon) would look.
5. Clear Alert - Site Manager (wireframe page 18)
Upon resolving an issue, only the Site Manager has the right to set the status of the alert to resolved. Please provide a popup-like opportunity to the user to perform this task, along with letting him add a description of the details.
6. System Information - Site Manager (wireframe page 19)
This section will provide information about the devices used by the system (the name tags and power cord gateways for now). The user will be able to see if there is any issue with any of the devices, and progress on each issue. He can also see high level metrics about the devices, like how many are required, installed and active.
7. Site Analytics - Site Manager (wireframe page 20)
The Site Manager should be provided with an analytics function so he can prepare reports on demand based on different factors and settings. Please come up with a good usable layout for the filters. The system also provides ‘Quick Reports’, which can be run without any further settings.
  • Follow the branding guidelines (attached)
  • Anabel’s brand font is Avenir. If you do not own a legal copy of it, please use a similar font.
The below items have been attached.
  • Branding guidelines
  • Rough Wireframes
  • Database Schema
  • Desktop - 1366 px width
  • 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
    • Include your Marvel app URL as a text file in your final submission. Label it “MarvelApp URL”.

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.

How To Submit

  • New to Studio? ‌Learn how to compete here
  • Upload your submission in three parts (Learn more here). Your design should be finalized and should contain only a single design concept (do not include multiple designs in a single submission).
  • If your submission wins, your source files must be correct and “Final Fixes” (if applicable) must be completed before payment can be released.
  • You may submit as many times as you'd like during the submission phase, but only the number of files listed above in the Submission Limit that you rank the highest will be considered. You can change the order of your submissions at any time during the submission phase. If you make revisions to your design, please delete submissions you are replacing.

Winner Selection

Submissions are viewable to the client as they are entered into the challenge. Winners are selected by the client and are chosen solely at the client's discretion.


2020 Topcoder(R) Open

Challenge links

Screening Scorecard

Submission format

Your Design Files:

  1. Look for instructions in this challenge regarding what files to provide.
  2. Place your submission files into a "" file.
  3. Place all of your source files into a "" file.
  4. Declare your fonts, stock photos, and icons in a "Declaration.txt" file.
  5. Create a JPG preview file.
  6. Place the 4 files you just created into a single zip file. This will be what you upload.

Trouble formatting your submission or want to learn more? ‌Read the FAQ.

Fonts, Stock Photos, and Icons:

All fonts, stock photos, and icons within your design must be declared when you submit. DO NOT include any 3rd party files in your submission or source files. Read about the policy.


All submissions are screened for eligibility before the challenge holder picks winners. Don't let your hard work go to waste. Learn more about how to  pass screening.

Challenge links

Questions? ‌Ask in the Challenge Discussion Forums.

Source files

  • Layered PSD files created in Adobe Photoshop or similar
  • AI files created in Adobe Illustrator or similar
  • Sketch
  • Adobe XD

You must include all source files with your submission.

Submission limit


ID: 30127955