ReskillUSA + Codecademy Labs
How we built two brands in two weeks
Codecademy makes it easy for anyone, anywhere to learn how to code. Our online platform is used by millions around the world, who are interested in building programming skills and ultimately getting a tech job. During the past two years, many institutions have joined this movement offering a variety of courses and methodologies. Yet, this important shift is still far from bridging the gap between technical education and employment.
So in October 2014, we decided to set in motion a nation-wide workforce initiative, comprised of many of our partners, such as Flatiron School, DevBootcamp, Sabio.la, Grand Circus, Wyncode, and Thinkful. This coalition of educational providers will live under the umbrella name of ReskillUSA.com, with the primary aspiration of connecting students with accessible education programs and employers across the nation. As part of this initiative, Codecademy is also venturing into in-person classes, fusing our online content with experienced teaching assistants in a real-world context.
From the start, the idea was immensely appealing and encouraging. However, there was a catch. The grand plan would have to come together in just two weeks. The design challenge was particularly difficult. We had to create two new brands—ReskillUSA and Codecademy Labs (our in-person class venture)—, a main landing page for ReskillUSA, and multiple pages on Codecademy.com to kick the new sub-brand off the ground. The following paragraphs will talk in detail on how our design team—Andrés Iga, Conor McGlauflin, Ramy Majouji, and myself—tackled this challenge. It will not cover the immensely intense logistical process of gathering all these partners across the country, nor the critical work in implementing all final pieces.
Phase 1
North star (wireframes)
The first thing we did, even without any defined content nor finalized partnership agreements, was to quickly mockup how the main landing page for ReskillUSA.com could be like. It’s not an easy design challenge, since most, if not all the pieces you have to work with, are completely unspecified. This is when a UX designer needs to put on several hats — strategist, copywriter, planner—and roll with their intuition. It’s crucial to put something in front of the team really fast, to generate discussion, create ideas, and help focus on the key message and goal.
Phase 2
Brand elements (logo/color/type)
ReskillUSA
While we were speedily iterating on the wireframes, we started sketching our proposals for the ReskillUSA brand. This was quite a pressing undertaking since a large number of collateral material was waiting for this over-arching direction. We tried various concepts dealing with notions of movement, change, and shift, as well as more traditional badge metaphors (as you can see below). In the end, we landed on a solution that employs the letter “R” from “Reskill” overlaying a blueprint sheet, which conveys the idea of planning or delineating your future aspirations. A small detail on the final mark is an outer circlet of “0"s and “1"s that accurately translates “ReskillUSA” into binary code.
Codecademy Labs
As explained before, together with the ReskillUSA initiative, Codecademy had to create a sub-brand that focused on a new direction for the company—teaching users in-person, in various physical locations across the country. At the early stages of development we were considering the name Codecademy Offline for this new venture. However, we soon realized that “offline” could have some negative connotations, such as notions of disconnecting, decoupling, or shutting down. Plus, many of our in-person classes still have a central online component, which could be misleading if we were to use the word “offline”. After a few quick brainstorms, we decided to go with Codecademy Labs, a name that’s true to the empirical, experimental nature of our in-person classes.
Phase 3
Putting it all together
In less than a week we went from an idea into a polished website, which was continually being tweaked and augmented. You can see the final result live on ReskillUSA.com. In addition to the branding effort and the landing page design, we also had to build and update a set of pages across Codecademy.com to facilitate registration, browsing and consumption of our new content offering: Codecademy Labs. We also had to understand how Codecademy Labs could fit under our main product, and the necessary flow for users coming from the ReskillUSA.com website.
We’re all excited with the recent release of ReskillUSA and how it might grow in the future. This is one of the many things currently brewing at Codecademy. Want to know more about our design projects? We’re hiring! Send me an email or follow me at @mslima.
