Learning should adapt to experience
Beginners need guidance, while experienced users need greater freedom and flexibility.
Circuitspace
An interactive learning ecosystem that guides beginners from their first electronics idea to a working physical prototype.
Overview
The goal of this project was to improve the electronics learning experience by designing an interactive system that connects digital guidance with hands-on experimentation. The focus was on adapting to different levels of knowledge and experience, helping beginners build confidence through step-by-step support while enabling experienced users to deepen their skills, experiment freely, and receive assistance when needed.
Research & Discovery
Competitive Analysis
To understand the existing electronics learning landscape, we evaluated platforms based on our project goals. We focused on accessibility, learning support, and how effectively each approach connects digital guidance with hands-on experimentation.
Arduino Education
STRENGTHS
- Learning with real hardware
- Supports advanced projects
WEAKNESSES
- Setup-heavy for beginners
- Fragmented learning process
Tinkercad Circuits
STRENGTHS
- Beginner-friendly simulation
- Safe virtual experimentation
WEAKNESSES
- Limited physical interaction
- Limited for complex projects
Wokwi
STRENGTHS
- Fast, flexible simulation
- Broad component support
WEAKNESSES
- Technical for beginners
- No hands-on interaction
Arduino Education
STRENGTHS
- Learning with real hardware
- Supports advanced projects
WEAKNESSES
- Setup-heavy for beginners
- Fragmented learning process
Personas
Electronics learners bring different levels of experience and confidence, therefore we looked at two distinct user groups.
Nina
22 | Beginner | Interaction Design Student
EXPERIENCE
- Has basic theoretical knowledge but little hands-on experience
- Unsure how components and connections work together
- Needs guidance when moving from instructions to a physical circuit
GOALS
- Understand electronics by building real projects
- Gain confidence working with components
- Gradually become able to build independently
NEEDS
- Clear step-by-step guidance
- Simple explanations without unnecessary jargon
- Guidance adapted to her current knowledge
Mapping the Learning Experience
To better understand the challenges learners face, we mapped the current learning experience around our primary persona and explored the needs, frustrations, and opportunities that emerge throughout the process.
Design Principles
Based on the needs identified through our personas, we defined four principles to guide the development of Circuitspace.
Learning requires hands-on experimentation
Digital guidance should support users while they build and experiment with real components.
Guidance should explain, not just instruct
Users should understand why each step matters, not simply what to do.
Mistakes are part of learning
Clear feedback should help users understand errors, correct them, and keep going.
Learning should adapt to experience
Beginners need guidance, while experienced users need greater freedom and flexibility.
Concept Development
Bringing Guidance into the Workspace
Our first concept explored how digital guidance could support users while working with physical components. We began with a projection-based workspace, providing a large area for instructions and building steps directly on the work surface, while also supporting collaborative use.
Projection brought guidance into the workspace, but with some constraints.
- Hands and objects cast shadows
- Limited Readability
- Sensitive to Lighting Conditions
- Requires a dedicated projection setup
AR Magnifier
The second direction explored a movable display positioned above the workspace. Instead of augmenting the entire table, information would appear only within the viewing area, keeping guidance focused on the current task, reducing visual clutter, and requiring less technical setup.
The User Journey
We mapped the complete journey from starting a new project to building and programming the final circuit. The flow helped us understand how Circuitspace, ARVIS, and the physical workspace connect throughout the experience.
Arvis
Designing the Interaction
Arvis was designed to keep essential interactions directly within reach while users work on a circuit, reducing the need to constantly return to the computer.
Building the Physical Prototype
To explore the concept beyond digital mockups, we built a physical prototype of Arvis. The housing was constructed from laser-cut layers and integrated a tablet display, physical controls, and a camera positioned toward the workspace below. We experimented with marker-based tracking to explore how the device could identify components within the workspace and connect them to individual tutorial steps.
AR Visualization
I developed the AR visualizations to translate the functional prototype into a more refined representation of the intended experience. The interface was designed to keep information connected to the physical components while avoiding unnecessary visual clutter.
Circuitspace
Platform Structure
Circuitspace brings the digital parts of the learning experience together in one platform, supporting users from their first project idea to circuit design, programming, and independent experimentation.
Designing Circuitspace
Early designs focused on defining the platform’s structure and layout. We organized the experience around three connected tools that support the main project workflow, complemented by additional areas for learning, experimenting, and managing projects.
Visual Design
Branding
To create a memorable identity, we developed the Circuitspace brand including the logo, color palette, typography, and visual language. The branding communicates curiosity, experimentation, and technological exploration while remaining friendly and accessible for beginners.
Style Guide
01
Colors
The interface was designed to make technical content feel approachable without oversimplifying it. Clear visual hierarchy, consistent color coding, and structured learning modules help users focus on one task at a time while maintaining an overview of their overall progress.
Primary Color
#EDF760Secondary Color
#CABDF5Background Color
#181818Contrast Color
#FFFFFF02
Typography
A clean interface font keeps lesson content readable while leaving enough visual space for diagrams, live feedback, and hardware states.
HeadlineInter SemiBold • 36px
Aa
SubheadingInter SemiBold • 24px
Aa
BodyInter Regular • 14px
Aa
CaptionsInter Regular • 12px
Aa
03
Logo
The CircuitSpace logo uses a clean, technical visual language that reflects the connection between digital circuit design, programming, and hands-on experimentation.
FontInter
Ag
End Product
Final Interface
The final interface translates the Circuitspace concept into a complete digital experience, from starting a project to designing, building, and programming a circuit.
Arvis
The final Arvis design brings digital guidance directly into the physical workspace, supporting users while they build and interact with real components.
Reflection
One of my biggest takeaways from this project was learning to design beyond a traditional screen. Connecting a digital platform with a physical device challenged me to consider how information, interactions, and the physical workspace work together. Developing Circuitspace also taught me the value of questioning early ideas and adapting the concept throughout the process. Moving from a projection-based approach to Arvis showed me that making complex topics approachable is not about removing complexity, but about providing the right guidance at the right moment.
