September 2020 - December 2020

Designing Portfolio Experiences for Aspiring Engineers

Helping learners build job-ready confidence through authentic, portfolio-worthy coding projects

Project Summary

An example of a Career Path Syllabus Page with a new Portfolio Project

Codecademy helps millions of learners develop coding skills through interactive, self-paced courses. User research revealed a gap in the learning experience: while learners were successfully building coding skills, many finished courses without projects they felt confident including in a professional portfolio.

To address this, we created a new content type that guides learners through building portfolio-ready projects as part of their coursework. The experience helps bridge the gap between learning concepts and demonstrating real-world skills, giving learners tangible work they can showcase to employers.

My Role

Role: Product Designer

Timeline: ~ 4 months

Team: Product Manager, Curriculum Developer, 6 Engineers, UX Researcher

Responsibilities: End-to-end UX design, user research synthesis, interaction design, prototyping, usability testing, and design handoff.

My Process

Research Phase

Insights from user interviews

To understand how Codecademy could better support learners transitioning from coursework to real-world development, I combined user research, competitive analysis, and internal discovery.

User Interviews

I interviewed learners to understand what they needed to feel prepared for software engineering roles. Five themes emerged:

  • Learners wanted to build practical, job-ready skills.

  • They were excited by opportunities to solve open-ended, creative coding challenges.

  • They needed more structure to tackle portfolio-worthy projects, such as clear requirements and success criteria.

  • They expected easy access to learning resources when they got stuck.

  • They valued opportunities to receive feedback on their work.

Competitive Audit

I analyzed learning platforms with open-ended coding projects to identify patterns that supported learner success. Common features included:

  • Easy access to previously learned course content while working on projects.

  • Clearly defined project requirements, often framed as user stories.

  • Projects broken into manageable stages.

  • Optional hints and guidance throughout the coding experience.

Content Audit

To determine where this experience would fit within Codecademy's ecosystem, I audited our existing content types (these are things like lessons, videos, articles, projects, etc) to identify opportunities for a new content format without duplicating existing functionality.

Internal Brainstorming

I facilitated a workshop with Codecademy's software engineers to better understand the skills they wished they had developed before entering the workforce. Beyond writing code, engineers emphasized the importance of learning professional workflows, including setting up projects from scratch, breaking work into tasks, writing Jira tickets, working in an IDE, and using Git and GitHub.

Insights from competitive audit of freeCodeCamp

Insights from a brainstorming session with engineers

Ideation Phase

An excerpt from the user journey

User Journey Mapping
Working closely with the Curriculum team, I mapped the end-to-end experience of completing a portfolio project, from starting the project to sharing the finished work. We used this exercise to identify moments where learners were likely to feel uncertain, overwhelmed, or blocked.

Rather than focusing only on the actions learners would take, I documented their mindset at each step. This helped us uncover questions that weren't explicitly addressed by the curriculum and identify opportunities to provide guidance without removing the challenge of building a project independently.

For example, when learners reached the step of downloading Visual Studio Code, we anticipated questions like:

  • What is Visual Studio Code, and why do I need it?

  • Can I complete this project in the browser instead?

  • My friend's editor looks different… does that matter

Mapping these moments helped us determine where learners would benefit from contextual explanations, resources, or optional guidance. The resulting journey became a blueprint for designing a project experience that balanced independence with just-in-time support.

Design Phase

Portfolio Project Instruction Delivery Explorations

Designing a New Learning Experience

Unlike traditional Codecademy lessons, portfolio projects couldn't rely on our in-browser IDE to verify code or provide step-by-step feedback. Instead, learners would build projects from scratch in their own development environment, making the experience more authentic, but also requiring a new way to guide them through open-ended work.

I explored several interaction models for presenting project instructions and helping learners track their progress. After evaluating multiple concepts, we landed on a Kanban-style task board. This approach gave learners a clear sense of progress while introducing them to a workflow commonly used by software engineering teams.

Creating Moments of Delight

To make progress feel rewarding, I partnered with an engineer to introduce subtle animations throughout the experience. Small interactions, like an animated checkmark when a task was completed, provided positive reinforcement without distracting from the work.

Onboarding Learners

Because portfolio projects introduced a fundamentally different learning experience, we needed to set expectations before learners began. Rather than requiring extensive documentation, I designed a lightweight onboarding flow that introduced:

  • What portfolio projects are

  • How they differ from traditional Codecademy lessons

  • Why sharing work and seeking peer feedback is an important part of the learning process

I collaborated with an illustrator to create visuals that reinforced these concepts and partnered with a content designer to develop concise instructional copy. Recognizing that learners might need a refresher later, we also made the onboarding content accessible throughout the experience.

Iteration

Throughout the design process, I shared work in weekly design critiques, incorporating feedback from peers to refine the interaction model, onboarding experience, and overall usability before development.

Layout exploration that is more in line with other Codecademy lessons

