Schedule Editor v3

[kevinhughes27]

Background

V1 was a grid based drag and drop. The main issue was that creating the grid of field time slots and dragging games onto these slots all happened at the same time which made it confusing. It could handle staggered start times for 2 different field groups but it required hacking the grid editor a bit. If rows were staggered or different lengths it wasn't visuallized well.

V2 went for a calendar style approach where games would snap to certain increments and were re-sizable. V2 was specifically designed to handle the staggered starts and eliminate the confusion with creating the grid since the grid was a full calendar. V2 is very flexible but it is not faster to schedule your games since you have to match the snap to make an even row. It is more annoying if you have odd times.

In both V1 and V2 the actual date of the schedule is not very clear.

Schedule Editor V3

For V3 I want to split the process into 2 steps:

1. Pick the dates and time slots. After this step a calendar esque view will be displayed
2. Drag games onto fields (support dragging multiple games at one time)

V3 is closer to V1 than V2 in terms of code and function. (which is nice because the front end code for V2 is quite complicated).

User Stories / Workflow

1. User is creating a new tournament and wants to start making the schedule

2. Navigate to the schedule page

3. It is currently blank slate with some help text. They click start/create to make a new schedule

4. An intuitive form helps the user input the following data:

   • Schedule dates
   • Create the time slots with gaps between games and lunch breaks
   • Choose which fields are used for this schedule

   This form should probably preview the grid in some way

5. Schedule is created and the user arrives at a calendar esque page to start dragging and dropping games into field/time slots. Multiple drag and drop is supported

6. Teams not playing in a certain slot might need to be visualized in the editor somehow

7. A schedule needs to be editable (i.e. adjust the time slots etc) the backend will handle updating games that have been scheduled if they edit

Development Plan

1. UX Design of the Scheduel Creation Flow (hire freelance designer)
2. Implement new backend APIs for schedule creation (hire freelance developer)
3. Implement new frontend (me)

[kevinhughes27]

sketch:

[kevinhughes27]

mock: