Klare

Local Exercises

Treehouse students needed a way to complete work using their own IDEs and code editors and we needed to check that work to identify if they were successfully learning content.

Context

This project started off brainstorming the most effective and easiest ways a student would be able to sync their work with Treehouse. Through a Techdegree program, we would give students code challenges they would need to complete using code editors or IDEs on their computer. This is especially important for iOS and Java tracks, as the level of challenges was more than simply completing a code string in browser. We also wanted to give students the ability to use code checking features available in their IDEs and code editors. This would help them get more comfortable with writing code like a professional.

We ultimately decided to go with an experience that we could develop quickly and iterate on later. This decision was made so we could easily test the effectiveness of having students complete exercises on their computers and understand how that fit within our learning experience. To make this easy, we decided to let users upload their code and we would run several tests on it to check if it passed or failed, then give students the proper feedback in either scenerio.

Userflows

I started out by designing a userflow so my entire time was on the same page in regards to how our students would go about completing the projects.

Userflow

Wireframes

I started off by creating wireframe prototypes in code using Treehouse's existing pattern library. Following the layout of our previous code challenges, I created screens that followed the userflow I had laid out and my team agreed upon. This made it easier for the developers I was working with to start in on integrating the flow and building out the experience while I was refining visual designs.

Wireframes
Wireframes
Wireframes
Wireframes

Visual Design

Refining the UI

After my team further discussed the wireframe and flow, I refined the layout and visual designs of the screens, moving the primary actions to the top in a centralized area and adding feedback and tips to create context for students around the experience.

Visual designs
Visual designs
Visual designs
Visual designs
Visual designs
Visual designs

Creating the Pinata

For the first iteration of local exerices, we realized we would have a period of time that the uploaded code would need to be run through several tests. Since this would take some time, and we weren't quite sure how long, I knew that students would need some sort of feedback to indicate tests were still running smoothly.

Instead of creating a loading animation or progress bar, I decided to make the experience more interactive and give sudents something fun to do while they waited, hence the pinata. Students could interact with the pinata and it would serve as a little 'easter egg' to add delight to an otherwise mundane, non-user focused part of the experience.

Pinata

I illustrated the pinata in Adobe Illustrator before exporting it to svg. From there, I experimented in Codepen with Greensock's tweening library to animate it in a back and forth swinging motion . From there I added click events and animated the eyes rolling and the pinata swinging even further up and away based on how far from the center a person clicked. See Codepen experiement.