The Museum of Jurassic Technology
A redesign of a museum website’s visual branding and checkout flow
User Interviews, User Flow, Site Map, Usability Testing
Sketch, Illustrator, InVision, Keynote
This was an independent conceptual project
Information Architecture, UX Design, Visual Design, Taxonomy Classification, User Research, Interviewing, Prototyping
The Museum of Jurassic Technology
The Museum of Jurassic Technology in Los Angeles, California is an educational institution dedicated to the advancement of knowledge and the public appreciation of the Lower Jurassic. The public museum is a collection of specimens and other objects of interest to the scholar, the man of science as well as the more casual visitor, arranged and displayed in accordance with the scientific method.
My task for this project was to identify usability issues with the website and conduct a redesign based on my findings
I began my research by conducting a heuristic evaluation of the current site based on Jakob Nielsen’s widely accepted heuristics of user interface design. From there, I identified 3 main problems, all of which made it difficult for users to find pertinent information and move naturally through the site:
Learnability - Unclear naming conventions and lack of common UI patterns made it difficult to understand where specific information could be found
Efficiency - Lack of global and local navigation (exasperated by unclear naming conventions) meant the user had to go back to the main menu page each time information was not found on the first attempt
Satisfaction - The visual design was reminiscent of the early 90s and exhibit and menu photos were grainy and did not logically represent the words that supplemented them.
Understanding The Current Structure
I then created a site map in order to visually understand the current structural organization, content and functions of the current layout.
As you can see, the website was divided into 2 different sections: the museum shop and other general information about the museum:
I also discovered that the museum shop had unconventional naming conventions for the local navigation, and that there were 3 different design aesthetics within the site from general information to the museum shop to the checkout flow once an item was added to the shopping cart.
Meeting The Museum's Visitors
Before I began the design process, I needed to know more about the museum’s visitors both in the digital and physical space. I conducted 5 interviews of the museum’s visitors, from which I created a persona to frame the context of my research and design solutions:
Observing Visitor Behaviors
I also observed 5 potential visitors using the website to learn how they navigated the site and accomplished specific tasks. During the interviews, I asked users to complete the following tasks:
Find information on current exhibits in order to assess how easily users can find general information of the site.
Purchase a book to assess the checkout flow.
Because the main menu was on a separate page, users navigated back to the menu page a total of 18 times while attempting to complete a single task.
60% of users looked for a search button as a secondary solution when they could not find a specific product in the museum’s online shop.
Identifying The Key Features
With user research affirming the site’s key pain points, I recommended 4 features to be included in the redesign:
- Global and Local Navigation
To allow users to easily move through the site. Navigation on a separate page meant too many redundant clicks back and forth.
- Search Bar
To function as a default for quickly finding information.
- Consistent Visual Branding
To carry through the checkout process and eliminate any confusion or questions about the security of the payment process.
- Updated Taxonomy
To logically guide user through the site.
Creating Logical Language
To ensure that the language on the site was logical to the users, I conducted 2 closed card sort tests:
First - With current taxonomy. I asked users to place main menu items and submenu items in a way that made sense to them. I also asked that they identify any items that were ambiguous or confusing.
Then - Based of the information I collected from the first test, I renamed the main menu and submenu items and asked a new set of users to arrange these in a logical order to validate my assumptions.
Conveying The Brand Personality
To inform the visual design, I created a moodboard. The museum itself is mysterious, unconventional and eclectic - somewhere in between your grandmother’s attic and a natural history museum. I used dark tones to convey the same sense in mystery and intrigue that the physical space evokes and paired it with a parchment-beige tones and a serif, Scotch Roman font to give it a vintage, 18th century aesthetic.
Testing, Testing, Testing
I then conducted usability testing to test my design solutions and high-fidelity wireframes. I asked a new set of users to complete the same 2 tasks from the contextual inquiry to see if and how my redesign addressed user pain points identified earlier on.
I found that while users were able to find where to purchase a book without going back to a previous step, they wanted the option to add it to their shopping cart without having to view product information first.
The final redesign includes the following key functionalities and designs:
Global and Local Navigation
Main menu and submenu previously located on separate pages were moved up to global and local navigation always available at the top of any page throughout the site (except checkout, where the focus is narrowed on purchasing the item).
Consistent Visual Branding
Colors, fonts and overall website aesthetic is carried through all areas of the website, including checkout. This creates a cohesive visual flow for the user and alleviates any security concerns once users are in the checkout flow.
Ambiguous menu titles such as “Sundries” and “Museum Products” were renamed to more familiar language so that users could better find the information and products contained in these categories. Menu items were also highlighted to let the user know where they are within the site at all times
Visitors could hover to read product information and add an item to the cart from the main product page to reduce the amount of steps in the checkout process
To function as a default for quickly finding information
Introductory Gallery Images
Photos from the exhibits were previously low-resolution and buried within the site. To draw the user / potential visitor in, I featured these photos on the homepage and incorporated the quote from the original design.
Simplified Checkout Flow
Checkout was simplified to 3 easy steps and featured breadcrumb information to indicate which step the user is on