About the project
brainCloud
Redesigned user-centric interfaces for brainCloud, a cloud-based SaaS platform that provides “backend in a box” solutions for games, apps, and IoT products.
brainCloud offers a wide range of pre-built backend features—such as cloud data storage, multiplayer functionality, achievements, leaderboards, in-app purchases, promotions, notifications, and custom cloud code—enabling developers to build and scale multiplayer, social, and free-to-play games across platforms without developing their own backend systems.
My mission was to refresh the brainCloud brand logo and enhance the UI/UX across the platform—including landing pages, user flows, and key interface components.
By introducing new features and optimizing existing ones, the project aimed to streamline navigation, improve usability, and deliver an intuitive, efficient experience tailored to developers’ workflows and needs.
Role
User Experience
User Interface
Visual Design
Prototyping
Company
bitHeads, Inc.
Year
2021-2024
PROCESS OVERVIEW
In this project, I worked as a product designer with a cross-functional team.
I created the information architecture, wireframes to ensure users can access all info they need.
After this, I designed the first phase design which has main functionalities and conducted usability testing to iterate the design.
Analysis of the Existing Interface
The current platform interface faces several structural issues that negatively impact user experience and overall efficiency:
-
Outdated design and visual inconsistency:
The lack of a unified design system and clear visual hierarchy makes it difficult for users to understand and navigate the platform smoothly. Transitions between modules often feel disconnected and confusing. -
Scattered information and poor integration:
Key data and tools are spread across multiple pages, forcing users to switch back and forth to compare or find information. This fragmented layout disrupts workflows and reduces productivity. -
Complex user flows and lack of intuitiveness:
Core features such as the dashboard, API tools, and CloudCode editor are difficult to use and not beginner-friendly, resulting in a steep learning curve and frequent user errors. -
Limited scalability and adaptability:
The current UI structure lacks flexibility, making it hard to integrate new features or scale to meet evolving user needs. As a result, the interface becomes increasingly cluttered over time. -
Reduced user trust and perceived value:
The inefficiencies and frustrations caused by the interface weaken user confidence in the platform and diminish the perceived quality of the product.
Understanding the Problems
Outdated design limited scalability and adaptability to user needs
The outdated and inconsistent UI hindered user experience, causing confusion and leading to errors in navigation and decision-making.
Key features like the dashboard, CloudCode editor, and API tools were difficult to use, limiting the platform's potential. The redesign focuses on modernizing the interface, improving clarity, and creating an intuitive experience to empower users to fully leverage the platform’s capabilities.
Users cannot quickly access key information
Users often need to check critical data such as product revenue and active user numbers. However, the previous platform required them to navigate across multiple pages and manually compare information, making the process time-consuming and inefficient.
This not only disrupted their workflow but also made it difficult to respond to trends or issues in a timely manner.
The platform’s outdated and inconsistent UI made it difficult for users to efficiently access and interpret key information. Critical tasks—such as checking product revenue, monitoring active users, or using tools like the dashboard, and APIs—required navigating across multiple fragmented pages, leading to confusion, delays, and missed insights. This limited the platform’s scalability and prevented users from fully leveraging its capabilities.
A modern, intuitive redesign was necessary to streamline workflows, reduce friction, and better support evolving user needs.
ABOUT
Backend in a box called brainCloud is a cloud-based backend platform that provides pre-built features for game developers to build multiplayer, social, and free-to-play mobile games across platforms without having to develop their own backend systems.
It offers APIs for cloud data storage, multiplayer functionality, achievements, leaderboards, monetization through in-app purchases and promotions, and notifications. Developers can also extend its functionality through custom cloud code.
My mission was to refresh the brainCloud brand logo and enhance the user interface and experience design across key platform feature pages.
By introducing new features and optimizing existing ones, the goal is to create a more seamless, efficient, and engaging experience for developers, improving workflow, accessibility, and overall satisfaction.
Who are our users?
Key Stakeholders in brainCloud and Their Roles
App Development Team Lead
Goal
Build scalable apps for clients or internal use, with solid backend and reliable integration.
Pain Points
-
Needs to deliver fast without compromising quality
-
Managing a team with varying levels of experience
-
Must monitor app performance and user analytics
Needs
-
A clear, organized admin interface for team collaboration
-
Easy access to analytics, Cloud Code, and debugging tools
-
Ability to customize backend behaviour without steep learning curves
Indie Game Developer
Goal
Quickly build and launch a connected game with limited resources.
Pain Points
-
Doesn’t have time or budget to build a backend from scratch
-
Needs plug-and-play features like player data storage, leaderboards, and push notifications
-
Limited backend experience
-
Wants to focus on gameplay, not infrastructure
Needs
-
Simple, intuitive dashboard to manage game data and users
-
Easy-to-understand documentation and sample projects
-
Quick setup without deep backend knowledge
Technical Product Owner
Goal
Evaluate backend platforms to integrate into larger systems or client solutions.
Pain Points
-
Needs proof of scalability and security
-
Looks for extensibility and robust support
-
Wants confidence in pricing predictability and tech reliability
Needs
-
Clear documentation, system architecture diagrams, and extensibility points
-
A professional and trustworthy interface that communicates product maturity
-
Easy access to API references, billing information, and service health
Student / Hobbyist Developer
Goal
Learn to build connected apps/games without financial commitment.
Pain Points
-
New to backend concepts, easily overwhelmed
-
Limited budget and time
-
Needs simple tools and clear guidance
Needs
-
Learning materials like YouTube tutorials and starter templates
-
Clean, non-intimidating UI to explore features step-by-step
SiteMAP
To help us more clearly distinguish between different roles and functional pages on the platform—and understand the relationships between them—we reorganized and reclassified all pages.
This allows related functional pages to be more intuitively presented during user interactions, reducing the time users spend searching for them.
This restructuring is the result of iterative user interviews and in-depth research on each functional page:
user flow (Sign up)
Problem Solving- Banner
One of the key UI enhancements I introduced after joining the team was the Banner feature redesign, aimed at improving workflow efficiency and real-time product performance tracking. This feature allows users to quickly monitor key operational metrics and revenue without navigating away from their current workspace or switching between different teams and products.
To achieve this, I implemented an expandable/collapsible interaction with a minimized state visualization, ensuring that even when the Banner is collapsed, users can still seamlessly switch between teams and view essential data in a compact format. This design significantly enhances usability, providing a more intuitive and streamlined experience, particularly for existing users who rely on quick access to performance insights.
This design effectively addresses the issue users previously faced on the platform—constantly switching between different functional pages to locate specific information. It enables users to quickly and efficiently compare and review data from various pages in one place.
Cloud Code
brainCloud allows developers to write custom Cloud Code routines in JavaScript, that reside and run on the brainCloud servers, allowing execution of code more securely and efficiently than if it were run client-side.
Advantages of Cloud Code scripts include:
-
Better performance when calling multiple API calls in a row
-
Lower brainCloud costs (the first 3 API calls are free, Houseand each one after is 1/2 a count)
-
More secure
-
Ability to change logic server-side without a client update
-
Ability to call out to external web services
-
Ability to perform certain operations that are not enabled in the client API
Cloud Code scripts can be called from:
-
client apps - via the Script Service APIs
-
developer-operated servers - via the Server-to-Server API
-
third-party services - via brainCloud's WebHooks interface
-
triggered via other operations (API Hooks) - scripts can be configured to be triggered automatically as pre- or post- conditions for other API operations
-
scheduled - scripts scheduled to execute in the future
Light & Dark Mode
Light Mode & Dark Mode is a feature designed to enhance users' viewing experience based on their preferences and environment."
RESULT
The brainCloud platform consists of a wide range of interface designs, each serving different functionalities. To showcase the most impactful improvements, I have selected some key screens that highlight unique and critical features.
Brand Refresh
The brainCloud logo redesign was driven by the need for a more modern, versatile, and visually balanced identity that aligns with the company’s SaaS focus and digital presence.
The updated design enhances brand recognition, scalability, and clarity while maintaining the essence of the original concept.
Brand Refresh: Before and After
Key Improvements & Design Rationale
Stronger Brand Identity
-
The new design is more professional and approachable, improving readability and brand recognition.
-
A rounded sans-serif font adds a modern, tech-friendly feel.
Refined Cloud & Lightning Symbol
-
The cloud and lightning bolt are now seamlessly integrated, symbolizing speed and cloud computing.
-
The icon’s proportions are improved for better balance and clarity.
Better Scalability & Versatility
-
The simplified icon ensures clarity at all sizes, from small UI elements to large branding.
-
Works effectively in both light and dark modes.
Enhanced Colour & Contrast
-
A refined blue and dark gray palette adds a tech-forward and professional look.
-
The yellow lightning bolt boosts visibility, reinforcing energy and efficiency.
Aligned with Brand Guidelines
-
The spacing, proportions, and typography create a more cohesive and balanced design.
-
The stroke weight and font weight are now harmonious for a refined, unified look.
brand stretching
Since we use brainCloud API Docs, brainCloud Forums and brainCloud Bootcamp to help users quickly understand and get started with brainCloud, we have extended the original brainCloud logo to create dedicated brand marks for these resources:
-
brainCloud API Docs:
Serves as a comprehensive technical documentation hub for the platform, allowing users to search, read, and learn. -
brainCloud Forums:
Functions as a real-time customer support and troubleshooting platform, enabling users to receive technical assistance and engage in discussions.
-
brainCloud Bootcamp:
CarProvides instructional videos, offering a step-by-step learning experience for users.
