QuickAd design mockup
Application visualization

QuickAD.io

UI design
What is QuickAD.io?
QuickAD.io is a SaaS web application that allows users to simplify the process of making video commercials for a plethora of different formats all at the same time.
The application is mostly aimed at companies and users that are normally not accustomed to directly creating videos or lack video editors due to company size or budget reasons.
My Contributions
My assignment was to create a user flow and a user interface with solid design guidelines and a design system to accommodate further expansion of the product.
I aimed to create a product that is easy to navigate, teaches new users how to use it, and has a great time to value ratio.
QuickAD.io
Web application
Feb 2020
When I was assigned to the project, the product was already in production for quite a vile and had a working prototype whit a dev version of the interface. I started by talking with the client and gathering as much intel as I could. Since I was assigned to the project for a short time (2 working weeks), my next step was to gather information from the lead developer.
After getting intel and aligning my work process with the lead developer, I started working on a user flow.

From the interview with the client, I figured out that the main target audience is people with limited or no video editing knowledge, and no time to learn the intricate parts of video editing software. The second most outstanding aspect was that the companies the product was aimed at were mostly on a tight budget.

With this in mind, I designed a user flow that was short and easy to navigate. The user starts with the view of the "main operation panel" (home screen), where they are presented with pre-existing projects (retained users), or in the case of new users, the only option is to start a new project.
The application guides the user through the whole process of creating new video content, and the whole process has only 4 steps. I also decided to gatekeep the user from continuing to the next step if they don't fill in all the relevant information. The next improvement I implemented was to add drag and drop functionality to all of the file uploading fields (but also retaining the option to just choose files from the computer in the additional window).

The next step was to pair the developed UX with a new UI, and since there are plans to further work and expand the product, I decided to use a full design system. For this project, I worked in Figma where I decided to implement a strict workflow that worked great for the small team (client, full-stack developer and, me as a designer).
I went for a toned-down user interface that mimicked the look of a rigid but stable financial application. I decided on this since a few of our potential users were familiar with a more administrative type of application. For the colors, I chose a very limited color palette that in my opinion looks clean, simple, and minimal. I also went with limited use of icons, and even respectively labeled them (the user can hover over any icon to get the description of the function).
QuickAd design system
Design system
QuickAd application screen ecosystem
Application building blocks
QuickAD application mockup
Application visualization
Results
In the end, the project took 10 days to complete, and I am happy with the result. All of our testers completed 5 projects from start to finish, without the need to contact support.
I am also proud of the statistic that the whole process from entering the application to finalizing a video commercial (this includes from 1 to 25 different files that are automatically distributed to target media houses and are rendered in different aspect ratios) takes on average 15 minutes. This shows a great time to value ration, that impressed all of our testers.