Taking skills education from campus to digital

It was late spring, and Ivan Cestero had summer on his mind. But he wasn’t dreaming of beach vacations.

Ivan runs strategic partnerships and career-connected learning at Portal, an education nonprofit based in Los Angeles. This time of year always matters for students. This year it also mattered for Portal’s team: the organization was at a turning point.

Portal was pivoting away from ‘micro campuses’ on the premises of its partner companies to something more fluid and scalable: licensing its peer-to-peer curriculum and approach to other organizations, mainly schools and nonprofits.

Sounds simple? Perhaps. But, as with any startup in pivot mode, it was definitely not easy. To help with this new chapter, Ivan reached out to us. It wasn’t the first time we’d crossed paths.

How we met

A year earlier, Howard had joined a Slack channel called ‘Future of Higher Education’. After he posted an intro in #introductions, a DM arrived from Ivan.

They soon got together for a chat that covered not just education but electronic music (techno, prog house, drum & bass) and the club scenes in London, New York and Budapest.

At the time Ivan was working at another EdTech company. He kept in touch, catching up every couple of months. When he started at Portal, he asked if Wavetable could contribute to a new project.

Design challenges with students

‘Portal Consults’ were a series of immersive design challenges Portal ran with local and global industry partners. Working from custom briefs, student teams used design thinking and entrepreneurship tools to develop and present solutions, documenting their process along the way.

Alongside partners like Snap, Belkin and Carnegie Mellon University, we co-created a brief linking fast fashion and our Edutainment 3.0 trend report, and set a student team to work on it. The full case study has the rundown.

From Consults to Cards

Another Portal Consults project was called ‘Portal Cards’. Its student team worked with Carnegie Mellon University on new ways to make student skills more accessible and legible. They did it by creating digital artifacts, a bit like interactive baseball cards.

Each Card focused on one skill and held prompts, questions, activities and other content. The goal: get a student thinking about that skill and how it relates to their own life, then go out and explore it, and share their work with peers and teachers for feedback.

The students’ concept was good, but it needed a few iterations to work in a real setting. Ivan also had his own prototype of Cards, with a more detailed taxonomy (the set of fields for each skill). It was built in Google Slides, and although it worked with Portal’s Google Classroom setup, it was flat and lacked design polish.

Ivan sensed something valuable in both concepts and wanted to build on them. He also knew he wanted:

• to move away from Google Slides and Docs, and
• Portal to have its own digital products to share with students in other schools.

Cards was to be the first of these products. Students would use the Cards for self-reflection and goal setting, then later use a dedicated digital platform to upload all their work.

That was a big challenge. How do you tackle it well, and who has the right blend of expertise to help? Which brings us back to late spring, and an email arriving in Howard’s inbox.

The brief

Ivan had two big goals for this first version of Portal Cards, and two constraints to work within.

1. Goal 1Interactive, exciting CardsText, images, design and mixed media. (As it happens, they also liked Wavetable’s brand.)
2. Goal 2A digital homeAn app students use for the Cards activity, with room for their future work.
3. Constraint 1Launch and learnThis couldn’t take months and months to build.
4. Constraint 2Do more with lessLike many organizations, Portal had to be smart with its budget.

The team

Three of us worked on it: Howard (project lead), Fer (strategy and LX design) and Dani (branding and digital design).

Portal also enlisted four of its students as ‘Micro Interns’. They were paid for the project and each worked with us for around 6 hours a week. That gave us extra hands, but we had to adjust our workflow so they could join in without getting confused or overwhelmed.

What we agreed to make

We first agreed to do two things:

1. 10 digital Cards with new creative, design and copy, each about one skill
2. User flows, wireframes and initial UI for the digital platform, ready for Portal to lead the developer build

That first proposal assumed custom development. But building a platform from scratch could become an enormous undertaking, full of risk and assumptions.

After some discussion, we settled on an off-the-shelf product. We also knew a regular LMS (learning management system) wouldn’t do the job: they were too bulky for what we wanted. Luckily, Fer had something else in mind (more on that below). With that, and a list of other scope items we won’t bore you with, we got to work.

How the build ran

The build had two phases, Mapping and Production, each made of a handful of smaller projects, and ended with a handover.

