Web Development Immersive

  • Product Management
  • Instructional Design
  • Curriculum Development

  • One of the biggest challenges of the redesign was developing a story behind our curriculum, and making something that fit the demands of a changing industry, sat well with our veteran instructors, and was marketable for potential students.

  • Yours truly, right on the website.

  • The final few months of the project meant literally writing a textbook – every lesson, every lab – in a narrative format any teacher could learn from & use.

  • Phase two of the project meant designing every lesson, lab, and homework in the entire 12 week course. I crafted running themes for each week, and made sure each module had descriptions & learning objectives for instructors.

  • An example of one of the lessons from the new WDI handbook

Over the course of 7 months I led a project to completely redesign the experience of General Assembly’s flagship course, the Web Development Immersive. It’s a 12 week, zero-to-fullstack-developer course, and is GA’s largest classroom revenue machine, but we had been teaching it drastically differently in 14 different markets, with no underlying systems or continuity.

I started by working directly with the Product Manager, and we partnered in creating 2 small instructor conferences to help us decide what most needed doing, and how we could help instructors do it. That led to building a community amongst previously fractured markets, and a multitude of incredible ideas.

I then distilled that down into redesigning the basic units, but in a way GA had never done before – with a story. We’d guide a student through the history of web development, letting them understand first-hand the technical difficulties that led to the modern stack developers are currently using.

  • “Why was Rails invented?”
  • “How did APIs become such a building block of the web?”
  • “Why Rails? Why Node? Why Angular?”
  • “Where do front-end frameworks come from?”

Phase two meant detailing what every week – and every day – would actually look like. That meant actually designing the experience of the course, crafting topical themes that run through each week, and figuring out which technologies, concepts, and lessons were important enough to keep in.

This also meant checking in with a lot of stakeholders; there are 14 different markets around the world, in different timezones, with instructors who would be using this thing. Those were my users, and I set up calls with all of them to get feedback as I was designing.

Finally, phase three was where it needed to be written. Every lesson, lab, and homework needed materials to go with it. I developed templates of what each should look like, and a styleguide for how we would write & design our code.

I then worked closely with an educational expert and an experienced instructor in London to power through each week. Together we tackled writing & teaching:

  • HTML & CSS
  • Basic vanilla JavaScript & jQuery
  • Ruby Fundamentals
  • Sinatra, ActiveRecord, PostgreSQL, and Rails
  • Node.js, MongoDB, and Express APIs
  • Local, Token, and OAuth authentication
  • AngularJS, and a lot more

We wrote more than 110,000 words – a Harry Potter novel’s worth of educational content – and more than 365,000 lines of starter/solution code for both instructors & students to use.

But more importantly, I led the charge to take WDI from an undefined, unstructured course, held together simply by passionate teachers around the world, to a repeatable, teachable process that is currently being rolled out across the board and shaping thousands of new students’ futures.

G'Morning, GA!

  • Interface Design
  • Branding
  • Backend Development
  • Frontend Development

  • This is the main dashboard any staff member will see when they first log in. There's quick access to the most used functions for instructors & producers.

  • This is an alternate calendar view, made for producers to get a high level of info about each day

  • Here we create a new quiz. You can change which day in the top right, though it defaults to today if before 9am, and tomorrow if after 9am. Instructors choose which language they want the code highlighting to be, which also gives us saved data about the categories of questions for the future. You can have as many questions as you need.

  • Students access the quiz by going to the main site. If it's before 9am, they see this page, so everyone starts the quiz at the same time.

  • After 9am, this is what a student sees. A simple question (sometimes with an embedded code snippet), and a code-highlighted spot for their answer. They finish & submit as fast as they can.

  • Once submitted, they see their answer directly next to the suggested answer that an instructor put in when creating the question. This gives students a chance to self-assess and get immediate feedback, while putting as little extra strain on instructors as possible.

  • And of course, there's a little GA wink at the bottom, with an encouraging note.

  • Later in the day, instructors & TAs can go back and grade each quiz. It shows you how many responses there were, lists them by student, and shows both when they started the quiz & how long it took to finish. An instructor grades each question with a 1 - 5 rating, 1 being bottom students & 5 being a top student answer. It saves which instructor rated the answer, in case we need to go back later & ask why.

  • This is an example of what it would look like to check a quiz when a student was absent. Late answers were documented & noted below, absences were documented above so that producers could immediately see who wasn't there today.

  • Here we see an example student profile, with answer ratings compiled over time. This actually proved to be quite a technical challenge to compile the data – I had designed it to track the data so we had it, and it was just a matter of needing more engineering time & resources to make it more efficient & useable.

  • For producers, each student had a calendar on their profile to quickly show their absences. This example doesn't show tardies, but those were visualized, too.

  • Originally, each student had to be added by hand with the form towards the bottom. But obviously that was a huge strain when class sizes were 15 - 30 people. So when producers mentioned that, I added in a feature where they could drop their already-existing producer spreadsheet of student data onto the page, it would parse their names & emails, and fill out form fields for each automatically. It really sped things up.

  • And as an extra tiny detail, since we already knew their names & emails, I pre-populated those fields. It's just one of those things that makes you feel like there was thought put into it, and since this is a student's first experience, I wanted it to feel easy.

  • After clicking the invitation link, they were sent to this page to sign up with an account. I did my best to throw in a little fun to the process, but also describe some classroom expectations up front.

