Lumina
An interactive puzzle and mobile app designed to challenge group problem solving strategies.
PROJECT OVERVIEW
 The goal of this project was to create an cooperative, interactive game that was accessible to a wide range of ages and puzzle solving abilities. Using 3D printed blocks and projection mapping, Lumina was designed to challenge group problem solving strategies in a way that requires minimal onboarding and experience.

In our vision, this game could be part of an interactive exhibit in a public space, encouraging friends and strangers alike to collectively build towards a solution. Our hope was that, by bringing people together to reach a common goal, Lumina would create a space for people to connect, communicate, and share while being entertained.
TEAM
  • 2 MS-ID Students
  • 1 MS-HCI Student (me)
TIME FRAME
Feb. - Apr. 2017
    MY ROLE
    • Game Development
    • UX Design
    • User Testing
    PROCESS OVERVIEW
    There were four distinct phases in this project. Our approach was to segment the design process by game component, making refinements within each phase before moving on. 
    GAME DESIGN
    Concept Exploration
    Game Piece Design
    Refining the Rules
    Level Design
    User Testing
    ONBOARDING
    Communicating Rules
    User Testing*
    Interface Design
    Prototyping
    VISUALIZATION
    Sketching/Ideation
    Low-Fi Prototypes
    User Testing*
    Interface Design
    Prototyping
    MOBILE APP DESIGN
    Interface Design
    Prototyping
    Animation

    * conducted at the same time

    OUR SOLUTION
    To illustrate how Lumina is played, we put together a short video. The purpose was to quickly orient people to the concept, so only the gameplay is shown. The accompanying mobile app has its own onboarding, which provides a more structured orientation to the game's rules. Also worth noting-- my partner and I are the ones solving the puzzle in the video, so we finish the level much more quickly than a typical player would.

    Game Design

    We started with the idea of using blocks to create a structure that matched a 3D projection. It took a lot of experimentation to understand the challenges, frustrations, and joys of the concept. To better understand the game dynamics with limited time, we created designs in rotating teams of two, with the odd person out serving as the concept tester. By challenging each other, we gradually honed in on what made the game fun and what made it frustrating. We were also able to identify a number of different roadblocks in the design and make adjustments accordingly.

    PUZZLE SHAPES

    Initially, the only shapes used to build the puzzle structure were cubes, but we quickly learned that this created a low ceiling for difficulty. To address this, we developed a variety of different shapes to introduce in more difficult puzzles.

    Primary Building Block:
    Cube
    • May be placed anywhere in puzzle, as long as it aligns with the base or another shape.
    Secondary Building Blocks:
    Half-Size and Half-Height Rectangular Prisms
    • May only be placed as the top layer of a given space
    • May overhang puzzle boundary by attaching to the side of another shape
    *Special* Building Blocks:
    Wedge Varieties
    • Follows the rules of secondary building blocks
    • Must be placed base-side down, but the sloped side can face in any direction
    PUZZLE SHAPE CONSTRUCTION
    Using Magnets to Provide Support
    Building the structure would be really frustrating if knocking it caused the whole thing to collapse. Using magnets in the corners of each shape provided a sturdy connection between pieces and a satisfying 'click' when they combined. The schematics for this design were developed by Noah Posner, who very generously gave us permission to use them in our project.
    LEVEL DESIGN COMPONENTS

    With the pieces and other rules in place, we created puzzles with varying levels of difficulty. The introduction of new shapes made the puzzles significantly more difficult to solve. For example, wedges could be oriented in different ways, which created a new dimension for puzzle solvers to consider. We created clearly defined rules for each difficulty level of the game to make it easier for players to ideate potential solutions.

    Easy
    For easier puzzles, only cubes are used, so that players can focus on learning the basics.
    Challenging
    In more difficult puzzles, all of the different shape varieties are utilized. 
    Expert
    In the most difficult puzzles, blocks can attach to the sides of the structure and create overhangs.
    USER TESTING
    Refining the Game Experience
     We tested the concept with six different pairs of players to learn how real players would interact with the game.

    Our main goals were to determine if the fundamental concept was engaging and to evaluate the difficulty of various levels. We also gathered initial insights about how users interpreted the rules and looked for pain points they experienced while playing.

    One shortcoming of our research was that it only involved Georgia Tech students, who are high-level problem solvers. To make the game accessible to a wide audience, a more diverse sample should have been part of the testing process.
    KEY FINDINGS
    • Early support for concept viability
    Participants were given the option to complete a third puzzle, and 2/3 of the pairs decided to participate. The demo also attracted the eyes of bystanders, who expressed a desire to try the game themselves.
    • Easy levels are easy, difficult ones are really difficult
    For easy levels, not much help was required-- all participants were able to find the puzzle solution on their own. However, on the most difficult level tested, most required some assistance to compete the puzzle.
    • "Just let me figure it out." vs. "Am I allowed to do this?"
    Players approached their first interaction with the puzzle in two different ways. One type just wanted to mess around with the game and figure out the rules through trial and error. Others wanted to know the exact constraints and consistently asked questions as they completed the puzzles.
    • "I'm stuck and I need help."
    On the more difficult puzzle, half of the groups got stuck and felt they could not proceed without a hint of some sort. We added hints to the mobile app to keep these players from feeling overwhelmed and quitting the game.

    Explaining the Rules

    For a game to be approachable for a casual player, the rules must be straightforward and easy to understand. During this stage of the project, we focused on developing an onboarding system that would allow new players to understand the game dynamics with minimal effort so they could participate right away.

    Key Challenge
    A great puzzle provides players with a delicate balance of information-- Challenges are more rewarding when they require creative, divergent solutions. Yet, without clearly defined rules, gameplay becomes frustrating. The ideal puzzle lets players know what is and isn't allowed without compromising the process of discovering novel approaches.
    USER RESEARCH

    We developed an onboarding system and tested it with five users. Gradual, iterative changes were made between each of the tests to refine the words and imagery involved. This phase of the research generated some really interesting insights about the process of onboarding. 

    Keep It Brief
    Short instructions leave room for users to figure out the details on their own.
    Make It Seem Easy
    Reducing the number of rules introduced at one time makes the game seem easier to learn.
    Show Examples
    Lead by example and demonstrate actions. Visuals are often more informative than words.
    Teach with Action
    Reinforce learning by asking players to complete a representative task on their own.
    ONBOARDING

    I translated the most well understood language and most effective visualizations from our user testing into a low/medium fidelity prototype.

    1. Calibrate Projector
    2. Intro to Concept
    3. "Try it Yourself"
    4. Building Stuctures
    5. Intro to Unique Shapes
    6. Stage Setting and Hints
    PROTOTYPE DESIGN
    Using Animation to Prompt Interaction
    Using our findings from the next phase, 'Puzzle Visualization', I added some quick animations to the onboarding instructions to help clarify the process. Adding motion was also a more effective way to elicit interaction from players.

    Puzzle Visualization

    Based on our initial user testing and in line with our original plan, we wanted to incorporate a companion app into the game design to offer hints, check solutions, select levels, and track scores. Before we could build the app, however, one major issue needed to be resolved: how to visualize a 3D puzzle on a 2D screen. In our discussions, our group agreed that exploring an augmented reality approach might be the best alternative. However, with limited time and prior knowledge of the tech, we opted for a more traditional interface approach.

    USER RESEARCH
    Searching for the Right Mental Model
    With the help of scientific research on 3D-to-2D spatial mapping, three conceptual approaches were quickly prototyped. Each approach is briefly described in the section below.

    We used the same six participants from testing the onboarding system to assess players' mental models. Users were asked to build a puzzle solution based on each of the potential approaches, which were presented in random order to control for order effects. Participants provided semi-structured feedback during and after they worked through each approach.
    Potential Approach 1:
    'Chunked' Visualization
    In this version, the puzzle solution was visualized using a series of well-defined 'chunks', each containing 2-5 blocks.
    Potential Approach 2:
    'Layered' Visualization
    This approach divided the blocks into horizontal layers, providing additional information about which block faces were illuminated and which were covered by other blocks.
    Potential Approach 3:
    'Bird's Eye' Visualization
    This approach- the most abstract visualization- was derived from literature which suggested people commonly map 3D space via bird's eye perspectives. Though not particularly intuitive, it did provide the most granular information about how blocks were organized within a column.
    PROTOTYPE DESIGN
    Building on the Preferred Model with Animation
    Participants overwhelmingly preferred the first approach, which also resulted in the shortest build times. One major shortcoming of this approach was the visual ambiguity created by overlapping shapes. To address this, I created a new prototype where the 'chunks' fell into place, hopefully making it easier to locate their position on the grid.

    Mobile App Design

    With relatively few functional requirements, designing the main puzzle screens for the mobile app was relatively straightforward. As an early iteration with limited player feedback, the goal here was to assemble the findings of earlier phases into a continuous task flow that could be used in future user testing.

    MAIN PUZZLE SCREENS
    No Hints Active
    Base Layer and Unique Shapes Hints Active
    Base and Second Layer Hints Active
    Hints Menu
    Recalibrate Projector
    MAIN MENU SCREENS
    Opening Logo
    Level Select
    Level Select (Locked)
    PUTTING IT ALL TOGETHER
    Having Fun with Motion
    As the project wrapped up, I decided to add some playful animations to the puzzle screens. In truth, I just wanted to mess around with making animations in Principle, but I think it's okay for games to have a little motion and character, even in a early-concept prototype.

    Next Steps and Reflections

    At the end of the semester, we had the opportunity to showcase a functioning prototype of our exhibit at two campus events. There was a lot of enthusiasm about the concept about both events, but ultimately, we decided not to pursue the project any further.

    There's definitely room for more exploration, discovery, and improvement with this concept. If the project gets picked up in the future, here are some possible next steps:

    FUTURE IMPROVEMENTS
    Upgrading with Microsoft Kinect
    Connecting a Microsoft Kinect or other object-sensing camera to the projector would allow the projector to adapt the projection to a variety of angles and projector positions. 

    Networking the projector to the mobile app would allow for more engaging, real-time hint displays and auto-updating level changes.
    Rotating Base and Unique ID Tags
    With unique ID tags located around the base, the Kinect-enabled projector would allow the display to be continuously updated at a variety of angles, allowing for 360°-mapped puzzles. With a rotating base, shadow interference created by other blocks would be significantly reduced.
    AR Visualization
    Future efforts could also explore the use of AR for visualizing the puzzle solution and hints via smartphone. Though the visualization used in the early prototype was largely effective, AR would give players the ability to explore the structure with more granularity and control.
    REFLECTIONS

    Generally, in UX Design, a primary goal is to make a system as easy as possible for a user to complete a task, but in a game, the goal is to create the optimal challenge. Using UX methods to create difficulty was a unique learning experience, but the guiding principle was the same: understand how people perceive and engage the world around them.

    Functional design is powered by effective communication, and this project was a great lesson in harnessing that power. Whether its in the design of a game or a B2B marketing platform, speaking the language of your users is essential. In our case, creating an engaging and fun puzzle meant paying particular attention to how rules, instructions, and onboarding were conveyed. Designing and testing our onboarding approach refined my understanding of balancing words, visuals, and animation to guide and inform users without overwhelming them. 

    Next Projects

    Website by
    Jordan Movish
    © 2018