User Flow and UI Wireframing

Introduction

In this phase of my design process, I focused on developing the user flow and wireframes for the “Attack on Titan” companion app. This stage was crucial to map out how users would navigate the app and what content they would encounter. According to Garret (2011), effective user flow design ensures seamless interaction by anticipating user needs and actions. Using FigJam and Figma, I created a system map outlining key pathways through the app and produced low-fidelity wireframes to visualize core UI layouts.

User Flow Design

I began by analyzing typical streaming platform navigation patterns, referencing competitors such as Crunchyroll, Netflix, and Funimation. Key user journeys identified included: logging in, browsing shows, accessing watchlists, and streaming content. I structured the flow to prioritize these actions, reducing unnecessary steps to improve usability (Krug, 2014). My system map illustrated the entry point (login screen), followed by the profile selection page, a home screen with featured anime, and links to sections such as “My List”, “New Releases”, and “Offline Downloads”.

I ensured a hierarchical structure where main categories were accessible via a bottom navigation bar, enabling quick movement between major sections, as recommended by interaction design principles (Tidwell, 2011). This approach supports user autonomy and reduces cognitive load (Norman, 2013).

Wireframing Process

Once the flow was established, I translated it into low-fidelity wireframes in FigJam, later refined in Figma. I kept layouts simple with placeholder boxes for images, buttons, and menus, emphasizing content hierarchy and clarity rather than visuals at this stage. Each wireframe incorporated essential UI elements: a header with a logo and search icon, a carousel for featured shows, grid-based thumbnails for categories, and a persistent bottom nav bar.

I iterated the wireframes based on user-centered design principles, ensuring navigation paths were consistent and predictable (Cooper et al., 2014). I also tested the wireframes with two peers for informal feedback, who highlighted the need for clearer labels on the “My List” and “Downloads” sections—this led to adjustments improving clarity.

Supporting Materials

https://www.figma.com/design/qhHlmzPhQMPNgKX6o7kNld/Attack-on-titan?node-id=0-1

Conclusion

This stage allowed me to structure the app’s navigation logically and design wireframes that balance functionality and simplicity. The wireframes provided a blueprint for moving into the prototyping phase, ensuring a user-centered interface grounded in established UX principles.

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.

Norman, D.A., 2013. The Design of Everyday Things. Revised and expanded ed. New York: Basic Books.

Tidwell, J., 2011. Designing Interfaces: Patterns for Effective Interaction Design. 2nd ed. Sebastopol, CA: O’Reilly Media.