ZoeyA video editing app where you can easily create videos in your mobile phone

This project is a mobile application concept prepared for VCD302 course. We had a term for finding idea, planning, developing and designing the mobile application. I thought I could approach current video editing applications on the market with a different perspective and decided to proceed with this idea.

Skills

User Experience Design, User Interface Design, Wireframing, Branding, Illustration

Role

—Concept Work—

Timeline

Feb 2020 - May 2020

I've noticed that I've been heavily editing and creating videos over my phone recently. But sometimes this process can turn into torture and I would leave my phone and continue my project on the computer. So I thought I would develop the common structure of current video applications on the market, and I started the development phase of my idea.

First of all, I listed popular applications on the market and categorized them all within themselves. Although I didn’t just focused on mobile applications while researching, I also thought that desktop applications could answer the questions I was looking for. I used each one and created a documentation, listed their positive and negative aspects. This actually listed the challenges that I will face while designing the project.

Currently used video editing apps

Secondly, even I was in the target audience myself, I wanted to get the opinions of different people who would use video editing applications often. So after listening their problems, I have defined three different personas.


Jason

Jason
Although Jason is not very close to concepts such as video editing in his daily life, he sometimes uses mobile applications to create various social media content and videos. The mobile applications can solve his problems easily without having to use desktop programs.

  • He usually works with text heavy content. But he can't find the custom typefaces and transitions he wants on mobile.
  • Render process can take very long time
  • Sometimes while working on a project, mobile application can not handle the load and turn itself off.

Jasmine

Jasmine
Jasmine studies film-making and also has a Youtube channel. She is familiar with concepts like video editing Even she generally works on desktop applications, sometimes it may be necessary to make videos quickly. In such cases, she uses mobile and tablet applications.

  • Mobile applications seem a bit complicated to her because she is used to the interface of her desktop programs. She thinks the screen size is not enough for video editing, and she is distracted by the tools and buttons on the screen while working on mobile platforms.
  • While editing the video, she often needs to preview at full screen.
  • She cannot edit colors or brightness of the materials in the application. She has to solve it in another application and then transfer it to the application she uses for video editing.

Marco

Marco
Marco is a social media influencer and has also a Youtube channel. He often creates various social media content and short videos during the day. Even he uses desktop programs in his long and comprehensive projects, he uses mobile and tablet applications for his medium-sized works. Since he has a very dynamic and active life, he uses video editing applications almost everywhere.

  • He needs to produce fast content, but render process on the phone is a complete torture.
  • The typefaces offered to the user in the mobile application are not enough and he cannot place them as he wants in composition. He has to go through ready-made templates.
  • He thinks he should be able to continue his projects on his tablet or desktop.

