Role: Product Designer
Timeline: 3-4 weeks of active design work
Tools: Figma
Type: Concept/Independent Project
Plattform: Mobile App
"Astra"
Social Media App for Anime
Fans
01. Overview
Astra is a social-first anime tracking platform designed for fans who want more than just a watchlist.
It allows users to track anime and manga while actively connecting with other fans through dynamic
profiles, expressive customization, and conversation-driven feeds. By combining structured tracking
tools with a modern social interface, Astra transforms passive cataloging into a personalized and
community-centered experience.
02. Problem
Current anime tracking platforms prioritize data over experience. While they effectively catalog
and organize anime, their interfaces often feel cluttered and impersonal. Discussion boards are
visually dense and formatted more like static reports than dynamic conversations, making
community interaction feel secondary rather than central. As a result, users can track what they
watch, but struggle to meaningfully connect with other fans in a way that feels modern, expressive,
and engaging.
03. Goals
The goal of Astra was to create a more personal and interactive anime tracking experience
that goes beyond traditional catalog-based platforms like MyAnimeList. The design emphasizes
social identity, expressive ranking systems, and personalized discovery to help users connect
with anime in a way that reflects their tastes and evolving interests. By combining strong visual
hierarchy with playful interaction design, Astra aims to transform anime tracking into a more
engaging and community-driven experience.
04. Information Architecture
Astra is divided into five main sections by this information architecture: Home, Search,
Create Post, Messages, and Profile. Each of these sections is built around a key user objective.
With the Home feed acting as the focal point for community-driven material including reviews,
hot opinions, and news, the structure places a high priority on content discovery and participation.
While Create Post provides a variety of content kinds to promote interaction, Search allows users
to discover anime, manga, users, and communities. Profile combines user analytics, library
tracking, and personal content, while messaging is optimized for direct and communal
communication. This structure facilitates both passive browsing and active engagement on the site
while guaranteeing easy navigation.
05. Low Fidelity Screens
Prior to the introduction of visual styling, the low-fidelity wireframes for Astra outline
the fundamental structure and user flow of the application, concentrating on layout,
hierarchy, and essential functionality. These wireframes make sure that every area is
logically arranged and simple to use by outlining important elements like the user
profile, social feed, community interactions, messaging, and personal library management.
While incorporating aspects unique to anime and manga, such as tracking progress,
viewing statistics, and participating in communities, the focus was on providing a
familiar social experience. Content placement, spacing, and interaction patterns were
prioritized using straightforward shapes and placeholders, enabling quick iteration and
improvement. Overall, the wireframes set the foundation for a more refined, high-fidelity
design by offering a clear blueprint for how users would navigate the application and
engage with its essential features.
06. Approach
I approached Astra from the perspective that anime consumption is deeply tied to identity. Fans
don’t just watch shows, they align with characters, genres, and communities. Because personality
expression drives engagement in social platforms, I focused on making identity visible without
requiring users to post constantly. By allowing users to make their library and top five favorite anime
public or private, profiles become expressive by default. Adding GIF-enabled profile and group chat
images further enhances individuality and energy in interactions. Instead of competing purely as a
tracking app, Astra positions itself as an identity-driven social space for anime fans.
07. Key Design Decisions
Astra intentionally adopts familiar social interaction patterns to reduce onboarding friction. The
interface draws from established feed-based structures similar to Instagram and X (formerly Twitter),
allowing users to quickly understand content hierarchy, interaction placement, and profile navigation
without a learning curve. This familiarity lowers cognitive load and encourages early engagement.
Personal identity expression was treated as a primary differentiator. Anime communities often use
character imagery as a form of self-representation, so Astra supports animated GIF profile photos
and customizable header banners. These features transform profiles from static information pages
into expressive digital identities. The library system serves as both a tracking tool and a social signal.
Instead of functioning purely as a private analytics dashboard, user libraries contribute to visible
identity through curated lists and top-five favorites displayed as profile tags. These elements
reinforce taste visibility and community recognition while remaining optional to respect privacy
preferences. Users can choose to make their libraries public or private, balancing personalization
with control.
08. Systems & UI
Astra was built using a modular component-based system to maintain consistency across screens
and reduce redundancy. Core interface elements such as the bottom navigation, library modules,
and feed cards were structured as reusable components to preserve hierarchy and interaction clarity
throughout the app. The library section was converted into a reusable component with a sticky
header behavior, allowing key filtering and categorization controls to remain visible as users scroll.
This preserves context and reduces friction when navigating larger collections of anime and manga.
The bottom navigation uses a minimal active-state indicator, a slim bar beneath each icon, to
provide clear directional feedback without visually overwhelming the interface. Rather than separate
static indicators, a single shared active bar was implemented to create continuity across tabs,
reinforcing navigation as a unified system. State transitions were set to instant to maintain perceived
responsiveness and keep the app feeling fluid and lightweight. Smart Animate was used selectively
to smooth page transitions while maintaining structural integrity across duplicated layouts.
Through building Astra, I deepened my understanding of component architecture and state
management, and in future iterations I would further centralize navigation logic to
improve scalability and reduce duplication across screens.
09. High Fidelity Screens
Astra's high-fidelity screens make the idea come to life with a colorful, unified interface
that combines social engagement with tracking anime and manga. In order to direct user
attention and reinforce important tasks like navigation, messaging, and content creation,
the design makes use of a powerful color scheme that is anchored by complementary
tones and vivid green accents. Clear visual hierarchy, uniform space, and user-friendly
layouts enhance key functions including the social feed, user profiles, messaging system,
communities, and library monitoring. While preserving a dynamic and captivating
experience, interactive features like post engagement icons, split controls
(e.g., Anime vs. Manga, Primary vs. Communities), and progress monitoring bars improve
usability. Additionally, to guarantee uniformity and scalability throughout the application,
reusable elements were incorporated into lists, cards, and navigation patterns. Overall,
the high-fidelity designs provide an individualized and community-driven platform for
fans of anime and manga by striking a balance between expressive graphics and
functional clarity.
11. Constraints
Astra was a self-initiated project and did not include formal user interviews, usability testing, or
quantitative metrics. Assumptions were informed by personal observation of existing anime
communities and platform behavior patterns. Without a team or research cycle, iteration was limited
to self-evaluation and structural refinement. In a future iteration, I would validate engagement and
identity-expression hypotheses through targeted user interviews and usability testing to measure
clarity, discoverability, and social interaction flow.
12. Outcome - Intended Impact
The goal was to make users feel like their favorite anime and manga are extensions of their identity.
By reducing visual clutter across the For You, Search, Group Chat, and Profile tabs, the experience
encourages slower exploration rather than rushed scrolling. Allowing users to publicly display their
library and top favorites turns profiles into living reflections of taste. Because anime preferences
evolve over time, list updates create a natural reason to revisit the app. The intended impact is
increased retention driven by identity expression and ongoing curation.
13. Reflection
Astra was my most enjoyable project to build because it allowed me to explore both expressive UI
and interaction systems. Through developing it, I gained a deeper understanding of component
architecture and auto layout, and I can clearly see where structural improvements could elevate the
experience. In a future iteration, I would further modularize the profile header into a centralized
component to preserve tab state when switching between posts, reposts, library, and likes. This
would eliminate reset behavior and create a more seamless interaction flow. I would also refine the
navigation system by redesigning the active state into a more visually anchored indicator and
leveraging Smart Animate more strategically to strengthen continuity between tabs. Overall, Astra
marked a turning point in my understanding of scalable UI systems and state management, and it
represents a foundation I would continue refining with stronger component logic and validated
user feedback.