The problem
A user of the app identified an issue with the Instagram mobile app. When playing a video, it can be challenging to rewind or fast-forward due to the thin video track. To perform these actions, users need to drag the video track back and forth, but pressing the screen too hard can lead to unintended actions. This particularly impacts users with larger fingers and presents an accessibility issue that could significantly impact the user experience.
The goal
The objective is to develop a feature that allows users to rewind or fast forward a video with minimal risk of accidentally tapping other buttons on the screen.
User research
II decided to interview four people who are frequent users of Instagram. I asked them what they think of a particular issue and how it affected their experience while using the app.
User 1- “I have big fingers and this frustrates me”
User 2- “It is annoying”
User 3- “It is frustrating having to try multiple times to rewind or fast-forward a video”
User 4- “If the video track could be thicker or maybe having a different way of rewinding or fast-forwarding would be great”
Sprint 1
Based on user feedback, I assembled a team of 2 UX designers to collaborate on this project. I established a transparent product backlog and facilitated discussions around the items in the backlog during sprint planning. Subsequently, the design phase commenced, during which I engaged with the designers and users daily and occasionally assisted with design tasks, even contributing to the creation of paper wireframes.
Paper wireframe 2-
When the user wants to rewind or fast forward a video, they would long press the middle of the screen. This action will pop up a mini screen of the video on the video track. The user can then drag the mini screen along the video track to their desired part of the video. Communicating with the users constantly helped me fuel ideas for this, these ideas were turned into user stories.
Sprint review
After sketching the two wireframes, the two were shown as increments and the feedback was well-balanced.
Sprint retrospective
After the sprint, the team gathered to review successes and failures.
Paper wireframe 1-
In this solution, the user would no longer be able to control the video track if they want to rewind or fast-forward the video. Instead, they would need to long-press the left or right side of the screen, causing a rewind or fast-forward button to appear which the user can tap intermittently or long-press. Double tapping the screen will no longer "like" a video; instead, users will need to tap the heart icon for this action. Communication with the users was important, their input helped drive ideas.
After sketching two different wireframes, the users wanted high-fidelity mock-ups after, during the second sprint, we combined certain aspects of those two initial ideas to create a final high-fidelity mock-up. When the user long presses the left-hand side of the screen, the rewind button will appear allowing them to tap and rewind. the same also happens when the user long presses the right-hand side of the screen but this action would be for fast-forwarding button to appear.
The user can long press the middle of the screen and a mini screen of the video will appear, the user can then drag this along the video track to their desired part of the video.
Improved final mock ups
User feedback
Here are the points made from the feedback we received:
-The rewind and fast-forward icon symbols would be hard to see against a darker video.
-Introduce a pause symbol to show when the video has been paused.
We added a black transparent circle behind the grey rewind and fast-forward buttons, this solves the problem of the user watching a darker or lighter video and not being able to see the rewind and fast-forward buttons well.
The video will be paused if a user taps the middle of the screen once, a play button will appear in the middle of the screen to resume the video.
When paused, the user can still long-press the middle of the screen (under or above the play button) for a mini screen of the video to appear, this will allow them to drag it along the video track to their desired part of the video whilst the video is still being paused.
**(Instagram have had an updated and they have implemented a pause button on videos, this was done a while after this project)
Sprint 2
Sprint review
After the design phase in the second sprint, users were shown the designs and loved it, out of 4 users only 1 had negative feedback.
Sprint retrospective
After the sprint, we as a team came together to discuss what went well in the sprint and what could be improved for next time.