SunShot - Building DataCloud - Website Design Challenge

Welcome to SunShot - Building DataCloud - Design Challenge. Task of this challenge is to come up with designs for an application that will use disruptive technologies, such as cloud, wireless and open-source hardware and turn the traditional building automation model to a software-centric, "virtual" building automation system.

We are looking for your DESIGNS on what the user should see and experience when using the application.

Good luck and we’re looking forward to your submissions!

Round 1

Submit your initial designs for Checkpoint Feedback

A. Customer User Onboarding (Enterprise Managers and Site Managers):
1) First Time Login
2) Login Page (Regular users - not first time users)
3) Welcome Page
4) Password Creation / Security Question’s / Two factor
7) Enterprise Dashboard
8) Notifications / Work Queue

B. Customer and Site Configuration (Administrator):
10.1) List of Enterprises
10.2) List of Brands
10.3) List of Sites

Feel free to add any other additional screens which are necessary to explain your concept.
Notes.jpg: Please note any comments about your design for the Client
Make sure all pages have correct flow! Use correct file numbering. (00, 01, 02, 03)

Round 2

Your Final designs for all the required designs with all Checkpoint Feedback implemented.

A. Customer User Onboarding (Enterprise Managers and Site Managers):
1) First Time Login
2) Login Page (Regular users - not first time users)
3) Welcome Page
4) Password Creation / Security Question’s / Two factor
5) Profile Edit
6) View list of Sites (My Sites)
7) Enterprise Dashboard
8) Notifications / Work Queue
9) User Preferences

B. Customer and Site Configuration (Administrator):
10) Enterprise, Brand, Site and User List/Details
10.1) List of Enterprises
10.2) List of Brands
10.3) List of Sites
10.4) List of Users
11) Help Desk and Bug Screen
12) Device Screen
13) Style Tile

Feel free to add any other additional screens which are necessary to explain your concept.
Notes.jpg: Please note any comments about your design for the Client
Make sure all pages have correct flow! Use correct file numbering. (00, 01, 02, 03)

Task is to come up with designs based on the provided wireframes.

NOTE: Wireframes are just provided to help you with the contents, please make sure you improve the overall layout, flow, user experience of this application.

Problem:
Building owners who can't afford legacy building automation systems (at a starting price of $10,000) currently have just one real solution: the programmable thermostat. They’re cheap but they quickly stop delivering efficiency and don’t provide data to facility and energy managers.

Solution:
Primary goal of this project is to turn the traditional building automation model on its head. Instead of costly hardware devices at the sites and specialist technicians paid thousands of dollars to spend days installing the devices, we’ve designed a software-centric, "virtual" building automation system. By using disruptive technologies such as cloud, wireless and open-source hardware, we can reduce hardware at the site to a thin layer that eliminates the need for specialist installers.

Design Guidelines:
- We are looking for modern designs.
- Client likes the look/feel of Microsoft 365 design language!
- No specific branding, so please use a logo placeholder, use black, grays, white and client likes #0099ff
- Any charting and graphs should use muted colors, nothing harsh crazy vibrant.
- Give importance to the overall layout and think on how a user would interact with the content on the page.
- Show all the screens and provide a user flow/click-path and navigation, so we can see how the interactions fit together in the application.
- Have your designs of size 1280px width and height as required
- As a part of final fixes, winner will be required to create any additional resolutions as required.

Required Pages:
Below are some of the features required in this application, but you are not limited to this, we are open to flows and suggestions on how things could work - so feel free to expand and suggest us what would be best for this application!!

A. Customer User Onboarding (Enterprise Managers and Site Managers):
As a customer, I don’t have the time to pour over data to find out what I need to do….so save energy or to check on an asset…give me a system that tells me what to do next and access to help if/when I need it.

1) First Time Login:
Reference: 01 Login (First Time and Regular) Mockup.png
- When the user logins for the first time, they will enter their email and the access code (that would have been received by them in their mail).
- Once they successfully logs in, they will see a welcome screen.

2) Login Page (Regular users - not first time users):
Reference: 01 Login (First Time and Regular) Mockup.png
- Need a simple, standard login page.
- Allow the user to enter their username and password
- They will have the ability to retrieve their password using “Forgot Password”
- Provide a Remember me option
- Show us how a error screen (incase if the user enters wrong credentials) will looks like.
- Once they successfully logs in, they will see the dashboard specific to their user type!

3) Welcome Page:
Reference: 01 Login (First Time and Regular) Mockup.png
- When a user logs in for the first time - this page is shown!
- Come up with a welcome page design that will provide information about the purpose of the site with “Why, What and How” as shown in the wireframes..
- This page need to show a “Get Started” button that will take the user to “Password Creation” page.
- We are open to your thoughts on how best this need to be designed.

