Bainbridge Island Museum of Art

Feature Design – Video Library

PROJECT SCOPE

Feature design – video library, Desktop, mobile
Visual design

Tools

Figma, Adobe Illustrator, Adobe Photoshop

Role

UX designer (Research, Visual Design, Interactions Design, Usability Testing)

Team

Self directed, with feedback from mentors, peers, and client

Duration

11weeks

BIMA

Bainbridge Island Museum of Art (”BIMA”) showcases the Puget Sound region’s outstanding arts and culture. The Museum’s mission is to inspire curiosity and understanding by connecting people with the contemporary arts and crafts of the region with an emphasis on diverse and lesser-known artists.

BIMA is committed to being an active resource for the community by creating a welcoming cultural and educational organization that is free to all, with no admission required.

The challenge

BIMA actively delivers its artistic vision through a variety of cultural and educational programs catering to all ages and interests.

While these programs have been a cornerstone of BIMA’s offerings and are key ways to building relationships with members and donors, currently, there’s no easy way to find them!

Some live in libraries, some on the blog, some strictly on YouTube or Facebook.

The solution — a video library

Primary Goals

Inspires browsing and facilitates searching

Easy to use and navigate

Put videos front and center of BIMA site

Secondary Goals

Generate internal traffic

User Insights

Survey

We conducted a stakholder interview as well as a survey that was sent out to friends, residendents of Puget Sound region (current and past) , as well as 50 people from BIMA’s mailing list.

How many of BIMA website users have watched a BIMA video?

10%

Where do people watch art-related videos?

85% Youtube

How many of BIMA website users have watched a BIMA video?

87% Instagram

10%

85% Youtube

87% Instagram

There is a need and a benefit to create awareness of BIMA’s digital offerings.

Instagram esthetics and YouTube functionalities are crucial for the success of the video library.

the user

Miss Claudia, a 1st grade teacher, is constantly on the lookout for supplementary visual aids for class.

Pain points

Find and easily access educational material that is:

Creatively educational
Stimulating
Age appropriate
Free

The video library

Accessing the Library

From the upper navigation

From the menu

From the home page

The filter

Filters are a great tool to narrow down high volumes of content and to surface the most relevant results. How do we make sure they are helpful rather than confusing?

I opted for a ‘soft filter‘ designed to be simple, easy to use, and not too deep.

To mimic the in-person experience of being in a museum and asking questions, I kept the tone of the filter conversational.

Usability testing #1

Users were confused

  • Design was not intuitive – first click took a long time and was hesitant

  • Having two keyword search (in filter and global search) was confusing

  • Media library icon in nav bar was dominant

  • The filter occupied most of the main screen

  • Yellow color was distracting

Usability testing #2

  • Create a two level filter

  • Provide five category-specific filters:
    Top level – format + artist category
    2nd level – who, what, and how

  • Change search keyword to search tags

  • Removed the library icon from the upper navigation

  • Ability to add and remove tags

Observations

The filter was easy to use – users were able to navigate, search, and browse friction-free. However, the grid was taxing on the user. I addressed this issue in my finale prototype.

Observations

The filter was easy to use – users were able to navigate, search, and browse friction free. However, the grid was taxing on the user. They felt there was information overload on both the textures and the easiness to get additional information about the videos. I addressed this issue in my finale prototype.

Moodboard

My main inspiration was museum walls. The art pieces are hung in a way to create a private reflection space no matter how busy a museum is. Also, the white on white and black on black backgrounds of the colorful artworks are just too beautiful of textures.

Style guide

I worked with BIMA’s brand expression and style guide of colors and typography.  I made minor hue changes to some of the colors in order to build a harmonious design system.

The solution

Information Architecture

Information Architecture

Gave more weight to the main sections – Exhibitions and Events.

Moved all the content 1 screen up

Used two cards per row to give more visibility to the content

Current website         Revised design

Design System

Defined the colors for the primary sections – BIMA (permenent collections and blog), Events, Exhibitions, Video library.  The design system was reinforced by minimal interactions of hover states that helped the user understand the navigation structure at a glance.

Design features

Square

I used the square as the video thumbnail. The square is distinctive the BIMA’s identity and it reinforces the logo shape.

Grid

In response to the usability testing, I changed the grid system so it allows for breathing space between the different artwork. I also placed them off-center so the eye moves with each video as you scroll down.

Primary and secondary information

The way the video information is displayed is inspired by how the artwork are presented on museum walls. In order not to obstruct the viewing experience of the library, I offered the “more info” as a hover status.

Two-level filter

Created a two-level filter as not to overload the user of information that would hinder his interaction with filter

Adding and removing tags

The users are able to add/ remove tags from the filter and from the search result.

Tags search

User can also search the video library database

The video page

Offers information about the video and the artist.  With plenty of opportunity for internal browsing.

Micro interactions

Filter animates when a tag is selected

reflections

Create video list
Get creative with the tags
more

User testing

Privacy Settings
We use cookies to enhance your experience while using our website. If you are using our Services via a browser you can restrict, block or remove cookies through your web browser settings. We also use content and scripts from third parties that may use tracking technologies. You can selectively provide your consent below to allow such third party embeds. For complete information about the cookies we use, data we collect and how we process them, please check our Privacy Policy
Youtube
Consent to display content from - Youtube
Vimeo
Consent to display content from - Vimeo
Google Maps
Consent to display content from - Google
Save