Phase 1: Mapping

Choosing the skills

For this first version, we based the content on the ‘Durable Skills’ framework from fellow nonprofit America Succeeds. We liked it immediately, not least because it beats the term ‘soft skills’. Its taxonomy has 100 skills, each chosen as crucial for success in the changing world of work.

In an era when technical skills are evolving at an unprecedented pace, there is an important set of durable ‘soft skills’ that last a lifetime. Durable Skills include a combination of how you use what you know – skills like critical thinking, communication, collaboration, and creativity – as well as character skills like fortitude, growth mindset, and leadership.

America Succeeds

We couldn’t build learning paths and content for all 100, so we agreed to focus on 10. The Portal team chose two skills from the outer wheel, then 5 of the 10 related skills for each. To avoid naming confusion, we called these ‘main’ skills and ‘sub’ skills.

Main skill 1: Growth Mindset. Sub-skills: Action Oriented + Proactivity, Entrepreneurship, Goal Oriented, Resourcefulness, Self-sufficiency.

Main skill 2: Communication. Sub-skills: Written, Verbal, Presentations + Public Speaking, Social Media, Negotiation.

This looked straightforward, but we needed to stress-test these ‘skills’. What is ‘Social Media’ as a skill? How do we define being self-sufficient?

Clarifying that took time and thought. In hindsight, we should have made them even more specific: some of the vagueness in the taxonomy caused problems later, when we curated the content.

The taxonomy, in three acts

Portal already had a concept for the Cards taxonomy. The taxonomy is different from the skills themselves: it’s the series of steps and prompts needed to make a Card on any skill.

We liked its design but saw room to improve it, so Fer spent the first week mapping other options on a Whimsical board, using the original as a guide.

Fer worked out a new 5-step process, which we then refined into a three-act structure. That added steps overall (9), but the three acts gave us two things:

1. room to build a narrative
2. smaller pieces of 3 steps each, instead of one 5-step process

We didn’t expect a student to tackle a whole Card in one go (attention spans, hello!), so 3 steps at a time felt more realistic and engaging.

The revised taxonomy was key. It was how the Cards would actually work, and the framework for curating content around each one. But first there was other work to do.

Choosing the platform

With the project still at pilot stage, an existing platform was the right choice, and a chance to build on technology that already worked.

We wanted flexibility, reliability and excitement, plus an easy build and easy management. Part of our ongoing work is keeping up with the latest tools for creativity, innovation, community and education, and we keep a growing list of benchmarks.

Given the project’s needs, especially users asking for a social side that would grow a lively community, Circle was the best fit.

Working with micro interns

We mentioned adjusting our workflow for four interns. Here’s what we learned:

• Layer in the tools. Not everyone had used Notion. We had full databases plus nested pages, a steep learning curve for newcomers.
• Check in regularly. The brief can drift in different directions, and the intern team needed managing accordingly.
• Ask twice, ask differently. They don’t always like to ask questions, which is understandable. Ask on a call, send an email, follow up.
• Build in slack. With a team of three, we didn’t have tons of bandwidth.
• It’s summer! This was an internship, but it was summer, and remote. That made some things harder to stick.

Phase 2: Production

Brand kit and design system

We’ll be honest: a new brand wasn’t really in the brief. But we sensed it was needed. This had to feel fresh, and like something students would want to use.

Howard’s mind went straight to Citymapper, a city navigation app with a simple, engaging squad of mascots, one for each city it covers. Anime felt like a good reference too, as did Duolingo’s owl. It should feel like a mini adventure, with a mascot as the guide.

Dani started on some character ideas:

The first batch felt a bit too much like school, so later versions leaned more fun and friendly:

Around this time, Portal had finished the first version of its own rebrand. We brought our palette in line with it and added some secondary colors. We also made a simple type-based logo that would work across many formats, especially course content.

With the palette, logo, mascot and first guidelines in place, Dani did three more things:

1. A set of badges, one for each skill
2. The other assets for the Circle space, especially to lift text-heavy material
3. A simple design system in Figma, so Portal teachers and students could make future assets themselves

A production system for Cards

To move fast, scale and iterate quickly, we built a Card production system from a series of Notion databases. It gave us three things:

• A shared workspace. Everyone could see and work in it in real time, with no version-control hassle.
• Room to grow. We built for the 10 skills, but set the system up for future skills and uses.
• Project tracking. Notion’s tags and status fields make it good for managing a project.

Content curation

Each Card needed material to work with. The taxonomy called for several formats: videos, audio, creative prompts, activities and more. With 10 skills and 9 steps each, that was 90 individual ‘pages’ to build.

We’d started gathering ideas as soon as the skills and taxonomy were set, but the production system made the work much faster and better. We did three things:

• Narrative. Each skill got a ‘master’ and a ‘local’ narrative, to make it feel real, relevant and connected to students’ everyday lives, instead of just telling them ‘goal setting is important’.
• Curation. The interns gathered ideas for three of the steps in each Card, and our team took the rest. Everything, from text to video links to prompts and activities, went into the Notion databases and was tagged. As mentioned, some skills weren’t as well defined as we’d have liked, which made this harder than hoped.
• Edits. Any content creator knows the edit is where it comes together. We did light edits in Notion, then most of the editing directly in Circle, where it was much easier to judge what working through a Card felt like. That cost us some version control, but with the product changing fast it was a worthwhile tradeoff.

Bringing it together in Circle

With all the elements ready (skills, content, brand and platform), they needed bringing together in Circle as one finished product.

First, we researched how far Circle could be customized, and built assets to match. Then, in our Figma workspace with its templates for branded assets, we made assets for each space in Circle. We did a couple of rounds on the structure and UX of the spaces, balancing a setup that could scale with one simple enough for launch.

The branded assets went into Circle so the community had character and stayed on brand: color palettes for different areas, logos and cover photos for each Card, and images for each summary post. And then: build, test, iterate, tweak, test, iterate, test, done.

The handover

Nearly there, but not quite. We focus on the whole experience of a product or program from end to end, and that applies to our own workflow too.

The building blocks for the launch version were done, but Portal needed the deliverables in a form it could run with right away. Fer built a Delivery Space in Notion in three sections, each with text and video explainers and links to the key assets and tools.

What Portal got

A community learning space where students can explore and work through ten skills, and create and remix their own skill Cards to share with peers, teachers and employers. All of it with no code, from concept to delivery in under 8 weeks.

• A three-act structure. Each skill became a story in three acts, each act a series of short chapters with mixed-media prompts and scenarios tied to students’ own lives.
• An open brand kit. Built from scratch in Figma, with guidelines and templates so anyone on the team, students included, can make new assets.
• A no-code platform. Custom tech wouldn’t answer the brief. We set up the community app Circle as one place for content, Card customization and community.
• Co-creation. Four students joined as Micro Interns and worked directly with us. They used a real production process to create content, shaped the brand and road-tested the product.
• A production system. Notion databases holding all the content, tagged and trackable, with plenty of room for automation.
• A playbook. Walkthroughs with Loom videos on how to extend the experience and its content.

What’s next

We made a few recommendations for where to go next:

• Video guides. Intro videos for the Circle community, and videos in each space (Growth Mindset, Communication), hosted by the Portal team, students or both, to give context and make it relatable.
• Spaces. Post spaces that crowdsource resources, ideas and improvements from the community.
• Events. Events with special guests that members RSVP to in Circle, held in Circle or linked out to tools like Google Meet.
• Forums. Discussion forums on members’ interests, such as internship preparation and SAT study strategies.
• Physical Cards. A printed edition of the Cards, with content and prompts, for in-person workshops and events.
• Merch. T-shirts, stickers and pins with the Portal Cards brand, to raise visibility and build a sense of community.

What we learned

No code can take you a long way

We were glad to avoid custom development. It would have made the project take 3x longer, and probably meant Portal spending too much on a first version. Today’s no-code tools are powerful, with plenty of room to white-label and brand.

Content curation is hard

We were sourcing, curating, creating and shaping content across 10 skills and many formats. It’s easy to underestimate the time and energy it takes to do that well.

Narrative is everywhere

Another recent project had us diving deep into how narrative works. We brought that into Cards, with a ‘master’ and a ‘local’ narrative for each skill to make it stick with students.

Making skills stick for students who have seen every format? Book a 20-minute call →