4) Password Creation / Security Question’s / Two factor:
Reference: 01 Login (First Time and Regular) Mockup.png
- This page allows the user to create a password
- We need to provide two factor modes for authentication namely email or through mobile, should be able to choose either of the modes and also show a standard disclaimer text
for mobiles that “Rates will apply”.
- Provide ability to answer some security questions, these will be very helpful when a user loses their password and tries to retrieve it.
- On saving the information will take them to their profile.

5) Profile Edit:
Reference: 01 Login (First Time and Regular) Mockup.png
- This includes below information about the user, their contact details and their account information.
- Users will have the ability to edit their information or their contact details.
- They will able to view list of sites that are being managed under their company.
- Think on how best to design this.

Quick tour:
- User will need the ability to have a quick tour of the site that will show a short video!
- We shows a “Get Started” button in this page and on-click takes the user to their dashboard.

6) View list of Sites (My Sites):
Reference: 01 Login (First Time and Regular) Mockup.png
- User will be able to view a google maps interface and in the right will see a list of sites they are associated with.
- This page is shown when the user clicks on “View” from the profile view > under Account information > Sites under management.
- They will be able to pick/select one site and see details of the site details of the site can be seen here (Admin CRUD for Website Entities.png - bottom left where it’s mentioned “Site”).

7) Enterprise Dashboard:
Reference: 02_1 Base Dashboard UI Design.png and 02_2 Enterprise Dashboard.png
- Client has provided a sketch of how they envision the dashboard layout (02_1 Base Dashboard UI Design.png), feel free to expand based on this and come up with design that
you would be provide best user experience.
- We need a navigation, client has envisioned the navigation in the left collapsible sidebar, looking forward to your design on how this can be laid out (if you have better ideas,
please show them)
- Here by default, user will see the list of sites under this enterprise, this will need to show a google maps-type interface to see your sites, user will be able to pick one and see more details about that site (site details can be grabbed from Admin CRUD for Website Entities.png > under site).
- We need to show list of notifications/work queue that needs immediate attention, how do we need to put this up? We need to show notification details when they select to view a notification [details can be grabbed from Notification Screens.png (single notification details)].

8) Notifications / Work Queue:
Reference: Notification Screens.png
(Note: This is not the usual notification but rather works as a ticket/work)
- We need to show a list of notifications in this page
- Need the ability to filter/sort the list.
- Provide a way to customize the notification preference
- Provide a way to show the notifications report (Visual).

Notification Details:
- When a user clicks on an individual notification, we need to show the details as shown under Notification Screens.png (View / Update Single Notification).
- User will be able to add notes, assign it to a staff, change the status of a notification (Open, pending, on-hold, closed)
- Show list of activities in this notification.

Notification Preference:
- This screen need to allow the user to choose the preferences
- Please follow the details for this screen from the provided mockups
- Looking forward to your thoughts on how this need to put up.

Notification Report:
- They will be able to view a visual representation of the notifications by status / type (Open, Pending and on-hold).
- Closed notification report need to shown on a separate page.
- Should have the ability to drill-down on a type of notification
- Need the ability to export the data.

9) User Preferences:
Reference: User Preferences.png
- User will have the option to set their preferences
- Please see the reference for content references and come up with a design that would give the best possible experience.
- From where will the user access this? looking forward to your thoughts!

B. Customer and Site Configuration (Administrator):
As an admin, I am responsible for insuring that each site is properly operating - from data flow and connectivity to as-need user support. I also own the relationship with strategic (software/facility management) partners.

10) Enterprise, Brand, Site and User List/Details:
Reference: Admin CRUD for Website Entities.png
Enterprise (Company) is really two components: the business we are engaging, and the brand(s) they operate. 

For example, 
Enterprise/Company = ABC Inc
Brands = UPS Stores and Five Guys Burgers (there could be more brands under an enterprise)
Sites/Stores = UPS Stores (address 1, address 2, etc..), Five Burger Stores (address 1, address 2, etc..), and so on..
Users = User working at a particular site/store.

Based on the above:
ABC Inc could be the enterprise and they own/operate franchises for UPS Stores and Five Guys Burgers, which would be the brands. We then need to link the enterprise to one or more brands. Each brand should have similar info, but obviously for the brand itself (i.e. Five Guys (name), address, phone, website, etc) and there could many sites for a brand. Easiest way to think of the site is "Site" = "Store" (So, using the above example, Five Guys (brand) has many sites/stores, “Cedar Road, South Euclid, OH 44118 and so on”).

