INtroduction



Many of us who have been on lockdown due to the COVID-19 pandemic have taken refuge in watching movies at home. This has provided us an unforeseen but welcome opportunity to be exposed to a wider range of movie ideas, filmmakers, styles, and techniques from around the world. In addition to the entertainment and artistic gratification from these creative works, we have been developing a renewed sense of connection with our fellow human beings who we know and feel are in the same boat. Through our shared experience as film spectators, we realize that the enjoyment of films is an essential part of what it is to be human. This resonant condition presents us with the insight that the entire library of cinematic media - now made more easily accessible through online streaming - is an integral part of the heritage of humanity.



CONCEPT: ENERGY SHARER



When people watch movies, they are sometimes struck with an idea for a new film. Unless they are filmmakers who have suddenly come up with a new story concept for their next work, regular film viewers who do not have practical use for these gems usually just forget about them immediately. Though they are fleeting, having these “idea lightnings” makes people happy because through these, we feel as if we are starting to have a deeper relationship with the source of all creativity.



One of the values that the pandemic has brought out of us is that of sharing. During the quarantine when our access to physical resources has become limited, we have realized that there is another thing that we can freely share, that is, our energies as humans who care about our fellow experiencing beings. The source of this energy is the Universe and is therefore unlimited. We transform this energy and share it with others, for example, through our comforting words to the afflicted or the posts that we share on social media to make sure that frontliners receive our sincere appreciation for the heroic work that they are doing. This shared energy multiplies with every exchange and inevitably actualizes into acts of kindness such as people sending food to the nurses and doctors who save lives everyday.



PROBLEM



The “idea lightnings” that sometimes strike us when we watch movies are also forms of energies that come from the unlimited source. For a moment, we become vessels of the creative energies that want to manifest themselves into new cinematic works. What if we could grasp these ideas a little bit longer, enough for us to share them with others who might draw inspiration from them? What if, collectively, we could create a hub of these movie ideas that could help us come up with new film projects which would eventually contribute to the library of works in world cinema? This has inspired me to conceptualize and plan for “Energy Sharer,” a free digital platform where we can freely share movie concepts to others while also inspiring ourselves with the ideas that our fellows are also openly giving. Figure 1 presents the logo, color scheme, and typography to be used for both the website and the app versions.





Figure 1



MAIN GOAL



The primary objective of the project is to design the Energy Sharer platform in such a way that the user experience would flow easily with the spirit of sharing. The user interface should match the mental model of the users, that is, of coincidentally receiving inspiration from random strangers or even from nature. The user experience should facilitate the easy transformation of creative ideas from one's mind, to the digital interface, to the minds of other people who yearn for inspiration, and then back to Energy Sharer which is essentially a digital exchange of creative ideas where this cycle repeats and organically makes new branches.



UNDERSTANDING THE USER



The prospective users of this online service are (1) those who want to give ideas to others who might find use for them, and (2) filmmakers or even regular movie lovers who want to receive sparks of inspiration for new movie ideas.



PERSONAS



To understand the prospective users of Energy Sharer, interviews were conducted amongst potential givers and receivers of movie ideas. This resulted in the two personas identified in the UX case study. Figure 2 illustrates their respective short biographies, characteristics, motivations, use-case scenarios, goals/interests, and pain points/concerns.





Figure 2



USER FLOW



The prototypical user primarily approaches Energy Sharer's gallery of movie ideas. Here, the website visitor or app user gets an impression of the wide range of movie ideas in the hub while establishing a sense of rapprochement with other human beings sharing their creative sparks. Figure 3 maps out how this primary motivation organically flows to the next three activities in the website/app: (1) modulating or refining the possibilities of the available concepts by commenting and rating them, (2) submitting one’s own movie ideas, and (3) deepening their engagement with the larger, worldwide community of energy sharers.





Figure 3



DESIGN PROCESS



I have executed a four-phase design process to build a user-centric interface and user experience for Energy Sharer: (1) empathize & research, (2) design & prioritize, (3) ideate & prototype, and (4) iterate and validate.



EMPATHIZE & RESEARCH



As a movie lover and filmmaker hunkering down during the COVID-19 pandemic, I have empathized with other people who have also taken comfort in the power of creative inspiration. This prompted me to conduct interviews and surveys which formed the basis for the Energy Sharer concept, its corresponding user personas and user flow as discussed in the previous section, and finally, this online service’s ultimate goal of facilitating and nurturing a sense of interconnectedness amongst energy sharers. Figure 4 shows the homepage which immediately communicates that aside from giving and receiving movie ideas, Energy Sharer also looks forward to reinforcing this sense of camaraderie by having online forums, organizing/publicizing member events, and exhibiting media that result from creative collaborations amongst energy sharers.





Figure 4



DEFINE & PRIORITIZE



The Energy Sharer project is indeed quite extensive so for this particular UX case study, I have focused on only a couple of main functions, namely, Gallery and Submit. The mockups in Figure 5 illustrate the primary use-case pattern that connects the Gallery (receiving movie ideas) to the Submit (sharing "idea lightnings") pages in the website version.





Figure 5



In addition, Figure 6 documents the low-fidelity wireframes for the Gallery (and item details), Submit, Forum, Events, and Media sections for the app version of Energy Sharer.





Figure 6



Ideate & Prototype



Based on the user research and a fine-tuning of the scope as discussed in the previous sections, the present UX case study has explored several ideations of Energy Sharer. Figure 7 exhibits high-fidelity wireframes of the Gallery and Submit sections in the app version of the digital platform, plus the loading screen that features the animated brand logo.





