Sam Linville


How will students develop programming skills while improving core teamwork skills in the classroom?

Product Demo

What does Merge do?

Merge is a flipped classroom learning environment that uses daily collaborative challenge labs to teach students to apply the programming concepts they learned for homework the night before. In addition to cementing their mastery of the curriculum, Merge teaches students to work together towards a common goal in a well-structured development process.

The Process

Merge began as a way to reimagine the textbook and classroom experience for the digital age. Working from a base lesson (Teaching Javascript functions), I developed a digital curriculum that was interactive, collaborative, and roughly based on AGILE development processes.

The integration of an AGILE workflow was important to the concept because it gives high-school aged teens the vocabulary and knowledge to contribute to software teams without needing to learn lots of jargon– theoretically, they could contribute to an open source project on Github as soon as they've mastered the concepts of programming, having already learned the software development process.

An early iteration of Merge, created in landscape orientation and based on Material Design.
Wireframes created for Round One of user testing.
Wireframe chart for the final iteration of Merge.
Logo ideation for the Merge brand.

The Challenge

Each day in class, students complete a coding challenge in teams. This challenge is broken up into discrete phases, which enables students to stay on track and organized throughout each step of the project.

The five phases of software development in Merge's daily challenge format.
Students are responsible for dividing and delegating code-writing into manageable tasks for one or two members of a team to complete.
Students can drag and drop blocks of code in a GUI programming environment, or dictate logic statements by voice.

The Brand

Merge's brand is based on three values: it is rigorous, intuitive, and crafted. The color palette is intentional and simple, and the typography is clean and out-of-the-way. Even the logo is designed to impart Merge's central feature: a collaborative process that makes learning to code easy and fun.

The Merge logo is crafted with concept in mind. It’s a play off of Merge’s process diagram, which charts the divergence and convergence of a team over the course of a daily challenge– where they collaborate, where they break off on their own, and where they come back together to connect the parts and create a final product.
Merge uses three main colors in its visual brand– blue, black, and white. These colors are used intentionally in the UI to convey context. Blue is used in interactive, group-centered features. Black is used when Merge is giving guidance, instruction, or feedback. White–and its accompanying light gray shades–are used in work modes– when it’s time to get down to business!
As an alternative to using a range of weights in the main UI, Merge uses color and size to distinguish hierarchy while still displaying a single typeface weight and style. San Francisco is Apple’s bespoke UI typeface. Clean, professional, and optimized for display on Apple screens, this typeface provided the perfect choice for Merge’s UI, keeping in mind the brand attributes: Rigorous, Intuitive, and Crafted.

Producing a Video

The final deliverable for the project was a product walkthrough video. This video required its own set of processes and procedures as well, so I've included some of my process work from this phase of the project, including storyboarding and asset creation.

In order to work efficiently, I created a master storyboard for the video that let me plan out each clip and make sure I could produce all of the necessary assets before beginning the video editing phase.
I created a list of each animated UI clip that would need to be created for the video, and used Principle to create these animations individually, rather than creating one giant interactive prototype.
Created by Sam Linville.