In this project, we aim to create a suitable User Interface for a new video-based social media application aimed at teens and young adults centred around publishing a short-length video
daily. Given the success of other social media applications of a similar format such as BeReal, it is clear that the sense of achievement obtained from engaging regularly with an
app of this type is unique and promising. However, there is yet to be an application of a similar nature which is focused around video recording rather than photos. We wish to take
inspiration from aspects of apps like BeReal and design an interface which promotes regular or daily use of the app to record a brief video, whilst giving a sense of accomplishment to the
user by doing so.
The prototype must deliver content to the user in an effortless manner, providing high-reward
value to users from as little effort as possible. We may implement this in a manner of ways, such as the reward of viewing many videos from the effort of uploading just one yourself.
The viewing experience can also be effortless, implemented by a continuous waterfall of videos, with each video playing one after the other.
The user should have an enjoyable experience when using the app, with quality
performance with fluid scrolling in analogue quantities rather than discrete, making the transition between videos playing and the next one loading feel as non-intrusive as possible
to the user’s experience.
1. As a user, I must be able to access the app with ease. 2. As a user, I must be able to easily record and upload my video. 3. As a user, I must be able to access each video with as little effort as possible. 4. As a user, I want to be able to watch each video with as little interruption in between as possible 5. As a user, I want to watch each video with minimal disruption to the viewing experience.
| In Scope | Out of Scope |
|---|---|
| A responsive, fresh UI Design | Functional authentication system |
| Accessibility widgets & features | Deployment on a mobile device |
| A design which would fit a mobile device suitably | Ability to record videos in-app |
| Internationalisation features | Functional user experience widgets |
| Ability for the app to play media files | |
| Widgets for user experience i.e. report, block |
We will aim towards a prototype which allows users to quickly upload a video to the app,
which once complete opens the user to a UI which plays each video consecutively. Each video will begin playing upon the video thumbnail displaying on the screen, once each video
ends the next video will load up shortly. If the user wishes to move back to the previous video or skip the current one, they simply need to swipe vertically to the desired video in a
similar fashion to that which may be seen on apps such as Instagram Reels or TikTok.
The development team chose a weekly sprint methodology for each iteration of the
prototype, in order to reflect each week on the changes being made. Splitting our team into three groups, a documentation group, a developer group and a single Manager, the
Manager would work with both groups to handle the weekly sprints, setting tasks to each group, and providing auxiliary support to whichever group requires it. Each week the team
would meet for a sprint summary and decide on what to work on via a ‘start, stop, continue’ retrospective; We would review what has worked well and what has been unsuccessful, and
match the findings into a board to decide what needs to start being done, what we should stop doing and what we should continue doing. This would allow for the group to maintain
concentration on the correct task without becoming distracted by other issues which could be implemented in other ways.
For the first cycle, it was decided to focus on the layout & design of
the UI, to give us a rough example of how the app should look and feel for the user, whilst taking into account the target demographic for
the product. Constructing this initial UI would give us a basic framework on which we can extend and allow us to discover the
problems we will need to overcome during the design process.
With this idea in mind, we created an initial rough design using a UI
design tool for our desired UI layout.
This initial design was chosen when taking into account that the initial
app will be exclusively mobile which meant that the design must fit this type of screen
Upon the end of the final week, we were now somewhat happy with the progress so far - we had an initial design to work from with confidence that our primary goals could be achieved.
We knew however that we must now start focusing on the requirements we had outlined in our initial meetings, both functional and non-functional. While the prototype currently had the ability to play video media, we still had few social features and the app was yet to include any resemblance of video submitting from the user’s behalf. We would now also stop attempting to include more suggestions in terms of extra features once the results of our requirements questionnaire would be received - adding any more features to the list could pose a risk to being able to complete our essential requirements within our timeframe. We decided we would continue with the use of the main structure of the prototype’s layout - while there were many redesigns that would be required, our current prototype was a sound framework to build on.
In the second prototype, we aimed to achieve a more professional yet simple design for the UI while adding more features for the user to benefit from. We changed the design to contain larger space for the video to play, added the scroll feature and Username and Caption sections.
This design has improved the overall look of the app with a more clean design showing clearly the Username and whatever video they posted and whether they included a caption or not. Looking back at the first iteration, this prototype is now more user-friendly, looks better, and has better functionality and features.
At the end of the sprint, some more technical aspects were reconsidered, taking into account the time limitations we now realised that we would have with just one week remaining.
We would now start working on the implementation of internationalisation and accessibility features such as video translation, video captioning, subtitling etc. We would also need to add features to comply with Data Protection and User Safety regulations like toggling location sharing and reporting videos. We decided that we would stop spending additional time on researching how the fluid- scrolling of videos would be implemented - this had been rather time consuming and was beginning to take too much time away from the implementation of other necessary features.
In addition, with the results of our Evaluation Questionnaire returned, we were presented with a couple points of improvement with regards to accessibility, that being a design that is friendly to those with visual impairments or dyslexia, implemented through a monochrome design language, and the addition of translation to improve internationalisation. Furthermore, we would continue with the plan to enlarge the size of the video’s viewport to ensure that the user was being delivered the content in the highest quality manner.
For the third iteration, it mainly consisted of polishing and some improvements on the user experience side. The goal was to create a more natural and simple design while including more professional features for the user. We aimed to implement a fluid scrolling in analogue quantities rather than discrete, but due to technical constraints within Qt, we were unable to satisfy the desired style of video scrolling, therefore we decided to add buttons that represented scrolling through the videos to imitate the action of the design we initially expected.
After implementing and reviewing the third cycle, the app is now fully complete and is ready to be used. The design was improved significantly by adding a login screen which shows up first thing when opening the app, followed by the screen where the user is asked to post a video to be able to view what other users have posted, and finally the main screen of the app where we have added most features to escalate the user experience.
- Accessibility: a. International language options b. Subtitles c. Contrasting colours to remain colour-blind friendly d. Increased usage of icons for users with learning disorders such as dyslexia (alt text for those with visual impairments) e. Flag button to report videos that are not appropriate
- Data Protection: a. Opting out of location sharing b. Delete video button
Samuil is a Computer Science student whose first language is Bulgarian, he receives a notification in Bulgarian that it's time to post the daily video, he opens the app and begins recording his 7 second clip. After doing so he can view his friends' videos by scrolling on the main screen. While scrolling through his friends' videos, he spots a user posting illegal content, he presses the flag button and types in the concern and sends a report. Once the video has been reviewed by an external team, the video is removed and the user's account is suspended.
In order to build an application of any kind, there are a variety of external factors that influence design and functionality. One such issue is the Legal Aspect, under European Union legislation (that still applies to the United Kingdom as of now), Social media applications are required to have a variety of mandatory features such as Blocking, to prevent harassment of users, as well as the Reporting and Moderation of user content, to prevent the distribution of illegal and Child Sexual Exploitation. As such we have implemented a Flagging feature. However, within a production version, the features of moderation and content flagging must be of great importance to prevent harm to vulnerable users and prevent the perpetuation of any illegal content.
With regards to the User Interface and general User Experience, The solution follows the Gestalt Principle, as it was our major inspiration to create a user interface that both looks and feels natural to use. The closure of the previews on the top of the UI, to the continuation of the shared videos, the clear separation of the figure of the video to the background of the UI. We believe that embracing these concepts from Gestalt and implementing them has led us to having a far more fluid and enjoyable User Interface.
The current limitations of our solution is due to the need of producing a prototype in such a
small amount of time, and not having a functional backend (i.e. a database) to develop with, as such a lot of features are only placeholders.
However such features would most definitely be feasible within a production release, as such our proof of concept, implementing the User Interface, has successfully achieved our
requirements. While we were unable to implement every single one of our goals in this project, overall we are more than satisfied with our final product.