Nanny Angel Network
Information Architecture Redesign
The final project of my graduate level Information Architecture class at the University of Toronto involved redesigning the IA of an existing website. My team was lucky enough to work alongside a community partner, Nanny Angel Network.
The Client
Nanny Angel Network (NAN) is a non-profit organization that provides free, specialized, in-home childcare to families undergoing cancer treatment in Toronto and the Greater Toronto Area.
Meeting with the marketing manager of NAN, we discussed their needs for the website and their issues with the current information architecture.
Needs
-
Increased and sustained site traffic
-
Increased donations and support to enable expansion of services
-
Framework allowing for site to evolve into a resources hub for families and children affected by cancer
Issues
The current organization of content and the presentation of information does not align with the goals and direction of NAN. This is exacerbated by:
-
Inefficient content organization across the website
-
Ineffective labelling
-
Inadequate navigation system
-
Static homepage
-
Unclear expression of organization’s purpose
NAN's current homepage
My Role
My main responsibilities included:
-
Supervised and delegated tasks to ensure the completion of our first deliverable
-
Aided in the development of a user survey to be distributed through NAN to current users of the website such as mothers and volunteers
-
Conducted usability testing in the format of a cognitive walkthrough with participants role-playing as user archetypes
-
-
Incorporated research findings into our proposed redesign
-
Generated preliminary sketches and a paper prototype of our proposed redesign (see image below)
-
Created detailed medium fidelity pages associated with the redesign of the website’s problematic “Resources” section
-
Incorporated and edited site pages generated by group members into a cohesive, clickable medium fidelity prototype using Figma
-
Prepared documentation outlining a proposed site wide search system to support various information seeking behaviors, aiming to pitch a system that promotes extensibility of the site in the future
Example of one of my preliminary sketches
What We Do page in our clickable prototype
Software Used
-
Google Sheets, Docs, Slides
-
Survey Monkey
-
Content Insight Content Analysis Tool
-
Skype
-
Optimal Workshop Card Sorting and Tree Testing tools
-
Figma
Deliverables & Artifacts
-
Problem statement
-
Analysis of context, content and users
-
Content inventory
-
User survey and results
-
Usability test script and results
-
Card sort study and results
-
Redesign proposal
-
IA schematic diagram
-
Preliminary sketches
-
Paper prototype
-
Preliminary storyboard
-
Medium fidelity prototype
-
Storyboard
-
IA redesign overview
Problem Identification
Nan’s website currently presents a challenge for new visitors to navigate, and information is not organized or prioritized in a way that reflects NAN’s mission and interests. It is critical for the satisfaction of site visitors that the content they seek is easily accessible, and it is equally important for NAN to maintain visitor engagement to increase participation in their cause.
At minimum, NAN’s website must allow for the completion of these three tasks:
-
Make a donation
-
Apply to volunteer
-
Request childcare services
User Research
Based on the three identified tasks we based our testing and analysis on three user groups:
-
Potential donors
-
Potential volunteers
-
Visitors seeking services
To better understand the content and functionality those users found most important, we conducted a survey, a cognitive walkthrough usability test, and a card sort activity with both new and experienced site users.
Survey
Due to the subject matter of the website, we remained sensitive to creating a survey that was short and accounted for varying comfort levels and participation. Keeping that in mind, we gave the survey to NAN’s marketing manager to distribute as she saw fit.
We received four responses total. Two respondents were volunteers, one was a mother who uses NAN’s services, and one user who had visited the website before.
The results of the survey were generally positive, with a recurring theme that users want information to be clearer and more accessible. However, due to the limited number of respondents and the fact that the survey was distributed by a NAN employee, it is likely answers were biased. Upon analysis of our gathered data, we ensured to take such biases into account.
Usability Testing
To gain a better understanding of the user groups that may visit the website, we conducted usability testing in the form of a cognitive walkthrough.
Five participants gave their initial impressions of the site as new users- and role played as three user types: a mother seeking NAN’s services, a potential volunteer, and a potential donor.
Q: As a mother, how would you find out a Nanny Angel's qualifications?
Scrolling home page
Clicks “Get Help”
“Trained, experienced caregivers… What does that mean?”
Usability test excerpt
Usability testing underscored issues with navigation and content organization. Participants had difficulty finding key information about the organization and struggled to explain what the organization actually does upon questioning. Usability testing also emphasized the need for the site to support multiple modes of information seeking behavior.
Card Sort Exercise
We conducted an open card sorting exercise to help inform the organization of site content and labelling. To get a better representation of potential users, we recruited mothers as representative visitors seeking services, and students as representative potential volunteers. As no restrictions apply to be a donor, we felt potential donors were represented by all participants.
From the card sorting exercise, we were able to develop overarching groups and labelling schemes that informed the organization of site content and the design of the navigation system.
Cards used in the card sorting exercise broken down into the best merge method
Overview of Proposed Redesign
Retain the current two-level global navigation menu, but have all primary labels in the global navigation menu unfold into secondary labels upon mouseover. This will help the user better understand the organization and content of the site at a glance.
Current website global navigation
Include local navigation on all pages through use of a sidebar. The sidebar will include a static primary label (title), secondary labels, and expandable tertiary labels. Tertiary labels provide an overview of page content and are anchored to their corresponding subheadings- easing navigation through more specified content.
Implement label changes to better reflect the intended audience of each section, guiding user groups to content applicable to their needs.
Retain the task-oriented/audience specific organizational schemes to keep content accessible to a variety of users.
Proposed global navigation
Proposed sidebar navigation and About Us section organization
Consolidate “Get Involved” and “Support Us” into one category: “Get Involved”. This guides potential supporters to one section of the site and promotes the possible methods in which users can get support the organization. .
Current website's Get Involved page. Note the lack of secondary labeling in the global navigation.
Current website's Support Us section
Proposed "Get Involved" section and overview of the Events page
Redesign the News and Blog (relabeled by us as "Media") and Resources pages to make content browsable and help users find specific information.
Current Resources page. Note the lack of organization in listed resources and subheading design.
Proposed Resources landing page.
Proposed Resources section "Browse by Category" functionality
Implement search and filter functionality to improve the overall usability of the website. This will meet users’ needs by encouraging them to query specific information and to browse related content without having to navigate multiple pages.
Proposed search system design. Note the incorporation of tags, a resource type filter, and a sort function.
Conclusion
By addressing issues with content organization and prioritization, labelling, and navigation our proposed redesign seeks to meet the needs of NAN and create a framework for growth and extensibility.
Revisiting NAN's Needs
Increased and sustained site traffic
-
Dynamic homepage implores users to navigate additional content
-
Improved navigation and organization help users browse content with ease
-
Search and filtering system enable users to query specific information and browse related content
-
Reorganization of site pages and content to appeal to new visitors maintains user engagement
Increased donations and support to enable expansion of services
-
Prioritization of critical content will help users immediately understand NAN’s mission
-
Consolidated “Get Involved” section will promote possible ways for users to contribute and acts as a call to action
-
Boosting site traffic will increase potential support by new donors and volunteers
Framework allowing for site to evolve into a resources hub for families and children affected by cancer
-
Search system allows site to host additional media and content while reducing impact on usability
-
Redesigned resources section and embedded search functionality helps users find helpful content
-
Dynamic homepage presents a platform to present curated resources and media
Clickable Prototype
Clickable prototype public embed