Regina Yang
UX designer | UX reseacher
​Fog City Secrets
​Information Architecture | UI design
​Team
Group of 4
​My Roles
Design Lead
User Research
​Information Architect
​UI Designer
​Tools
Balsamiq
Onpoint Content Auditor
Optimal Workshop
​Zoom
​Time
October, 2020 - December, 2020
​Project Overview
​This is a group project for the course INF2170 Information Architecture. The project focuses on articulating the information architecture problems on the Fog City Secrets website by analyzing its existing navigational structure. Meanwhile, we proposed a new navigational structure and implemented it through various prototypes.
​
​Background
​"Fog City Secrets" is a personal website developed in 2009 by a local resident in San Francisco. The goal of the website is to provide current/potential San Francisco visitors recommendations and tips about what to do and see in the city, which includes the reviews of popular attractions, insider tips of what worth to see and do, how to get discount on tours, where the local parks, and where locals go, etc.
​
​Website Users
​San Francisco visitors who are planning to visit after the pandemic
Website users who want to know more about San Francisco but with no intention to travel
Avatars from Freepik.com
​Evaluation Process
By investigating the potential problems existing on the “Fog City Secrets” website, we employed two research methods, including survey and usability tests, to do the user research at the beginning. As a result, we identified various problems associated with navigation, labeling, organization, and search systems. Moreover, we utilized the card sorting activities to further explore the user’s mental model to fit into our organization and labeling system. During this process, I was leading the team to prepare questionnaires and tasks for usability testing. Meanwhile, I was responsible for data collection and data analysis.
​Remote Survey
​25 participants
​Usability Testing with Think Aloud Protocol
​4 participants
​Card Sorting
​6 participants
Illustrations from Icons8.com
Findings from survey and usability testing
-
Inconsistent placement of global navigation and local navigation made users hard to navigate from page to page.
-
The lack of noticeable breadcrumb trails made users feel lost.
-
The local navigation was placed non-conventionally.
-
​The search bar was positioned non-conventionally and it lacked autocomplete and autosuggestion.
-
​Outdated visual design.
​
​
​
Results from card sorting
-
The categorization of some items in the global navigation menu were confusing to the users.
-
Categories were too general and can be further divided to more precise and concise.
-
Confusing label choices in the global menu and its drop-down menu.
-
​The lack of depth in the organization structure.
​
​
​
​Proposed Solutions
Aiming to fix the issues mentioned above, we made some improvements on the global navigation, organization, and labeling systems as well as the information architecture. Meanwhile, we developed a set of user scenarios and provided a storyboard workflow that illustrates how the user would navigate through the prototypes to accomplish their tasks.
​New global nav/org/labeling system
​New Information Architecture Schematic
​Sequential Storyboards (with Prototypes)
​User Scenario 1: Subscribing to the website
​User Scenario 2: Searching for beach options
​User Scenario 3: Planning the trip to Chinatown
