Building the Hammer Museum Video Archive (so far)
Iterative interaction design and prototype development
We’re working with the Hammer Museum to build a video archive that enables the museum to manage their digital video assets — notably the outstanding programs held at the museum, and artist profiles — and present them online in a useful, interesting way to the public.
This post describes the collaborative, iterative process of designing the public-facing video archive (so far).
UX design principles for the Hammer video archive:
- Showcase the breadth of content and topics in the video archive
- Must be more than just a content repository
- Seamless, fluid experience
- Above all, deliver the Hammer’s mission
The Hammer Museum at UCLA believes in the promise of art and ideas to illuminate our lives and build a more just world.
Video has proved to be an effective communication tool both internally at Cogapp, and with our colleagues at the Hammer (principally susan edwards and Phil Leers). Internally it works because the team (who are currently working hard on the technical back-end) can review my work at a time that suits them. With our colleagues at the Hammer, video is great because the time difference means they get a video in the morning, and send feedback to us in the day ready for our morning.
I have included some of the shared videos in this post. They weren’t intended for consumption beyond the project team (hence the rough and ready nature) but, compared to writing this using words and pictures alone, the videos give a truer sense of the iterative process we have gone through together.
Initial research and sketches
We reviewed comparable sites such as the Louisiana Channel, YouTube, Vimeo etc, as well as looking at the the Hammer’s existing Watch + Listen offer.
This sparks ideas. You can see what works and think about how we can make it even better for the Hammer, as well as what doesn’t work to avoid making the same mistakes.
It’s useful to look at archived versions of the sites too to see how they have evolved based on what they’ve learned.
A key takeaway was if you click something on the video page and it takes you to a new page, thus losing your place in the video, it’s super annoying. So we wanted to avoid that.
My colleagues Louise and Neil (project producer and tech lead respectively) had visited the museum and run workshops with key stakeholders. The results of these, along with data from the client, was shared with me to inform the thinking.
Armed with all of this, I locked myself in a room to make notes, explore possibilities, and sketch ideas.
After sharing the sketched ideas with the team and getting feedback, I made a quick prototype in Keynote to share with the Hammer team in LA.
Iteration one — super search
The first iteration focused on getting you to video content quickly. It started by showing you all the videos and allowed you to filter down until you find the video you want.
I shared this video (silent, 2min18) with the team for asynchronous feedback.
The feedback was that, while it made sense for a user who knows what they are looking for, it doesn’t adequately cater for the curious user. Nor does it immediately display the breadth of topics covered by the Hammer’s programs and thus in the video archive.
Iteration two — serendipitous browsing through category stack
The next iteration sought to incorporate that feedback and give us a stronger focus on browsing and discovery.
We did this by introducing the Category Stack homepage. Categories float up on the left in a rotating list, which gives an instant overview of the content while encouraging you to explore.
This video (sound, 19min23) is from the sprint demo and describes the process to date (from 5min12) before walking though the prototype (from 9min55) and introducing the Category Stack (from 10min39).
At the same time, we were thinking about mobile. This video (sound, 5min02) is a work in progress screengrab I made for Louise after sharing in person with Neil and Vicki (the development team).
Feedback on this approach was that it had gone too far from search to browse, and needed to better incorporate both modes of exploration.
I was also challenged to remove the hamburger menu, which felt like a repository for content that didn’t fit anywhere else.
Iteration three — multiple modes
Building on the feedback to create modes for users to operate in, I went a little extreme and made those modes explicit to the user, as the video created for the Hammer (sound, 9min32) below demonstrates.
We devised three distinct modes:
- Browse
- Library / search
- Player
The feedback was the modes needed to be better integrated with each other, rather than effectively forcing the user to choose a path.
Iteration four — BIG search and topic trail
The solution to the multi-mode problem came to me on the sofa at home — I jumped up and updated the prototype there and then, while my wife looked on, affectionally shaking her head and smiling.
The challenge was how to blend library mode and browse mode into one seamless experience. The answer was BIG search.
Rather than pushing users from browse mode into search mode, using the BIG search overlay makes the transition from browsing to searching much smoother and natural feeling.
In addition, we reworked the homepage replacing the Category Stack (left-hand side) with the Topic Trail (at the bottom), which offers the same interaction across devices, and responded to feedback that the Category Stack could be mistaken for traditional navigation.
This video (sound, 13min04) was then sent to the Hammer for review and is the signed off approach.
From prototype to Alpha
Now we’re out of Keynote and into code.
This gif shows where Neil and Vicki are up to with the build. You can see the elements of the prototype in there ready for graphic design, animation and styling.
We’ll share more — including the elements of the project that will be open sourced — as we make further progress.
[EDIT — Hammer Channel is now live!
Visit Hammer Channel: channel.hammer.ucla.edu
Read the case study: cogapp.com/work/hammer-channel ]
The Hammer video archive is made possible thanks to a grant from the Mellon Foundation.
Thanks also to Susan and Phil at the Hammer for allowing us to share the process and progress videos with the #musetech community.
