User Experience (UX) Design Case Study by Joni Gutierrez
Introduction
A passionate group of filmmakers founded Vimeo in 2004 as a way to beautifully share their videos with the world. As a filmmaker and a satisfied paying customer of this online streaming service, I was excited to hear about the launch in April 2019 of its new feature called Vimeo Showcase that allows users to create video portfolios that artfully display their works.
The Problem: Mental Model Mismatch
As a user, my mental model of a portfolio is that it should work like a concise one-page résumé. My goal as a filmmaker is to enable visitors of my page to quickly appreciate the totality and interconnectedness of my representative body of works. The current interface of Vimeo Showcase (as of July 2019), however, does not match with my mental model. This has become a pain point for me as a user. I checked with others if they were also struggling with this and got their confirmation.
Main Goal: Improve “Digital Graspiness”
I coined the term “digital graspiness” to precisely describe the problem that the users were facing. It refers to the quality of perceiving something nonphysical such as a filmmaker’s online portfolio as a unified whole that one can – like picking up an interesting pebble on the beach – feel, inspect, and act upon. The new term has both graspability and glanceability as crucial components. The element of graspability pertains to the capability of being apprehended or understood while the aspect of glanceability means, especially for electronic screens, for information to be very quickly and easily read or known. I would like to define “digital graspiness” as the subjective experience of interfaces wherein users perceive chunks of information – combinations of text, images, graphics, etc. – as palpable objects that are immediately present, thus, intuitively offering possibilities for action and goal-fulfillment.
The main goal of the project was to enhance the digital graspiness of the Vimeo Showcase user interface (see Figure 1, Exhibit A). Decidedly grounded on user experience (UX) research, this endeavor entailed two iterations of the design, as shown in Exhibits B and C, respectively.
Roles: UX Designer & User Researcher
I was both UX designer and user researcher for this UX case study project. It should be made clear at this point that this undertaking was completely self-initiated. Vimeo did not commission me to perform this effort though I am happy to have done this project since it has led to my better understanding of fellow Vimeo users and enabled me to practice my skills in doing UX work.
Understanding the User
Personas
Three key user bases were identified based on data gathered through user interviews. The resulting user personas (see Figure 2) were crucial in fleshing out the behaviors, goals, and identifying usage of Vimeo showcase users, which include both presenter and audience sides. Every design decision in the project consistently referred back to these personas.
User Flow
Surveys, interviews, and pilot usability tests were conducted to understand how users engaged with Vimeo Showcase. One major finding of the user research was that the primary goal of the visitors was to immediately gain a sense of the filmmaker-in-focus as an artist and then rapidly act on the next possible course of action, for example, investigate further, support or connect with the filmmaker, or move on. This is in line with the expectation of the filmmakers for their online portfolios to behave like an “elevator pitch” that promptly highlights their personal visions that weave together the films included in their portfolios.
The user flow diagram (Figure 3) contextualizes the path of users who are motivated to achieve their goals within the overall Vimeo system. The user experience is necessarily branded, with two components – Vimeo and the filmmaker – intertwining and mutually benefitting each other. The business is seen as an active member of the cinema community and the filmmaker is regarded as an artist who has a strong vision while still very much reachable and ready to take on new challenges and opportunities for collaboration.
Design & Research Process
Empathize & Discover
The empathy map in Figure 4 contributed largely to how the project identified the problem and served as a platform in understanding the users through personas, user flows, and scenarios. Heuristic evaluation was also conducted to explore how the concerns identified in the study could be addressed by current best practices that could, through a substantial understanding of the contemporary users, point to potentially innovative design solutions.
To accomplish the main goal of building up the digital graspiness of the user interface, the project implemented a more complete yet concise filmcard on the showcase page. In the initial version, the card did not show enough details of the film. This was determined as a pain point for users because they expected the experience to be like grocery shopping in which the presentation of a product item should directly give them its essence. They do not expect to probe every item before deciding to either put it in the cart or leave it on the shelf.
Define & Prioritize
Strolling along a pebble beach is an analogy that depicts the online video portfolio page experience more closely. Imagine that you want to collect beautiful pebbles but critical details are hidden, that is, you have to pick up and inspect every stone before you can identify it as, say, a round pearly-white pebble. What makes the physical experience of walking along a pebble beach pleasurable is seeing a variety of distinct objects – for example, here you see a black shiny one, and there is one is heart-shaped, and then you see one that stands out because it looks almost like a gem. If enough information were made more apparent, it would allow you to instantly perceive the essence of each item and you could choose which one to pick up, review, and either place in your pocket or throw back to the ground.
The filmcard item in the final state of Figure 5 is like a pebble on the beach. It shows you concise information about the film and this fluidly leads you to intuitively follow your own flow of action. This becomes a satisfying user experience because of the elevated state of digital graspiness that enables users to distinctly chunk pieces of information and feel as if they could experience the digital objects candidly and manipulate them using their virtual hands.
Ideate & Design
As previously stated, the main goal of the project was this: (1) to optimize the digital graspiness of the Vimeo Showcase interface. As a result of A/B testing and further usability tests, a couple of supplementary goals also emerged: (2) to make the portfolio page feel more approachable, and (3) to invite the visitors to connect with the filmmaker and/or share the portfolio page.
I practice a mobile-first design approach. As shown in Figure 6, I used mobile as the basis for other responsive screen sizes all through desktop while still optimizing the level of digital graspiness.
I used cognitive experience mapping – see Figure 7 – to visualize how a user would interact with the interface of the first design iteration. It indicates the areas that form in the visitor’s immediate consciousness. I use this technique to guide my design process that always takes into account the subjective experience of the user who is interacting with the interface.
Iterate & Validate
The first iteration of the design was subjected to another round of A/B testing, user interviews, surveys, heuristic evaluation, and usability tests. Ultimately, the second iteration was derived – see Figure 8.
Results
The last iteration was subjected to a final round of A/B testing and usability tests, which validated that the design solution advanced the digital graspiness of the interface and made the online portfolio more approachable – because of the creative self-disclosure of the filmmakers’ artistic statements – and more inviting to connect with the artists and/or share their featured set of works.
A successful matching of the mental model of filmmakers, potential collaborators, film enthusiasts, and other users of the Vimeo Showcase with an online portfolio that has a high level of digital graspiness would definitely make the user experience considerably more gratifying and enjoyable.
ACKNOWLEDGMENTS: Freely usable photos by KAL VISUALS, BBH Singapore, JD Mason, and Omar Lopez on Unsplash.com. Sketchappsources.com resources provided by Wladislav Glad (User Personas Template), Jaroslaw Ceborski (User Flow Diagram), Sybil Hoang (Traditional Empathy Map, adapted by boagworld.com), and Andy Mcerlean (Low Fidelity Wireframing System)