TimeDesigner

What We Did

Services

• Research & Concepting
• Project Management
• UX & UI Design
• Front-end Development
• Back-end Development
• Ongoing Maintenance

Languages & Tools

• Adobe XD
• Django & Python
• Herman
• JavaScript with Backbone & Marionette
• Sass & CSS

Tegy came to OddBird with a multi-year plan and a vision for a suite of web applications to help educators improve their students’ school experience through organization design. They needed project planning and guidance, wireframes and itemized estimates for investor pitches. They needed brand and user experience design, front- and back-end development, and ongoing maintenance for their first web application, TimeDesigner.

As with most OddBird web projects, we started with a planning phase to delve deep into the needs of the educators who would use TimeDesigner, as well as Tegy’s vision for their business. Research & Concepting included creation of a Project Goals document, and User Profiles to understand the actions different users may want to take at different stages in their journey through the app. We created a Data Model and glossary of terms, with database requirements and relationships. We designed Wireframes – unbranded and interactive sketches of TimeDesigner’s core features.

Based on our research and designs, we compiled a full list of all the required features to reach Tegy’s goals – itemized, estimated, and prioritized into several phases. Tegy used the R&C deliverables to pitch investors and to raise funding for an innovative school scheduling tool called TimeDesigner. They were successful, and together we moved to the next phase, Design & Development.

Before digging into the juicy details of Design & Development for TimeDesigner, a word about Project Management. While Research & Concepting helped with initial sorting, goal setting, and feature prioritization, ongoing Project Management was key to distilling Tegy’s broad vision into a useful, digital product.

At regular intervals throughout design & development of the TimeDesigner web application, OddBird met with Furman on video calls and in person. We spent time listening to the vision and asking strategic questions – getting to the heart of the project, understanding the reason behind each new feature suggestion, and identifying top priorities. When presented with proposals for small features, we asked how each would support Tegy’s long-term goals. When presented with big-picture vision, we helped suggest specific, small tasks that would move the project in the desired direction.

When clients present us with small feature ideas, we keep asking why. When presented with a big vision, we keep asking how.

—Miriam Suzanne, Co-founder at OddBird

Together, we dug into the details of new features to determine the implications – both for the application itself and for usability. Drawing on our many years of experience, deep knowledge of web app development, and involvement at the cutting edge of our fields, OddBird guided Tegy in a direction that would have the biggest impact for users without blowing their budget.

At the end of each planning conversation, we documented proposed features in the Trello project management tool. We organized and prioritized Trello cards into two-week plans – what are the most important features right now – and saved long-term feature goals to be prioritized later.

Creating a Flexible Schedule with CSS Grid and Custom Properties

One of the key features we built for the TimeDesigner web application was a flexible resource planning scenario.

Each scenario has an editable start and end time which we use to calculate the total number of minutes in a school day. Behind the scenes, we pass this data to a CSS variable on the grid container.

<div class="row-grid" style="--day: 420;">

In our CSS Grid definition, we use this --day variable to set the total number of columns. We end up with 1 column for each minute of the school day.

.row-grid {
  grid-template-columns: repeat(var(--day), minmax(1px, 1fr));
}

Each experience (.exp) on the grid is placed using a start time (--start) and duration (--span). We include the option to add a transition period (--plus) as well.

<div style="--start: 410; --span: 55; --plus: 10;" class="exp">

The duration and transition period are added to create a --total span amount for the grid-column.

.exp {
  --total: calc(var(--span) + var(--plus));
  grid-column: calc(var(--start) + 1) / span var(--total);
}

For optimal flexibility, an experience may overlap in time with another experience. Thanks to CSS Grid, we are able to place these in a sensible way with minimal effort. Using grid-auto-flow with a value of dense, we can allow the row to place experiences where they fit, regardless of where they were added in the markup. Additionally, we can assign the row a minimum height and allow it to grow taller as needed using minmax.

.row-grid {
  grid-auto-flow: dense;
  grid-auto-rows: minmax(1.75rem, auto);
}

Drag-and-Drop Schedule Interface with CSS Grid

This use of CSS Grid combined beautifully with an intuitive drag-and-drop interface. An experience’s --start variable is updated continuously while being dragged, allowing it to move responsively along the grid.

Print-to-PDF Reports

Users needed the ability to view, print or download PDF reports of their scenarios using print-specific layouts. To do this, we created custom print styles, and used print-to-pdf in a headless Chrome instance to render an HTML string to a PDF.

In addition to showing the scenario grid, the reports included an expanded table view for each row and a chart of the total minutes per color for the scenario.

Site-Wide Undo & Redo

We also implemented a site-wide undo/redo feature (available via visible buttons or familiar Ctrl-Z/Ctrl-Shift-Z/Ctrl-Y keyboard shortcuts) through a custom action manager. Each action taken on the site is added to a stack, storing both “forward” and “backward” effects. Undoing an action triggers the “backward” effect of the most recent action, popping it off the end of the stack. Redoing an action runs the “forward” effect again, adding the action back to the end of the stack.

In the years since TimeDesigner launched, OddBird has continued to support the project. We have provided periodic bug fixes and maintenance – though the site has needed relatively little. Tegy has been training school teams and scheduling engineers in organization design using TimeDesigner. After several years, we are excited to work with Tegy again to create Phase 2 of TimeDesigner, enabling more schools to innovate organization models, make better use of their resources, and improve the learning environment for everyone.