Optimizing Digital Graspiness in the User Experience (UX) of Vimeo Showcase
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
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.
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.
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.
UX COURSES Completed via LinkedIn Learning (Lynda.com) - CERTIFICATES:
1. UX Foundations: Interaction Design – Nov 2018, License # 917763
2. Planning a Career in User Experience – Dec 2018, License # 3CE0B4
3. UX Design 1: Overview – Dec 2018, License # 29A7F9
4. UX Design 2: Analyzing User Data – Dec 2018, License # 552731
5. UX Design 3: Creating Personas – Dec 2018, License # D537F5
6. UX Foundations: Prototyping – Dec 2018, License # E4669B
7. UX Foundations: Multidevice Design – Dec 2018, License # 3474E2
8. UX Design 4: Ideation – Dec 2018, License # 0BE21A
9. UX Design 5: Creating Scenarios and Storyboards – Jan 2019, License # 4CCC75
10. UX Design 6: Paper Prototyping – Jan 2019, License # B71A00
11. Sketch for UX Design – Jan 2019, License # 3316CC
12. Flinto for Mac for UX Design – Feb 2019, License # BC85EA
13. Axure RP for UX Design – Feb 2019, License # 512E35
14. InVision for UX Design – Feb 2019, License # 70FE4F
15. InVision Craft for UX Design – Feb 2019, License # C03E36
16. UX Design 7: Implementation Planning – Feb 2019, License # 11CFCD
17. UXPin for UX Design – Feb 2019, License # B58B8B
18. Learning Adobe XD – Feb 2019, License # 18ADAE
19. Design Thinking: Understanding the Process – Feb 2019, License # 85CC05
20. UX Foundations: Style Guides and Design Systems – Feb 2019, License # 995CF4
21. UX Foundations: Logic and Content – Feb 2019, License # 44FC81
22. UX Foundations: Content Strategy – Mar 2019, License # E07E90
23. Photoshop CC 2019 Essential Training: The Basics – Mar 2019, License # 316CCA
24. Photoshop for UX Design – Mar 2019, License # 9B8C17
25. Illustrator CC 2019 Essential Training – Mar 2019, License # 895E30
26. Illustrator for UX Design – Mar 2019, License # 5AA997
27. Developing a Design System with Adobe XD – Mar 2019, License # 66D272
28. Applied Interaction Design – Mar 2019, License # 12EB1D
29. InDesign Quick Start – Mar 2019, License # 226327
30. InDesign for UX Design – Mar 2019, License # D18EEA
31. Introduction to Graphic Design – Apr 2019, License # 1C0760
32. Interaction Design for the Web – Apr 2019, License # 128165
33. UX Foundations: Information Architecture – Apr 2019, License # 2919F5
34. Sketch Essential Training: The Basics – Apr 2019, License # B589C2
35. UX Foundations: Usability Testing – Apr 2019, License # 2FEE4F
36. Sketch: Creating Vector Graphics – Apr 2019, License # 7ADF0F
37. UX Foundations: Research – Apr 2019, License # B5F68C
38. Zeplin for UX Design – Apr 2019, License # 1D0D70
39. Sketch: Style Guides & Asset Libraries – Apr 2019, License # 697899
40. Design Thinking: Implementing the Process – Apr 2019, License # B2027E
41. HTML Essential Training – Apr 2019, License # 2EE67E
42. Introduction to CSS – Apr 2019, License # 9B7B5D
43. Framer X Essentials – Apr 2019, License # AEB8D7
44. UX Foundations: Accessibility – Apr 2019, License # F1E98F
45. Figma for UX Design – Apr 2019, License # 61473D
46. OmniGraffle 6 for UX Design – Apr 2019, License # 00C3C4
47. UX for Voice: Planning and Implementation – Apr 2019, License # 578666
48. User Experience Design for Wearables – Apr 2019, License # CD9067
49. UX Research Methods: Interviewing – Apr 2019, License # BAEDD2
50. UX Research Methods: Card Sorting – Apr 2019, License # 7C5FE1
51. Agile Foundations – Apr 2019, License # FA8244
52. UX Research for Agile Teams – Apr 2019, License # C98BBA
53. UX Research: Lean Experimentation – Apr 2019, License # 7599E4
54. Making User Experience Happen as a Team – Apr 2019, License # BB0005
55. Hands-On Mobile Prototyping for UX Designers – Apr 2019, License # 770198
56. Building and Maintaining Your UX Design Portfolio – May 2019, License # EBCB07
57. Freelancing and Consulting in User Experience – May 2019, License # C7AB3B
58. Strategies for Successful UX Freelancers – May 2019, License # 57C043
59. Freelance UX: Managing Projects – May 2019, License # 24BAFD
60. Proto.io for UX Design – May 2019, License # 22D940
61. Sketch: Creating Responsive SVG – May 2019, License # 14E3C1
62. Sketch: Mobile Design Workflows – May 2019, License # 6CE917
63. Designing an Icon with Sketch – May 2019, License # 18D5DE
64. Sketch: Prototyping an Image Carousel – May 2019, License # 7ABB1B
65. Creating a Design System with Sketch – May 2019, License # DD53CB
66. Managing a Design System with Sketch – May 2019, License # 26F9CC
67. Sketch: Working with Developers – May 2019, License # 0145BE
68. Sketch: Beyond the Basics – May 2019, License # DFDC0C
69. SEO Foundations – Jun 2019, License # CA1CB2
70. Google Analytics Essential Training – Jun 2019, License # 68D912