Portal Learning: Cards

And how could a non-profit build a digital product to achieve this - in less than 8 weeks?

‍

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 non-profit based in Los Angeles.

This time of year is always an important time for students. But this year it was also important for the Portal’s team. They were entering a critical time in the organization’s journey.

Portal was pivoting away from ‘micro campuses’ on the premises of their partner companies to a more fluid and scalable offering - licensing their unique peer-to-peer focused curriculum and approach to other organizations (mainly schools and non profits).

Sounds simple? Perhaps. But - as with any startup in pivot mode - it was definitely not easy.

To help navigate this new chapter, Ivan reached out to us. But this wasn’t the first time we’d crossed paths.

The Setup

Techno. Prog House. Drum & Bass. London. NYC. Budapest.

A year previously Howard had joined a Slack channel called ‘Future of Higher Education’. After pinging an intro into the #introductions channel, a DM arrived from Ivan.

They soon got together for a chat - spanning not just education, but electronic music, local club scenes, and beyond.

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

Immersive Design Challenges

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

Joining 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.

Here’s the rundown (and a full case study)

From Consults to Cards

One of the other Project Consults initiatives was called ‘Portal Cards’. Students in this project team collaborated with Carnegie Mellon University on new ways to make student skills more accessible and legible. They did it via the creation of digital artefacts, kinda like interactive baseball cards.

Each Card focused on a particular skill, and contained a bunch of prompts, questions, activities and other content. The goal was to encourage a student to think about that skill and how it related to their own life, and then go out and explore it - and share their work with peers and teachers for input and feedback.

The concept the students came up with was pretty cool. But it needed a few iterations to make it usable in a real setting. Alongside this, Ivan had his own prototype of a Cards solution with a more detailed taxonomy (i.e. set of fields relating to each Skill).

This one was built in Google Slides, and although it integrated with Portal’s current Google Classroom setup, it was kinda flat and lacked design polish.

Ivan wanted to expand on the project as he sensed something valuable within both concepts.

He also knew he wanted:

a) to move away from Google Slides and Docs, and

b) Portal to have their own digital products they could share with students in other schools

‘Cards’ was to be the first of these products - where students would spend time using the cards for self reflection and goal setting, then later use a dedicated digital platform for uploading all their work.

But this felt like a big challenge.

‍

How do you go about tackling this in the most optimal way?

And who’s got the right blend of expertise to help?

‍

Which brings us back to that moment in late Spring when an email landed in Howard’s inbox.

The Considerations

Two of Ivan’s biggest goals for this first version of Portal Cards were:

1. Make the cards interactive and exciting through text, images, design and mixed media (as it happens, they were also into Wavetable’s brand…)
2. Bring them into a digital app that can be used by students for the cards activity, and also serve as a space for future student work to be added

But there were two big challenges to bring the Cards project to life:

• Launch & Learn: This couldn’t take months and months to build
• Do more with less: As with many organizations, they need to be smart with budgets

Our Team

We put three of the team on this project: Howard (project lead), Fer (strategy and LX design), and Dani (branding and digital design).

Portal also enlisted four of their students to join us as ‘Micro Interns’. They were paid for the duration of the project to each work with us for around 6 hours each week.

This meant we had some extra resource, but we also needed to tweak our workflow so they could join in without getting confused or overwhelmed.

The Brief

We initially agreed to do two things:

1. 10 digital cards with updated creative, design and copy - each relating to a particular skill
2. User flows, wireframes and initial UI for the digital platform - ready for developer implementation (to be led by Portal)

This first proposal assumed some kind of custom development. But something didn’t feel right. Building a platform from scratch… that could become an enormous undertaking, full of risk and assumptions.

After some discussion, we settled on an off-the-shelf product. But we also know a regular LMS (learning management system) wasn’t going to do the job. They were too bulky for what we wanted to do. Luckily, Fer had something else in mind… (more on that in a moment)

With that, and a whole bunch of other scope items that we won’t bore you with here, we got to work.

In Action

The build had two main phases (think of these as ’Mapping’ and ‘Production’), each with a handful of smaller projects. Here’s the breakdown.

Phase 1: Mapping

1a: Skill Selection

In this first version of the product, our focus was on developing content based on skills from the ‘Durable Skills’ framework created by fellow nonprofit America Succeeds. We liked it immediately (not least because it felt better than using the term ‘Soft Skills’). The taxonomy had 100 skills, all selected as being crucial for success in the evolving 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 knew we couldn’t build out learning journeys and content for all 100, and agree we wanted to focus on 10. The Portal team chose two skills from the ‘outer’ wheel, and then 5 of the 10 related skills to each of these. Knowing the easy trap of naming confusion, we set about calling these ‘Main’ skills and ‘Sub’ skills.

Main Skill No.1: Growth Mindset

