Final Outcome
A key element of the series' power system, known as "Nen," associates specific abilities with personality traits. This connection between personality and power types presents an intriguing basis for user engagement and community building. In the Hunter x Hunter universe, the character Hisoka establishes distinct correlations between personality traits and Nen types. For example, Transmuter-type users are characterized as typically secretive and prone to deception. This established framework provides a foundation for creating a personality-based power system predictor that would appeal to the series' fanbase. The website concept centers around developing an interactive platform where fans can discover their theoretical Nen type based on their personality traits, similar to how characters in the series are categorized. This approach not only serves personal curiosity but also taps into the broader fan community's interest in deeply engaging with the series' power system mechanics.
Personas Kept in Mind
Site Map
A significant portion of the target audience may approach the website with limited knowledge of Hunter x Hunter's power system, Nen. This presents a challenge in creating an accessible user experience while maintaining depth for more knowledgeable fans. The website was structured with a progressive information architecture, beginning with foundational concepts before advancing to more complex elements. This educational journey was designed to introduce newcomers to the basic concepts of Nen through clear, digestible explanations, Then gradually transition into more detailed content about specific Nen types and their characteristics. Lastly Culminate in an interactive component where users can explore their potential Nen type based on their personality traits This stepped approach ensures that users without prior knowledge of the series can still engage meaningfully with the content while working toward the ultimate goal of Nen type discovery. By building this knowledge base first, users can make more informed connections between their personality traits and potential Nen abilities, leading to a more engaging and credible experience.
Wireframes
Initial attempts at website organization revealed two critical information architecture issues. First, individual pages were overcrowded with content, potentially overwhelming users and compromising the learning experience. Second, related information was inadvertently fragmented across different pages, disrupting the natural flow of understanding. The website structure was revised to address these organizational challenges by: breaking down dense content into more manageable, focused pages, consolidating related information that had been artificially separated, and creating a more logical progression of information that better serves the user's learning journey
This experience highlighted the importance of balanced content distribution and thoughtful information grouping in creating an effective user experience. The revised structure better supports the website's goal of guiding users through their Nen discovery journey, from basic concepts to personal type determination.
Figma
https://www.figma.com/proto/BFw9fBpNJmlcTTPrGxuMn5/Nen-website?node-id=1-2&p=f&t=fM0gGpqbwvsNFzRB-1&scaling=scale-down&content-scaling=fixed&page-id=0%3A1&starting-point-node-id=1%3A2
Final Product
Link: https://nen101.netlify.app/