01 / PRODUCT DESIGN
STARCLUB
星际酒馆
A digital community platform designed for a global Chinese-speaking Star Citizen community.
- DISCIPLINES
- Product Design · UX/UI · Visual Identity · Community Systems
- PERIOD
- 2024 — Present
- ROLE
- Founder / Product & Visual Designer
- WEBSITE
- starclubsc.com
STARCLUB — DESKTOP & MOBILE HOMEPAGE
02 / INTRODUCTION
FROM ACOMMUNITYTO A PRODUCTECOSYSTEM.
StarClub began as a community built around conversation, group play and shared enthusiasm for Star Citizen.
Discord provided the right environment for real-time communication, but as the community grew, our needs expanded beyond conversation.
- Guides needed a permanent home.
- Events needed an archive.
- Members needed profiles.
- Community achievements needed recognition.
- Images, tools and resources needed structure.
At that point, the challenge was no longer simply managing a Discord server.
It was designing a broader digital ecosystem.
- 1,100+
- Community Members
- 300+
- Organization Members
- 50+
- Events
- 100+
- Chinese Guides & Resources
03 / THE PROBLEM
COMMUNICATIONWAS ONLYPART OF THE SYSTEM.
Discord works extremely well as a communication platform.
But communication was only one part of what StarClub needed.
As the community expanded, we wanted to create experiences that required greater control over hierarchy, navigation, layout, interaction, data and visual presentation.
Many of those experiences did not fit naturally inside a channel-based communication platform.
WHAT DISCORD DOES WELL
- 01Real-time conversation
- 02Voice communication
- 03Group coordination
- 04Announcements
- 05Casual community interaction
- 06Finding people to play with
WHAT REQUIRED ANOTHER PRODUCT
- 01Structured player profiles
- 02Long-form guides
- 03Visual archives
- 04Event history
- 05Hall of Fame
- 06Marketplace
- 07Interactive tools
- 08Searchable resources
- 09Customized information architecture
- 10Persistent community identity
04 / ACCESSIBILITY
ONE COMMUNITYSHOULDN'T DEPENDON ONE PLATFORM.
Another challenge was access.
For some users in mainland China, Discord can be difficult or unreliable to access because of network conditions and restrictions.
Building an independent web platform created another way for members to reach StarClub information, resources and community content without depending entirely on Discord.
This was not a reason to replace Discord.
It was a reason to make the ecosystem more resilient and accessible.
05 / PRODUCT ECOSYSTEM
DESIGNING ANECOSYSTEM,NOT A REPLACEMENT.
- Text
- Voice
- Discussion
- Coordination
- Real-time Interaction
- Profiles
- Guides
- Events
- Gallery
- Marketplace
- Hall of Fame
- Tools
- Archives
DIFFERENT PRODUCTS.SHARED IDENTITY.ONE COMMUNITY.
The goal was never to rebuild Discord on the web.
Duplicating chat and voice functionality would add complexity without creating meaningful value.
Instead, each product focuses on what it does best.
Discord remains the real-time communication environment.
StarClub.com provides the structured, visual and interactive experiences that require greater product flexibility.
Together they form the StarClub ecosystem.
06 / PRODUCT STRUCTURE
TURNING COMMUNITYACTIVITY INTONAVIGABLE SYSTEMS.
The website organizes content around how members actually use the community rather than reproducing Discord's channel structure.
The navigation separates communication from persistent content and gives each major community function a dedicated home.
- 01HOME
- 02COMMUNITY
- Community Updates
- Profiles
- Member Activity
- 03EVENTS
- Upcoming Events
- Event History
- 04GUIDES
- Chinese Guides
- Game Resources
- 05GALLERY
- Community Photography
- Event Photos
- Special Collections
- 06MARKETPLACE
- Community Listings
- 07HALL OF FAME
- Competition Winners
- Community Recognition
- 08TOOLS
- Executive Hangar Timer
- Dynamic Discord Timestamp Generator
- In-game Location Time Tool
- Cargo Profit Tool
- 09NEWS
- 10ABOUT
07 / VISUAL SYSTEM
FROM LOGOTO INTERFACE.
The visual system began with the existing StarClub identity.
Rather than choosing interface colors independently, I used the StarClub logo as the foundation of the product palette.
Its warm gold accent, dark typography and neutral base became the starting point for a broader UI system.
This allows the website, community graphics and Discord identity to feel like parts of the same brand while still allowing the website to function as its own product.
- BUTTON
- ACTIVE NAV
- SELECTED STATE
- ACCENT
- MICRO-INTERACTION
- STARCLUB GOLD#B5730F
Primary brand accent
- Primary CTA
- Active states
- Selected navigation
- Important highlights
- Small branded details
- WARM OFF-WHITE#FAF8F4
Primary interface background
- Warmer and softer than pure white
- Works naturally with the gold identity
- CHARCOAL / BLACK#1C1915
Structure
- Primary typography
- Navigation
- High-contrast structural elements
- SOFT NEUTRAL GRAYS#8C877F
Secondary information
- Metadata
- Borders
- Separators
- Inactive states
Values sampled from the live starclubsc.com interface. Replace with logo master values when the source file is supplied.
08 / TYPOGRAPHY
CLARITYBEFORE DECORATION.
The platform carries a large amount of information — guides, profile data, event information, marketplace content, tools, metadata. Typography therefore prioritizes readability, hierarchy and scanning over ornament.
Chinese and English must feel balanced. Each level of the scale is tuned so that Chinese characters are never secondary or cramped next to their Latin counterparts.
09 / COMMUNITY SYSTEMS
FROM USERNAMETO COMMUNITYIDENTITY.
Inside a chat platform, identity is often reduced to a username, avatar and role.
The website creates space for a more persistent community identity.
Members can connect their Discord account, verify their Star Citizen Handle and build a profile that exists beyond individual conversations.
The goal is not gamification for its own sake.
The goal is to make long-term participation visible.
PROFILE SYSTEM
- Discord account login
- Star Citizen Handle verification
- Member profiles
- Profile activity
- Community recognition
- Achievements / distinctions
- Links between participation and website identity
10 / COMMUNITY GALLERY
MAKING COMMUNITYMEMORY VISIBLE.
StarClub generates a large amount of visual material through events, group photos and player photography. The community produces it; inside Discord, those images quickly become part of a message history.
The gallery turns them into a browsable archive.
DESIGN CONCEPTS
- Justified-row image layout
- Chronological organization
- Monthly navigation
- Special collections
- Photographer / author attribution
- Image lightbox
- Responsive behavior
11 / EVENTS & HISTORY
COMMUNITY EVENTSSHOULD LEAVEA RECORD.
Events are one of StarClub's core community activities.
The website gives those moments a permanent structure rather than allowing them to exist only as announcements and chat history.
Past events, photography and competition results can remain accessible long after the event ends.
EVENT FORMATS
- Large-scale community gatherings
- PvP competitions
- Racing events
- FPS events
- Fleet activities
- Community celebrations
12 / RECOGNITION
DESIGNINGMEMORY INTOTHE PRODUCT.
Competitive events created another design challenge:
How should temporary achievements become permanent parts of the community?
The Hall of Fame system turns event winners and special distinctions into durable community recognition.
- 空战英豪HONOR 01
- 绝境枪王HONOR 02
- 逐星之翼HONOR 03
Each honor is built from: champion profile · badge / title · winner presentation · award statement · visual differentiation between honors.
13 / TOOLS
UTILITYIS PART OFTHE EXPERIENCE.
Not every feature needed to be social.
Some of the highest-value additions are simply tools that remove friction for players.
Instead of sending members to disconnected external resources, selected utilities can live inside the same StarClub product ecosystem.
TOOL INDEX
- T01EXECUTIVE HANGAR TIMERTracks the administrative hangar cycle and status.
- T02DISCORD TIMESTAMP GENERATORCreates timezone-aware Discord timestamps.
- T03IN-GAME LOCATION TIMEHelps players understand local time across game locations.
- T04CARGO PROFIT TOOLSupports cargo planning and calculations.
14 / CONTENT & GUIDES
FROM CHATTO KNOWLEDGE.
A healthy community produces knowledge continuously.
But useful information becomes difficult to discover when it remains buried inside conversations.
The guide system gives Chinese-language resources a structured and searchable home.
Coverage: Gameplay systems · Locations · Missions · Ships · Community knowledge
15 / MARKETPLACE
STRUCTURECHANGESBEHAVIOR.
The marketplace organizes community listings into a more structured browsing experience than a stream of chat messages.
Clear categories, item presentation and persistent listings make community exchange easier to understand and revisit.
16 / DESIGN DETAILS
A SYSTEM BUILTFROM SMALLDECISIONS.
DARK MODE
Dark mode is an alternate viewing environment. It preserves the same product hierarchy, spacing, typography, layout structure and StarClub visual identity.
The dark interface uses a charcoal, dark brown-black background, warm amber and gold accents and muted light text.
On desktop, the decorative hanging rope on the left side of the page is the theme switch. Clicking it toggles between light and dark mode.
It is an intentionally playful, branded interaction that adds personality without disrupting usability, and it makes the theme switch feel part of the StarClub identity. On mobile, a standard sun / moon toggle keeps the interaction direct and touch-friendly.
17 / FROM DESIGN TO USE
NOT A CONCEPT.A LIVINGCOMMUNITY PRODUCT.
StarClub is not a speculative redesign.
The platform exists alongside an active community and continues to evolve as new needs appear.
Features are shaped by real operational problems:
- how members find information,
- how events are documented,
- how achievements are remembered,
- how tools are accessed,
- and how two different platforms can function as one coherent ecosystem.
- 1,100+
- Community Members
- 300+
- Organization Members
- 50+
- Events
- 100+
- Chinese Guides
18 / REFLECTION
DESIGNING THECOMMUNITY MEANTDESIGNING MORETHAN SCREENS.
StarClub changed the way I think about product design.
The challenge was not simply deciding what a page should look like.
It required thinking about communication, identity, information architecture, accessibility, community operations, visual systems and long-term product growth at the same time.
The most important decision was recognizing that the website did not need to replace Discord.
It needed to do the things Discord could not.
That distinction allowed both products to become more useful.
THE PRODUCT CONTINUES TO EVOLVE.
New tools, archives, systems and community needs continue to shape the platform.
Rather than treating the site as a finished artifact, I treat it as an evolving product.