Lattice is a Computer Science(CS) education platform for grades 7-12 that promotes experimentation and a focus on process. With interactive worksheets and visual version trees, every step of the student’s process is stored and visualized on the webpage providing easy documentation and the freedom to experiment. It was my ITP thesis and is now a continuing project that I'm working on with Regina Vetka and Mathura Govindarajan.

After assisting in a CS class for two years and working with the Software Engineering Program I wanted to build a tool for my thesis that would empower teachers to teach CS, and teach it in a way that promotes iterative processes, design thinking, and creative problem solving.  

By 8th grade, our CS students were graduating from absolute beginner tools like Scratch and Microbits and entering the world of web development, javascript, python and arduino. As the tools and content became more complex, so did the process of documenting work and supporting the iterative design process. It's hard to promote project based learning when teachers have no way to consolidate all aspects of their lessons and have no clear window into the student’s process. My goal for this platform was to provide a way for teachers to create interactive CS worksheets and for students to work in a framework that mirrors our natural creative process which is not linear, but a web of trials and errors.

Initial Goals for Functionality  

• A platform that makes it easy to create, manage and share content for CS classes.

• A learning management system built to easily share lessons with the class and review student work.

• A framework for design thinking and iterative processes that includes a version tree in the student view. This keeps  track of their process allowing them to experiment freely and backtrack when necessary.

• An easy way for students to build portfolios of their work which can be maintained throughout their careers.

Phase 1: Rapid Prototyping

The initial development of this platform occurred over the 14 weeks of my thesis class. Building a working prototype in this timeframe required quick user research, design, learning web development, building a working product, and user testing. 

Mockup:

The sketch and inVision prototypes included the basic functionality for the document pages which included the ability to add components to a page and store versions into the sidebar with a save button. 

User Research:

Having only worked in one CS classroom, I didn't know enough about what the needs of different CS teachers might be. I interviewed a few more teachers from the Software Engineering Program and got a sense of how they structured their classrooms, managed student content, and what their pain points are.

Conclusions: 

• Managing classroom content for CS is complex due to the multiplicity and complexity of tools required.

• Teachers would often avoid teaching new Units to avoid adjusting their students to a new interface and a new classroom flow. 

• CS teachers come from different content areas and are usually learning this content along with their students leading to intense vulnerability in the classroom. 

• Documentation is important to teachers but requires more time than they have. 

Development

This platform requires that the state of the page be stored  dynamically. It is currently being built in React.js but having had no prior experience with web development and just a few weeks to learn and build, it was built using HTML, CSS, JS, node.js, express and Mongo for the database. 

Objects can be dynamically added to the page and when the user presses save, the array of objects and their contents are stored in the database and reloaded to the page when the associated version is pressed in the sidebar. The editors are running with codemirror which makes it easy to write code in different languages in the browser with proper syntax highlighting. 

Prototype:

After some initial user research research with the mockups, the prototype was built with a teacher's view to set up worksheets and a student view with version control to complete them. This made the interface less confusing and less cluttered. 

User Testing :

Our class was learning HTML and CSS at the time so I built a worksheet for a day's lesson on this platform and tested it in the classroom. The students were most excited by the idea of not losing their work. They are encouraged to experiment but often when they do their experiment is unsuccessful and they lose their prior attempt. They don't want to duplicated files so this simplified version control encouraged them to safely try new things. 

Phase 2:

This is a continuing project that I'm working on with Regina Vetka and Mathura Govindarajan. 

User Research: 

The months we spent focusing on user research and paper prototyping conveniently coincided with SEP professional developments which gave us great access to many CS teachers with a range of backgrounds and levels of experience. We conducted interviews with 10 different teachers, consolidated our research with charts and user personas and made decisions for our MVP. 

Prototyping :

Our initial prototypes were basic wireframes made in Illustrator and printed out for users to test. As worked out details we have transferred these wireframes to inVision and then Webflow.  We are currently in this process of design and development while continuously working with teachers to improve our designs.