Figure 7



Iterate & Validate



Driven by data from usability tests, A/B testing, and interviews, the study has executed an iterative design process. Figure 8 shows versions one through three for the submit section of the Energy Sharer app.





Figure 8



RESULTS



Figure 9 summarizes the multi-device interfaces that resulted from this UX case study.





Figure 9



To conclude, since cinema is an affirmation of life, survival, and creative transformation, engaging with the movies meaningfully during this period has been a way for us to cope with our shared anxieties as we are faced with uncertainties about the future. It is fervently hoped that Energy Sharer, by connecting movie lovers through a kaleidoscopic mirroring of creative inspiration, can help us imagine a post-COVID-19 future when we will have learned significant insights about our shared experience and humanity’s common destiny.





ACKNOWLEDGMENTS: Freely usable photos by Bhavya Shah, Obi Onyeador, Elijah Flores, Maddy Baker, Guilherme Stecanella, Steven Kamenar, Zane Lee, David Clode, Hal Gatewood, and Bangkit Ristant on Unsplash.com



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.





Figure 1



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.









Figure 2



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.





Figure 3



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.





Figure 4



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.





Figure 5



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.





Figure 6



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.





Figure 7



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.





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.





Figure 9



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)



  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. Canon Rebel T3i (600D and Kiss X5) Essential Training – Mar 2019, License # 56F20A
  32. Introduction to Graphic Design – Apr 2019, License # 1C0760
  33. Interaction Design for the Web – Apr 2019, License # 128165
  34. UX Foundations: Information Architecture – Apr 2019, License # 2919F5
  35. Sketch Essential Training: The Basics – Apr 2019, License # B589C2
  36. UX Foundations: Usability Testing – Apr 2019, License # 2FEE4F
  37. Sketch: Creating Vector Graphics – Apr 2019, License # 7ADF0F
  38. UX Foundations: Research – Apr 2019, License # B5F68C
  39. Zeplin for UX Design – Apr 2019, License # 1D0D70
  40. Sketch: Style Guides & Asset Libraries – Apr 2019, License # 697899
  41. Design Thinking: Implementing the Process – Apr 2019, License # B2027E
  42. HTML Essential Training – Apr 2019, License # 2EE67E
  43. Introduction to CSS – Apr 2019, License # 9B7B5D
  44. Framer X Essentials – Apr 2019, License # AEB8D7
  45. UX Foundations: Accessibility – Apr 2019, License # F1E98F
  46. Figma for UX Design – Apr 2019, License # 61473D
  47. OmniGraffle 6 for UX Design – Apr 2019, License # 00C3C4
  48. UX for Voice: Planning and Implementation – Apr 2019, License # 578666
  49. User Experience Design for Wearables – Apr 2019, License # CD9067
  50. UX Research Methods: Interviewing – Apr 2019, License # BAEDD2
  51. UX Research Methods: Card Sorting – Apr 2019, License # 7C5FE1
  52. Agile Foundations – Apr 2019, License # FA8244
  53. UX Research for Agile Teams – Apr 2019, License # C98BBA
  54. UX Research: Lean Experimentation – Apr 2019, License # 7599E4
  55. Making User Experience Happen as a Team – Apr 2019, License # BB0005
  56. Hands-On Mobile Prototyping for UX Designers – Apr 2019, License # 770198
  57. Creating a Design System with Sketch – May 2019, License # DD53CB
  58. Managing a Design System with Sketch – May 2019, License # 26F9CC
  59. Sketch: Beyond the Basics – May 2019, License # DFDC0C
  60. Sketch: Mobile Design Workflows – May 2019, License # 6CE917
  61. Sketch: Working with Developers – May 2019, License # 0145BE
  62. Sketch: Creating Responsive SVG – May 2019, License # 14E3C1
  63. Designing an Icon with Sketch – May 2019, License # 18D5DE
  64. Sketch: Prototyping an Image Carousel – May 2019, License # 7ABB1B
  65. Building and Maintaining Your UX Design Portfolio – May 2019, License # EBCB07
  66. Freelancing and Consulting in User Experience – May 2019, License # C7AB3B
  67. Strategies for Successful UX Freelancers – May 2019, License # 57C043
  68. Freelance UX: Managing Projects – May 2019, License # 24BAFD
  69. Proto.io for UX Design – May 2019, License # 22D940
  70. Premiere Pro CC 2019 Essential Training: The Basics – Jun 2019, License # D5BC63
  71. Final Cut Pro X 10.4.4 Essential Training – Jun 2019, License # 163AB5
  72. After Effects CC 2019 Essential Training: The Basics – Jun 2019, License # F150F0
  73. SEO Foundations – Jun 2019, License # CA1CB2
  74. Google Analytics Essential Training – Jun 2019, License # 68D912
  75. Adobe XD Essential Training: Design – Mar 2020, License # 5CF987
  76. Adobe XD Essential Training: Prototype and Share – Mar 2020, License # B94435
  77. Interaction Design: Projects and Platforms – Mar 2020, License # 4A34A3
  78. Empathy in UX Design – Mar 2020, License # BA18DE
  79. Learning Wix – Apr 2020, License # F8E517
  80. UX for Web Forms – Apr 2020, License # 9C70D9
  81. WordPress 5 Essential Training – May 2020 License # B30507
  82. Squarespace Essential Training: The Basics – May 2020, License # 1FE8D6
  83. Squarespace Essential Training: Ecommerce – May 2020, License # 974A18
  84. Shopify Essential Training – May 2020, License # E96B9C
  85. UX for Small Business Websites – May 2020, License # 7FF567