Introduction
Pacific Science Center is a science museum located in Seattle, Washington. Per their website “Pacific Science Center ignites curiosity in every child and fuels a passion for discovery, experimentation, and critical thinking in all of us.”
This was the third project of User Experience Design Immersive 31, for General Assembly Seattle, of which I am an alum. PacSci, along with other companies located in the Seattle Center, were mock clients of the UXDI students.
Project Details
- Purpose: Class Assignment
- Timeframe: 10 days
- Role: Visual Designer, Interaction Designer, Project Manager
- Deliverables: All Wireframes, Prototypes, Presentation Master, Various Graphics
- Team Members: Robin Nunnally and Jonathan Bui- User Researchers, Matthew Lotharius-Information Architect
Project Goals
- Mobile-friendly site that also works well on desktops
- Site should feel timely- by highlighting upcoming events and programs
- Site should encourage sharing via social media and word of mouth
- Main goal is to get people to visit and buy tickets<
- Secondary goals include encouraging membership and donations
Project Outcomes
- Accomplishment of project goals and grant obligations
- Achieved "EXCELLENT" and "GREAT" SUS scores compared to USPSTF, which was rated "POOR"
- Site is not overloaded or clunky
- Team can easily update site without help
- Users felt "represented" in imagery
- More user friendly than USPSTF
Methods (Click to see insights and process):
Methods:
- User interviews
- Employee and former employee interviews
- Research of common museum goers personas
- Usability testing of current website solution
- Contextual Interviews
Sample Questions:
- How many times have you visited a museum in the last year?
- What information do you search for when you are researching a museum to visit?
- Are you a member of any museums?
- If the user had children we asked questions like: What role do your children have in choosing a museum to visit?
- If the user did not have children we asked questions like: Have you ever visited a museum for a 21+ event?
Who Our Researchers Interviewed
Individuals with Children
Aged 30-40
The insights from these users eventually became the Karen Kindergartner persona.
Museum Employee
A former employee gave us meaningful insights about the inner workings of the museum and introduced us to the 5 Types of Museum Goers research by John Falk which was used to create taglines for our personas.
Individuals Without Children
Aged 20-30
The insights from these users eventually become the Sam Singleton user persona.
Usability Testing
Via Zoom, we had museum patrons complete the following tasks and got their feedback on the current website
- How would you discover a new event on the site?
- How would you buy a ticket to a Laser show?
- Are you a member of any museums?
- How would you buy a ticket to an IMAX showing?
- How would you become a member of this museum?
- How would you purchase a ticket for admission to the museum?
- How would you purchase a ticket to a special event?
- How would you find resources for kids programs?
- How would you find resources for students during covid?
(With consent) our user researchers recorded each user interview via zoom, utilizing the screenshare option to record contextual interviews. They then recorded interesting insights and comments from our users. We used those comments to begin defining our user problems and their solutions.
User Insights, Individuals with Children:
Our user researchers compiled their data into bullet points on sticky notes, and, as a team, we worked together to affinity map the point using Miro. After we identified trends in the user data, we further compiled the user points to one motivation/desire statement per grouping.Hover grouping to see insight
“I expect to find hours, times, and parking info to be clearly on the website.”
“I like the flexibility of membership perks”
“I like knowing when the facility has new content and events”
“I want to find a good deal for tickets”
“I use my desktop to explore a site, and use my phone when I’m quickly finding key info before a visit.”
“I think that PacSci provides great quality and content.”
User Insights, Individuals without Children:
Our user research compiled their data into bullet points on sticky notes, and, as a team, we worked together to affinity map the point using Miro. After we identified trends in the user data, we further compiled the user points to one motivation and desire statement per grouping.Hover grouping to see insight
“I want to discover and share my experiences at the museum with my family and friends”
“I want my museum experience to be engaging and up-to-date”
“I enjoy good value for the price of admission.”
“I want my experience to be interactive and with clear navigation”
“I need the museum to accommodate my mode of transportation”
No actionable insights came from this insight due to the variety of views.
Developing Personas:
After synthesizing our data into a singular user need, want, and/or motivation based on affinity map trends, we translated these insights into two distinct user personas; Karen Kindergartner and Sam Singleton.Karen Kindergartner
- 38 years old
- Seattle Local
- Married
- Has Children
- Medical Professional
Scenario: Karen has limited time in her busy career, so she wants to make sure the places she goes are worth the effort. Her Goals include encouraging learning, exercise, and engagement for her kids, while at the same time, allowing her a few moments of time to breathe for herself. When she's not running between meetings with patients or errands to and from work or picking up her kids, she is hopping on her phone to try and plan out quick fun and educational experiences for her little ones.
User Needs:
- Clear information on operating hours, admission times, and parking
- Awareness of ways to save money on museum admission
- Website design that is responsive
- Clear communication of museum events, programs, and exhibits
- Flexible membership options and awareness of those options
Pain Points:
- Not knowing the value of the memberships
- Unclear hours and parking info on website
- Not knowing up to date info on museum events
Goals:
- Access pertinent information as I need it
- To get good deals for tickets
- To be able to access museum info depending upon what device I am on at the moment
- Knowing when the facility has new content and events
Sam Singleton
- 25 years old
- Seattle local
- Single
- No children
- Employed full time
Scenario: Sam is a single guy who loves to have new experiences and share them; either by going with family and friends or by sharing with them on social media. Sam wants to feel as though he’s getting a good value of experiences for the price of his admission ticket. He also wants them to be interactive and engaging so he doesn’t get bored and has good experiences to document. Sam needs the museum’s website to clearly communicate the things he will experience when he attends. Sam loves to share his daily adventures on social media.
User Needs:
- Clear transportation and hours on website
- Clear communication of current and upcoming exhibits
- Needs to be able to schedule a time to visit
- Needs to feel that they are getting a good value for their ticket
Pain Points:
- Unclear parking information and navigation directions
- Outdated and unclear exhibits
- Bored by exhibits that are not interactive
Goals:
- I want to discover and share my experiences at the museum with friends and family.
- I want an engaging experience and up to date exhibits.
- I want to have good value for my price of admission
- I want to have an interactive experience with clear navigation.
Problem Statement
While Karen and Sam both have very different motivations for their visits, the solution to both of their unique needs seemed to be largely the same. As such- we ended up deciding on two problem statements based on our personas and one common solution statement.
Solution Statement and Hypothesis
We believe that by reorganizing and more prominently displaying the information on upcoming exhibits, museum offerings, and key visitor information, Sam and Karen will be able to discover and experience a wider range of offerings at the museum and plan their trip more efficiently.
We will know this to be true when users are able to more quickly access the information they need, resulting in a 50% increase in pre-purchased tickets, memberships, and donations.
We will know this to be true when users are able to more quickly access the information they need, resulting in a 50% increase in pre-purchased tickets, memberships, and donations.
Methods:
- Competitor/ Comparative Analysis
- Information Architecture
- Card Sorting
- Sketching
Now that we have a clear idea of what our problems are and what our users need, it's time to ideate ways to solve the problems of our users.
As we explored the current site and reviewed the input of our users, some opportunities for improvement became immediately apparent
As we explored the current site and reviewed the input of our users, some opportunities for improvement became immediately apparent
- The site has a lot of great content, but the content is not apparent, and some of the content was hidden
- The top menu needed clarity and organization to allow for users to explore all of the offerings of the menu
- Pertinent information like parking directions and the museum address were not readily apparent on the site
- The use of third party payment processors makes purchasing a separate experience from exploring the website and museum offerings, which was confusing for users. The use of third party payment processors also makes it harder for users to discover all of the different methods of contributing financially to the museum.
- The current website could benefit from the use of an accent color, as the current palette reads more corporate than nonprofit science museum.
Competitive/Comparative Analysis
Our Information Architect- Matthew Lotharius- conducted a competitive/competitor analysis of three museums and aquariums; the NMAAHC, Adler Planetarium, and Shedd Aquarium. His observations created some insights that we drew into our solution ideation.
- All have their contact information and address in the footer of every page.
- All that have a carousel also have a pause and mute button on them.
- 2 of the 3 pages have the donation function handled within the website.
- The majority of their navigation attached to the top of the webpage.
- They are responsive
Insights Gained:
One thing that really stuck out to me from the competitors and comparators of the museum was the use of drop down "slab menus" which was incredibly functional and efficient, but also increased the user experience and made exploring the museum's website offerings more interactive. I set out to create a similar menu option for PacSci, starting with a tentative top menu from our Information Architect, Matthew Lotharius. Once we pinned down a tenative top menu, I sketched the menu on paper, using a pen, prior to translating the design into a wireframe.
Other design decisions that stuck out to me was that several of the sites used cards underneath a carousel header to communicate important information for someone looking for quick visit information, something that was lacking on PacSci's site but was identified as important to our users.
Sketch of menu solution.
Sketch of cards solution for under homepage header. cards will house pertinent information our users identified.
Sketch of homepage solution.
Adding An Accent Color:
We considered 2 different color schemes for this project. One with a pink accent, one with a yellow-orange accent. When tested with users- 100% of users responded positively to the addition of an accent color. 77% of them preferred the yellow-orange accent to the pink accent.
Information Architecture
Menu Structure Mapping- Before/After
Organizing Content
In attempting to design solutions for the site, I realized that in order to completely realize and represent the wide range of options for memberships, tickets, and donations that the museum has, we would need to do a full audit of all of the different options as well as the shop items. From there, I along with team mates Robin and Matt) organized the items into tickets by age, memberships by number of people or organization, exhibits and their copy and the donation items by whether or not they were available for immediate purchase. Those that were available for immediate purchase were integrated into the e-commerce solution via product pages.
Information Architecture- Content Organization
- Wide range of membership options organized via spreadsheet with perks of that membership option
- Wide range of ticket options organized via spreadsheet with perks of that ticket option
- Wide range of ways to give options organized via spreadsheet with perks of that donation option
- Wide range of exhibit options organized via spreadsheet with copy
- Wide range of online shop options organized via spreadsheet
Insights From Users Translated to Design
Actionable user insights: Easy access to operating hours, parking information, and directions to the museum Easy purchase of tickets, memberships, and quick view of museum content. Quick view of events and programs offered by the museum, current exhibits, and calendar.
Easy access to operating hours, parking information, and directions to the museum is made possible via the card solution under the header but also within the contextual "plan a visit" menu.
Easy purchase of tickets, memberships, and quick view of PacSci content is made possible via the drop-down menu which provides pertinent links but also spotlights content the museum wishes to promote. This insight resulted in a creation of a direct ecommerce solution.
A quick view of events and programs via the events and calendar menu which provides important links but also an "at a glance" calendar. This allows users to preview events on a specific date. It is also broken into events for the different demographics of museum patrons for quick access.
Insights From Business Translated to Design
Mobile First Design: The Mobile solution has all of the same functionality of the web solution and is fully responsive
Encouraging purchase. Because users were unsatisfied with the third party payment options, we instituted direct e-commerce.
Encourage engagement with museum content and social media is accomplished with a social banner at the top as well as a tab with highlighted content.
Methods:
- Remote Contextual Interviews
- Card Sorting
The next step in the UX Design process is to test. Are your solutions successful with users? Are they able to find the happy path? What changes could be made to make your solutions more successful?
We performed three rounds of testing each with 4-5 users with at least two of each persona represented.
Round 1 of testing was strictly mobile testing. We performed the testing this way to ensure our design solutions worked prior to fully realizing them via mobile.
Round 2 of testing was split- testing both mobile and the web solution. Users seemed satisfied with the web solutions after the second round of testing and suggested only cosmetic changes to the mobile prototypes for clarity and ease of use.
Round 3 of testing was strictly mobile.
Round 1 of testing was strictly mobile testing. We performed the testing this way to ensure our design solutions worked prior to fully realizing them via mobile.
Round 2 of testing was split- testing both mobile and the web solution. Users seemed satisfied with the web solutions after the second round of testing and suggested only cosmetic changes to the mobile prototypes for clarity and ease of use.
Round 3 of testing was strictly mobile.
User Researcher Robin Nunnally conducting usability testing via Zoom
Changes Iterated From User Feedback
During the process of user testing, we recorded every interview and reviewed the user data that affected our primary focuses and translated them into actionable insights that we could test with users to see if the changes were a success. Hover to see insights.
Cosmetic Changes
Users felt that the copy in some key areas of the site were confusing and that the buttons at the top were too small.
Users felt that the copy in some key areas of the site were confusing and that the buttons at the top were too small.
Streamlining
“Programs & Events” AND “Plan a Visit” tabs were reduced from three tabs to two.
“Programs & Events” AND “Plan a Visit” tabs were reduced from three tabs to two.
Adjusting Purchasing Method
Users felt that the ticket checkout had an unnecessary step. In this redesign, users can add a base ticket directly to their cart as well as opt for an add-on.
Users felt that the ticket checkout had an unnecessary step. In this redesign, users can add a base ticket directly to their cart as well as opt for an add-on.
Top Menu
Users were confused by "Connect With Us" and "interact With Us". "Connect With Us" was changed to "PacSci Online" to highlight the web content and "Interact With Us" was reformatted to be more central to those who wish to contribute to the museum.
Users were confused by "Connect With Us" and "interact With Us". "Connect With Us" was changed to "PacSci Online" to highlight the web content and "Interact With Us" was reformatted to be more central to those who wish to contribute to the museum.
Top Menu
Users expressed only minor issues with the mobile prototype. The only two were a way to exit the menu and bigger buttons on the header to make memberships easier to find.
Users expressed only minor issues with the mobile prototype. The only two were a way to exit the menu and bigger buttons on the header to make memberships easier to find.
Tracking Changes
As a team working remotely, tracking user data and the changes that I, as the visual designer, was making and connecting them directly to a user insight was very important for my team mates to be fully informed.
As a team working remotely, tracking user data and the changes that I, as the visual designer, was making and connecting them directly to a user insight was very important for my team mates to be fully informed.
Sketch of Redesigned Ticket Page Organization Based On User Feedback
High Fidelity Wireframe of Redesigned Ticket Page Organization Based On User Feedback
Users kept confusing copy on the cards for buttons, so the cards were redesigned to clarify what was a button and to make certain information even more apparent and easy to locate on the site for a person on the go.
Click to view Final Design Solution
Results
As validated by testing, the designs were successful with users.
- The designs were more engaging than current site
- Users were able to intuitively find information in desired categories using current information architecture
- Designs were ranked much more acceptable to users.
Next Steps:
- Further testing and development of the commerce solution
- Adding a scheduling to the checkout
- Prototyping the event calendar event functionality
- Full content audit and restructure of that audit
- More iteration and refinement of the visual design