UX Research & Wireframes - Presidential Museum & Library
I was the lead UX Researcher and Information Architect for a Presidential site that had ~277,000 pages. I collaborated with several of their departments: the museum, a robust historical library, an e-commerce merchandise shop, the membership and donor team, political advocacy programs, educational scholarships and student programs, and remote and live events.
I completed this project with support from the President of a web agency (former employment), the Creative Director, and our Analytics team. Photos and wireframes have been redacted to respect NDA guidelines.
User Research & Information Architecture
User Research
This client was focused on improving their site’s architecture so that they could simplify their main navigation and redesign their site in a later phase. They did not wish to have extensive user research conducted since the main portion of their budget for phase 1 was allotted for architecture. I used the data readily at hand:
A long history of detailed site analytics
Internal user interviews
Internal site questionnaires
Information Architecture
From this research I found that most of the website was designed around purchasing their museum tickets, while their most visited pages were for student scholarships. The organization also had received feedback from their donors that the donation process was difficult and this was their primary need as an organization.
I used the chalk wall in the office to do 2 phases of card sorting that led to the results of the information architecture phase.
Chalk Wall Phase 1
I put all of the page types on notes cards and went through how all of their information could potentially relate to each other. Then, I connected the newly organized information into “buckets” that would stem from the main navigation.
Chalk Wall Phase 2
I sorted through any pages that were not able to be navigated (i.e. a stranded pages) to ensured they would be connected in the new architecture. From there, I checked to see ways that we could cross-promote different pages on the site based on what programs, events, exhibits, etc were relevant to other areas of the site.
Navigation Wireframe
Due to the large amount of data to digest in the architecture, it was helpful to create visuals that would help present the changes.
I made an interactive lucid chart of all of the pages (not shown) and how their new navigation would be organized (video).
Their old navigation had 21 action items on the first level (no clicks/hover needed). The new navigation reduced the options to 11.
Their old navigation had 93 action items on the second level (hover options). The new navigation reduced this to 39.
No information was deleted. All pages were only 2-3 clicks deep in the new architecture.
Mobile Wireframe
The mobile navigation offers the user a mix of “quick” tasks that are available without opening the menu as well as a traditional collapsible menu. The mobile navigation gives users all of the same options as the desktop except for membership tiers (they would be available upon visiting the membership page).
Page Wireframes
Systematic Thinking & Page Cross-Promotion
This client asked us to create wireframes for 8 pages on desktop and 3 mobile examples to demonstrate how to cross-promote relevant pages across their site and how to implement re-usable UI elements (i.e. I led a pitch for a design system). The wireframes would also be interactive like the navigation.
The first three pages I tackled were:
Home - Based on the data I gathered from the earlier phase of the project, I was able to work with the organization’s team to quickly decide what their biggest priorities were for the home page.
Museum Exhibit Page - This acted as an example of what we called a “detail page.” It showed how their side navigation could work and different ways for them to present museum and historical data.
Events Page - This was a specific pain point for them in the past as it was difficult to filter the different kinds of events that they host; virtual and in-person across different locations by different departments of their organization.
Home Page - Desktop & Mobile
Exhibit Page - Desktop & Mobile
Events Page - Desktop & Mobile
Desktop Only Wireframes
The rest of the pages were desktop only due to the scope of the project. Each page showcased how to use different components to their advantage guided by their user data.
The rest of the desktop pages were:
The Institute - Aside from the Foundation/Museum, this was their largest internal org. They have their own podcasts, events, forums, centers, scholarly publications and more. This would act as this sub-org’s home page.
Support Us - Since this is a non-profit organization, the support page was top of mind. We simplified all ways of giving down to one page rather than giving each different method of giving its own page.
Membership (2 options) - Aside from donations, memberships were for visitors who wanted to be long-term investors of the organization. The client wanted to pay close attention to this section since it was the largest source of steady financial support. One wireframe option has the forms directly on the page while the other looks like different tiers that would then walk you through sign up depending on your selection.
Education - This area of their site had the most traffic according to their analytics. This page was the starting point for current or potential students of their educational programs. Educators also had a new and easy way to find their resources.
The Institute
Support Us
Membership (Option 1)
Membership (Option 2)
Education
Conclusion
I pitched a design system to the client and left them with interactive components in the wireframe stage. This pitch was was met with lots of excitement and was scoped out for the design phase. The design phase started after my time at the company. The client was thrilled with the 2 phases of work I did with them.