Case Study: demoday.ninja

Into the world of unaccredited coding bootcamps


BACKGROUND

During the summer and fall of 2015, I had the opportunity to attend Portland Code School. I participated in a 12-week Full Stack JavaScript course. The experience was great, and I learned a ton about web development!

As has become Portland tech lore, our school was shut down* just as my class was beginning our month-long capstone projects. Because of our awesome community, my classmates & our instructors continued with our work*. After a month of fixing bugs, my team unveiled our project at Demo Night.

I was part of a three person group. Our original project concept was along the lines of “Portland Code School Student Profiles.” When the school closed, we were forced to make a slight pivot. However, the ultimate scope of our project was ideal. We were able to create a web app for our classmates to showcase their work.

*See links in the “footnotes” section at the bottom of this article.


PROJECT OVERVIEW

The Problem: Information about our cohort and our projects is fragmented, without a centralized directory.

Our Solution: Design & build a “digital brochure” for Demo Night.

My Roles: Product Design Lead, Front-End Lead


THE USERS

  1. Our classmates
  2. Demo Night attendees

PHASE 1: RESEARCH & IDEATION

By choosing our classmates as our primary user group, we had the benefit of a rapid feedback loop. We took advantage of this throughout the project.

We searched the web for examples of well-designed student profile sites. We took the most inspiration from General Assemb.ly’s alumni profiles.

Skills: comparative analysis, user interviews

Tools: surveys, Google Docs, Post-it Notes


PHASE 2: DESIGN & TEST

I built several generations of lo-fidelity prototypes, and made extensive use of Invision’s commenting functionality to solicit feedback from my classmates. Our team had a number of long discussions about how our web app should look and behave.

Skills: site map, user stories, wireframes, interactive prototyping

Tools: pen & paper, Sketch, InVision


PHASE 3: BUILD & TEST

As our designs began to take shape, I transitioned to the roll of Product Design to Front-End Developer. I used Backbone.js as the MVC, and used a modified version of Twitter Bootstrap to style the UI. According to GitHub, I had a 2:1 ration of code written to code deleted.

The Iterative Process

Skill: web development

Tools: Node.js, Backbone.js, GitHub


PHASE 4: GRADUAL ONBOARDING & ITERATION

From the beginning, we knew that our project was going to have bugs. So, we designed our user-onboarding strategy to allow for that. We initially deployed with a “concierge MVP” for 3–5 users. As we fixed bugs and gradually rolled out additional features, we slowly added users. This allowed us to iterate on the product with a slow trickle of improvements.

gradual, incremental rollout

Skills: bug fixing, product iteration, UI refinements, usability testing

Tools: GitHub


POSTMORTEM

I always aim to build real products for real people. So when we finally held our Demo Night event, the best validation that I received was when I noticed attendees using our product on their smartphones.

Please checkout the live web app at DemoDay.ninja !

Also checkout our Github repo.


FOOTNOTES

Here’s the info about how Portland Code School was shut down, and more importantly, how my cohort subsequently turned lemons into lemonade.