Overview
Japan Creative Center is a cultural hub in Singapore that provides access to information, resources, and events related to Japanese culture.
This project focuses on users who are interested in exploring cultural insights, discovering online materials, and staying updated on Japan-related events and activities.
Website Analysis
UX Walkthrough of Current Website
My first impression of the website is that it feels slightly outdated in both visual design and menu structure. The homepage presents a large amount of information at once, making it difficult to quickly understand what each section represents and where to navigate.
Users are required to scan multiple options before finding relevant content, which reduces clarity and increases cognitive load.
Reference : Japanese UX/UI Web Designs
It is worth noting that the current structure reflects common design patterns seen in Japan, where information-rich layouts are often used to support decision-making and build trust through transparency.
However, while this approach may suit local user behaviour in Japan, the target audience for Japan Creative Center is primarily Singapore-based users, who generally prefer simpler layouts, clearer hierarchy, and more minimal interfaces.
This creates a mismatch between design approach and user expectations, affecting overall usability.
Information Architecture
The homepage currently contains too many navigation options, which can overwhelm users and make it harder to focus on key actions.
Current Issue
-
Overloaded homepage with overlapping navigation options
-
Lack of clear grouping between related content
-
Users may experience confusion or decision fatigue
Goal
To reduce cognitive load by decluttering the interface and restructuring the information architecture for clearer navigation.
Users should be able to immediately understand what the website offers without excessive scanning.
Card Sorting
A card sorting exercise was used to reorganise and group content into clearer categories:
-
Removed repetitive or secondary links (e.g. social media shortcuts)
-
Consolidated event-related content under “Our Events”
-
Grouped E-Magazine and E-Library under
-
“E-Resources”
-
Combined Join Us and Friends of JCC under “Join Us”
Task Flow
Users can easily locate key resources by searching or navigating directly:
-
Search “E-Magazine” to access the September issue
-
Search “E-Library” to explore available online cultural resources
Wireframe and Prototype
Low Fidelity Wireframes
The goal at this stage was to establish clear structure and navigation before focusing on visual design.
Home
E-Resources
E-Magazine
E-Library
September
High Fidelity Prototype
The final design combines imagery, layout, and cultural references to create a cohesive Japanese experience.
Home
E-Resources
E-Magazine
E-Library
September
Design Iterations
Home Page
Structure and Layout
The existing hero image carousel is retained, allowing users to swipe through featured visuals. The layout is refined to improve visual clarity while preserving interaction.
Basic navigation links such as “About”, “Facilities”, “Links”, and “Contact” are placed at the top for quick access, while secondary information (updates and social media) is moved to the footer for better hierarchy.
Visual and Style
The original brand colours (red, black, and white) are maintained to retain the brand identity, while incorporating Japanese-inspired visual elements such as brush strokes, traditional patterns, and illustrative accents to enhance cultural expression.
A visual metaphor is also introduced through circular design elements:
-
Patterned red circle represents tradition
-
Solid red circle represents modern interpretation
This reflects the balance between Japanese cultural heritage and contemporary presentation.
E-Magazine Page
To improve accessibility, a filtering system is introduced, allowing users to sort issues by year instead of scrolling through a long archive.
Thumbnail design is changed from rectangular to square format to reduce vertical scrolling and improve scanability.
Additional usability improvements include:
-
A persistent Search function for quick access to content
-
A Back to Top button for easier navigation on long pages
September Issue Page
The content layout is redesigned to reduce reading fatigue and improve engagement.
Key information is summarised with bold keywords to help users quickly scan and decide what to explore further.
The Related Events section is highlighted in a bold red block to draw attention, supported with imagery to provide context and visual interest.
E-Library Page
In the original design, content categories were not immediately visible, requiring users to read descriptive text to understand available resources.
The redesigned version clearly presents all six categories at a glance:
-
Books
-
Manga
-
Film
-
Anime
-
Music
-
Documentary
Each category is paired with a distinct icon to improve recognition and visual clarity.
The “Featured Book” section now includes a visual preview of the book cover, helping users understand content instantly rather than relying on text alone.
Overall, the redesign improves content discoverability and ensures users can understand the page structure within seconds.
Lessons Learned
Key Learnings from My First Website Redesign
-
This was my first experience redesigning a website, and it helped me understand the balance between improving usability and respecting an existing brand identity.
-
One of the main challenges was retaining the original structure and content hierarchy while refreshing the visual design. As this is an established organisation, it was important not to confuse returning users while still improving clarity and usability.
-
Another challenge was working within a limited colour palette (red, white, and black). This required more intentional use of layout, typography, and visual elements to create a more engaging design without relying on additional colours.
-
Simplifying navigation is not always straightforward. While the interface may appear simpler to users, the underlying information architecture and system structure often becomes more complex in order to support that clarity.
-
A personal mistake I made in this project was placing contact information at the top of the page instead of the footer, where users typically expect it. This highlighted the importance of understanding common web conventions.
If I Were to Continue This Project and fully redesign
-
Conduct interviews with Japan Creative Center to better understand their communication goals and desired public image
-
Carry out user research with visitors to identify pain points and opportunities for improvement
-
Work closely with visual content creators or source stronger photography to better support storytelling and engagement
-
Introduce a “Monthly Feature” section where users can share travel experiences, helping to create a more community-driven cultural platform
