SeedPhrase

A WEB-BASED WORD PUZZLE GAME

Case Study

SeedPhrase is a web-based word puzzle game where players help hacker zeroXcool decrypt a fantasy crypto wallet seed phrase. The game features a unique encryption method and real-time AI-powered hints.

The idea for SeedPhrase was inspired by the numerical encryption methods of Ledger hardware wallets. I wanted to create a "Wordle for DeGens" that appeals to both crypto enthusiasts and puzzle lovers.

Inspiration and Concept

Develop a robust Variable Shift Caesar Cipher encryption method that generates a seed phrase from the BIP39 wordlist, ensuring stable and engaging gameplay.

Goals

• Create a unique, fun, and challenging word game with a crypto aesthetic.
• Subtly educate users with little interest in or knowledge of crypto about different wallet IDs, blockchains, and their values.
• Provide different difficulty settings based on puzzle length, pre-solved letters, and time.
• Allow users to choose from four different blockchains, with accurate wallet IDs and prize values corresponding to each blockchain.
• Incorporate AI technology for an immersive experience, enabling users to chat with an AI and receive real-time, AI-powered hints.

My Role

My Responsibilities

• Conceptualizing the game idea and design.
• Programming the game, with assistance from ChatGPT for coding.
• Testing the game to ensure it meets the envisioned design and functionality.

Unique Aspects of the Project

AI Integration

SeedPhrase integrates an AI chatbot that provides real-time hints to users utilizing the OpenAI API model GPT-4o. The hints are not pre-written but generated on the spot, adding a dynamic and personalized element to the gameplay.

Chat-Based Instructions

Crafting clear, concise instructions was vital. I spent considerable time refining zeroXcool's chat-based guidance to ensure players understood the game's mechanics without feeling overwhelmed or confused.

Crypto Education

SeedPhrase subtly educates users about key concepts in cryptocurrency. In addition to the basic concept of seed phrases, players learn there are different blockchains (BTC, ETH, SOL, XTZ), each with unique values, wallet IDs, and labels.

Competitive Audit

I conducted a competitive audit to understand the landscape of similar games. SeedPhrase stands out with its unique combination of word puzzles, crypto education, and AI integration.

Initial Design

Paper to Pixels

I started with paper wireframes, sketching out the Variable Shift Caesar Cipher and the game's design elements. This hands-on approach helped me visualize the core mechanics.

Mockup

Transitioning from paper wireframes directly to high-fidelity mockups in Figma saved valuable development time. I aimed for a sleek, intuitive design that would captivate users.

Building a Working Version

As a beginning programmer, I successfully leveraged the power of ChatGPT to painstakingly build SeedPhrase piece-by-piece. Despite these hurdles, I successfully created a working version that matched my initial design.

Accessibility Features

High Contrast Ratio

SeedPhrase features light text on a dark background, ensuring a very high contrast ratio. This design choice improves readability for all users, including those with visual impairments.

Color Palette

A bright blue accent color is used to highlight key information. This color choice is both visually appealing and helps in quickly identifying important elements on the screen.

Information Architecture

The hierarchical design of the game ensures that assistive technologies can easily translate the information for users with disabilities.

Font Choice

SeedPhrase uses Inclusive Sans by Olivia King for all text. This font is specifically designed to enhance readability, making the game more accessible to users with various reading needs.

Lessons & What's Next

Lessons Learned

• How to prioritize and display the most important information on the screen.
• Significant insights into coding and programming HTML, CSS, Javascript, and GPT-4o chat interfaces.
• How to effectively leverage AI to assist in creating a complex program with limited coding knowledge.

Next Steps

• Ensure the game works seamlessly across all devices. (Fully Responsive)
• Deploy a live version of SeedPhrase on a password-protected website for interested parties and further testing. (Live Version)
• Perform a comprehensive usability study to gather feedback from a diverse group of users. (Usability Study)
• Continue testing and iterating on the design to enhance accessibility and overall user experience. (Iterate & Improve)
• Build a robust user profile backend so users can customize their player avatar, keep score, and more. (User Profiles)
• Continue to develop accessibility settings so all users can enjoy SeedPhrase. This will include dark/light mode, better AT integration, and more. (More Accessibility)