Problems

  • Desktop applications are too complex to adapt mobile.

    • Video editing programs like iMovie, Premier Pro are too complex to create a mobile version. However, mobile applications on the market are too simple and doesn’t meet the needs of user. So I'm actually going to create a mobile application between these two structure.
  • There is no free application that also can meet the needs of user.

    • Providing all the features that user needs for only limited project count seems fair enough
  • There is no useful solution for layer system in mobile.

    • Even most applications are timeline based, it is naturally difficult to organize the layers quickly because of the screen size.
  • Options for adding materials in applications on the market are very limited. Users only works with the materials in the device.

    • The user can be given the opportunity to import directly from the URL or from different platforms. In addition, a library can be created in the application for audio files.
  • There are different applications for some tools such as Smart Crop, Stabilizer or Tracking in mobile, but there are no applications that includes all these features.

    • While Instagram even offers the Tracking feature to the user in the process of creating a story, there is no such feature in any application in the market. Although there are several applications that only offer these features, they can all be housed in one application.
  • Custom typefaces are not available on mobile.

    • Users can be offered a library of free typefaces within the application.
  • No color settings

    • There are many applications in the market where users edit color settings for their photos and videos. We can move these features into our app.
  • Long rendering time

    • After all, mobile devices are not built to render by nature. However, it does not seem reasonable to give the user a limit of 5 minutes for his project. Moreover, during the rendering process, you should not leave the application and keep your phone open. Maybe we can solve this with the Cloud method. If this happens in the Cloud when the user wants to render, we actually remove all the limits and the torture of the render. However, this time, users with slow upload speed will wait for the upload process when they want to render the entire project. For this reason, since the user creates the project, if the whole project and the materials are synchronized with the Cloud in the background while the user is working on the project, the upload problem is eliminated and the whole process is done without the need to transfer anything to the Cloud when the project wants to be rendered.
  • No cross-platform editing

    • The cloud solution we use to render also brings a solution to this problem.
  • There is no tool that allows users to create video automatically.

    • This kind of solution can be offered for users who want to create video fast (see https://support.apple.com/en-us/HT207023) The user chooses the materials, the general mood of the video and boom. The raw project file is ready automatically in seconds.

In short, to summarize in three stages; We will build a system that is easy to use, can offer desktop experience on mobile and frees the user. I found as many solutions as I could for the problems I listed. At this stage, we can create a small user flow map and summarize the whole application.

User Flowmap

Designing

After working on user flow map, we are ready for the design process. As you remember, the general need of the persona was an easier and more understandable interface. Therefore, in the wireframing process, we can identify the problems of other applications’ interfaces on the market and work on how we can solve them.

Wireframing

In the wireframing process, I constantly progressed by giving feedback myself. I tried to reach the most correct layout by examining alternative applications for the placement of icons, tools and widgets.

Wireframing

As a result of feedbacks and interviews with the target audience, I have made many redesigns during the wireframing phase. After being sure about I got the most accurate result after all revisions, I started the designing process.

User Interface Design

The main thing to consider while planning the style of interface was that the application should not only seem very advanced, but also it should include advanced features. For this reason, I created a style that is basic and easy on the eyes, allowing the user to focus on his project and I proceeded through this UI style.

Creating a new project

The user is free while creating a project and editing composition settings, but I also provide the ready presets on the project creation screen. Apart from that, I also included the “AI Video Creation” switch while creating the project.

Creating videos automatically

AI Create section allows the user to create videos automatically with two steps like selecting the media and general mood of video. Because of the final video is “Draft Project”, the user can also make changes on it.

Project timeline

I was aware that I would need an icon set while designing the application. Although the text+icon was more efficient than the use of just icons in terms of user experience, the screen size did not allow me to progress in this way. Therefore, I only used icons for basic tools. As for the icon set, I have created an icon set that is not too experimental, minimal and simple, that the user can easily understand.

Iconography

While emphasizing the problems, the user was not free enough while adding material to project in most applications on the market. So I tried to offer different import options as much as I can.

Adding material to project

Editing

Cropping

Text Settings

While planning the application, I decided that the text settings should be more comprehensive and increase the typeface options. For this reason, while providing system fonts and google fonts for free to the user, we also created a paid font library within the application.

Onboarding

Since the application has a simple interface, I decided to create more experimental illustration style.

I thought it would be correct to prepare a UI Kit as it is a comprehensive and continuous development potential project. I created a documented UI Kit with elements on many topics such as typography, colors, icons, material types, top and bottom bars, form elements, sliders, players etc.

UI Kit

Branding

After all this interface design process, I also worked a bit on identity. I created this logo after several trials.

Logo
App Icon

It has become a very simple and practical corporate identity. As a story, the logo is actually a logo derived from the timeline section, which is the basis for video editing.

Logo Animation

In this project, which generally lasts about 9 weeks, I have processed an idea from the beginning to reach a certain structure and complete the design process. This experience was the first time that I created a creative tool. Based on the good and bad sides of many video editing applications on the market, we identified many problems in consultation with various people in the target audience and tried to bring various solutions to these problems. Even it has been worked as a concept now, it is a flexible project that can be applied to different platforms such as tablet and desktop in the future.

© Ertekin Erdin

built with GatsbyJSyeah i write code, isn't it great?