Narissa

Kentfield

Narissa

Kentfield

Purrkins Café

Interactive barista training featuring realistic scenarios, performance feedback, and a questionable amount of cat puns.

About the project

Purrkins Café gives new café staff a place to learn the basics before their first real shift.

It teaches key skills in a playful setting, helps build confidence, and shows that you can create simulation style learning in Rise with careful design and a bit of experimentation.

I created the entire experience in Rise, adding my own interactions, visuals, and custom code to make it more engaging and realistic than the standard Rise experience.

Tools used

ARTICULATE RISE

MIGHTY PLUGIN

CANVA

ADOBE FIREFLY

ELEVEN LABS

Purrkins Café

Interactive barista training featuring realistic scenarios, performance feedback and a questionable amount of cat puns.

About the project

Purrkins Café lets new staff practice the basics before their first real shift.

It builds confidence through playful, hands-on learning and shows how careful design, along with a little experimentation, can bring simulation-style experience to life using Rise.

I added my own interactions, visuals and custom code to make the experience more engaging and realistic than a standard Rise course. 

Tools used

ARTICULATE RISE

MIGHTY PLUGIN

CANVA

ADOBE FIREFLY

ELEVEN LABS

What is Framer?

Framer is a no-code tool for building and publishing responsive websites—perfect for anyone creating modern, high-performance pages without coding.

Do I need to know how to code to use Framer?

Framer is fully visual with no code needed, but you can still add custom code and components for more control if you're a designer or developer.

What is this FAQ component?

This is a free, responsive FAQ section for Framer. Drop it into any project, customize styles and text, and use it to save time on support or info pages.

How do I add this FAQ component to my project?

After duplicating, copy and paste the component into your Framer project. Then edit the questions, answers, styles, and animations as needed.

Can I customize the design of this component?

Yes, absolutely. The component is built using native Framer tools, so you can tweak fonts, colors, spacing, animations, and layout however you like.

Is this component responsive?

Yes, the FAQ component is fully responsive and adapts seamlessly to desktop, tablet, and mobile screen sizes.

What is Framer?

Framer is a no-code tool for building and publishing responsive websites—perfect for anyone creating modern, high-performance pages without coding.

Do I need to know how to code to use Framer?

Framer is fully visual with no code needed, but you can still add custom code and components for more control if you're a designer or developer.

What is this FAQ component?

This is a free, responsive FAQ section for Framer. Drop it into any project, customize styles and text, and use it to save time on support or info pages.

How do I add this FAQ component to my project?

After duplicating, copy and paste the component into your Framer project. Then edit the questions, answers, styles, and animations as needed.

Can I customize the design of this component?

Yes, absolutely. The component is built using native Framer tools, so you can tweak fonts, colors, spacing, animations, and layout however you like.

Is this component responsive?

Yes, the FAQ component is fully responsive and adapts seamlessly to desktop, tablet, and mobile screen sizes.

What is Framer?

Framer is a no-code tool for building and publishing responsive websites—perfect for anyone creating modern, high-performance pages without coding.

Do I need to know how to code to use Framer?

Framer is fully visual with no code needed, but you can still add custom code and components for more control if you're a designer or developer.

What is this FAQ component?

This is a free, responsive FAQ section for Framer. Drop it into any project, customize styles and text, and use it to save time on support or info pages.

How do I add this FAQ component to my project?

After duplicating, copy and paste the component into your Framer project. Then edit the questions, answers, styles, and animations as needed.

Can I customize the design of this component?

Yes, absolutely. The component is built using native Framer tools, so you can tweak fonts, colors, spacing, animations, and layout however you like.

Is this component responsive?

Yes, the FAQ component is fully responsive and adapts seamlessly to desktop, tablet, and mobile screen sizes.

Problem

New starters with no experience can slow service and put pressure on staff. After speaking with a café manager who often hired people with no experience due to tight budgets, it became clear that the first few weeks were always a bit of a struggle.

Experienced staff often had to pause their own work to answer basic questions, which slowed operations, while providing early support took significant time - time that staff didn’t always have.

Solution

After these conversations with the café manager, it became clear that the best way to support new starters was to prepare them for the basics before they worked their first shift. This included learning docket shorthand, understanding the recipe cards, handling different customer needs and knowing which orders to prioritise during busy spells. These were identified as the points where senior baristas usually ended up stepping in.

 I created an interactive café simulation that mimics two short shifts. The first puts learners front of house, taking orders, keeping the queue moving and asking for clarification when something is unclear. The second shift takes them behind the counter, reading dockets , following recipe cards, spotting allergies and prioritising multiple orders at once. They learn by doing. which mirrors a real barista experience.

The outcomes reflect real cafe life too. Excellent service can earn a tip or a glowing review.  Poor service might mean an unhappy customer – or one who quietly never comes back. Missing an allergy could result in a full-blown health emergency. Experiencing the consequences of choices makes the learning much more memorable.

Why a cat café?

The cat café theme makes the experience feel warm and low pressure. Learners can try things out, make mistakes and explore different outcomes without feeling judged. It also helps the learning stick. It is easier to remember a situation when it has a bit of personality, even though the challenges reflect real café life.

Bringing it to life

I enhanced Rise’s default multiple-choice questions by allowing learners to view customer responses within the feedback. I embedded images, carried the colour palette throughout and added a hints pop-up system, where the café mentor, Mr Purrkins, provides just-in-time guidance.

Transitions

I used Mighty transitions to break up the content and create a sense of movement. Each shift reflects a different time of day, helping learners experience the café as it opens, gets busy and then winds down.

Fixed reference tools

The docket guide and recipe cards stay in place during Shift 2, which mirrors how staff naturally check information on the job.

Sound effects

I added sound effects through JavaScript because I wanted actions to feel a bit more tactile. Small touches like this help the experience feel more alive and encourage learner interaction.

Coffee builder

The centrepiece of the project was the coffee builder. I created the imagery and developed a system where the drink layers stack in the cup. JavaScript provides personalised feedback based on learner choices, with 31 possible outcomes, keeping the experience varied and encouraging experimentation.

What this taught me

I learned how to work within the structure and limitations of Rise 360 and use custom code effectively in that environment. I also discovered how theme and tone can encourage learners to explore without feeling judged, making the learning experience more engaging and memorable.