Accessible Navigation through Card Sorting
Project Summary
Client: AnewVista Community Services
Role: Lead UX researcher
Timeline: 7 weeks (February 2024 - March 2024)
Team:
-
COO
-
2 UX designers
-
2 Full stack engineers
Before the project, users frequently complained about difficulties in finding information and even navigating our most prominent feature.
I facilitated Iterative collaboration with all team members and led an open card sorting project with 16 participants to redesign the information architecture.
I also created wireframes for streamlined redesign suggestions.
The project is ongoing. Designers and engineers are now implementing my iterated suggestions, resulting in improved navigation and increased user satisfaction.
Final Information Architeture
Initial Information Architeture
Background
AnewVista Community Services is a non-profit organization that helps seniors learn about technology through online and offline courses, tech readings, and videos on topics like digital safety and using common features.
Launched in 2019, AnewVista's website has grown and now serves 600 online users. We serve mainly seniors but also have users who are staff of senior communities, grantors, and donors. In 2023 alone, they conducted 164 online classes with an average attendance of 25 seniors per class. They are also affiliated with 7 senior communities in California.
New Homepage Design
The website, built on Wix, faced limitations and disorganization as more features were added. These issues led to significant usability problems, prompting the need for a redesign. I joined as a solo UX researcher to address these challenges.
I conducted stakeholder interviews and utilized a research intake form to gather project requirements. Additionally, I moderated a UX audit to identify the issues the website was experiencing. Based on our findings, the team determined that the first priority should be revamping the information architecture, as several sections were misplaced and confusing.
The project lasted seven weeks. After completion, I continued to assist with implementing my suggestions and evolving the information architecture. The work is ongoing.
Current Problems
User Complains
Seniors frequently complain about the difficulty in navigating the website for booking classes, troubleshooting, and other tasks.
Huge Customer Services Cost
Customer service teams face a heavy burden handling repetitive user questions on the website.
Counter-intuitive Menu
The menu is not intuitive and lacks logical structure, according to our team's UX audits.
Secondary issues:
-
The premium ("members" section) features cause discomfort for grantors, needing reduced visibility if possible.
Old Menu
Challenges
01 Accessibility
Ensuring the study and website design are accessible for seniors with limited tech skills.
02 Senior Users
Adapting recommendations to meet the specific needs of senior users.
03 Cross-Platform Design
Designing intuitive navigation for both mobile and desktop platforms.
03 Cross-Platform Need
From my other research projects (Accessibility Survey & Google Analytics), I found that a significant portion of users access our website through mobile devices.
Methods
To design the website menu, I opted for open card sorting to understand users' natural categorization and terminology. I also used a post-test survey to capture participants' mental models.
Other methods considered included:
Tree Testing: Useful for assessing website navigability but not suitable due to our lack of an ideal site architecture.
Closed or Hybrid Card Sorting: More appropriate if we are happy with some existing groupings and labels, which we did not.
Participants
We recruited 16 participants, as this number provides a sufficiently representative sample for reliable results.
Based on the user group, participants included:
-
Existing senior users (Moderated Group Session)
-
Seniors new to the website (Unmoderated Group Session)
-
A broader group of random adults (Unmoderated Group Session)
Study Design Improvement
With no research budget and to ensure accessibility for seniors with limited tech skills, I initially designed the card-sorting sessions using Figma. I created clear, step-by-step instructions and asked participants to drag and drop cards into groups, labeling each one.
Initial Study Design: Figma Card Sorting
Too complex for seniors to figure out using Figma and drag-and-drop cards!
From our study plan discussion, it quickly became apparent that Figma was too complex for seniors to use effectively.
Recognizing this challenge, I pivoted to Google Sheets, a tool that seniors were already familiar with from our technology courses. I set up 3 sheets:
-
Study Instructions
-
Card Sorting Activity
-
Post-Test Survey
In the initial setup, I combined the study instructions and card-sorting activity into one sheet. During pilot testing, seniors had difficulty navigating through instruction and activity. To simplify, I separated the instructions from the activity.
Sheet 1: Card Sorting Instructions (Provided clear guidance on how to sort and label cards)
Sheet 2: Card Sorting Activity (Allowed users to cut and paste 34 cards into groups)
Way easier to participate!
This adjustment made the process more user-friendly and aligned with our budget constraints, ensuring a smoother experience for participants.
Results
Without automatic analysis from the card sorting tool, I manually analyzed results and created a similarity matrix to identify card groupings and potential categories. This method effectively revealed pairings and groupings. I used a heat map to present the results, with labeled similarity ranges.
Analyzing Card Sorting Data: Similarity Matrix
Key Post-Test Survey Results
-
Participants categorized cards based on common website groupings and similarity of meanings.
-
Some items were not easily understood without context. Careful usage of names in menus and buttons is crucial for easy navigation, such as "Tech Tips," "Testimonials," and various community names (e.g., Avenidas, Eskaton VCR, Milpitas Senior Center Members, PJCC, The Vi - Palo Alto).
-
These issues were addressed in our final design, resulting in improved usability.
-
Initial Key Insights and Recommendations
From the similarity matrix and post-test survey, I proposed an initial information architecture to improve menu navigation. However, as I gained more context about senior users' behavior, I realized that the proposed menu structure did not fully address our major usability issues.
Initial recommended IA
To refine the design, I worked closely with a designer and the COO to gather additional insights and constraints:
Further Constraints
-
No dropdown menus.
-
Wix design limits us to a maximum of 5 main sections.
-
Premium membership is not a key focus and should be removed from the menu.
-
Avoid hamburger menus on mobile platforms, as seniors often have difficulty understanding how the hamburger icon works.
-
Minimize the number of main menu sections to fit the mobile screen.
-
Reduce the number of characters in each section to ensure they fit on mobile screens.
-
Preview of the Final Result
Before
After
Removed the Humberger Icon
Largely Simplified Menu
Follow-up
Workshop with a Designer
I conducted a workshop with designers to brainstorm solutions for the information architecture. While we didn't finalize solutions immediately, we generated many valuable ideas for the website redesign.
Final Suggestions
After multiple revisions and discussions with stakeholders, I arrived at a final information architecture that we are confident in. Our team is now working on redesigning the website based on this new IA.
New Menu Design
Created redesign wireframe
Implementing the IA involves not only reorganizing pages and designing menus but also enhancing other website elements, such as adding a summary page for the Partner menu section instead of using dropdowns.
To ensure accessibility for seniors, I followed Web Content Accessibility Guidelines (WCAG) in designing the wireframes.
Impact
-
Established and facilitated the collaboration between UX researchers, designers, developers, and the COO in the organizations.
-
Redesigned a confusing site structure, making it easier for users to find what they need and significantly enhancing their overall experience.
-
Crafted solutions with the specific needs of seniors in mind, greatly improving the website's accessibility and usability for this key user group.
-
Created a strong foundation for future redesigns. Implemented recommendations gradually, resulting in a 62% increase in returning users and a 25% decrease in customer complaints.
My Learnings
-
Conducting thorough stakeholder interviews at the start can streamline the process, although some insights only emerge as the project progresses.
-
Gained valuable experience in accessibility design and learned how seniors interact with technology in ways that were previously unexpected.
-
Found that users often engage with features differently than intended, underscoring the importance of research to address these discrepancies.
-
Actively engaging with stakeholders and asking the right questions proved crucial for understanding their perspectives and achieving project success.
-
Developed skills in adapting designs to platform limitations and practical constraints, ensuring that solutions are both innovative and feasible.