UXPA IA Refresh
Identified issues and proposed ways to improve the information architecture for UXPA.org
Challenge
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.
Team
6 User Experience Design (UXD) students at Wilfrid Laurier University
Role
Project Coordination, Research, Design
Toolkit
Figma, Optimal Workshop, Screaming Frog's SEO Spider
Overview
Test
Indexed, analyzed, and tested architecture of the UXPA website.
Design
Developed an information strategy for the navigation, organization, and labelling of the UXPA website.
Consult
*Consulted with and presented our redesign strategy to a UXPA board member.
*I did not work directly with the UXPA, this project was completed for a university course
Research
Card Sorting:
After indexing & analyzing the UXPA's site content, I conducted a card sorting test to determine:
-
How content should be categorized on the site
-
High-level category labels
-
Participants' most frequent uses for the site
-
Differences in use/categorization by the two major user groups: UX practitioners and UX students
Tree Testing:
Based on card sorting results, I developed content category labels and conducted tree tests to uncover:
-
Effectiveness of labels when navigating the site
-
How well participants understood label meanings & associations
-
What content (if any) is strongly associated with multiple categories across the participant pool
Site Structure Design
Site Map:
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 and connected to best fit the users’ needs.
Major Changes:
-
Added associative navigation between commonly grouped pages.
-
Cross-listed pages into multiple categories based on split card sort results.
-
Updated labels to address issues with navigation and clarity uncovered in testing.
-
Merged redundant categories.
-
Added events calendar to address problems with availability of event info reported by users during testing.
Wireframe Design Process
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.
​
My general process for creating each wireframe involved the following steps:
1. Considering insights:
From the user research and client consultations, I uncovered key problems to address with our redesign. For the home page, we knew UXPA was looking to boost engagement and conversion opportunities such as chapter membership, conference/event attendance, paid courses, etc. Users main issues where with findability and clarity, caused by global nav labels, content groupings, and poor visual hierarchy. I approached the design process with these problem areas in mind.
2. 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.
3. 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.
4. Developing final wireframe
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.
Final Designs
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.
All Wireframes
If you're interested in seeing the full collection of wireframes I worked on for this project, check out the gallery below.
UXPA Partner Discounts wireframe
UXPA Webinar Library wireframe
UXPA Events Calendar wireframe
UXPA Partner Discounts wireframe
Redesigned pages:
-
Partner Discounts (restructured content, added local navigation)
-
Webinar Library (faceted search)
-
Search (restructured content, added filters)
-
Job Bank (restructured content, added filters)
-
Global Nav Menu (replaced vertical drop-down with mega-menu)
-
Chapter Search (activity filters, content restructure)
-
Events Calendar (new feature)
​
​
Learnings
Communication is key
Our team didn’t schedule regular check-ins, and instead met impromptu as needed. This way of communicating didn’t support an environment of personal accountability and full group collaboration, making it so some team members were contributing far more than others. In the future, I will set up a schedule for regular communication to ensure the whole team is on the same page and work is being delegated appropriately.
Do it well the first time, so you don't have to do it again
In an unfortunate oversight, while conducting the initial research for this project we published a study before doing a proper copy edit, resulting in us having to re-create and re-publish it. From now on, I'll be sure to implement proper checkpoints before releasing any output to ensure it's in an acceptable state.
Future 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. Had there been more time, I would have expanded the redesign to mobile web.
Further Testing
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.