Challenge Summary
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.
CHALLENGE OBJECTIVES
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.
CHALLENGE OBJECTIVES
- 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
APPLICATION OVERVIEW
- 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.
AUDIENCE & USER ROLES
- 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)
PERSONA
Name: Doug Ireland
Occupation: Site Manager at the San Diego site of the Acme Hotel chain
Goals:
- 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.
Frustrations:
- Information flow takes a long time.
- Many times guests realize problems, like drained remote control batteries or missing kettles.
Wants:
- 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.
USER STORY
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.
DESIGN GOALS & PRINCIPLES
- Easy to use interface
- The style should be suitable for an internal enterprise setting
- Branding should be considered
EXPLORATION SCORE
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
GLOSSARY
- 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”.
SCREENS/FEATURES
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.
BRANDING GUIDELINES
- 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.
DESIGN ASSETS
The below items have been attached.
- Branding guidelines
- Rough Wireframes
- Database Schema
TARGET DEVICE
- Desktop - 1366 px width
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 pere.viktoria@gmail.com
- 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.