Skip to main
Case Study
School schedule grid

TimeDesigner

Whole-School Design Thinking & Scheduling

TimeDesigner helps school teams rapidly create multiple scheduling scenarios from various perspectives, and plan ahead for future iterations. OddBird helped Tegy plan, design, develop, launch, and maintain their school scheduling web app using CSS Grid and custom property wizardry on the front-end, and well-tested Django/Python on the back-end. Currently, the software is only available to schools in Tegy training programs.

OddBird provided a focused team with a wide range of talent.

I have been having so much fun with this tool. The tool has been very helpful and you all have really helped me think about scheduling creatively. Thanks again!

What We Did

scenario with grouped experiences colored green

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.

Wireframe of TimeDesigner’s schedule builder.

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.

I really enjoy this iterative design process. Seeing how OddBird does the iteration has improved my own iterative system with schools.

OddBird was the wise investment. We could have selected a cheaper avenue for this work – we would have paid for it manifold in the long run.

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.

Trello board project management sample.

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.

An example of a scenario when many items – or “experiences” – are added to the planning grid.

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));
}

After creating a new scenario, the start and end times are used to make the overall grid. This example also shows vertical grid lines drawn with CSS borders using two different colors for the hour (major) and half hour (minor) segments.

We can see a great overview of the grid by using the grid inspector tool in Firefox.

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);
}

Using the Inspector, we see how variables are defined and used in the markup and CSS to place experiences anywhere on the grid.

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);
}

CSS Grid allows us to backfill available space of items regardless of document ordering. This can lead to accessibility issues if not applied with care.

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.

Each rectangle – or “experience” – can be dragged and dropped, updating the CSS variables.

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.

Viewable reports can be printed or downloaded via print-to-pdf.

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.

Each action taken on the site is added to a stack, storing both “forward” and “backward” effects.

Selecting a color for experiences in a TimeDesigner schedule.

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.

Recent Case Studies

  1. Illustrated game question about which font is most calligraphic
    Case Study post type

    Typographic Superpower Game

    A meditation on typography

    A meditation on typography, Adobe Fonts’ Game allows players to choose the fonts that they feel apply best to different scenarios. Players’ input helps Adobe Fonts continue to improve on their new browse-by-tags feature. We worked closely with Adobe to create animated & interactive illustrations using GreenSock, NuxtJS, and CSS…

    see all Case Study posts
  2. World's greatest athlete, Stacy Kvernmo's latest bike ride stats and mapped route
    Case Study post type

    QuarqNet

    Real-time telemetry & sharing for athletes

    A custom application we designed and built in collaboration with Quarq’s internal developers – including a responsive interface, real-time mapping & telemetry, social networking, and third-party integrations with Strava, Training Peaks, Dropbox, and Today’s Plan.

    see all Case Study posts
  3. CoachHub's services and platform demos
    Case Study post type

    CoachHub Application

    Responsive platform for integrated health coaching

    A custom application we designed and developed with the ORCAS team – integrating their suite of self-management tools. We built in support for video chat, in-app messaging, public Q&A, webinars, file sharing, health assessments, and more. The app has been used internally by the US Coast Guard, US Military…

    see all Case Study posts