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.

Like what you read? Give Pat Harry a round of applause.

From a quick cheer to a standing ovation, clap to show how much you enjoyed this story.