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…
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
- Research & Concepting
- Project Management
- UX & UI Design
- Front-end Development
- Back-end Development
- Ongoing Maintenance
Languages & Tools
- Adobe XD
- Django & Python
- 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.
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.
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
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.
grid-template-columns: repeat(var(--day), minmax(1px, 1fr));
Each experience (
.exp) on the grid is placed
using a start time (
and duration (
We include the option to add a transition period (
<div style="--start: 410; --span: 55; --plus: 10;" class="exp">
The duration and transition period are added to create a
span amount for the grid-column.
--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.
grid-auto-flow with a value of
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
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.
--start variable is
updated continuously while being dragged,
allowing it to move responsively along the grid.
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
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.
Recent Case Studies
- Case Study post type
- Case Study post type
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.
- Case Study post type
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…