We are looking for your thoughts on how these information need to be displayed, please feel free to improve the layouts and design the user experience

10.1) List of Enterprises:
- User will have the ability to view list of enterprise that exists in the system.
- Required details can be captured from the provided mockup (Admin CRUD for Website Entities.png > under enterprise).
- Provide the ability to search, filter, sort through the list of enterprises.
- Do you think, we will need a details page to show enterprise details?
- They need the ability to add/edit a enterprise.
- An ability to disable the enterprise is required.

Enterprise Add/Edit:
Reference: Admin CRUD for Website Entities.png
- User will be able to add or edit an enterprise.
- Please follow the details required from the provided reference.
- While adding an enterprise, a user will be able to assign the brands (or add a new brand if it didn’t already exists).
- They need ability to add users to the enterprise (or add a new user if it didn’t already exists).

10.2) List of Brands:
- User will have the ability to view list of brands that exists in the system.
- Required details can be captured from the provided mockup (Admin CRUD for Website Entities.png > under brand).
- Provide the ability to search, filter, sort through the list of enterprises.
- Do you think, we will need a details page to show individual brand details?
- How can we show the list of brands under an enterprise?
- They need the ability to add/edit a enterprise.
- An ability to disable the brand is required.

Brand Add/Edit:
Reference: Admin CRUD for Website Entities.png
- User will be able to add or edit an brand.
- Please follow the details required from the provided reference.
- While creating/editing a new brand, they will be able to add a csv with the list of sites where the brand exists (addresses).

10.3) List of Sites:
- User will have the ability to view list of Site that exists in the system.
- Required details can be captured from the provided mockup (Admin CRUD for Website Entities.png > under site).
- Provide the ability to search, filter, sort through the list of site.
- Do you think, we will need a details page to show individual site details.
- How can we show the list of enterprise, brands - this site belongs to?
- They need the ability to add/edit a site.
- An ability to disable the site is required.

Site Add/Edit:
Reference: Admin CRUD for Website Entities.png
- User will be able to add or edit an site.
- They will be able to assign a particular site with an enterprise, brands
- Each of the site will have allow them to edit the site hours.
- Please follow the details required from the provided reference.

10.4) List of Users: 
- User will have the ability to view list of Users that exists in the system.
- Required details can be captured from the provided mockup (Admin CRUD for Website Entities.png > under user).
- Provide the ability to search, filter, sort through the list of users.
- Do you think, we will need a details page to show individual user details?
- They need the ability to add/edit a user.
- An ability to disable the user is required.

User Add/Edit:
Reference: Admin CRUD for Website Entities.png
- User will be able to add or edit an user and associate them with an enterprise
- Also assign them a specific role and will be able to edit the permissions (what needs to shown for edit permissions screens - looking for your thoughts).
- Please follow the details required from the provided reference.

11) Help Desk and Bug Screen:
Reference: Helpdesk and Bug Screen.png
- We need a way in all the pages to capture/allow users to send an error report in-case of a bug or false information in the screen.
- Need a form that allows them to select the type of category the bug belongs to and an optional text field to provide a note.
- Submitting should show an error information (if there are any error), and we also would like you to show how a success screen would look like.

12) Device Screen:
Reference: Device Administration Screen.png
- We show a list of devices with their status.
- Need the ability to filter through the list of devices (All Devices, All Gateways, Bad Gateways, All Sensors (sensor types eg: temp/humid/light/meter/etc), Bad Sensors
- We need a button/link to “AT & T M2X” (this takes the user to an external site - not in scope)...just need to include the button.
- Users will be able to select a device and take action on the specific device by creating a notification (ex: ask site manager to check power supply) or a work order.

--
13) Style Tile:
- We would like you to create a style tile that will help developers.
- This Style Tile need to have the below at a minimum but feel free to add anything that would help developers
- Explore these references to learn more about style tiles: Reference 1,  Reference 2

Links / Buttons Colors:
- Button colors (normal / hover states)
- Link colors (normal / hover states)

Typography:
We would like you to identify and define the list of fonts and the specific color, font size used:
- Headers
- Sub-headers.
- Paragraphs.
- etc.

Target Audience:
- Administrators, Site Managers, Corporate Managers

Judging Criteria:
- How well you plan the user experience and capture your ideas visually
- How easily your design can be built and make sense as an application
- Cleanliness of your graphics and design

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 for your submission files.

Source Files
All original source files of the submitted design. Files should be created in Adobe Photoshop and saved as layered PSD file, or Adobe Illustrator as a layered AI file.

Final Fixes
As part of the final fixes phase you may be asked to modify your graphics (sizes or colors) or modify overall colors. We may ask you to update your design or graphics based on checkpoint feedback.