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.
Click to interact with final prototype solution
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
Deliverables Contributed: All Wireframes, Prototypes, Presentation Master, Various Graphics
Scope: High level personas, high fidelity user flows, wireframes and mockups, interactive prototypes
Team Members: Robin Nunnally and Jonathan Bui- User Researchers, Matthew Lotharius-Information Architect
The UX Design Process
E, like Aanu, means to empathize.
Employee and former employee interviews
Research of common museum goers personas
Usability testing of current website solution
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?
User interviews were conducted by my teammates Robin Nunnally and Jonathan Bui, with Robin interviewing former PacSci employees and parents and Jonathan interviewing people without children.
Who Our Researchers Interviewed
Individuals with Children
The insights from these users eventually became the Karen Kindergartner persona.
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
The insights from these users eventually become the Sam Singleton user persona.
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.
D means define.
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.
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.
38 years old
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.
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
Not knowing the value of the memberships
Unclear hours and parking info on website
Not knowing up to date info on museum events
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
25 years old
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.
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
Unclear parking information and navigation directions
Outdated and unclear exhibits
Bored by exhibits that are not interactive
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.
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.
I means ideate.
Competitor/ Comparative Analysis
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
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.
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
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.
Menu Structure Mapping- Before/After
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
Now armed with organized content, visualizing the design of that content was much easier. Ideally, we would have loved to create grayscale wireframes for users to test, but since the addition of the accent color is something we wished to test with users, we jumped from our sketed wireframes directly to high fidelity, colored wireframes. The short timeframe of the project meant that I had to work very hard over the weekend to have a usable prototype in both mobile and on the web available for Friday. We had ten total days for the project and the first week was spent interviewing users and creating a design guide for the build of the website.
Click to interact with web prototype draft 1. Open paths include purchase of membership and purchase of ticket.
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.
T is for Test
Remote Contextual Interviews
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.
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.
Users felt that the copy in some key areas of the site were confusing and that the buttons at the top were too small.
“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 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 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.
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.
Final Design Solution
Click to interact with final prototype solution
Click to interact with final prototype solution
Results, Next Steps, and Review
As validated by our third round of testing, our designs were successful with users.
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