Celebratory checkmark animation

Onboarding Illustration Explorations

Prototyping Phase

Early prototype of the kanban board

Interactive Prototypes
I created a series of high-fidelity, interactive Figma prototypes to test different approaches to the portfolio project experience before development. These prototypes allowed us to evaluate navigation, task management, and onboarding while iterating quickly based on learner feedback.

Usability Testing
I recruited Codecademy learners through FullStory and conducted remote usability tests over Zoom to evaluate the proposed experience. While learners responded positively to the concept of portfolio projects, testing uncovered several usability issues:

  • Learners needed more context before beginning their first portfolio project.

  • Color coding did not meaningfully improve navigation or understanding.

  • Most learners were unfamiliar with Kanban boards and required additional guidance.

  • Many participants didn't realize task cards could be opened for more information or dragged between columns.

These findings led us to strengthen the onboarding experience, simplify the visual design, and add clearer affordances to help learners understand how to interact with the task board.

Later prototype of the kanban board with updated card design

Support Phase

Partnering Through Development
I worked closely with engineers throughout implementation to answer questions, refine interactions, and ensure the final experience matched the design intent. After launch, I shared the project with the broader company, presenting the design process, user research, and final solution during Demo Day.

Measuring Success
Following launch, I partnered with the Data Science team to review product metrics and continued conducting weekly user interviews to understand how portfolio projects were affecting the learner experience.

The research showed that portfolio projects were accomplishing their primary goal: helping learners feel more prepared to apply their skills outside the classroom.

Learners consistently reported increased confidence in their coding abilities and felt more job-ready after completing a portfolio project. One learner shared:

"With more time and a few updates, this project may be the one that gets me a job in the future."

Despite describing the projects as challenging, learners also found them especially rewarding. As another participant put it:

"This was the most challenging and rewarding project I've done so far."

Beyond individual feedback, we also observed more learners sharing their portfolio projects on the Codecademy Forums and providing peer feedback—encouraging the kind of collaborative learning community we had hoped to foster.

User flow diagram used to help engineers understand the experience

Insights & Impact

Real-world practice builds confidence

A career track syllabus page with a new, added portfolio project

Problem: Learners completed coding courses with strong foundational knowledge but lacked confidence applying their skills to independent, real-world projects they could showcase to employers.

Solution: To help learners feel more confident and job-ready, we designed a new portfolio project experience that combined real development workflows with structured guidance, helping learners transition from guided lessons to independent software development.

Outcome: Learners reported feeling more confident and job-ready, while increased project sharing and peer feedback demonstrated stronger engagement beyond the classroom.

Empowering learners boosts their confidence

Codecademy’s Community page

Problem: Codecademy's traditional lessons are highly guided, making the transition to open-ended, portfolio-worthy projects challenging. In the real world, engineers frequently need to connect and collaborate with one another to solve issues with their code or work. 

Solution: We leveraged our Codecademy community and integrated sharing portfolio project work with the community and providing feedback to the community into the portfolio project curriculum. 

Outcome: Learners started sharing their work publicly, asking for feedback, and engaging with the community in ways they hadn't before, which seemed to also increase their confidence!

Teach workflows, not just skills

An example of working in an IDE

Problem: Learners were mastering coding concepts but had little exposure to the tools, workflows, and ways of thinking used by professional software engineers.

Solution: We designed portfolio projects around authentic development practices—working in an IDE, using Git and GitHub, and organizing work with a Kanban-style task board.

Outcome: Learners gained experience with professional workflows alongside technical skills, helping them feel more prepared for real-world software development.

Visual Examples

  • Portfolio Projects Onboarding Screen - What is a Portfolio Project?

  • Portfolio Projects Onboarding Screen - How do Portfolio Projects work?

  • Project Prompt Page

  • Kanban Explainer Modal

  • Portfolio Projects Main Screen - Kanban Board

  • Kanban Project Card Open

  • Portfolio Projects Main Screen - with all tasks complete

  • Feedback Screen encouraging Codecademy Community engagement

Final Thoughts

Main Portfolio Projects Screen

This project reinforced that meaningful product innovation doesn't always come from adding features. By introducing portfolio projects, we expanded what learners could accomplish within Codecademy, helping them bridge the gap between guided coursework and real-world software development.

It also reinforced that the best learning experiences don't eliminate struggle, but instead, they make that struggle productive. By providing just enough structure, we helped learners stay motivated through challenging, open-ended work without prescribing every step.

Finally, the project underscored the value of early, cross-functional collaboration. Working closely with engineering, curriculum, and research allowed us to move quickly, navigate tradeoffs, and deliver a stronger product within an ambitious timeline.

Looking ahead, I'd love to explore how authentic, portfolio-worthy work can be integrated throughout the learning journey to further improve learner confidence, motivation, and long-term success.

next project →

creating a hands-on coding experience for kids