UX/UI Design, UX Research, Full stack developer


FS developer

UX Research

Web App

go to site


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


Sept. 2019 - Sept. 2020


After Effects


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

Shortening the time of developing video tutorials by instructional designers
Reducing the cost of producing a training video unit
Bridge the gap between the required skills and the skills available for instructional developers

Research Goals

Discover the scale of using video for learning purpose
Identify video production process
Define users’ motivations, needs, and frustrations when developing instructional videos.
Understand industry standards and which features give current solutions a competitive edge in the field
Identifyareas of improvement in current solutions

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.

Research reports
& 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.

See the full competitive analysis chapter

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:

Is video is truly a trend?
The interviewees confirmed that there is an increasing trend in using video for training purposes. For example, in the last years, they have been using instructional videos in almost every project they had.

Times and expenses
On average, one video unit lasting about 3 minutes takes about 6 working days: 2 days for preparation, 1 day for shooting, and 4 days for edit.

Current equipment
Most of the interviewees are using professional studios with DSLR camera, prompter, and green screen as the equipment, while using software such as After Effect, Premiere, or PowToon for editing. In addition, the interviewees said they will use smartphone camera for the recording.

Pain points
There are two major pain points for instructional designers while developing videos. First is writing the script that requires an especial skill, which isn't easy to learn. Secondly, the crucial difficulty is the editing stage that requires multiple skills which they usually don't have, therefore this stage is the most expensive and longest in the process.


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.

See all the personas


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.


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
! @ # $ % ^ & * ( )
24px bold
20px Medium
18px Medium
Paragraph text
16px Normal
Small text
12px Normal


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).

Vivid violet
Pure cyan



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.


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:

Time on task (TOT)

Satisfaction level and qualitative variables

Completion rate

Errors' frequency

Error-free rate

Impact of the errors (low, medium, or high)

Screenshots from the online usability testing


Are satisfied from this platform usability
Are satisfied from this platform ease of use
Are willing to use this platform

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:

Add a protection pop-up to alerts users before deleting or changes a slide
Change the name "Brand" to "Project Design"
Increase the maximum letters range on the text's animations
Add an explanation about the interface in the blank slide
Change some of the copy to be more clear and informative
Embed an explaining video of the system in a popup at the first logon

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:

OneShot produced video's time estimation

Satisfaction level and qualitative variables

OneShot produced video's costs estimation

OneShot produced video's perceived quality


Are willing to use this platform
Up to 75%
time saving
compared to production‘s time without OneShot
Up to 90%
cost reduction
compared to production‘s cost without OneShot

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:

Change OneShot's rendering algorithm to get more smooth animations
Expand OneShot animations' variety and change some of the current animations
Change OneShot's code to get more high-definition animations

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.

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.

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.


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.

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 :)


view project