Designing Office Exploration Interactions for E-Learning #528

DavidAnderson

Staff

2 days ago

Office Exploration Activities in E-Learning #528: Challenge | Recap

🏆 Challenge of the Week

This week’s challenge is to build an interactive office exploration that lets learners click different parts of an office photo or illustration to reveal information. Think of it like a virtual office tour where learners can choose the areas of interest to explore and dig into the details to learn more.

Most designers create these using 2D illustrations or top-down office layouts. Both styles enable learners to either move through multiple rooms or focus on a single workspace.

Common Use Cases

Employee onboarding: employees click through a virtual office to learn where things are and meet the teams.
Office walkthroughs: remote or hybrid teams tour a workspace without visiting in person.
Workplace safety: learners explore safety equipment, exits, and hazard zones in a virtual location.

New Class: Create a Simple Office Exploration in Storyline 360

Tom recently hosted a session that walks you through how to create a clean, 2D office interaction using zoom regions in Storyline 360. You can view the finished project, download source files, and check out the full on-demand class on the resource page.

Create a Simple Office Exploration Interaction in Storyline 360

🚀 Tips for Getting Started

Here’s how you can approach this week’s challenge at your own pace:

Start simple: Use a static top-down office image and add clickable hotspots that reveal tooltips, images, or short text pop-ups describing each area.
Level up: Create branching paths that let learners unlock new rooms or badges as they explore and discover more about the office.
Challenge mode: Design an onboarding game using variables, inventory items, and progressive reveal techniques.

⚒️ Authoring Tools

You’re welcome to use any authoring tool you’d like this week. If you’re short on time, try quickly mocking up your ideas using PowerPoint, Figma, or your favorite graphics app.

✨ Share Your E-Learning Work

Comments: Share your examples directly to the recap page.
Social media: Please share your examples on LinkedIn and mention both David & Articulate using the #ElearningChallenge tags so we can help promote your work.
Support your peers: With the new submission format, you can comment directly on each example. Try leaving helpful feedback on at least three projects this week.
Community forums: Feel free to cross-post in the forums to give your work even more visibility.

🙌 Last Week’s Challenge:

Before you explore this week’s challenge, check out your fellow e-learning community members’ portfolios they shared over the past week:

E-Learning & Instructional Design Portfolios #527: Challenge | Recap

👋 New to the E-Learning Challenges?

The weekly e-learning challenges are ongoing opportunities to learn, share, and build your e-learning portfolios. You can jump into any or all of the previous challenges anytime you want. I’ll update the recap posts to include your demos.

Learn more about the challenges in this Q&A post and why and how to participate in this helpful article.