• Sub-skills:
• Action Oriented + Proactivity
• Entrepreneurship
• Goal Oriented
• Resourcefulness
• Self-sufficiency

Main Skill No.2: Communication

• Sub-skills:
• Written
• Verbal
• Presentations + Public Speaking
• Social Media
• Negotiation

This part appeared relatively straightforward, but we needed to stress-test these ‘skills’.

What is ‘Social Media’ as a skill?

How do we define being self-sufficient?

This took some time and thinking to clarify. In hindsight, we should have got these even more specific - some of the vagueness in the taxonomy caused us challenges in the content curation phase.

1b: Taxonomy & LX Mapping

Portal already had a concept for the Cards taxonomy. The taxonomy is different to the skills themselves - it’s a series of steps and prompts required to create a Card on any skill topic.

We liked the way this was designed, but felt there were some improvements that could be made, so Fer spent the first week mapping out other options in a Whimsical board.

The original taxonomy served as a guide as we worked on building the new version.

Fer figured out a new 5-step process, which we then refined down further into a three-act structure. This added more steps overall (9), but the three-act approach offered two things:

1. opportunity for narrative construction
2. broke down the experience into smaller 3 step pieces vs. one 5-step process

We didn’t expect a student to tackle a card in full (attention spans, hello!), so the 3-step approach felt more realistic and engaging.

The revised taxonomy was key - this was how the actual cards would work functionally, and serve as the framework for curating content around each one.

But before that, we had some other work to do.

Part 1c: Platform Selection

Going for an existing platform seemed like the right choice for us, considering that the project was still in its pilot stage. This presented an opportunity to leverage existing technology.

We were looking for flexibility, reliability, and excitement, while also prioritizing ease of build and management.

Part of our ongoing work involves reviewing and keeping up to date with the latest tools that enable creativity, innovation, community and education. We’ve got an ever growing list of benchmarks that help us stay on top of things.

Given the project's needs, particularly the input from users looking a social component to nurture a vibrant community, Circle emerged as the ideal fit.

A quick note on collaborating with micro interns

We mentioned tweaking our workflow to accommodate four interns. Here are a few things we learned:

• Layer in the tools: Not everyone had used Notion. We had full databases plus nested pages - for the uninitiated this was a steep learning curve
• Check in regularly: sometimes the brief can skew in different directions - the intern team needed managing accordingly
• Ask twice, ask differently: they don’t always like to ask questions. It’s understandable. Ask on a call, send an email, follow up
• Build in slack: With only a team of three, we didn’t have tons of bandwidth
• It’s Summer!: This was an internship, but it’s summer, and it was remote. This made some stuff tricker to stick.

Ok, let’s get back to it!

Phase 2: Production

2a: Brand Kit & Design System

Ok, we’ll be honest. A new brand wasn’t really in the brief. But we sensed we needed it. This thing had to feel engaging, fresh and something students would want to interact with.

Howard’s mind went straight to Citymapper - a city navigation app with a simple yet engaging squad of mascots that represent each featured city. Anime also felt like a good reference point, as did Duolingo’s now-legendary owl.

We sensed this should feel like a mini adventure, and the mascot was important to have as a guide.

Dani started on some character ideas:

‍

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

Around this time, we also saw Portal had gone through the first version of their own rebrand. We brought the initial brand palette in line with this, adding some additional secondary colors. We also created a simple typeface-based logo that could be easily run across a variety of mediums - particularly educational / course content.

Once we had the palette, logo, mascot, and initial guidelines down, Dani set about doing three other key things:

1. Developing a set of ‘badges’ for each skill
2. Building out the other assets we’d be using in the Circle space - particularly for elevating text-based materials
3. Constructing a simple but powerful design system in Figma that Portal teachers and students could use to iterate future assets as needed.

2b: Card Production System

🧠 We created a Card production system in Notion to assist the team in advancing the project, enabling scalability, and facilitating rapid iteration.

We put together a production system using a series of Notion databases. This offered a bunch of cool perks:

• Shared workspace: We built a system that everyone could access in real-time. This meant we were all on the same page, sharing our work, and no need for version control hassles.
• Scalable system: We made sure this system can grow as Portal grows. While we focused on those 10 skills needed, we also set the system up for future skills and use cases.
• Project updates: Notion's database features like tags and status updates make it a great tool for managing projects.

2c: Content Curation

Each Card needed to have some material to work with. The taxonomy included a few different modes - videos, audio, creative prompts, activities and so on. With 10 skills and a 9-part journey, we had 90 individual ‘pages’ to build out.

We’d started pulling together a few content ideas as soon as we had the skills and taxonomy in place, but the Card Production System was a real game-changer in terms of both efficiency and effectiveness. We did three things:

• Narrative: We used the concept of ‘master’ and ‘local’ narratives for each skill to help it land with students. Each narrative was intended to make the skill topic feel more real, relevant and connected to students’ everyday lives vs. just telling them ‘goal setting is important’
  ‍
