THE UNTAMED
Responsive Website
A responsive website "The Untamed" explores the narrative of the Chinese series adapted from the Mo Dao Zu Shi by Mo Xiang Tong Xiu. It follows the journey of two soulmate cultivators as they embark on adventures to uncover a series of mysteries connected to a tragic event from the past.
FUTURE IMPACT
In the future, the website can be further enhanced by introducing a dedicated section for episode analysis, allowing users to explore deeper interpretations and insights into each part of the story. A character relationship and importance map could also be added to help users better understand connections between characters and their roles within the narrative. These enhancements would provide a more structured and insightful exploration experience, strengthen storytelling clarity, and encourage deeper user engagement with the content.
DESIGN IMPROVMENT
After conducting usability testing, several issues were identified that impacted the overall user experience. It became clear that overlay elements with z-index needed refinement to ensure proper scaling and alignment across different screen sizes. The layout structure was adjusted to improve consistency and maintain visual clarity on all responsive views. In addition, background animations were optimized to improve smoothness and reduce interaction lag. These improvements enhanced layout stability, interaction performance, and overall usability.
USABILITY TESTING
A prototype was developed to evaluate the responsive website and overall user experience. The usability test was conducted with 4 participants to identify usability issues and interaction challenges.
ISSUE 1: LAYOUT RESPONSIVENESS
Overlay elements using z-index did not scale properly across different screen sizes, causing misalignment and inconsistent layout on some responsive views.
ISSUE 2: ANIMATION PERFORMANCE
Background animations that respond to mouse movement were not smooth, resulting in lag and affecting the overall interaction experience.
ISSUE 3: LAYOUT CONSISTENCY
Some page layouts appeared broken or misaligned on certain screen sizes, reducing visual clarity and usability.
PROBLEM
Complex narratives like The Untamed involve intricate storylines, character relationships, and timelines that can be difficult for audiences to understand and follow fully. Existing content is often scattered across multiple platforms, making it challenging for fans to explore the story in a cohesive and engaging way. This creates an opportunity to design a centralized and interactive digital experience that allows users to better navigate the narrative, deepen their understanding, and engage more meaningfully with the story.
HIGH-FIDELITY WIREFRAME
LOW-FIDELITY WIREFRAME
DESIGN SYSTEM
USER FLOW
I mapped out the user flow to design a clear and intuitive journey through the website, guiding users from the welcome page to explore different sections such as the story, characters, and additional content. The flow allows users to choose whether to follow the narrative or browse other sections, supporting flexible navigation and encouraging continuous exploration through interactive elements and linked content.
TIMEFRAME
2 weeks
ROLES
-
Visual Design
-
UXUI Design
-
Prototyping
-
Front-end Developing
SOFTWARE
-
Adobe Illustrator
-
Figma
-
Visual Studio Code
OBJECTIVE
-
To develop a responsive website for The Untamed fan community that enables users to explore the series’ narrative, characters, and key events through a clear, engaging, and intuitive experience.