The Science Museum of Long Island needed a new web design to support their marketing goals of increasing membership.
CLIENT:
The Museum is a not-for-profit, hands-on science activity center in Long Island that provides summer camp, field trips, and other educational experiences.
SOLUTION:
We delivered a new desktop and mobile web design to help people discover and register for museum activities.
OBJECTIVE:
Modernize the Museum’s online presence and get the word out about their science learning opportunities.
MY ROLE:
I served as the product manager and directed the user experience design for the new museum's website.
DURATION:
2.5 weeks
Kick-off meeting
First we met with Dr. John Tanecredi, the executive director of the Science Museum of Long Island. Dr. Tanecredi explained how the museum is facing financial troubles and needs a new, modern website to increase program registration.
I worked with Dr. Tanecredi to create two goals for the new site that would help outreach:
- Achieve a clean, organized "look and feel" that connected people to the museum
- Allow people to register for programs in one, stream-lined process
My team meets with Dr. Tanecredi, Executive Director
“Everyone says the museum is Long Island’s best kept secret... we want to undo this.”
Time to start digging.
What's the deal with the current site?
As the website was still new to us, each team member performed a User Journey Analysis on the current site. We each plotted any emotions and frustrations that we experienced when trying to accomplish certain tasks on the site. We also reached out to some parents to capture their reaction to the current design.
We mapped the following tasks:
- a parent signing up a child for the summer camp program
- a traveler wanting to sign up with one of the adventure programs
- a parent wanting to rent the space out for her child's birthday
User Journey document (click to enlarge):
Here is an example of one of the User Journeys. I mapped positive and negative emotions that I experienced while trying to sign up for summer camp.
This process helped us discover some frustrating experiences in the current design:
- the home page created an overwhelming feeling for each tester
- it was difficult to find information related to the summer camp (program schedules, policy information, lunch details, etc.)
- there were few pictures to help illustrate program activities
Let's organize all of this information
We had a lot of content to understand. In order to get a better grasp of what the museum had to offer, we used some of the following Information Architecture tools:
- Affinity Maps helped us organize the variety of museum programs that were offered.
- A Current-State Site Map helped us define and visualize all the pages and navigation on the current site.
- An Organization Chart helped us identify both the stakeholders of the project and the different types of users
Affinity Map (click to enlarge):
Here you can see me organizing the various program offered by the museum.
What kind of people go to science museums and learning centers?
We distributed a User Survey to learn about parents and museum-lovers in the Long Island area. In order to collect a broad set of people, our survey asked the about
- How many children do you have?
- What's your income level?
- What type of camp programs do your children attend?
- How do you find these programs?
We selected some helpful people form the survey results for User Interviews, where we talked for 15 minutes about their general needs and frustrations with learning programs. We talked to parents about summer programs, teachers about field trips, and museum members about their involvement. Here are some of their expressed needs:
"If the website looks outdated, I will generally avoid the place."
- parent of two, Long Island
“It’s super helpful when there are pictures of similar events in the past and pictures of the facilities. ”
“In Long Island, everyone is always looking for something fun to do. Make it easy to find activities”
“[The science center I went to] was very interactive and hands-on…I went to the website to get a feel for the inside of the facility.”
This calls for a field study!
In order to truly understand our challenge, we decided to venture out to Great Neck, Long Island, and visit the museum. We took a train out to the museum and as soon as we arrived, we began to understand why people say this is “the best kept secret.” The atmosphere at the site was war, friendly, and engaging. As parents pulled into the driveway, kids excitedly jumped out of minivans, laughing with excitement to start camp. This was the warm, welcoming place that members knew and love. This is the feeling the website should emit.
Our trip to the museum was pivotal. Had we not physically journeyed out to the grounds, we would have not understood what the website should ultimate connect.
I made a music video of our visit. For fun:
What are other museums and learning programs doing with their websites?
As surveys and interviews continued, we collected a list of web sites that people had an enjoyable experience on. During our Competitive Analysis, we studied these sites to see what they were doing differently.
Insights from the competitive analysis:
• Other sites had a streamlined registration process. Everything could be done at once.
• Other sites had lots of great photography, clean lines, and helpful descriptions
From concept to structure.
What do we work on first?
It was time to prioritize all of the web site ideas we were collecting. I used the MOSCOW Method to determine what a user Must, Should, Could, and Wouldn't be able to do on our site. We decided our main goals were:
- A user MUST be able to get an accurate sense of what the museum offers
- A user MUST be abel to register for programs seamlessly
What will be in the new site?
We started defining what core pages would be needed in the site to support these goals. I created a Future-State Site Map, to identify
- our global navigation
- a template page for program overviews and details
- the registration flow
Due to our time constraint, we tried to find content patterns that could be reused throughout the site. For example, because each program had a similar set of attributes (price, schedule, age range, etc.), we designed one program template. These templates helped minimize the number of pages we needed to design.
Future-State Site Map (click to enlarge):
The future-state site map outlined the backbone of our site.
Visualizing our Ideas
Once we knew what pages we needed, we started sharing ideas of how the pages could look. Having a timed Design Studio helped us sketch as many ideas as we could within 8 minute intervals. This process helped to generate and share ideas quickly.
Below, left, you can see one of my favorite ideas: an interactive museum map that users see photos of the facility
samples from Design Studio (click to enlarge):
A timed design studio generated lots of content ideas for the new site
Adding more detail, digitally
From the design studio, we turned the best ideas into Digital Wireframes, which helped us further define the details needed for each page.
Digital Wireframe samples (click to enlarge):
The home page wireframe, below-left, has an area for news, announcements, and upcoming events. The page on the right shows an overview of all the family-related programs.
Test with users. Fix it. Do it again.
Once we had a proposed design, we started and agile testing process. Each day has the following structure:
work on the design of the highest priority areas
- show our prototype to users and collect their feedback
- re-prioritize what to work on next
Does our design make sense? Let the users decide.
We turned the digital wireframes into a Clickable Prototype so that we could gather preliminary feedback from other people. Usability Testing helped identify some areas that could use some more design.
“I want to see a daily itinrary for this summer program before I register”
“These photos are great, but I want to see a description with the photo”
Usability Testing (click to enlarge)
I'm taking behavior notes while my teammate facilities usability testing
Organizing all the testing feedback
As there were about 30 pages in our site design, I would pinup screenshots of our design after each round of usability testing. I would then write the testing feedback onto each page, prioritize the next-steps, and assign the changes to my teammates to address.
Testing Pin-up (click to enlarge)
Printing and pinning each page helped organize feedback from testing
There's a lot to do. What do we focus on?
Lots of "to-dos" started piling up from both usability testing and checking-in with our stakeholders. I tracked, prioritized, and distributed the design tasks in a Design Backlog. As different areas of the site were designed and tested, I would update the status to "Done."
Design Backlog (click to enlarge)
A Design Backlog helped us prioritize and track what areas of the site to work on.
Adding the visual layer
All the colors came from the logo; the green came from the lizard. Hey, izard.
Once the structure of our new site had been thoroughly tested, we began the visual phase of our design. Standardizing the "look and feel" of the site, I created a Style Tile to define color, fonts, and interactivity.
Our Style Tile aimed to visually represent all the elements of our website in one place.
The Style Tile was used as a guide to "paint" our digital wireframes.
The "before and after" of the family overview page getting "painted"
Presenting our design to stakeholders
We continued usability testing after the visual process. It took a few more iterations to iron out the kinks, but we were happy when the design started coming together. We made sure to get some feedback from current members of the museum, and we were pleased to hear they thought the design served the museum. Here is one of our favorite quotes:
"[It’s] a clean design and not overly busy with bells and whistles. SMLI is known to be down to earth and organic and the website conveys that reputation."
- Sona, current member and web designer
Once testing smoothed out, we focused on how we would present the idea to Dr. Tanecredi and the other stakeholders. We spent a lot of time on our final presentation, as the presentation of our design would be presented to the board for funding. We decided to introduce our design by the use of two stories:
- someone who had heard about the museum by "word of mouth" and is discovering the site for the first time
- a story of a parent who waited until the last minute to register her children for summer camp.