INTRODUCTION
For this project, I chose to develop a mobile companion app based on the globally popular anime series Attack on Titan. Given its expansive storyline, diverse character arcs, and large fanbase, Attack on Titan offers rich potential for a multimedia application that connects fans through streaming content, character data, discussion forums, and collectible elements.
My initial design phase began in FigJam, where I created a comprehensive ideation board. This board includes a mission statement focused on enhancing user immersion, competitor analysis (primarily Crunchyroll and MyAnimeList), and persona development. For competitor research, I looked at existing anime-related apps, identifying gaps in user engagement features such as community interactivity and offline accessibility. Crunchyroll provides a strong base for content but lacks personalization. MyAnimeList is heavy on data but lacks sleek UX design.
The Attack on Titan companion app is designed using a responsive and adaptive layout strategy to ensure a seamless user experience across mobile, tablet, and desktop devices. This approach maintains both visual consistency and usability regardless of screen size.
- Primary Experience: The mobile version is the core platform, designed for one-handed use with thumb-friendly tap targets.
- Navigation: A bottom navigation bar provides quick access to main sections (Home, Characters, Map, Lore, and Settings).
- Scrolling: Vertical scrolling is optimized for smaller screens using collapsible sections and swipeable carousels.
I created a mood board inspired by the gritty, dystopian tone of the anime. I chose dark, muted tones—deep greys, blacks, and crimson—as my base palette to reflect the atmosphere of fear and heroism. The fonts were chosen to match the militaristic and historical nature of the series, with clear sans-serif choices for UI readability.
My user personas included two fictional users: Hana, a 21-year-old university student who streams anime regularly, and Kaito, a 17-year-old high schooler passionate about lore and character information. These personas guided design decisions around navigation simplicity and content access points.
The FigJam board also contains idea mapping, showing how app features are interconnected—such as linking streaming with lore, character bios, and episodic discussion boards.
https://www.figma.com/board/8UU5X7OY2hZdCXr0al0IuP/first-test?node-id=1-240&p=f&t=29AHu0AlnJdYGjSX-0
This design research stage laid the foundation for a compelling and functional user experience tailored to the anime community, with a clear focus on community, immersion, and storytelling.
FigJhttps://www.figma.com/design/qhHlmzPhQMPNgKX6o7kNld/Attack-on-titan?node-id=0-1
References:
Crunchyroll. (2023) Crunchyroll App. Available at: https://www.crunchyroll.com/ (Accessed: 3 May 2025).
MyAnimeList. (2023) MyAnimeList App. Available at: https://myanimelist.net/ (Accessed: 3 May 2025).
Shingeki no Kyojin Wiki. (2024) Attack on Titan Wiki. Available at: https://attackontitan.fandom.com/ (Accessed: 3 May 2025).
