Introduction:
Misericordia is an NGO located in Chicago that offers care that maximizes the potential for persons with mild to profound developmental disabilities. In this project we tried to redesign the menu of their website so it would be more clear for users, we used a in-group content inventory method to test the flaw of the current navigation tree, the using card sorting method to redesign the navigation, and eventually redesigned the navigation based on the new sitemap.
My role
I was assisting in testing the In-gourp content inventory, and helped designing the in group remote card. When it comes to sitemap, I wrote the annotation for all the items within Misericordia.com I also designed the first-click test after the medium fi prototype comes out.
Content Inventory
We began with an in-group content inventory of the website on Google Sheets, which gave us insights into the visible flaws of the different navigation trees. All duplicates were noted in the comments and key task navigation was highlighted. After categorizing all top-level, second-level, and utility navigation in the website, we obtained 22 top-level items and 46 second-level items.
Card Sort
After our content inventory, we inputted all 46 second level items to Optimal Workshop, in order to conduct a Remote Open Card Sort amongst ourselves to determine the primary and secondary navigation of the website. We categorized all items to our own discretion. All 4 group members completed this test.
Site Map
The first concise iteration of the site map was completed after the second round of card sorting, but before any IA testing. It depicts newly created tabs, existing content inventory tabs that were renamed, and even tabs that were deleted entirely. Former pages like “Contact Us” and “FAQ” tabs were removed and incorporated into the utility navigation, which itself went from 10+ tabs to just 4. A Login/Sign-Up utility was also created to replace broken sign-up prompts under “Donations” and “Volunteering.”
Furthermore, we renamed certain pages like “Direct Service Professionals” to reduce ambiguity and replaced the “Memorial Cards” primary navigation tab with a new page under Donations titled “Donations with Memorial Cards.” Minor informational and form pages under Volunteering, Donations, and Online Goods were grouped under new second-level navigation tabs like “Other Donation Methods” to increase visibility of high-traffic tabs like “Donate Online Now.” Poorly categorized pages like “Admissions” and “Thrift Shop Special Promotions” were moved under relevant parent tabs. Information from pages related to the Board of Directors and Misericordia Staff were added to a new page titled “Our Leadership. The new navigation from this iteration was used for the first round of Treejack Testing.
Wire Frames
The final home page for both wireframes is shown above. All navigation tabs are located towards the top of the page, while the utility navigation is placed at the bottom. The notable exception is the SignUp/Login utility, which is immediately located at the top-right of the page next to the title of the organization.The body of the page is dominated by content, like upcoming events and highlights of the organization’s recent activities.