• Curation: We asked our interns to pull together ideas for three of the steps within each skill card, with our team focusing on the rest. Everything - from text, to video links, to creative prompts and activities - was added into the Notion databases and tagged accordingly. As mentioned earlier, some of the skills weren’t as defined as we’d liked, and this broad definition made this part of the process tougher than hoped
  ‍
• Edits: As any content creator or curator knows, you gotta give credit to the edit. It was no different here. We did light edits in Notion, then did most of the edit work in situ in Circle as it was much easier to gauge the experience of working through each Card within the actual UI. This meant some version control slippage, but given the fluid nature of the product’s development, a worthwhile tradeoff

‍

2d: Integration & Experience

Now we had all the elements (Skills, Content, Brand and Platform), they needed bringing together into Circle to produce a cohesive final product.

• The first thing we did was conduct research on Circle’s customization capabilities and build assets based on what could be done.
• We then went over to our Figma workspace that included templates for our branded assets and started creating assets for different spaces on Circle. We did a couple of rounds on figuring out the best structure and UX for the spaces - balancing between a setup that could scale up but wasn’t too complicated for this initial launch
• The branded assets were imported into Circle so the Circle community had character and was on brand. This included color palettes on different areas of the community spaces, logos and cover photos for each digital Card, plus imagery for each summary post.
• And then… iteration! Build, test, iterate, tweak, test, iterate… test… done!

Just one more thing… The Delivery Space

Phew! Nearly there. But not quite. A critical part of our process and approach is focusing on the full End to End Experience in a product or program. And that applies to our own workflow, too.

We’d put together all the building blocks for the launch version of the Cards, but the final deliverables needed to be handed across to Portal so they could run with it right away.

Fer built out a Delivery Space in Notion, broken out into three sections, each with text and video-based explainers, plus links to all the key assets and tools.

The Final Product

The resulting product was a community learning space where students could explore and work through ten different skills. They could also create and remix their own unique skill Cards to share with peers, teachers and employers. All of it with no code, and from concept to delivery in less than 8 weeks

Here’s a summary of how we did it:

• 🎥 LX: We flipped the learning journey for each of the skills into a 3-act story structure. Each Act contains a series of mini chapters with mixed-media prompts and scenarios - all related to students’ own lives
  ‍
• 👩🏽🎨 Open Source Brand Kit: Built from scratch in Figma, with guidelines and templates so anyone on the team (including students) can create fresh assets
  ‍
• ⛓️ No Code Platform: Custom tech wouldn't answer the brief. We figured out how to rig up community app Circle as an all-in solution for content, cards customization, and community
  ‍
• 👩🏿‍🤝‍👨🏽 Co-Creation: Let’s walk the talk. Four students joined a Micro Internship, working directly with us on the project. They applied a real-world production process to create content, input on brand development, and road-test the product
  ‍
• ⚙️ Production System: A series of Notion databases to hold all the content - tagged and trackable, with tons of potential for automations
  ‍
• 📓 Playbook: Walkthroughs with Loom video breakdowns of how to iterate and extend the experience and content

What’s next?

There’s huge potential here. We put forward a few recommendations on where to go next:

• Video Guides: Enhance the Circle Community by incorporating introductory videos, along with dedicated videos within space groups (e.g. Growth Mindset and Communication). These videos, hosted by either the Portal Team, students, or both, can serve to offer context and relatability, enriching the user experience.
  ‍
• Spaces: Establish post spaces aimed at crowdsourcing resources, ideas, and areas for improvement directly from the community.
  ‍
• Events: Organize engaging events featuring special guests, offering community members the opportunity to RSVP directly within the Circle platform. Online events can be hosted within Circle or include links to external platforms like Google Meets.
  ‍
• Forums: Facilitate discussion forums to empower community members in engaging in conversations related to their interests. For example, this could include topics such as internship preparation and SAT study strategies.
  ‍
• Physical Cards: Produce a printed edition of the Cards, complete with content and prompts, tailored for use in in-person workshops and events.
  ‍
• Merch: Create a merchandise lineup centered around Portal Cards branded assets, this could include t-shirts, stickers, and pins, aimed at boosting visibility and nurturing a community feel.

What we learned

No code can take you a long way

We were so pleased to avoid custom dev - it would have made the project take 3x longer, and probably meant Portal spending too much money on a v1. Today’s no code tools are hugely powerful, and have a decent amount of scope to white label / brand

Content curation… is hard!

We were sourcing, curating and also creating and shaping content across 10 different skills, and across a range of different formats. It’s easy to underestimate the time and energy involved in doing this well.

Narrative is everywhere

Another recent project involved us diving deep on how narrative works (it’s fascinating!). We brought these learnings into the Cards project - utilizing ‘master’ and ‘local’ narrative concepts for each skill to help it land with students.

‍

Onwards!!

‍