Architecture

Game Architecture

An overview of the general game architecture is as follows:

Design System

Skills

Considerations:

• Approaches: Collectibles vs. Parts of a whole

• "Parts of whole" model breaks when total skills vary by category

• Unclear how to show skill level when practiced across multiple genres

• Integration with belt leveling

• Visual clarity using color palette to show what scope each skill occupies (i.e., game level vs. genre level, etc.)

Progress-based visual explorations for skills

Skill badges in four states: Locked, Unlocked, In Progress, and Complete

Skill badges in context, colors schemes denoting different scopes within game

Belts

Considerations:

• Adaptive layout optimized for desktop and mobile views, as well as different game contexts

• Clear starting state showing "No belt" for new users

• Circular design for belt progression implies continuous learning journey, even after black belt

  
  

Belt progress visual explorations, both linear and circular progress models

Final "odometer" design to designate belt progress

Trainings

Considerations:

• Different states (locked, unlocked, in progress, completed)

• Explored ideas to include skills in thumbnail, since ultimately the user is doing a training to up-level skills to get to next belt

• Want to visually emphasize art and add mystery for motivation and engagement

  
  

Design explorations showing relevant skills in training thumbnail for reference at a glance

Final designs for training thumbnails in four states: Locked, Unlocked, In Progress, Complete

Genre Thumbnails

Considerations:

• Make it clear that each genre has separate belts

• Color schemes akin to entering different genre “worlds”

• Different states: No belt, colored belt, coming soon

Genre thumbnails featuring art, highlighting different belt levels and progress for each genre

Training Cover Pages

Objectives

Needs:

• Surface different content while maintaining a cohesive experience, similar to front and back book covers

• Promote user engagement

Goals:

• Highlight pedagogical objectives (e.g., key principles, feedback on free responses)

• Invoke mystery and intrigue, as well as moments of delight for the user

Considerations:

• Use visual cues (blur/grayscale) to gradually reveal content, enhancing intrigue rather than hiding everything upfront

• Balancing mystery with clarity to avoid user frustration

• Thoughtfully consider IA and what information user needs at each stage of the journey

  
  

Pre-Training Page: wireframes exploring layouts and information hierarchy

Pre-Training Page: Pop-up and sidebar designs for referencing belt levels and skills across genres

Post-Training page: Belt celebration flow, creating moments of delight and fostering motivation as user progresses

Final Pre-Training and Post-Training pages highlighting skills, principles, and user's written reflection

Genre Pages

Objectives

Needs:

• Guide users through complex system of trainings, skills, and progression

• Surface large amount of content while maintaining clarity

Goals:

• Make next steps intuitive and clear despite underlying game complexity

• Help users easily find content they qualify for at their level

Considerations:

• Progressively reveal content based on belt level

• Connect training completion to belt advancement path

  
  

Initial explorations: information hierarchy for trainings within belt levels and displaying skill progress within a genre

Higher-fidelity mockups incorporating belt progress, skill, and training thumbnail components In various states

Final Genre page design with embedded CTA to donate

Skills Page

Initial Skill structure — Skills and Context cards each had their own system

New Skill structure — Skills and Context framed as "collectibles" that are either scoped for entire game or only a given genre

Objectives - Layout & IA

Needs:

• Organize complex skill hierarchy with multiple levels

• Support both discovery and mastery learning paths

• Present clear relationships between skills

Goals:

• Show clear progression pathways

• Create intuitive navigation system

• Design scalable structure

• Enable fluid exploration while maintaining context

Considerations:

• Information architecture for skill categories - defining core vs. genre-specific skills and their terminology

• Balance discovery vs. mastery gameplay modes

• Allow space for future genre additions

Initial sketches exploring potential layouts and flows, highlighting summary statistics and skill acquisition progress

Organized skills into categories based on game scope and included skill details modal

Mid-fidelity mockups for Skills page featuring different Skill representations

Objectives - Rewards

With the introduction of the concept of gamified "Rewards", we wanted to flip the focus of the game from:

1. Skills
2. Belts
3. Trainings

To:

1. Trainings
2. Belts
3. Skills

Needs:

• Show meaningful progress

• Support different play styles

• Replace numerical complexity

• Provide clear next steps

Goals:

• Create memorable achievements

• Drive continued engagement

• Build sense of accomplishment

• Encourage exploration

• Support two modes to play the game: Discovery vs. Mastery

Considerations:

• Balance between depth and at-a-glance simplicity

• Cultural sensitivity in religious context

• Technical feasibility of tracking

• Integration with existing systems

  
  

  

Competitive analysis targeting fitness and learning apps that have similar dashboard and rewards concept

Initial sketches taking inspiration from competitive analysis and applying it to BibleDojo game context

Mocks exploring different reward ideas, including medals, statistics, streaks, leaderboard, etc.

Medal concept was selected as a way to elevate the status of Skill acquisition in the game to be equal to Belts in terms of importance

Final Skills page optimized for both breadth and depth of gameplay, with medals for at-a-glance status and final Skill badge designs

Dashboard

Objectives

Needs:

• Balance visibility of both belts and skills systems

• Communicate current status clearly across all progress metrics

• Show distinct delineation for each genre's belt progression

• Create central navigation hub for the game

Goals:

• Design dashboard as main navigation center with each genre as a unique “world”

• Make next steps clear while allowing exploration

• Give equal prominence to belt and skill advancement

• Help users track their progress intuitively

Considerations:

• Establish clear visual relationship between belts and skills

• Prevent confusion about belt structure across genres

• Create distinct visual identity for each genre

• Ensure easy access to genres, skills, and training content

• Guide new users through onboarding training before genre exploration

  
  

Layout explorations emphasizing Belts and Skills (left) and art (right)

Collaborated with visual designer to hone visual language and information hierarchy

Dashboard acts as central hub to access BibleDojo Intro Training, Skills page, and Genre pages; adapts based on user state (from left to right: logged out, logged in, in progress)