Design Patterns: Museum of Science and Industry Chicago
(written for DesignLab’s UX Academy)
The Museum of Science and Industry is one of the most interactive and engaging cultural destinations that Chicago has to offer. I spent two years working at MSI as a guest experiences facilitator and often check their website to see what’s new. In my opinion, one of the reasons for MSI’s popularity is its continual focus on improving the visitor’s experience.
With over 35,000 exhibits and 14 acres of grounds, MSI is the largest museum in Chicago. By allowing visitors to plan their trip and purchase exhibit tickets in advance online, visitors save time and money when they arrive at the museum. Let’s do a quick review of atomic design methodology and then analyze some of the design patterns and flows in MSI’s updated system for planning your trip.
Atomic Design
Web designer Brad Frost came up with his atomic design methodology as a way to understand how our user interfaces are both a cohesive whole and a collection of parts at the same time. He breaks an interface down into five stages using the model of the atom to show how interface design works. The five stages are:
- Atoms — basic HTML elements (labels, buttons, inputs, etc.)
- Molecules — simple groups of UI elements (a search form)
- Organisms — complex grouping of UI elements (header with nav, search)
- Templates — skeletal page level view that place components into a layout
- Pages — template with real content, color scheme, typography, etc.
In the webpage above, the single icon (item 1) is an atom. The grouping with a button and navbar menu links (item 2) would be considered a molecule. All of the atoms and molecules comprising the header (item 3) make up an organism. The page itself was probably a template at one point, but here we see it in its a page form with content and images.
Why do we need to be able to identify these stages? Frost explains,
“[there is] a tight bond between content and design….atomic design allows us to craft design systems that are tailored to the content that lives inside them.”
Keeping this mind, let’s take a look at some of the design systems and patterns of MSI’s website for planning your museum trip.
Patterns to look at…
CTA Buttons
Both on the homepage and on each exhibit page of MSI’s website you will see these highlighted CTA buttons which act as one of the main starting points for beginning your trip planning. Once you have chosen an exhibit or two, there is a button at the top of the page (next to Tickets) for viewing your selected trip activities.
Filtered Search
In the trip planning user flow, once you have clicked on “Plan Your Visit,” you are taken to the filtered search page to browse items that you might like to see.
The first main organism(yellow) on this page is the filter choice area composed of various atoms (red) like a date input option, submit button, label, and the progress bar molecule(orange).
The next organism is the results area that grows or lessens in the number of “suggestions” depending on your filter choices. Within the results area are individual exhibit molecules composed of atoms such as an image, icon, header, text, etc. Below you will see the additional filter options with different atoms (red) and molecules (orange).
All of these filter areas help users to tailor their museum plan to specific details like the day of the trip, the number of visitors, age demographic and subjects of interest. After filtering and selecting different exhibits, they have a checkout list of items to include.
“My Visit” Checkout List
The “My Visit” checkout list pattern is what the visitor will see after they have added an exhibit or activity to their plan. Each item molecule consists of a div with a thumbnail image, icon, label, and delete option. At the bottom is the button to “Buy Tickets Now.” When a user decides that they are finished browsing they select this option and are redirected to the ticketing page, or they can click the “Continue to Explore” option below.
Pricing
There is a multi-pattern system on the ticket page. The first pattern on the ticket page is the pricing information. After a reminder that you save on the ticket price by booking online, users can see all pricing options plus ticket experience costs for entry to the museum. There are footnote indicators so that the user knows to look below for more information.
Facility Information
Another design pattern on the ticketing page is the facility information located on the right side. Visitors can view information such as museum hours, travel information, a museum map and more. The options are laid out vertically with padding and a horizontal rule between each option. Below this is the button for visitors to continue the process of buying their tickets. When users have looked over the pricing information and are ready to continue, They will click on this button and proceed to the sign-up option page.
Sign-up
The next page shows a sign-up for membership design pattern. This is the final step in the planning phase of the user flow before paying for tickets. At the top is a breadcrumb progress bar molecule that will show the progression through membership confirmation if the visitor decides to sign up. Within the organism below it are 3 molecules which define the three options the users has at this point in the user flow — continue, sign-in, or sign-up as a member. The color choices help to establish a hierarchy of which option will direct users to the next step of the checkout process if they either 1. not a member or 2. have no interest in signing up.
Conclusion
After learning more about the atomic design methodology, I can see that there are many, many more places where it can be found in the various user flows and patterns on MSI’s website. By keeping this methodology in mind, any website, include MSI’s, can improve the chance for effective and intuitive user interaction with the content and interface.
