Design and Reflection of a Fiction Analytical Reading Website
Concept and Overview
This project is a digital platform dedicated to the analytical reading of mystery and detective fiction. Mystery fiction is typically structured around a puzzle, which naturally prompts close examination, while the audiences are tending to analyse the text (Hühn, 1987). The website operates through different levels of analytical depth, from analytical essays to collaborative discussion. It aims to transform the reading experience of mystery fiction from passively receiving information into actively thinking and analysing.
The audience consists of mystery enthusiasts who enjoy exploring textual clues, deconstructing ploys, and discussing narrative techniques. Users also include readers interested in novel analysis, rather than those merely focused on the identity of the culprit. They may compose long critiques on Goodreads, consume YouTube analysis videos, or engage in in-depth literary discourse. Upon completing a novel, they are likely to seek diverse analytical resources and visit this website to read articles or present their own interpretations.
Existing platforms such as CrimeReads focus primarily on reviews, author news, and recommendations, while Reddit forums often lack structured analytical resources. This project combines guided analysis, long-form criticism, and community discussion in a single environment. Serving as an onboarding space, the Explore page provides short-form content and recommendations to ease users into analytical reading. Building on this, the Analysis page supports deeper, long-form interpretations and writing guidance. Simultaneously, the Discussion and Event pages further extend the user experience through collaborative debates and immersive analysis, encouraging users to become active participants in fiction analysis rather than passive readers.
Extension of Research and Learning
I aimed to understand how audiences and other websites can shape the platform’s direction and structure. I found that most existing platforms focus on reviews, recommendations, or news. Analytical articles are often limited to individual blogs or video accounts due to spoiler concerns. This led me to consider how an analytical reading experience could meet users’ needs while remaining distinct from existing platforms. This process strengthened my understanding of user-centred design.
I also wanted to investigate how user interface and user experience design foster deeper interaction. My initial design centred on the discussion forum. However, further research into mystery readers and analytical reading led me to realise that discussion functions best as a supporting feature rather than the core experience. This prompted me to redesign the information architecture. I adopted a hierarchical website structure where each page corresponds to a different stage of user engagement. This structure can guide users from introductory content to long-form analysis and collaborative discussion, encouraging a gradual transition from passive reading to active interpretation.
Another key focus was visual communication and readability. Since the platform centres on analytical writing, I studied how typography, layout, and logo design can create an immersive reading environment while maintaining clarity. This process deepened my understanding of how visual hierarchy and branding can communicate the platform’s analytical focus and appeal to readers who value close reading and textual interpretation (Lidwell et al., 2023).
Visual Communication and Design
The website’s visual communication strategy prioritises clarity, readability, and analytical focus to support sustained reading and interpretation. Instead of relying on highly decorative or visually distracting elements, I emphasise controlled visual hierarchy and text-centred composition (Krug, 2005). Since the target audience regularly engages with long-form articles and literary analysis, excessive visual stimulation could distract users from close reading and critical thinking. Therefore, the visual approach reduces cognitive load and directs attention toward textual content and analytical engagement.
In website design, layout and typography serve as the primary forms of visual communication. A black-and-white base palette paired with generous negative space matches the suspenseful and serious tone of mystery fiction. It allows users to read and comprehend complex analytical articles more intuitively. The homepage uses large visual entry banners and brief section intros that guide users to explore different website’s areas. Spatial organization shapes how readers understand and prioritise digital information (Lupton, 2010). This curated visual structure helps users quickly grasp the function and atmospheric tone of the website.
Instead of serving merely as decorative elements, images on the website function to assist with novel analysis and provide contextual framing. Book covers, film stills, and related visual assets help users understand the analytical content and enhance immersion, while maintaining a clean reading environment. I initially considered using detective or crime imagery for the logo, but it failed to reflect the nature of literary analysis. Therefore, the final logo(fig1) combines a book and a magnifying glass to communicate both reading and investigation. Meanwhile, constructing a monogram logo serves to increase brand recognition (Wheeler, 2017). The clean and recognizable logo aligns with the website’s overall visual identity and reinforces the platform’s focus on analytical reading.
Fig1 Logo design diagram
User Interface Design
The user interface is designed as a structured pathway that guides users into deeper reflection and engagement. Since mystery fiction analysis can be complex and intimidating, the website employs a structured conceptual model and guided navigation to provide clear direction and minimise cognitive load (Norman, 2013). Through the categorization of different reading and analytical experiences into clear functional areas, users can gradually progress from introductory content to more advanced forms of analysis.
Fig2 Information architecture diagram
The homepage serves as the primary navigational space for the website. By combining large visual navigation blocks with curated analytical articles and news, the homepage establishes the website’s identity as both a mystery fiction platform and a textual analysis space. The representative imagery, concise descriptions, and latest content previews for different pages(fig3) allow users to quickly grasp each section’s function and direction before entering. This structure effectively reduces user uncertainty and enhances navigational clarity.
Fig3 Website’s page introduction
The Explore page provides a transitional onboarding layer for new users who are unfamiliar with novel analysis. Its news and novel recommendations serve as a content update hub for users seeking fresh material. Brief Reads content links to corresponding article categories on the Analysis page, guiding users from accessible introductory material to more complex long-form interpretations.
The Analysis page is the core of the platform, offering a space for deep reading and analysis. The structured layout and organized content presentation support user readability and a highly focused experience. Users can directly access different article categories through the top navigation buttons, including deep dives, brief analyses, and writing guides. Both casual readers and experienced users can easily find content aligned with their preferences.
The Discussion and Events pages provide a bridge for users to shift from passive content consumption to active independent thinking and analytical output (Preece & Shneiderman, 2009). The discussion forum enables mystery analysis enthusiasts to exchange theories, explore interpretive methods, and dissect novel structures. Furthermore, Events extend the user’s immersive reading and analytical experience. These activities interconnect with existing website sections, such as “call for submissions” events for the Analysis section and interactive analytical events within the forum. This interconnected structure allows users to transition between reading, discussion, and interaction, creating a continuous user journey rather than a series of isolated interactions.
User Experience across Digital Platforms
I extended the brand experience onto Instagram through concise and interactive content. Since Instagram is a platform chiefly distinguished by visual communication and rapid browsing, posting detailed literary analysis excessively clashes with the platform’s core dynamics and makes it hard to grab the attention of new users. Therefore, the Instagram account serves as a gateway, guiding users toward the website’s core of analytical reading through interactive content and brand communication (Hanna et al., 2011). Instead of merely duplicating the website’s content, Instagram complements the overall user experience by capturing attention and encouraging participation.
I designed a detective mascot to create a more recognisable brand identity. This character engages with the audience in a more relatable and playful way while conveying the critical and analytical thinking that the platform emphasizes (Garretson & Niedrich, 2004). Compared to publishing complex and serious analytical articles, using the mascot and casual posts such as personality tests can make mystery fiction interpretation much more accessible for Instagram users.
Furthermore, the mascot appears exclusively on Instagram and within the website’s Events sections. Since the website is primarily dedicated to long-form reading and literary analysis, limiting the mascot’s presence to specific areas helps maintain a clean, readable visual design and minimises distractions. Consequently, the mascot illustrations used in Events ensure visual consistency and a coherent experience for users transitioning from Instagram.
The detective personality test allows users to discover what type of detective they are by answering questions which prompts them to reflect on different reasoning methods and interpretation habits. The test guides users to actively engage in reflecting on mystery fiction through a low-barrier and enjoyable entry point, which further channels users toward the in-depth analytical articles within the website.
The promotional post for the website’s “Find Your Mystery Tags” activity is designed to direct users from social media to the website, encouraging them to participate in deep discussions and community interactions. It allows users to transition from passive social media browsing to community discourse and content contribution, which creates a continuous user journey between Instagram and the website.
Metrics and Analytics
As the website is still in its early stages, user metrics are evaluated through user testing rather than large-scale web analytics, focusing on understanding user behaviour and engagement. I invited eight users to participate in the testing to collect behavioural data and examine how they navigated the website(fig4). After entering the homepage, the majority of users navigated first to the Explore page or the homepage’s recommended article slider. This may be because when users first visit a website, they lean toward introductory and accessible sections or curated content (Djonov, 2007). Meanwhile, data from one of the participants(fig5) further illustrates this trend. After visiting the Explore page, the user was guided to visit deep-analysis and high-engagement sections. This finding was highly consistent with the website’s design strategy of guiding users gradually towards deeper forms of analysis.
Fig4 User first click section after entering the homepage chart
Fig5 User click behaviour
I conducted a survey in class to gather user feedback. Survey responses indicated that participants could easily identify where to begin exploring the website and quickly understand the purpose of each section. Most participants (85%) also agreed that the progression from introductory content to long-form analysis made analytical articles more approachable. This demonstrates that the website’s information architecture is effective, thereby lowering the barrier to analytical reading for new users. Furthermore, the majority of users were particularly receptive to engaging in gamified and interactive activities. These findings suggest that while the platform successfully supports navigation and comprehension, future development could further strengthen engagement with deeper analytical content by enhancing prompts and transitions between sections.
Future Directions and Development
This project made me realise that digital platforms are not mere spaces for accumulating mystery fiction content, but rather structured system designed to guide user engagement and interaction. I gradually recognized that my focus must expand beyond the presentation of analytical articles to consider how interface structure, navigation methods, and content organization shape deep user engagement in analytical reading. The project reshaped my fundamental perspective on user interface and user experience, leading me to place greater value on user guidance, readability, and progressive engagement. I understood that interface design functions as a tool for user guidance and engagement rather than mere decoration. Restrained layout and structured organization prove far more effective in helping users maintain focus and achieve deep reading immersion than excessive visual stimulation.
One limitation of this project is the lack of active users, which meant that the collaborative sections of the platform have not yet fully developed as intended. Although Discussion and Events pages encourage participation in novel analysis, they currently serve as conceptual frameworks rather than active discussion spaces. This highlights the need for sustained audience growth and continuous user engagement. Moving forward, I will strengthen the connection between the introductory pages and in-depth analysis such as adding clear navigational links. I also plan to leverage recent trends on Instagram to post more content that attracts new users, while launching interesting and interactive mystery games in Events. These strategies aim to transform the website from a conceptual design into an active platform for mystery fiction analysis.
Reference
Djonov, E. (2007). Website hierarchy and the interaction between content organization, webpage and navigation design: A systemic functional hypermedia discourse analysis perspective. Information Design Journal, 15(2), 144–162. https://doi.org/10.1075/idj.15.2.07djo
Garretson, J. A., & Niedrich, R. W. (2004). Spokes-characters: Creating character trust and positive brand attitudes. Journal of Advertising, 33(2), 25–36. https://doi.org/10.1080/00913367.2004.10639159
Hanna, R., Rohm, A., & Crittenden, V. L. (2011). We’re all connected: The power of the social media ecosystem. Business Horizons, 54(3), 265–273. https://doi.org/10.1016/j.bushor.2011.01.007
Hühn, P. (1987). The Detective as Reader: Narrativity and Reading Concepts in Detective Fiction. MFS Modern Fiction Studies, 33(3), 451–466. https://doi.org/10.1353/mfs.0.1310
Krug, S. (2005). Don’t make me think!: A common sense approach to web usability (2nd ed.). New Riders. https://learning.oreilly.com/library/view/dont-make-me/0321344758/
Lidwell, W., Holden, K., & Butler, J. (2023). Universal principles of design: Updated and expanded (3rd ed.). Rockport Publishers. https://learning.oreilly.com/library/view/universal-principles-of/9780760375174/
Lupton, E. (2010). Thinking with type: a critical guide for designers, writers, editors, & students. (2nd ed.). Princeton Architectural Press. https://ebookcentral.proquest.com/lib/adelaideuni/detail.action?docID=3387329
Norman, D. (2013). The design of everyday things. Basic Books. https://ebookcentral.proquest.com/lib/adelaideuni/detail.action?docID=1167019
Preece, J., & Shneiderman, B. (2009). The Reader-to-Leader Framework: Motivating Technology-Mediated Social Participation. AIS Transactions on Human-Computer Interaction, 1(1), 13–32. https://doi.org/10.17705/1thci.00005
Wheeler, A. (2017). Designing Brand identity: an Essential Guide for the Entire Branding Team (5th ed.). Wiley. https://ebookcentral.proquest.com/lib/adelaideuni/detail.action?docID=7104518