New Mexico History Museum
Group Assignment, Information Architecture Course
M.S. Information Experience Design, Pratt Institute
In fall 2020, I took an Information Architecture course for my degree at Pratt. In this course I was paired in a group of three to conduct a website redesign from beginning to end, and we chose the New Mexico History Museum, which coincidentally revealed it's own redesign during the semester!
Low-fidelity wireframes and high-fidelity prototypes were created based in the results of multiple user research experiments, including interview, observation, questionnaire, competitive review, card sorting, site maps, and usability testings.
Yuki Shimano, Fariah Qasim, Arieta Palevic
PLAY WITH THE FINAL PROTOTYPE
Keep scrolling to see the full case study!
OVERVIEW
Perform a full website re-design and app design for the New Mexico History Museum.
The New Mexico History Museum website originally had a dated website design that led it to become a prospect for the website redesign project. The museum launched a new version of their website with improved visual design one week after the start of the project, but despite this, the website was determined to still need significant modification, including improved information architecture to promote discoverability, shorter menus, design consistency, improved search functionality, and an enhanced mobile experience.
We found several usability problems through the design process while we narrowed down the redesign scope to the most crucial issue -- the content hierarchy. The content order was vital in allowing every visitor to navigate and find what they were looking for easily.
Tools Used
–Figma
–InVision
–Miro
–UserTesting.com
–Optimal Workshop
–Slack
My Role
–Editor
–Research
–UI Designer
–Scripting
–Wireframing
–Prototyping
TIMELINE
1 / RESEARCH
User Interviews, Observation Testing, Persona Designs, Competitor Analysis & Review
2 / TESTING
Card Sorting, Site Map Development
3 / WIREFRAMES PT. 1
Low-Fidelity Wireframes, Medium-Fidelity Wireframes, Observational User Testing
4 / DESIGN
Style Guide Development & Integration
5 / WIREFRAMES PT. 2
High-Fidelity Wireframes and Prototypes, Additional User Testing
6 / DELIVER
Style Guide, High-Fidelity Wireframes and Prototype
Five participants who expressed interest in visiting cultural institutions via a screener were interviewed to gain a deeper understanding of the website’s users.
USER INTERVIEWS
All of the participants lived in the United States: four in the West coast, and one in the East coast. All participants were in the age group of 25-35 with full-time jobs. The participants were interviewed through a Zoom meeting. The team developed an interview script to address the actual website’s pain points and observe the uncovered user needs. As part of the observation plan, participants were asked to view the actual website design and share initial impressions.
The NM History Museum website’s user personas and insights were established from the interview notes.
PERSONAS
Tentative personas of potential users of the NM History Museum website were created based on the interviews and observations. The personas were created with a hypothetical scenario and not entirely research-based, but helped reflect the website’s typical user demographic.
.jpg)
COMPETITOR ANALYSIS
Five competitor museum websites were evaluated, and their homepage, navigation, exhibition layout, virtual exhibitions, events/calendar page, and appearance were compared.
CARD SORTING
Three participants were recruited to complete an open card sort test that was created using the Optimal Workshop Tool to analyze the website’s content terminology and categorization. Participants were asked to place 52 different topics into groups, and then label the groups.
Analysis of the test results revealed that the participants found some of the existing terminology confusing, and grouped the topics into fewer categories than on the NM History Museum website’s navigation menu. The wording for those terminology were changed based on the feedback from the participants, and then the topics were grouped into new categories based on the results.
SITE MAP
After analyzing the data from the open card sort study and modifying the terminology, the team created a site map that reflected the new and engaging terminology, as well as the condensed amount of topic categories.
LOW FIDELITY WIREFRAMES
After analyzing the data from the open card sort study and modifying the terminology, the team created a site map that reflected the new and engaging terminology, as well as the condensed amount of topic categories.
.png)
MODERATED REMOTE USABILITY TESTS
Tests were conducted with a total of six participants (with each team member moderating two tests). Using Zoom we asked participants to complete three simple tasks.
1) Find offered tours
2) Go to an exhibition page
3) Sign up as a volunteer
Valuable feedback was gathered on the placement and organization of content.
MEDIUM FIDELITY WIREFRAMES
The low fidelity paper wireframes were transformed into medium fidelity digital wireframes in Figma.
MEDIUM FIDELITY PROTOTYPE
InVision was used to build a clickable prototype with the medium-fidelity digital wireframes.
UNMODERATED REMOTE USABILITY TESTS
Tests were conducted with four participants to gain user insights. Key takeaways included:
1) Making link text more descriptive
2) Adding links to related content on some pages (i.e. an 'About Us' link on the 'Visit Us', 'Contact', and 'Join & Support' pages, and a 'Museum Shop' link in the menu.
3) Improving the function of the date filter for Events pages
4) Adding icons where appropriate (next to headers)
STYLE GUIDE
Each team member designed a proposed style guide based on the museum's mission, location, and community. We voted on which style guide to use for the project and my style guide won the vote!
.png)
HIGH FIDELITY WIREFRAMES + PROTOTYPE
After the high-fidelity wireframes were made using Figma, we went back to InVision to build a clickable prototype.
HIGH FIDELITY WIREFRAMES
After the high-fidelity wireframes were made using Figma, we went back to InVision to build a clickable prototype.
UNMODERATED REMOTE USABILITY TESTS
Tests were conducted with four participants to gain user insights. Key takeaways included:
1) Making link text more descriptive
2) Adding links to related content on some pages (i.e. an 'About Us' link on the 'Visit Us', 'Contact', and 'Join & Support' pages, and a 'Museum Shop' link in the menu.
3) Improving the function of the date filter for Events pages
4) Adding icons where appropriate (next to headers)
