top of page
museumhead.jpg

A Before and After Story

Website Reimagining

Project: Museum mock website landing page 

 

Goal: Utilizing the present images and text improve visitors’ experience by making the site more informative, more attractive/creative, and easier to navigate.

Entire Page At A Glance

a.jpg
glance
details

The Details and the Whys

Header

  • To make the menu items more legible a different font and color combination was used. The menu is no longer fixed allowing for more screen real estate for visitors.

  • The menu is extended across the full screen allowing for pertinent pages to be on display.

  • Added key website elements such as the ability to search the site, social media links, a donate button, and a call to action sign up for newsletter button. 

The Hero Slider

a3.jpg

Slide 1: Equiano.Storeis

  • To emotionally create clarity I utilized the imagery of a different poster that shows the main character recording on a cell phone. Over his shoulder is a captured image that represents a future that he will see/endure.
     

  • To create clarity I used a short segment of the description as part of the poster’s language. This approach maximizes the user's time by filling them in with as much information as possible not relying on a click.

a5.jpg

Slide 2: Mary Jackson

  • Increasing the size of Ms. Jackson to be larger than the astronaut and adding her name in a prominent size creates a needed hierarchal structure.
     

  • Seeing the details of her face personalizes who she is and the use of paperwork clarifies she is not an astronaut but more of an essential person who makes space travel possible.
     

  • The image of a moon walk is intentionally blurred further pushing Ms. Jackson to the forefront of the frame as the focal point.  

a4.jpg

Slide 3: 60th Anniversary

  • Increasing the size of DuSable’s bust in the frame and an image of the museum as the background highlights both the person and the place. This new approach also introduces more color, depth, and texture into the segment of the site, making it more visually appealing and interesting.
     

  • I made the buttons more legible by using a different color palette and focused on the history and future of the museum.
     

  • Removing it from the slider gives the topic a consistent place on the webpage to gain more attention

a6.jpg

Covid Guidelines

  • The height of this section was decreased to limit the amount of scrolling.
     

  • I used a richer color to help the type to assist with the contrast and a simple covid based graphic to guide the visitor's eye to the statement.

a7.jpg

Current Exhibition

  • There is a strong push to establish visual uniformity with each topic. Having a system where image size and the amount of content in the description provides a better user experience because it becomes visually familiar.
     

  • The trailer buttons have been moved down to the bottom of the description to be more visible.

a8.jpg

Videos​

  • Considering the videos revolving around African American lives I saw a great opportunity to brand the collection along with relating it back to the museum coming to the title of “The DuSable Discussions”. 
     

  • To make it more interesting I introduced an African pattern to the background.

a9.jpg

Description Placement 

  • Adjusted the description’s font size and placement to give it more of a central role in informing the user of the subject.
     

  • Introduced image height harmony. Utilizing a common height for the images creates a visual harmony that gives the different pieces a shared commonality.
     

  • Included a carousel of images that continuously runs unless moused over. When moused over the animation stops and a hidden description of the peice is revealed.

a10.jpg

The Gift Shop

  • The gift shop should be one of the highlights of any museum. I moved away from the call to action to shop and highlighted the space as part of the museum's attraction.
     

  • A statement in the banner was added to inform visitors that their contribution will directly assist the museum in fulfilling its mission. The tone of the statement should feel friendly, welcoming, and grateful.
     

  • Changed the name of the section from "Shop" to "Gift Shop" which recognizes the Gift Shop as a physical space inside the museum that also has the ability to fulfill online orders.
     

  • Moving the merchandise from the white background and layering it over a blurred background of the gift shop is a creative way to bring attention to both the merchandise as well as the gift shop. 

a11.jpg

Foot Content​

  • Considering the foot is a constant on every page, a high priority is placed on utilizing this space to creatively present the core site map, wayfinding links, pertinent information, and a call to action to join the mailing list. 
     

  • The privacy policy and terms of conditions are used in the sub-foot with the copyright information that will be accessible on all pages

bottom of page