Key Information

Register
Submit
The challenge is finished.

Challenge Overview

Project Overview

Welcome to the Skyzone Dashboard and Event Calendar Prototype Challenge! The goal of this Challenge is to develop a dashboard for business information, action buttons, table data and graphs/analytics. Develop a calendar for event bookings with a built in event process flow. Both pages should use test data to simulate actual use.

Competition Task Overview

There're 2 pages (Dashboard and Calendar) to build, these're no high level design so you will follow the balsamiq mockups wireframe.

Key Requirements

  1. Use SZ - SF Event Flow.pdf as wireframe and use se sz-dashboard-events.zip as code base to create all UI and functionality listed in "Detailed Requirements" section.
  2. Use following technologies to build the prototype, use their built-in components/resrouces whenever possible instead of reinventing the wheel
    - Bootstrap as the front-end web framwork: http://getbootstrap.com/
    - Agularjs 1.4 https://angularjs.org/
    - Calendar http://angular-ui.github.io/ui-calendar/ (Angular port of http://fullcalendar.io/ where you can find more documentation)
    - Charts http://d3js.org/
    - Icons Bootstrap Glyphicons or Font-Awesome
  3. Style requirements are that you should mainly use Bootstrap styles whenever as possible however we would like you to add you own custom css (in the style.css file in the code base) to make the design look consistant, clean and minimal. For example, instead of rounded corners, a user is free to use straight edges if they feel it looks better in the design. The main requirement is to keep things well spaced, easy to read and navigate.
    Also, you need follow beneath colors pallets in this prototype.
    - SZ Orange #fd732b
    - Blue 1 #002f66
    - Blue 2 #0055b7
    - Blue 3 #0274d5
    - Gray 1 #aaaaaa
    - Gray 2 #dddddd
    - Gray 3 (secondary) #cccccc
    - Gray 4 (secondary) #eeeeee
  4. All dynamic test data should be mockup as JSON file(s) and fetch by AngularJS ajax services, ask in forum if you're not sure anywhere. Submit a brief document for where and how to config the data.
  5. It is a desktop only application. We do not need the developer to focus on responsiveness for mobile however we would like you to use responsive CSS whenever possible. The modal pop up screens in the calendar will be reused in a mobile application, therefore the modal should be responsive for both desktop and mobile.

Detailed Requirements

