Overview
Target Users
Japan Creative Center acts as a base for sharing information on Japanese culture in Singapore. So the target audience would be people who are always on the look out for interesting trivias, online resources and events relating to Japanese culture.
Web Analysis
UX Walkthrough of Current Website
My first impression on the website is that it feels a little outdated, in terms of visual design and menu layout as I feel like there's a cluster of information on scattered on the page that I need time to look around every option to know what is what.
Japanese UX/UI Web Designs
It is interesting to note that the reason why JCC is using such a layout is because they use the same form of design used in Japan, as Japanese people prefers more information on the website to aid them in their decision making.
It is a way to build trust with the customers, so the more information they get from that website, the better it seems to be. So this affects the user flow and UI design you will commonly see in Japanese websites, which is very different than everywhere else.
But in this case, the target audience for JCC is Singaporeans and not Japanese. So we have to change, in order to adapt to the user behaviours of Singaporeans, who prefers a simple layout and minimalistic design.
Information Architecture & Card Sorting
There are too many options on the home page which will overload the users from exploring all the options, causing confusion or online fatigue.
Current
The aim is to reduce cognitive load, declutter and reorganised the home page to make it simpler.
Users will know what they are looking at quickly, creating a pleasant surfing experience.
We did a "card sorting" to organise the options into relevant groups and re-label them accordingly.
New
-
Remove repetitive options like Facebook links
-
All events related options pushed to "Our Events"
-
E-Magazine and E-Library pushed to "E-Resources"
-
Join Us and Friends of JCC pushed to "Join Us"
Task Flow
User will search for "E-Magazine" to read the 'September' issue and search for "E-Library" to see what online resources are available.
Prototyping
Low Fidelity
Home
E-Resources
E-Magazine
E-Library
September
High Fidelity
Home
E-Resources
E-Magazine
E-Library
September
Iterations
Home Page
The top highlight reel photo gallery where users can swipe left and right is retained with a new design.
The original colour theme of red, black and white is retained to preserve the brand identity while giving it a creative look with the Japanese elements like brush stroke, traditional patterns and illustrations.
The red patterned circle on the left represents tradition while the plain red circle on the right represents modernity, just like the Japanese Kanji on the left and the English Words on the right.
Basic info like "About", "Facilities", "Links" and "Contact" are placed on the top section. Other info like updates and social media links are placed at the bottom.
E-Magazine Page
Users can filter the catalogue by year, instead of having to scroll down the entire list to 2014.
The thumbnails are square instead of rectangle to minimise scrolling so users can see all at one glance.
A "Back to Top" button is included on every page so users do not have to scroll back up to the top.
A "Search" function is included on every page for users to find anything easily.
September Page
The goal here is not to overload users with too much words so I sum up every section and bold the keywords to get their attention and arouse their curiosity into reading more.
The 'Related Events' is in a bold red portion, to get the user's attention who is by this time have a reading fatigue. A photo is included to give users an idea of what the event is about.
E-Library Page
For the existing website, at one glance you might think there are only 3 categories: book, manga and film.
But if you read the top paragraph, there is actually 3 more categories: anime, music and documentary.
For the redesign website, you can see all 6 categories clearly labelled, each with a unique icon.
For the 'Featured Book' section, there is now a photo of what the book looks like for users to know.
The idea here is to enable users to know at one glance what the page is about and what is has to offer.
Self Reflection
Lesson learnt from re-designing a website for the first time:
-
the challenge of retaining the layout and order of content as much as possible while giving it a fresh new look, to respect the organization's brand identity and to avoid confusing regular visitors
-
the challenge of making a more creative and visually captivating design while retaining the limited colour themes of red, white and black
-
the more I try to simplify the menu and options in making the website easier to navigate through, the more complex the flow chart and system architecture becomes
-
it is my first web design so I made the rookie mistake of putting the contact details on top instead of the bottom alongside the social media links like most websites
If I were to commit to redesigning the entire website, I would:
-
conduct interviews with JCC to know about their preferences and what sort of image would they like to present to the public
-
conduct user research with visitors to know about their experiences and their thoughts on the current website and how they might improve it
-
coordinate with their photographers or take photos of JCC events myself as I learn the importance of using the right photos for the website that is enough of spark people's curiosity into clicking it to know more
-
recommend a "monthly feature" section on the website where JCC select the best photo from visitors of their memorable Japan trip and include a short story of what they love about that trip
