MJT cover.png

The Museum of Jurassic Technology

A redesign of a museum website’s visual branding and checkout flow  


 Project Role 

  UX/UI Designer

 Methods

  User Interviews, User Flow, Site Map, Usability Testing 

 Tools 

  Sketch, Illustrator, InVision, Keynote 

 

Project Team

This was an independent conceptual project

Key Skills

Information Architecture, UX Design, Visual Design, Taxonomy Classification, User Research, Interviewing, Prototyping

 Project Length 

  2 weeks 


The Museum of Jurassic Technology 

the client 1.png
the client 2.png
the client 3.png

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.

 


The Ask

My task for this project was to identify usability issues with the website and conduct a redesign based on my findings


Initial Assesment

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:

 

  1. Learnability - Unclear naming conventions and lack of common UI patterns made it difficult to understand where specific information could be found
     

  2. 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
     

  3. 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:

  Site map of current structure

Site map of current structure

 

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.

  General Shop Design

General Shop Design

  Gift Shop Design

Gift Shop Design

  Checkout Flow Design

Checkout Flow Design


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:

 
P1 Persona@5x.png
 
 

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:
 

Task 1 
Find information on current exhibits in order to assess how easily users can find general information of the site.

Task 2
Purchase a book to assess the checkout flow.

 

Findings
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:
 

 

  1. 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.
     
  2. Search Bar
    To function as a default for quickly finding information.
     
  3. Consistent Visual Branding
    To carry through the checkout process and eliminate any confusion or questions about the security of the payment process.
     
  4. 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. 
 

 
IMG_0748.jpg
 
 

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. 

 
laurenalejo_mjt_moodboard.001.png
 
 

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.


Final Concept

The final redesign includes the following key functionalities and designs: 

navigation.png

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.

 

 

 

Colloquial Taxonomy


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 

Quick Add


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

search bar.png

Search Bar

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