When I joined GA, we’d have an assistant send out Google forms every morning at 9am (which was rarely on time). We’d have to go through a Google spreadsheet with responses, copy the code out to something where we could read it, and then, realistically, do nothing with it. Students never saw the right answers, we didn’t have time to send them any responses.

So when I built GMGA, I knew it had to:

  • Send out quizzes at exactly 9am automatically
  • Mark students absent/late/on time
  • Give students immediate feedback
  • Collect & compile their answers over time, to measure progress

But it was interesting because there were multiple user experiences:

  • Producers needed to see only the high level of student progress & their tardies/absences
  • Instructors needed to create meaningful quizzes & easily grade answers
  • Students needed to only have access to today’s quiz, at 9am, and get immediate feedback about how they did

In a week, I’d built a prototype that let instructors queue up questions (and answers) – so the system could automatically send it out at the right time. Students could only see the questions starting at 9am, and after they submitted their answer, they would see an instructor’s answer next to theirs, so they could immediately see how they did.

Instructors could then see all the answers (and producers could see who was late/absent), and grade each one on a 5 star rating system. Each week in the team meetings, any instructor could load up a particular student’s profile & see a graph of how their ratings had changed over the last 2 weeks.

This system was immediately put into use in our market, and feature requests came pouring in. I worked with instructors on squashing bugs, adding new features, and enhancing the experience.

While GA has since moved away from morning quizzes, designing & building a working prototype in a week was a huge boost to producitivity for the following cohorts, and led to a far better student and staff experience in a very short amount of time.

The League of Moveable Type

  • Business
  • Branding
  • Backend Development
  • Frontend Development

  • The main font page, which shows example images, gives options for downloading, shows details about the creator and background, and counts downloads.

  • The homepage, which lists all the fonts we have in our curated catalogue.

  • An example of one of our long form letter pages – this one to convince you how awesome the newsletter is.

  • Here's some detail on the purchasing options.

  • We have multiple types of accounts – supporters, contributors, purchasers. When you create an account you can contribute somehow.

  • Donations, of course, are one way we keep the lights on, and we have lots of wonderful humans who donate every month.

  • An example of an end of a purchasing flow, where someone purchased all three books.

  • One of the few products we're currently selling, three short e-books written by yours truly, teaching how to navigate around font licensing.

The League of Moveable Type is the first open-source font foundry, and we opened our doors in the beginning of 2009. At the time, it was a product of A Good Company, and just a way to contribute back to the community. My experience with open-source in the development world made me question why there was no such thing in the type community, and I founded & grew it into a much bigger idea.

At this point, it’s a small business, and I’ve been working this year to build it up even more. Our fonts have been used literally billions of times across the web, print, and television, by companies like Forbes, NBCUniversal, Rolling Stone, and even a nice cameo in The Hunger Games. We’ve been written up in places like .net magazine,8faces,HOW magazine, and more.

Between strategic partnerships, custom commissions, some books & workshops by yours truly, and a slew of exciting future projects, we’ve been taking what started as a tiny side project to a real, sustainable business.

The League is most certainly one of the projects I’m most proud of. And though I have an incredible team working with me today, having founded it, designed the identity, written for it, and built the site, audience, functionality, and design from nothing to a resource that designers across the world count on in the first 5 years of it’s existence makes me infinitely proud and continuously excited to see where we can take it.

Lemon Lime™

  • Interface Design
  • Backend Development
  • Frontend Development

  • The existing design for the homepage, rebuilt with a custom CMS underneath

  • An example of the profiles index page, listing out all the clients, with subtle adjustment to increase legibility & visual rhythm

  • Clients now have the ability to log in to their own accounts to make updates whenever they need to

  • Due to legalities in the industry, clients have to pay for each update, so their account is locked until they purchase. Clients can see exactly what they'll get when they do, though, which has increased updates across the board.

  • Clients can unlock the ability to update themselves, whenever they need to, without waiting

  • The order page is simple and easy, without leaving the page, to make the experience seem faster & more fluid

  • When they unlock, they're notified of exactly how long they have for to update their work & double check it.

  • Once unlocked, the interface to upload new photos, delete old photos, change the order, and update their details are all simple, intuitive, and give immediate feedback

Lemon Lime™ is one of my longest-standing clients, a small talent agency – with a twist – in Los Angeles who came to me needing a system for their existing but very under-developed website. Their previous developer had disappeared without a trace, and they needed someone who could pick up the pieces and make it maintainable.

The branding & design needed to stay the same, but there was an opportunity to rethink & rework the underpinnings. Previously hacked together in PHP, each actor’s profile had to be manually created in both the database & on the front-end. I rebuilt using a more modern stack, which let me build in systems for adding & removing clients, updating other content pages to stay current easily, and – most importantly – allowing clients to skip the middleman of waiting for a developer to manually update their pages by having accounts of their own.

