Systemic Games

Overview

Systemic Games, creators of Pixels, a revolutionary line of LED Bluetooth-enabled dice, needed a website that could serve as both a promotional hub and a resource center for its diverse user base. The primary goal was to create a dynamic platform where product owners and potential customers could easily access product information, tutorials, and community-driven content such as forums. The design needed to be high-end yet approachable, reflecting the product’s advanced technology while ensuring accessibility for all users, including those with visual impairments.

This case study explores the challenges faced, solutions implemented, and results of building a user-centered WordPress website that promotes inclusivity and accessibility, particularly for people who are blind or partially sighted.

Problem

When Systemic Games approached us, they had an existing Kickstarter page that was largely static and did not reflect the evolving nature of their product or the needs of their growing community. The company had successfully raised millions of dollars in crowdfunding, attracting tabletop gamers, tech enthusiasts, and do-it-yourself (DIY) creators. However, the existing website lacked key features that users needed to engage fully with the brand’s products.

The most pressing challenge was designing a website that would meet the functional needs of users while adhering to accessibility standards. Accessibility was a core requirement. Systemic Games had an active commitment to ensuring that people with disabilities, particularly those who are partially sighted, blind, or had reading disorders, could fully engage with the site. This included making sure that all content was readable by screen readers, providing easily navigable interfaces, and ensuring that all interactive elements were fully accessible.

Additionally, the website needed to contain a product information center, a community forum, a tutorial hub, and a place for ongoing product engagement. The website had to be scalable, allowing for future expansions as the product line grew.

Solution

Our team redesigned the website, balancing aesthetics with accessibility. We focused on a user-friendly interface that would appeal to both tech savvy and non-tech savvy users. The clean, minimalistic design was inspired by the brand’s core values: high-tech, customizable, and fun. To avoid overwhelming users with excessive animations or distractions, we focused on intuitive navigation and clear, concise content.

We aimed to build an ADA compliant website by ensuring the following:

Screen reader compatibility

We integrated Accessible Rich Internet Applications (ARIA) labels and ensured all visual elements, such as images and buttons, were described appropriately for screen readers. This helped visually impaired users access product information, tutorials, and community content.

High-contrast color scheme

We chose a color palette with high contrast to ensure legibility for users with low vision. Additionally, all text sizes and button designs were optimized for readability and ease of interaction.

Keyboard navigation

All website elements were made fully navigable using a keyboard, ensuring that users with motor disabilities could interact with the website seamlessly.

Customizable interface

To further enhance the user experience, we included customizable settings, allowing users to adjust text size, contrast, and other visual elements based on their needs.

Updated Mega Menu for Gaming Brand Systemic Games.

We also developed a Kickstarter page which also serves as an integrated community forum, allowing users to engage with one another, share ideas, and collaborate on projects. The forum supports file uploads and downloads, providing a place for users to exchange product-related files and resources.

On the backend, we ensured that the site was optimized for performance, integrating payment processing and tax systems to support the ongoing needs of the business. We also made sure the design was flexible enough to evolve with future product launches and community feedback.

Rewards Page

We built a new rewards page that seamlessly integrated Kickstarter pledge data. Early supporters of the Kickstarter campaign were able to pre-order the brand’s items before the website launch, and redeem once the website was live. To facilitate this, we developed a custom logic that retrieved each backer’s pledge details, including the number of products, dice, and sets they were entitled to. From the rewards page, the backer can claim their eligible items for free, and if additional products are added to their cart, they would only be charged for those extras. This system was built from scratch to ensure a smooth and accurate redemption process for Kickstarter supporters.

Final Product

The following images show select pages of the brand’s website before our work.

We re-designed the website with key accessibility features, including screen readers compatibility, high color contrast, and customizable interface. See some of the new pages for Systemic Games.

Results

The new Systemic Games website exceeded client expectations, serving as a valuable resource for both current and potential customers. It houses product information, tutorials, and fosters community engagement, supporting product owners and encouraging collaboration among creators.

From an accessibility standpoint, the website meets ADA standards, incorporating screen readers and high-contrast visuals to ensure accessibility for users with visual impairments. Positive feedback, particularly from users with disabilities, highlights the site’s ease of navigation and barrier-free engagement. The site enables users to share ideas, troubleshoot, and collaborate on projects.

The website supports both experienced users and newcomers, fostering a strong, inclusive community. Integrated payment processing and tax systems ensure a smooth and secure checkout experience.

Well-positioned for growth, the website is scalable to accommodate new products, features, and community-driven content. Its flexible design allows continuous improvements based on user feedback, ensuring it evolves with the business and its customers.

In short, gamewithpixels.com effectively supports Systemic Games’ current goals and scalability, reflecting the company’s mission to make high-tech products accessible and enjoyable for all.