Introduction
OneShot is a SaaS web platform that I've designed and developed for my degree graduation project at HIT (B.A. in Instructional Systems Technologies) with Daniel Ilan. OneShot eases the process of creating instructional videos by customization of a premade AE Lottie animations and by recording the animation within the platform, using the Live-To-Tape method. With the help of OneShot, instructional designers don't need special knowledge or skills in creating animation or in editing videos.
My Role
UX/UI Design, UX Research, Full stack developer
Dates
Sept. 2019 - Sept. 2020
Tools
Challenge
Over the last few years, there has been an increasing trend in using video for training and teaching purposes in both academia and business organizations. Many organizations invest a lot of time and money in developing and producing a single instructional video unit. One of the reasons for this considerable resource spending is the complexity of the software with which the instructional developers work as well as a gap in their skill with this software. On average, one video unit lasting about 3 minutes takes about 3 working days to edit, which is about a third of the total time required to produce that unit.
After conducting an investigation which included testing, experimenting with existing solutions, and conducting several meetings with various factors in the business sector and the academia, we came to realize that there is a need to find a technological solution to shorten the time and decrease the cost required for post-production video editing.
Project Goals
Research Goals
Secondary Research - Academic Research
First, we conducted secondary research to be familiarize with video production process and its scale for learning purpose. We collected information from articles, case studies and books on video production, user experience, instructional video and trends in learning.
& case studies
These are our findings:
- There is an increasing trend in using video for training purposes both in academia and in organizations
- Producing a video that complies with educational guidelines and theories is a challenging task, especially for a person without appropriate knowledge or budget
- The most difficult and challenging aspect for people in developing instructional videos is within the recording and editing stages
- This difficulty has been identifiedby others and several products have been developed to address this difficulty
Secondary Research - Competitive Analysis
We uncovered the strengths and weaknesses of 10 products and softwarethat address this difficulty (try to reduce production time and costs for video tutorial development) or supports real-time animation displaying, to identify industry standards, user expectations and areas of improvement in them.
We found out that the products appealing to a broad target audience and aren't directed targeting instructional designers.
Therefore, most of the products are “overkills” for their daily uses, which adversely affecting their experience and causes a significant loss of time and money.
Primary Research - Interviews
After we familiarized ourselves with the video production process and identified the strengths and weaknesses of current products, we interviewed 9 experts in the learning field, which in both academia and business organizations, to get a comprehensive and precise perspective from them about the problem as we saw it. After we completed the interviews, we wrote down all of the responses and began to cluster them based on new and premade topics.
These are our findings:
Personas
After we gathered all of the qualitative data from the research process, we realized there is a wide range of instructional designers. Thus we used all this data to create Linoy, Yossi, Yuliya, Nava, and Haim, our personas to represent our future users in their full variance.
Solution
Alternative solutions
We tried to create an MVP of several technological solutions, such as: using augmented reality technologies to place the graphics at the recording time or creating a light version of the Smart LightBoard.
The desired solution
A SaaS web platform adapted for browsers Chrome. In this platform, the user will be able to:
- Create multiple projects, which each project will have a design theme at a project-level.
- Create and edit the videos' slides that contain editable Lottie's animations.
- Control animations entrance and exit while recording the video that is possible through any webcam
OneShot will be upload to AWS server, the backend will be developed in Python using Flask, and the frontend will be developed in Jquery using Ajax.
We will create the animations first at Adobe After Effect, and then we will use AE Lottie plugin to convert them into a Lottie file, which will later be edited on the server-side by the user.
Initial Sketches
Before moving to Figma for designing a high-fidelity prototype, I've started by sketching designs to see what ideas I can come up with.
Mini-Design System
I had created a mini-system, and although it's small, my mini-system would empower us to focus on the experience and usability, rather than having to guess at colors and font styles.
Typography
The slightly rounded edges of Rubik typeface make it fun to use while keeping things classy. Moreover, Rubik is a free typeface that supports both Hebrew and English letters.
Aa Bb Cc Dd Ee Ff
0 1 2 3 4 5 6 7 8 9
! @ # $ % ^ & * ( )
Colors
Primary and grays
We tried various bright color palettes, which all of them had a clean and simple look and feel, that visually represented the simplicity of our web app unlike most of the editing software with a dark color palette and cumbersome appearance due to their numerous functions.
We distributed a survey through SurveyMonkey among ten peoples, which match the OneShot target audience, to help us to decide which color will be the primary that represents better our product's values, blue or purple. Eventually, as the majority vote for, we chose the color purple to be the primary color, which is a warm color that symbolizes ambition, creativity, innovation, and uniqueness.
Furthermore, we chose Pure cyan to be the secondary color. This color will appear mostly in mouse transitions and in places that require the user's attention (utilizing its prominent phosphorescent tone and its contradictory to the primary color, purple).
Icons
Logo
After checking several names, we chose the name OneShot, which represents a one-time recording of its many meanings, such as:
Massive editing after the recording is not required anymore.
Only one recording is necessary due to the app's ease of use.
Only one recording is in demand due to the produced video's high quality.
As can be seen, there is a similarity in the names and styles we tested: usually, a sign of a triangle (Play) with a combined word that is meaningful in the video production field.
Buttons
Palette Picker Component
Collection's Nav Item
User Testing
We have recruited 12 participants for usability testing to test the beta version of the platform. The participants were aged between 25 - 45 years old and were from different roles: instructional designers, Project managers, teachers, and AE specialists.
This phase, which lasts between 45 min to one hour with each participant, was conducted remotely via Zoom due to COVID-19 quarantine. In the user observations, each participant received seven tasks to complete and took part in a semi-structured TAM interview afterward.
Measuring Success
To examine the quality of OneShot, we checked if there is an increase in users' satisfaction with the video production process following their use of the product and whether there is a shortening of its production times.
We broke down the project goals into detailed, measurable ones and developed the following questions:
How easily users are able to set up a user?
How easily users are able to set up a video?
Which improvements need to be made?
How does the overall experience feel like?
How easily users are able to set up a “brand” for the project?
To quantitatively measure the success of the design, we determined these variables for measurement:
Screenshots from the online usability testing
Results
According to the data analysis from this phase, the participants' experience with OneShot was satisfying and worthy. Furthermore, we predict growth in future users' experience after making the necessary changes brought from their enlightenment and comments.
Operating the system was an easy task for the participants, although it was their first interaction with the product. Another verification, which we had analyzed from the interviews' data, is within the average ease of use satisfaction rate, which is 4.19 out of 5 ("very much" rate).
In addition to getting the users' initial viewpoint from the usability testing, we had created a list of deficiencies in the UI & UX of this version.This list had been built from:
- User's verbal comments while the user observations.
- User's errors while the user observations.
- User's verbal comments in the interview.
To identify the core deficiencies, we had filtered that list to create a new list of required improvements for the next version, which was the release version. Here are some of the solutions to those required improvements:
Experts questionnaire
We have recruited 5 experts in the learning field, which in both academia and business organizations.The participants aged between 25 - 45 years old, which had taken part in instructional video production, are suitable for the target audience -learning managers.
Each participant received an email that includes a link forGoogle Formwith two parts: details about the participant and video quality.
Measuring Success
To examine OneShot produced video's quality and OneShot's productivity (development time of video units versus its resulting quality), we had reproduced an existing video within OneShot, to be able to compare afterward between the time and costs of the video development by the experts' estimation, the original video's, and in OneShot.
We broke down these phase goals into detailed, measurable goals and developed the following questions:
How much the produced video perceived as quality?
Are there positive elements or characteristics in the video?
Did OneShot is succeeding in reducing instructional video production time?
Did OneShot is succeeding in reducing instructional video production costs?
Are there negative elements or characteristics in the video?
To quantitatively measure the success of the design, we determined these variables for measurement:
Screenshots of the experts' questionnaire output
Results
time saving
cost reduction
According to the data analysis from this phase, although there is a reduction in both time and costs, the experts do not perceive OneShot's produced video as quality enough (the average video quality rating is 2.6 out of 5). Despite these perceived limitations, 80% of the experts answered that they willing to use this platform, and all the experts are willing to use this platform after some improvements.
According to the experts, a few improvements were needed, which some of them were an outcome from the video's moderator and not OneShot abilities. Here are some of the solutions to their needed improvements:
High-Fidelity Design
Keeping users’ needs and pain-points in mind, I settled on a final version of the design, creating a high-fidelity prototype.
Account creation
We try to design a minimum registration that users will feel comfortable submitting.
Customize your project
Create a unique design system for each project by combining premade AE animations with your custom color palette, to create more constating and faster production.
Create your video
Create your video animations’ slides and arrange them according to their presentation order in the video. Although the slides are a copy of your project’s design system animations, you can edit their contents (texts, images, colors) or even convert them to a non-design-system animation.
Record your video
Control your video's animations entrance and exit while recording, which can be with any web camera within the platform, to create a 720p resolution video and save hours of editing shifts!
What's next
Below is a list of features that were eventually cut-off due to the lack of development time caused by technical difficulties from handling the Amazon server:
- Add user management functions such as reset password and change the user's avatar.
- Add a documents section, which was a nice to have feature, where users will upload their videos' scripts.
- Add a fonts section for the project's design-system where users will choose a typeface and font at a project-level, as defined in the early stages, to help users' create a unique design-system and brand.
- Develop a dedicated Bluetooth remote controller to help the users' control their videos' animations at the recording phase more easily.
Furthermore, for more accurate conclusions, more participants are required at the testing stage, especially at the Experts questionnaire phase. The participants' current number was due to COVID-19 and the fact that the project was apart from the degree.
Learnings
It's not the quantity it's the quality
At first, we defined and designed a fair amount of features that created a non-friendly and complex platform and even caused a significant delay in our development time. As the project has progressed, we have redefined and re-prioritized our feature, to create a better realistic and precise feature list, which benefits our user’s needs and suits our development time.
Programing experience
To achieve our product's vision, we had needed to learn various programming languages, methods, and tools in the development stage. Some of them were new, and some learned on a new depth, like Python, Jquery, MsSq, Github, PyCharm, and Ajax. Designing this project from end to end, from planning to development, granted me a new perspective and knowledge about this process, especially the programmer's point of view.
Testimonial
Daniel and I had participated and finished a limited Amazon-sponsored scholarship of innovation in learning, dedicated to promoting entrepreneurship in projects.
Besides, OneShot got us the outstanding project award, which was divided up between four projects from 27 projects, and got published on the Hit - Faculty of Instructional Technologies Facebook page.
Thank You
Much credit goes to Daniel, my Co-Founder, and my partner in crime. Daniel and I worked hard on this project, day and night - and had a great time together doing so.
We cooperated in all aspects of this journey - from planning and design through development and testing.
I believe we’ve created a useful product and hope it will help instructional designers making amazing instructional videos and have fun doing so :)
