by Michael Shapira
This UX Proposal was developed in the frame of the UX Fundamentals Bootcamp at the Interaction Design Foundation August – November 2021.
I encountered the problem in my work as a performer. Together with 3 other performers, I was in rehearsal, trying to work with a full Video Documentation of our show. The video was 2 hours long, and we needed to work with it : find a scene, play it, play it again, play only a part of it, learn (or re-learn) the material, and so on. This proved difficult even on a laptop screen, with the video being so long.
The difficulty became apparent by the combination of two things: the video being very long, and the need to work with the video, not just view it for entertainment or just out of interest.
UX Fundamentals at the IxDF
In August 2021 I joined the UX Fundamentals Bootcamp at the Interaction Design Foundation. The 12 week process took us through the five Elements of User Experience as defined by Jesse James Garrett: Strategy, Scope, Structure, Skeleton and Surface. It ended with Usability Tests and with a presentation of a UX proposal.
Here I present the development of a UX proposal.
Sketch by sketch towards a better User Experience
even though the sketches were made later in the process, they can be helpful in contextualizing the UX problem.
Arriving at the rehearsal space (1), finding a scene within the video documentation (2), playing the scene in a loop while working on it (3,4), moving on to the next scene (5), preparing for the next rehearsal by sharing the marked part of the video (6).
By sketching and describing a slightly better flow of interaction than the present one, some design opportunities begin to reveal themselves.
But first, some ground research…
After defining the Problem Statement, Domain Research and Competitive Analysis were carried out.
What is Vimeo ? What is YouTube ? Twitch ? Instagram ? What are the differences and similarities ? The broader comparison was regarding the nature of the platform, its business model and main offers. The narrower comparison focused on Navigation on the video timeline, for example the Chapter feature.
- 4 Participants
- Semi Structured Interviews
- All participants either worked or had working- experience in the performing arts.
- All participants confirmed in a screener that they in fact used Video in their work, and used either Vimeo or YouTube as a sharing platform.
The data from the User Interviews was transcribed, examined and grouped into four themes:
- The work context
- Using video in the work context
- Attitudes towards video platforms
Two main work contexts were identified. A persona was created for each, gathering insights from the data and presenting them as needs, behaviours and attitudes :
- Creative Work
- Educational Work
This was further elaborated using Empathy Maps and Customer Journey Maps for chosen User Scenarios.
Finally, out of 6 POV Statements and corresponding HMW Questions, one POV was chosen as the base for the continued work in the current iteration.
A User Task Flow was developed to begin to describe a POV-relevant task in more detail. The task flow shown here describes actionable steps and choices in:
- finding a part of a video (for example a chapter)
- viewing the chapter: once, several times, or
- viewing a scene within the chapter: once or several times.
- searching for the next chapter, either by fast forwarding or with the help of a thumbnail image.
these actions and choices point to several design opportunities:
- Make the chapters appear on the Vimeo platform and not only when video is embedded
- Add more playback speeds to also cover a range or “search speeds” 5x, 10x etc…
- Follow YouTube’s example and display a thumbnail image when hovering over the timeline. Even better – offer this as an option.
- Offer a flag setting feature
- Once the flag feature is there, offer a loop playback mode
- Offer a new playback view, where only a part of the video (for example, a chapter) is displayed as the current timeline. In other words, offer a Zoom-in-on-timeline feature.
The Information Architecture that was charted was meant to show the Vimeo video player itself, not the entire Vimeo webpage. Based on the IA of the existing video player (A), a second IA diagram was made (B) describing a proposed structure of an improved video player, with some new features and their placement within the IA structure.
From lo- fidelity wireframes…
to hi-fidelity wireframes (Figma).
Producing these wireframes, I was introduced to Figma and began to learn how to use it. In addition to that huge educational benefit, the wireframes proved instrumental in:
- Explaining design ideas in detail through annotations.
- Elevating a task flow to a higher, more realistic resolution. Thinking of all the necessary steps.
- Coming up with new design ideas.
- Receiving feedback and making the necessary modifications when transitioning from wireframes to prototype.
List by Chintuza from the Noun Project * pause by Robert Kyriakis from the Noun Project * Settings by Iconic from the Noun Project * play by Robert Kyriakis from the Noun Project * Volume by MRA Design from the Noun Project * Full Screen by Bradley Wilton from the Noun Project * magnify by Alice Design from the Noun Project * Circle by Hea Poh Lin from the Noun Project * Cursor by Zaff Studio from the Noun Project * Loop by Vectorstall from the Noun Project * Information by David Khai from the Noun Project * Share by Muhammad Ridho from the Noun Project * like by Icon Master from the Noun Project * fast forward by IconMonk from the Noun Project
Prototype and Pattern Library
The prototype resembled the Wireframes, but was simplified visually, making it more suitable for Usability Tests.
This prototype wasn’t meant to bring the graphical elements to their final polished state, but to test some design ideas.
Here are some design ideas, manifested in the prototype. The way these design ideas were implemented visually was not meant to express a finalized visual UI Design, but rather was intended to bring the prototype to a state of coherency and clarity and serve the usability tests.
The Timeline in its full view includes chapters. Each chapter is marked only at its beginning point by a marker in one of two states: hollow or full. This indicates whether the chapter is currently being played or not.
The chapter menu can be used to either simply jump to a chosen chapter, or with the magnifying glass icon, to view that chapter in “magnified view”.
Inspired by google, and the design of its logo on search result pages, the magnified view of a single chapter’s timeline was designed to indicate where the User currently is, within the full length video. The number of “broken timeline pieces” indicates how many chapters are ahead or behind. The timeline (both full and magnified) is intentionally made taller to accomodate for flags, chapter- and loop icons. In this view, the chapter markers are gone, since the User is viewing a single chapter.
The UI Pattern Library covers examples of “magnified” timelines of 5 chapters, with one flag set, with two flags set, and with looped playback of the scene between the two flags.
The loop playback indicator, has been broken down into two separate arrows: loop start and loop end. This allows to place the loop indicator anywhere: inside a chapter, inside a marked scene (between two flags) or around the entire timeline.
The chosen volume icon is a speaker shaped icon rather than the bar scale currently used on the Vimeo platform. This is meant to create consistency across devices when using the platform without causing irritation or confusion due to the similarity of the bar scale to the common cellular service icon.
Usability Tests and Conclusion
The following tasks were given to the participants in the Usability Test:
- Navigate to chapter 4.
- Navigate to a magnified view of chapter 4.
- Set two flags on the timeline inside any chapter in magnified view.
- Play the section between the two flags in a loop.
The information gathered in the Usability Test was:
- Time to completion for each task
- Experience: one word to describe how the participant felt in completing the task.
- Feedback: Giving the participant more space to describe how they felt or to feedback any feature in detail.
- Recommendations: Specific suggestions of the actions needed to address the participant’s feedback.
Task 1: Long to complete (over 1 minute), frustrating, unintuitive.
Recommendations: Chapter markers should be clickable, playhead should be moveable. Chapter markers redesigned to show exact location more clearly.
Task 2: Long to complete (18 seconds), unintuitive, confusing.
Users may confuse the magnifying glass icon with a search function.
Recommendations: Other alternatives to the magnifying glass icon needed. For example + –
Task 3: 20-25 sec to complete, confusing.
Recommendations: Flag-setting icon and Flag-icon should look the same, possibly with a size difference. While setting the flag User must see the video image to know exactly where the flag is set. Suggestion: Either move the playhead and see the video image change, or display thumbnail image.
Task 4: 20 – 35 seconds to complete, difficult.
Recommendations: Once a flag is set (or at the very least when two flags are set), offer a quick loop- button that doesn’t require opening the settings menu.