By building this new system, we had to grow their visual vocabulary a little and really think through the user experience. Their clients weren’t used to interacting at all with Lemon Lime’s site, and many don’t have much computer experience beyond updating Facebook pages.

Since implementing this new system, Lemon Lime has been able to handle a substantial growth in clientele quickly and without a hitch, and clients have been happy to have the ability to update their profiles with immediate feedback, when it’s most convenient for them. It’s led to a site where the content is updated significantly more frequently, which has boosted traffic and gotten them more business, as well.

moneybox.me

  • Interface Design
  • Branding
  • Business
  • Backend Development
  • Frontend Development

  • The very minimalist homepage. While there was an opportunity to do a more traditional, descriptive landing page, it was an interesting experiment to see how many non-techies converted using something so simple.

  • The more traditional stuff, a landing page whose copy was targeted towards simple, non-technical business owners. Benefits, not features.

  • The reality of how many users joined vs. how many actually upgraded.

  • A simple account page, to update your information and re-install the bookmarklet for free users.

  • While the listing pages were simple, the navigation was intuitive and uniqe. Originally, I had expected these index pages to be used monthly, but analytics told me that users really only used these pages around tax time, to compile a list at the end of the year.

  • Similar to the Sales index page, the data told me this was primarily used once a year for taxes. That gave me the idea to the add the ability to export a spreadsheet – for paid users only – so people could just take it to their accountants.

  • While minimalistic, the receipt metaphor was obvious, and so the individual show pages matched what clicking the bookmarklet looked like – a receipt for your Etsy sale.

  • A very simple dashboard, so an Etsy seller could immediately tell how well they did this month, and quickly compare to previous months. Each dot on the graph gave a tooltip with specific figures for comparison.

moneybox.me started as a simple side project; a gift for my sister, who had recently gotten excited about selling crafts on Etsy.

She had been talking about how she had struggled to figure out how much she was actually making, and how much she was spending on making her crafts. Etsy didn’t have any tools to aggregate sales from a layman’s perspective, and it seemed like an opportunity to build something interesting.

I quickly designed & developed a working prototype, authorizing through Etsy’s API and compiling information. Calculating Paypal & fees was easy, and that let me focus on really making an experience a novice seller would appreciate.

While it was a relatively simple application, and a far cry from a wild success, it was a great experience building an actual business dependent on another’s platform. The Etsy API was frequently changing, and the audience was almost entirely not experts technologically – it meant crafting small features that were targeted to non-techies who were focused on their handmade businesses.

Good Timing™

  • Interface Design
  • Backend Development
  • Frontend Development

  • The homepage, immediately demonstrating how the note-parsing works

An alternative to traditional time-tracking tools, Good Timing™ works simply by understanding notes you take on digital Post-it notes.

You simply make note of what you did each day, and Good Timing™ automatically parses through your text & turns it into real records & data for you. By just writing in a digital scratchpad, where you can be as structured or unstructured as you like, we’ll do the hard part of turning it into useful information.

The prototype was developed using a combination of an API & a custom set of JavaScript components on the frontend. Because I had plans to expand it into client applications on desktop & mobile, I had to make sure the API did the hard work of parsing the natural languge, pulling out project names, & dates & times, and — surprisingly difficult — calculating length of time.

It was a small side project that never quite took off, but I still think the approach is a novel one and hope to expand on it.

A Good Portfolio™

  • Interface Design
  • Branding
  • Business
  • Backend Development
  • Frontend Development

  • The homepage, with a slideshow demonstrating features & benefits of a do-it-yourself portfolio builder.

  • A video walkthrough shows prospective users exactly what they can expect – a simple, 3 step process to creating your first portfolio.

  • The theme park is a place of curated themes to apply to your design, if you don't know HTML & CSS or need a base before customizing.

  • The signup gives two options, with a small discount for prepaying yearly.

  • The first of 3 steps to your portfolio – bulk upload all your images at once, and worry about organizing after.

  • Organizing your portfolio can be simple, too – create groups, drag & drop your images into them. You can add descriptions to both a group and an individual image, for varying levels of complexity.

  • With a handful of important options for easy customizing, you can get away without knowing any HTML & CSS if you want. Scrolling down, there's options for complete control over both.

  • Preview your final product, and you're immediately up & running.

A Good Portfolio™ is my longest-running product. It started back in college, where I was the only one with any web experience; my fellow art students needed help developing their portfolios, and couldn’t afford to pay much. By developing a tool for them to do it themselves – even without any web experience – it would empower them to make their own custom sites, and be a first foray into making a web business for myself.

While this is an old project, it was also the beginning of my love for designing products. Before user experience was a category of design, it was still important for designers to empathasize and understand what a user needs. In this instance, for artists with no web experience, it was crucial for a user to know how to move through creating a portfolio, and for the end product to look good without any more customization than uploading their logo.

The other important piece with this project is that it’s shown me the necessity of maintenance. An application can’t live entirely on it’s own, it needs support. Technical support, customer support – an application that’s been around more than a few years is dependent on a longer term perspective than just building & launching.