top of page

UX Case Study 

Redesigning Consulate of Japan in Toronto's Information Architecture 

INF2170 - Information Architecture 

Sept. 2022 - Dec. 2022 

8 min read. 

Reconstructing The Consulate of Japan in Toronto's Website Information Architecture (IA) by improving its accessibility, labelling, and organizational hierarchy elements

Key Issues

Accessibility Issue, fonts being too small and unclear 

Organizational Hierarchy Issues (Global Navigation Labelling, Information was poorly organized) 

Users were lost and find the design confusing & ambiguous

Goal

A Better User Flow 

To create a better user experience for users by improving the layout, hierarchy, and navigation of the site

Accessible for Everyone

Ensuring that the site adheres to the accessibility guideline. Improving the site to make it accesible for everyone

Research Findings 

Our group conducted Think-A-Loud  Observation and Interviews to 8 English speaking individuals based in Toronto.

 

Collectively our group discovered: 

Insight 1: Participants were lost & unable to get back to where they started.

Insight 2: Participants felt site labeling & design were ambiguous and confusing.

Insight 3: The information was poorly organized with a limited logical format.

Card Sorting

To designing the appropriate Information Architecture, we held a card sorting research method to understand what our users think is appropriate. 6 Participants were involved in our card sorting activity

What Worked? 

There was a consensus in card organization for clear and understandable labels

What did not work? 

Participants had difficulty organizing more than half the cards into categories

Some card labels were ambiguous and confusing

Design Sprint

Low-Fidelity Sketches

Based on our prelimenary research and card sorting activity, we decided to design 2 main pages of the current Consulate's website: The Home Page and The Visa Page. We came up with several main improvements to be included in the redesign:  

1. Adding dropdown features to improve organization of the website

2. Adding sidebar to have a clear hierarchy 

3. Grouping most sections to reduce excessive hyperlinks and ambiguity 

Tree Test Finding

Conducted 2 tasks to 10 participants. Task 1 regarding asking the participants to navigate to the visa requirements page was quite successful. 50% of the participants understood the navigation. However it still shows the half the of the participants could not get the navigation. For task 2, over 70% of the participants failed to get the desired page. The tree test did help our group to finalize the schematics diagram. 

What worked? 

1. Tasks that were intuitive = relatively high success

2. 7/10 tasks had 50+ % success rate

3. For tasks that had high levels of success, we were able to find changes to further improve our final IA

What did not work? 

1. For tasks that had high levels of success, we were able to find changes to further improve our final IA

2. 7/10 tasks had 50+ % success rate

3. Unclear construction in tasks = poor success & confusion among participants

Figure. Tree test Task 1

Figure. Tree Test Task 2

Final

IA Sitemap

The final information architecture sitemap of the redesign. After various UX architecture testing (Card Sorting & Tree Testing), the final map indicates a more organized menu, including categorizing the categories, adding submenus for a better user experience.  

Final Design

Through our card sorting and tree test activity, our group developed a high fidelity redesign of the Home page and Visa page that improves the overall user flow and accessibility of the site.  

Home Page: Our grop redesigned the home page by reconstructing the global navigation by adding dropdown menu, adding sidebars to improve the design layout, and grouping the hyperlinks to reduce confusion & ambiguity.

Visa Page: Our group redesigned the Visa page by redesigning the whole infrastructure of the existing site for a better user experience. The redesign include: adding headers and subheaders for each section.

Figure. Home Page of Existing Site

Figure. Redesigned Home Page

Figure. VISA Page of Existing Site

Figure. Redesigned VISA Page

What we learned

The most important point I learned is that designer needs and user needs can differ; there is always a need for testing and revision to create a better user experience

To create a better user experience for users by improving the layout, hierarchy, and navigation of the site 

The most important point I learned is that designer needs and user needs can differ; there is always a need for testing and revision to create a better user experience

Multiple Iterations

The Importance of User Flow

Better User Flow

Get in Touch

Email

LinkedIN

bottom of page