Student Interface

Upon logging in, students are directed to the Assignments page, where tasks requiring action were presented in card format. Completed tasks seamlessly transitioned to their Binder, where they can access or export all previously finished tasks. Within an assignment or assessment, content is neatly organized into pre-defined sections, the number of which varies depending on teacher customizations.

During the interface development process, numerous considerations emerged. It was essential for the UI to accommodate both grade 6 and grade 12 students. Recognizing that Chromebooks serve as the primary access point for most students, we prioritized designing for this resolution.

Teacher Interface

The teacher interface was twice as extensive as the student interface, encompassing everything available to students plus additional features and tools.

Prototyping

We primarily utilized Sketch3 to craft mockups, serving as developer blueprints. For features with distant deadlines or too large of assumptions, I would pre-design them. If developers were already tackling a feature, I would refine it afterward. We entrusted our developers to make UX decisions, often adopting a "throw clay on the table" approach. This strategy empowered our small team to swiftly advance our designs continuously.

Occasionally, we made alterations as development progressed, but we avoided investing time in updating Sketch files since they weren't the final product and doing so would divert attention from other features. Our reliance on mockups varied depending on the feature's stage in the development cycle; some decisions were easier to make directly in the browser.

Codebase

StudySync's codebase is constantly evolving as new technologies and industry standards emerge. For the majority of my tenure, this product was built on a framework using AngularJS. I used Atom as my primary text editor and pushed code to Bitbucket using Tower. The CSS was built and organized using a modified version of the BEM methodology.

Designers who also assist in coding a product enjoy several advantages. It enables interfaces to be built with implementation in mind, leading to simplified solutions. Moreover, it fosters better communication between designers and developers, as they now share a common language for exchanging ideas and resolving problems.

Project Management

Throughout the development cycle, we conducted extensive experimentation with various task management tools. Ultimately, we settled on Pivotal Tracker due to its feature-rich tools and seamless integration into our existing code deployment process. With Pivotal, we could efficiently organize, prioritize, and assign tasks.

To streamline our workflow, we adopted the practice of prefacing each branch and pull request name with the Pivotal ID, simplifying reference to the original task during reviews.

Accessibility

In 2018, our team initiated a company-wide project to ensure that all systems and content complied with WCAG 2.0 accessibility standards. We collaborated with a third-party auditor to identify and categorize issues, after which we implemented appropriate solutions. This initiative not only enabled our product to meet accessibility standards but also educated our team on best practices for developing accessible systems and content moving forward. As a result of these efforts, we successfully achieved a VPAT (Voluntary Product Accessibility Template) certification allowing us to sell to school districts using these requirements.

Breakout Feature as a Product

SyncBlasts provides reading and writing assignments that present social studies, science and current event topics relevant to students’ lives and their world. This product was developed based on a successful feature inside StudySync. The content produced for SyncBlasts is integrated into both platforms, ensuring synchronization and relevance.

My task was to reimagine the feature format and present existing content without altering its structural core. This involved modernizing the layout, applying independent branding, and elaborating on the newsworthy aspect of the content.