BrightGame - Innovative Educational Game Creator

BrightGame's vision was to create an immersive platform where team leaders, from educators to consultants, could build their own educative, serious learning games (SLGs) and use them to cater to a vast array of learning objectives. OpenKit was entrusted to develop the 'GameCreator', a robust tool which simplifies game design into easy steps. Later into the development cycle, BrightGame made the additional request for a WordPress website, Brightgame.com, from which users could log in, subscribe to, and launch the GameCreator.

+ADD Strategy, headquartered in the UK, specialises in agile innovation for large and complex organisations. They offer a range of services, from innovation management training and consultancy to the implementation of best practices. The firm is recognised for its ability to aid organisations in developing innovation capabilities through practical and agile delivery methods​.

Prior to our collaboration, BrightGame recognised the need for a tool that would empower non-technical users to craft educational games tailored to their specific activities and teaching objectives. This required a sophisticated, structured – yet flexible – framework. The challenges were multifaceted: to design a user-centric interface, with a backend that managed the creative process. A key pain point was to build a dynamic data structure which could turn the complexities of each unique SLG into a digestible format, seamlessly retrieved by BrightGame.

Analysis

We began the initial phase of the project by consulting with Paul, BrightGame's founder. This allowed us to clearly understand his goal for this technological solution: to transform the creation of Serious Learning Games into an accessible and intuitive process. We mapped out the user journey, defining key touch points where learning met play, and ensuring that the platform would resonate with its target audience – educators, consultants, and team leaders.

We were then able to determine the technical requirements needed to fulfil his vision. First, we chose to use React to develop the GameCreator. Renowned for its component-based architecture, React guaranteed a responsive and adaptive user experience.

For the backend, we determined that Firebase would be the best service to deliver a cost-effective, scalable solution for real-time database management and hosting, as well as secure authentication.

Once we had finalised the high-level architecture of the project, we began a rapid 4-5 month development cycle to translate this vision into a tangible product.

In order to achieve our goal – a UI that was not only aesthetically pleasing but also simple to use – our developers collaborated closely with BrightGame's design team. Their members' hands-on approach and OpenKit's agile methodology facilitated a dynamic feedback loop, where comments and adjustments were iteratively integrated into the design.

Our developers also decided to integrate Material UI into the React framework. We used their 'theming' system and collection of prebuilt user interface components to craft a visually intuitive and cohesive design throughout the platform.

Wireframing is an essential element of the design and development process: it allows us to create a visual representation of the application's layout, functionality, and user flow before diving into the actual development. This approach helps us ensure that the final product aligns with the client's requirements and provides an optimal user experience.

In this project, we created wireframes for various pages and components of the application, including Learning Objectives, Job Roles, and Learning Impacts. This helped us to clearly define the structure of the information that needed to be entered by the user.

For example, wireframing the Learning Impacts page helped us determine how to effectively present the impact of the learning experience on the users. We incorporated elements like impact statements, reflection questions, and a rating system to gauge the effectiveness of the learning process. This wireframe served as a blueprint for developing a comprehensive and engaging platform.

Throughout the wireframing process, we collaborated closely with the client to gather feedback and make iterative improvements. The wireframes acted as a visual communication tool, allowing stakeholders to provide input and shape the final product. They served as a roadmap for our development team, guiding them in building a robust and intuitive application and reducing the time required to develop.

We guided our technical development strategy throughout the project by following key these principles:

• Robust security: we ensured that user data was safeguarded using Firebase security rules which allow for granular access to data. Such security measures and processes are essential when handling sensitive payment-related data, and they align with OpenKit's commitment to ISO 27001 and 9001 compliance.
• Role management: ensure the platform can allow or restrict access to certain functions (personalised logo design, game competitions, additional game credits, etc.) based on the user's chosen membership tier.

OpenKit's rapid development and deployment of the GameCreator not only exceeded the initial project deliverables, but also allowed BrightGame to secure over £100,000 in pre-seed funding. The platform's early success is now leading to a rapid expansion of partnerships, with organisations eager to integrate BrightGame's innovative approach to learning into their training or teaching models.

• Quick responsiveness to fast-paced changes and updates: Our agile development approach allowed us to swiftly adapt to evolving client requirements and deliver timely updates to the BrightGame platform.
• Successful parsing of an ambitiously complex data structure: Our team's expertise in data management enabled us to effectively parse and utilise a highly complex data structure, ensuring the platform's ability to load and edit information quickly.
• Seamless integration of multiple late-stage additions: Despite the challenges posed by late-stage feature requests, we successfully incorporated them into the platform without compromising the overall user experience or system stability.
• Robust and scalable architecture for optimal performance: By designing and implementing a robust and scalable architecture, we ensured that the BrightGame platform can handle high user loads and deliver optimal performance, even as the user base grows.

Following the intensive development period and launch of the GameCreator, we transitioned the complete project – source code, documentation, and tools – to BrightGame's in-house team. Our commitment to excellence extended beyond delivery, however: we provided post-launch support for bug fixes and minor adjustments, ensuring a smooth transition and the platform's enduring stability and performance.

• Frontend: React, Material UI
• Backend: Firebase, Vercel for hosting, Zapier for automating sign-ups to Engagebay CRM
• Website: WordPress
• Subscription management: Stripe
• UI design and prototyping: Figma