Wilfrid Laurier University
UXPA Information Architecture Refresh
Overview
The User Experience Professionals Association (UXPA) website’s information architecture needs to be redesigned to improve site structure and better meet the needs of all audiences.
Goals
-
Identify weak points in the site's design causing user confusion
-
Improve efficiency and clarity of site-wide and page-level navigation
Role
Researcher, designer (1 of 6)
Responsibilities
Project management, research, design (IA, wireframing)
Team
UX design students
Tools
Figma, Optimal Workshop, Screaming Frog SEO
How might we
How might we define a clear and efficient navigation structure to allow users to more easily find and use site content?
Research
How do users interpret the site content?
After indexing & analyzing the UXPA's site content, I conducted a card sorting test to determine:​
Content categories
How the site's content should be grouped and labeled to be easy for users to understand.
Frequent tasks
The most frequent tasks and use-cases for users visiting the site.
Differences between primary user groups
Differences between how the site is being used and understood by students versus UX professionals.
Key insight
Results from the card sorting activity highlighted key problem areas were the current information architecture did not align with users expectations, and failed to consider the differences between students and UX professional's knowledge, terminology, and use-cases.
Confusing labels
Users preferred simple and recognizable terms over organization-specific jargon.
Unintuitive groupings
Users expectations on content groups were not supported by the current site categories.
Poor prioritization
The most visible site content did not align with user's frequent tasks and priorities.
How effective is our proposed global navigation?
Based on card sorting results, I developed a new high-level information architecture and content category labels. Using these, I conducted tree tests to compare the efficacy and understandability of the current and proposed IA.
Current navigation
Initial testing indicated that the current navigation was confusing and inefficiency for users to navigate.
Proposed navigation
Results validated our proposed IA changes, with failure rates falling as much as 100%, and time on task reduced by 20%.
Ideation
Redefining the site's structure
I developed a visual sitemap of a redesigned UXPA website based on our research, to provide a better understanding of how the site’s content could be structured to best fit the users’ needs.
Major changes
Easier access to related content
Added local and associative navigation between commonly grouped pages, and cross-listed pages under multiple relevant global categories.
Fewer points of confusion
Updated labels to address clarity and navigation issues uncovered in testing, merged redundant categories.​
New sources of information
Added events calendar to address problems with availability of event info reported by users during testing.
Wireframing
Finally, I developed a series of wireframes to illustrate the most important aspects of our redesign strategy for the UXPA website. Along with some layout changes to improve readability and visual hierarchy, the team focused our wireframe redesigns on improving navigation and search. These changes were informed by common problems, trends, and feedback from our research.
Considering inights
From the user research and client consultations, I uncovered key problems to address with our redesign, such as boosting engagement and conversion opportunities, and improving findability and clarity. I approached the design process with these problem areas in mind.
Establishing building blocks
First, I blocked out low-fidelity content sections to create a clear visual hierarchy and emphasize content that users reported using most often or requiring difficulty finding, as well as content UXPA wanted to be prominent.
Adding low-fidelity details
Then, I mapped out basic content placements and intractable elements, revising placements and sizing as necessary to create a consistent and cohesive framework for the design.
Developing final wireframes
Lastly, I revised the content containers, text, and icons for a medium-fidelity end result. I reviewed the design with the team to validate that the design was addressing established user and client needs, and conforming to style guidelines.
Outcome
A data-backed site structure and page hierarchy
The final designs included the new global site navigation and page-level improvements to visual hierarchy, content, and navigation.
Redesign
Current
Restructured Home page content to create a more effective visual hierarchy and increase opportunities for interaction/conversion.
On the About page, added contextual links to guide UX students towards educational content, local navigation to allow easier movement between related pages, and restructured content based on findability issues uncovered during testing.
On the Join UXPA page, restructured content to improve clarity, and added local nav to increase visibility of sponsorship/partnership pages.
UXPA Partner Discounts wireframe
UXPA Webinar Library wireframe
UXPA Events Calendar wireframe
UXPA Partner Discounts wireframe
All wireframes
If you're interested in seeing the full collection of wireframes I worked on for this project, check out this gallery.
Next steps
-
Mobile web redesign: to accommodate time constraints, we limited the scope of this project to desktop-only. However, many of the issues we uncovered through testing and our proposed solutions could be adapted for mobile web as well
-
If time had permitted, I would have run a final round of usability testing with the wireframes to assess how well they met our goals and uncover further issues or problem areas that may still need addressing.
Learnings
Communication is key
Regular check-ins and communication are critical for accountability and making use of collective knowledge.
Do it well the first time
Proper check-points and QA ensure work is done well the first time, and reduce the need to rework later.