Use SZ - SF Event Flow.pdf as wireframe (Page#2-#12).

Disregard and don’t develop the most outer container with tab labels (Dashboard, Order, Coupons, etc), we juse need the 2 tabs(Dashboard,Orders) inner contents as 2 seperate pages.

Note there're some comments(Not UI) such as page#4(bottom), page#7(right), page#11(center).

1. Dashboard (Page#2-#3)

Use the bootstrap setup (dashboard.html) provided in the zip to implement each content sections. The dashboard is a landing page to view information at a glance and provide easy, quick actions on tasks.

1.1 HEADER

Title - left aligned
Two button - Leave both button actions unlinked

1.2 MAIN CONTENT AREA

Section 1 - Confirmed, Cancellations, Pending

  • - view only, test data for numbers.

Section 2 - Tabs with tables

  • - Each tab will have a number(Badges) next to it. Only 2 digits are needed for the number. That number will reflect how many items are in that object (tab content area).
  • - All 3 tab content areas are composed of repeating lists. Use the same header for all three sections
    • - the first column of each row is reserved for an action link labeled “view”. Leave the action unlinked.
    • - Display 5 items in each section
      • - add test data (for example a JSON file) to pull in data to these sections.
    • - See All button - leave unlinked

Section 3 - Trends

  • - Use D3js for these 2 charts
    • - Chart 1 - Line Graph
    • - Chart 2 - Pie Chart
  • - Create a separate file (for example a JSON/JS file) to reference your date (do not plug in all the data within the html pages.
    • - Use test data with your choice of values

1.3 SIDEBAR AREA

Section 4 - Search

  • - Basic search input section with action button
    • - leave action unlinked

Section 5 - Tasks

  • - List of tasks
    • - Display 5 tasks
      • - add test data (for example a JSON file) to pull in data to these sections.
  • - Each task section is an action item, leave all items unlinked.

Section 6 - My Feed / Post

  • - Leave tab content areas blank (Do not develop this section)
    • - Make sure this section matches the look/feel of the other sections.

 

2. Calendar (Page#4-#12)

Use the bootstrap/Angular setup (events.html) provided in the zip to implement the calendar with the modal flow. 

The calendar consists of two views, WEEK and DAY (NO MONTH VIEW). Both views should share similar functionality and styles for a cohesive experience. The calendar is a visual representation of booked events and open time slots. The user will be taken through a booking flow after they’ve selected their time.

2.1 Expectations

  • - Should tie in to existing angular “eventBooking” app sample.
  • - Clean/minimalist calendar with easy to read well spaced rows/columns.
    • - Keep left side for time
    • - Keep top columns for day/date
  • - Modal popup window for event flow

2.2 WEEK VIEW (Page#4)

Week view will allow the user to see an event bookings at a glance. There can be more than one event at the same time and the calendar must support this.

2.2.1 Header

LEFT Filter - (Paid, Hold, Draft)

  • - represent the status of the event booking container. Should default to display all. Users can click on these button to disable the filter. Once a button is disabled, the event containers with corresponding status types shall no longer be seen in the calendar.

MIDDLE Date Input

The date selected will display the week that day is in Monday through Sunday.

RIGHT Filter - Day/Week

  • - Filters the calendar between the Day view and the Week View

2.2.2 WEEK VIEW CONTENT AREA

Event Container

  • - NEW EVENT
    • - Created by dragging and dropping - (similar to dragging the cursor in Google calendar), after drag and drop occurs a bootstrap modal will pop up (details below)
    • - Created by clicking on time slot like Google calender. note the events should leave margin around it so user is able to select same slot by clicking the margin.
  • - BOOKED EVENT
    • - Drag and move is allowed to update event's Date/Start Time information
    • - Viewed by clicking on an already created event, Bootstrap modal will pop up (details below)
  • - Colors - represent different rooms/events (These different rooms/events will display more detail in the DAY view).
    • - Top borders color - represent the booking status.
  • - Ability to set minimum and maximum times that users can select (ie. no less than an hour, no more than 3 hours)

2.2.3 Modal window (booked event) (Page#6)

Clicking on an existing event block should initiate a bootstrap modal popup. This window will display a preview of the booking information.

Header - Display Event Name

  • - use test data

Modal Container

Display content as seen in balsamiq mockup

  • - make use of the responsive text areas in bootstrap as the modal (only the modal) will be seen at times on a mobile device.

Footer - Close/Edit Buttons

  • - Close Button - action returns the user back to the calendar
  • - Edit Button - Opens event in the editable event modal (this is the new event modal window described below)

2.2.4 Modal window (new event) (Page#7)

The new event (or edit event) modal allows users to go through a flow to easily fill out the details of an event. The top section can be breadcrumbs or tabs, with an indicator of which section the user is on. Each section should be created with bootstraps responsive elements as this modal (only the modal) will be seen at times on a mobile device.

Header

  • - Event Name on left
  • - Running Total on right

Modal Container

This section is the event booking flow. Users will need to click through the breadcrumbs/tabs above to navigate to the end of the flow. Navigation should be seamless and should not require a page load to go through the flow.

Top - Navigation, Use tabs or linked breadcrumbs for the navigation

Body - Sections related to navigation titles

View the sections in the balsamiq examples and build based off of those label, input, buttons, and data examples

  • - Contact (Page#7)
    • - Client lookup - no action, leave as an input with search icon
    • - Use mockup for content examples
      • use test data
    • - Mockup error state (Page#8)
  • - Package (Page#9)
    • - Package types will have a package preview to the right of the selection area. When you click on one package, a different preview will show to the right.
    • - Show all Package types will make types area as scrollable, and change the link text to "show less".
    • - Right scrollbar only appears when possible such as when showing bottom "Notes" section.
    • - Follow mockup for examples
    • - use test data as needed
  • - Jumpers (Page#10)
    • - Top right - running total of jumpers from section below, if a person is added, this number should go up or down.
    • - inputs have 2 actions - lookup icon and add button
      • - lookup, leave a lookup button here (no action required)
      • - Add button - creates a record in the list below
    • - Jumper list
      • - Show people that have been added similar to whats in the mockup.
        • - document icon - use 2 color examples (green and red)
        • - remove button - removes user from list
  • - Event Info (Page#11)
    • - Top section
      • - label and text name on left
      • - label and input with lookup button on right (no action for the lookup)
    • - Main section
      • - Create 3 sections with horizontal rule dividers. Pull text from the previous 3 tabs (contact, package, jumpers) in these sections. This section is a breakdown of the previous sections.
  • - Billing (Page#12)
    • - A running total has been running throughout these windows, beginning when the user picked a package.
    • - Use the mockup for an example of how to display the billing info
      • - remove buttons - will remove item and recalculate total
        • - will also change input from corresponding tab (for example, if a package item is removed, that number will now reflect a ZERO value.
    • - Hold amount - this will be calculated from the total. Use 25% of total for that calculation.
      • - background does not need to be yellow. Use best judgement to differential this hold amount
    • - Payments
      • - Create a section to accept a credit card
        • - inputs and labels only (does not connect to anything)
          • - basic validation
      • - Create a section to accept a Gift Card
        • - input and label only (does not connect to anything)
      • - Create a section to accept a cash or check payment
        • - input and label only (does not connect to anything)

Notes (demo in Page#11) - A running note input area that is the same across each tab/breadcrumb section.  This will not be unique to each section therefore it can be pulled out of the section and run on its own.

  • - Provide a button/icon to show and hide this section
  • - When this section appears, the upper tab content is possible scrollable (Page#9).

Footer - Close, Draft, Submit

  • - Close - return to previous calendar state
    • If information has been added, warn user that information will be lost, else if they’d like to retain the information they’ve entered, to click DRAFT
  • - Draft - saves but with a status of DRAFT
  • - Submit -
    • - saves with status of PAID
      • - if user has left a ZERO balance
    • - saves with status HOLD
      • - if user paid the hold amount
    • - else it will save as draft
      • - add alert of no payment and draft will be created

 

2.3 DAY VIEW CONTENT AREA (Page#5)

Follow the Week style and guides as seen above. One more filter is added, this is for the room/event type. The columns now represent rooms/events and can scroll left or right if there are more rooms than fit on the screen.

Header

Same as week plus one additional filter

  • - Room Type - dropdown with room types. Add 5 room type examples in the drop down.
    • - default to ALL
    • - If another type is selected, other columns (room/events) will not be displayed.

Event Container

Containers follow the same color rules as the week view. Each of the rooms/events have a unique color. Therefore every column will have its own unique color for booked events.

  • - Info on event container
    • - display event title
    • - event date & time
  • - Clicking on event will pop up MODAL WINDOW (BOOKED) which is the same as the week view
  • - Should work same like WEEK VIEW such as create new event, move to update.

 

HTML5

  • Use the latest version of Bootstrap for the project
  • Provide comments on the page elements to give clear explanation of the code usage. The goal is to help future developers understand the code.
  • Please use clean INDENTATION for all HTML code so future developers can follow the code.
  • All HTML code naming should not have any conflicts or errors.
  • Element and Attribute names should be in lowercase and use a "-" or camel naming to separate multiple-word classes (i.e.. "main-content", or "mainContent)
  • Use semantically correct tags- use H tags for headers, etc. Use strong and em tags instead of bold and italic tags.
  • No inline CSS styles- all styles must be placed in the external stylesheet “style.html”.
  • Validate your code- reviewers may accept minor validation errors, but please comment your reason for any validation errors. Use the validators listed in the scorecard.

CSS

  • Use the latest version of Bootstrap for the project
  • Provide comments on the CSS code. We need CSS comments to give a clear explanation of the code usage. The goal is to help future developers understand the code.
  • Please use clean INDENTATION for all CSS so developers can follow the code.
  • All CSS naming should not have any conflicts.
  • As possible use CSS3 style when create all styling.
  • Use CSS to space out objects, not clear/transparent images (GIFs or PNGs) and use proper structural CSS to lay out your page.
  • Only use table tags for tables of data/information and not for page layout.

JavaScript Libraries/Plugins

All JavaScript must not have a copyright by a third party. You are encouraged to use your own scripts, or scripts that are free, publicly available and do not have copyright statements or author recognition requirements anywhere in the code.

  • You are allowed to use the JQuery/AngularJS/ui-calendar/Bootstrap/D3.js JavaScript library for this contest.
  • Any other libs should be asked and approved in challenge forum.

Browser Requirements

  • IE10+
  • Latest Google Chrome (Windows & Mac OS)
  • Latest Safari (Windows & Mac OS)
  • Latest Firefox (Windows & Mac OS)

Documentation Provided

 



Final Submission Guidelines

Submission Deliverables

A complete list of deliverables can be viewed in the UI Prototype Competitions Tutorial.

Submission Guidelines

Submit an archive file contains all HTML/CSS/JS/images and other required files via the challenge detail page on topcoder.com.

REVIEW STYLE:

Final Review:

Community Review Board

Approval:

User Sign-Off

SHARE:

ID: 30050829