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