01 · FINAL PRODUCT
Interactive prototype
Bring the screens together as one experience
The interactive Figma prototype connects the interface design into a usable flow and demonstrates the internal animations and navigation as a complete user experience rather than a set of isolated screens.
The strongest result is the consistency between the BlazingMind Studios identity and the way the app actually moves and behaves.Continue Exploring
02 · QUICK SUMMARY
Project overview
From studio identity to mobile experience
This project was created as an assignment for my DDSGN 135 course as a company app concept for BlazingMind Studios. The goal was to move the studio beyond a static identity and create a mobile interface that could carry the same personality through an organized, connected experience.
Project type
Company mobile app
UX/UI & interactive media
Deliverable
High-fidelity prototype
Connected Figma experience
Role
UX/UI & visual designer
Structure, branding, screens, prototype
Tools
Figma & Photoshop
Interface and visual production
03 · CHALLENGE
Problem & solution
Bold enough to feel like the brand. Clear enough to use.
The central design challenge was translating an expressive game-and-media studio identity into a mobile interface without letting the visual style overpower readability, hierarchy, or navigation.
Translate the studio brand into a usable mobile experience
BlazingMind Studios needed an app that could present the studio identity, projects, and creative content as one connected experience while keeping the dark visual system readable and easy to navigate.
Build a consistent, interactive Figma prototype
I used repeated layouts, clear content sections, predictable navigation, consistent typography, and connected interactions so the visual identity and UX could work together.
Process & story
04 · USERS
Intended audience
Design for discovery, engagement, and collaboration
The app is intended for people who want a direct way to learn about BlazingMind Studios and interact with its creative work, from first-time visitors to people already familiar with the studio.
Players and fans
Discover the studio identity, game direction, and creative work.
Creative-media viewers
Explore game, app, motion, and story-focused content.
Potential collaborators
Understand the studio’s style, capabilities, and digital direction.
05 · DISCOVERY
Competitive & UX research
Looking at familiar game ecosystems
Formal competitive research was not part of the original app assignment, so I revisited the project for this case study and compared several established game-platform experiences. The goal was not to copy their interfaces, but to identify patterns that players may already expect when interacting with a game or studio ecosystem.
I focused on how these experiences organize games, updates, social features, media, profiles, and other studio content. The comparison helped me evaluate whether the BlazingMind Studios app feels like one connected experience rather than a collection of unrelated screens.
Riot Mobile brings multiple Riot games, news, social features, esports, and other content together within one branded experience. This showed the value of creating a recognizable home base instead of treating every section like a separate product.
Ubisoft Connect brings games, friends, rewards, and other player services into the same ecosystem. The consistent organization reinforced the importance of predictable navigation when an experience contains several different types of content.
Battle.net combines game discovery with social features, friend management, news, and media. Its mobile experience demonstrates how several functions can remain accessible without allowing the interface to become visually overwhelming.
The comparison reinforced my use of repeated layouts, predictable navigation, clear content sections, large visual areas, and recognizable actions. For BlazingMind, I wanted those familiar UX patterns to support a more cinematic studio identity built around dark backgrounds, bright accents, artwork, and visual storytelling.
06 · PROCESS
Wireframes
Structure the experience before styling it
The low-fidelity layouts established the hierarchy, content areas, and navigation before color, imagery, and final branding were applied. This kept the early decisions focused on composition and function rather than decoration.
Low-fidelity wireframes used to establish screen structure and hierarchy. Select the image to enlarge.
07 · PROCESS
Design system
Build one visual language across every screen
The design system uses a dark foundation, vivid accents, consistent typography, repeated spacing, icons, and reusable interface elements. The goal was for every screen to feel like part of the same studio rather than a collection of unrelated layouts.
Color, typography, icons, spacing, and repeated components create continuity across the app.
08 · PROCESS
Navigation & user flow
Make the path through the app predictable
The flow maps the route from launching the app and entering through to the main hub, content areas, account setup, and deeper screens. Repeated navigation patterns reduce the amount a user has to relearn as they move through the experience.
The user flow documents the primary path and secondary account/content branches.
09 · ACCESSIBILITY REVIEW
WCAG AA Touch accessibility review
Validate the interface before calling the design finished
After completing the BlazingMind Studios app design, I ran the Figma prototype through the Zimmar Accessibility Compliance checker using its WCAG AA compliance review. The automated check returned zero detected issues, including no critical, major, or minor findings in the generated report.
WCAG AA review result: 0 issues detected.
The tested screens completed the Zimmar review without flagged accessibility, readability, contrast, or touch-target problems. This documents an automated WCAG AA Touch design review rather than formal accessibility certification or a substitute for user and assistive-technology testing.
The Zimmar Accessibility Compliance WCAG AA review returned 0 critical, 0 major, and 0 minor issues for the reviewed app design.
The WCAG AA review did not identify contrast-related issues in the tested screens, including the dark interface and bright accent colors.
Text sizing and readability checks completed without a flagged issue in the reviewed Figma design.
Interactive controls and touch areas completed the WCAG AA plugin review without a detected touch-target issue.
The completed review provides documented validation that the tested visual hierarchy, text, controls, and interface structure produced no automated WCAG AA findings.
The plugin result documents an automated review against WCAG AA criteria. It does not replace user testing, assistive-technology testing, or formal accessibility certification.
