Introduction
After establishing the user flow and wireframes for the “Attack on Titan” companion app, I moved into the UI prototyping phase using Figma. This phase involved translating low-fidelity wireframes into high-fidelity prototypes, adding visual styling, interactive elements, and user interface details. Prototyping is essential to bridge the gap between static designs and functional interfaces, allowing designers to test interactions before development (Garrett, 2011).
Prototyping Approach
My primary goal was to create a visually immersive interface that aligns with the aesthetic of the Attack on Titan franchise while maintaining usability for anime fans. Drawing inspiration from the show’s dark color palette and militaristic motifs, I incorporated deep grays, black backgrounds, and red accents. Research by Lidwell, Holden, and Butler (2010) emphasizes the importance of aligning visual identity with brand expectations to enhance user engagement.
Typography choices included Bebas Neue for headers to evoke a bold, impactful feel, paired with Roboto for body text to ensure readability across devices. I sourced character artwork and official images to use as content thumbnails, ensuring high-resolution visuals while avoiding copyright infringement by using licensed materials (Cooper et al., 2014).
Interactive Elements
Using Figma’s prototyping tools, I developed clickable interactions simulating navigation between screens. The home screen features a carousel slider for featured shows, where users can swipe horizontally to explore content. Below the carousel, I designed category-based grids (e.g., “Popular”, “Recently Added”, “Action”) following patterns identified in streaming apps like Netflix (Krug, 2014).
Interactive buttons included animated hover states for feedback, particularly on the bottom navigation bar, where icons subtly enlarge and change color on selection (Norman, 2013). I tested transitions between screens, adjusting animation speeds to avoid delays while maintaining visual smoothness.
User Testing and Iteration
To evaluate the prototype, I conducted informal usability testing with two peers. Feedback highlighted that the search icon was too small and unclear against the dark background, leading me to increase its size and contrast. Additionally, a tester suggested making the “My List” button more prominent, prompting me to reposition it next to the carousel for easier access.
A key improvement involved refining the download page interface, which initially lacked sufficient guidance. I added explanatory text and progress indicators to clarify file status, guided by usability heuristics advocating for visibility of system status (Nielsen, 1995).
Conclusion
The prototyping stage allowed me to bring the app’s visual identity to life while testing core interactions. By integrating feedback, I improved usability and ensured alignment with user expectations. This prototype now serves as a foundation for refining details and preparing the web adaptation.
References
Cooper, A., Reimann, R., Cronin, D. and Noessel, C., 2014. About Face: The Essentials of Interaction Design. 4th ed. Indianapolis: Wiley.
Garrett, J.J., 2011. The Elements of User Experience: User-Centered Design for the Web and Beyond. 2nd ed. Berkeley, CA: New Riders.
Krug, S., 2014. Don’t Make Me Think, Revisited: A Common Sense Approach to Web Usability. 3rd ed. San Francisco: New Riders.
Lidwell, W., Holden, K. and Butler, J., 2010. Universal Principles of Design. Revised and updated ed. Beverly, MA: Rockport.
Nielsen, J., 1995. 10 Usability Heuristics for User Interface Design. [online] Nielsen Norman Group. Available at: https://www.nngroup.com/articles/ten-usability-heuristics/ [Accessed 5 May 2025].
Norman, D.A., 2013. The Design of Everyday Things. Revised and expanded ed. New York: Basic Books.
