SCHOOL PROJECT

BRNDING

iOS MOBILE

MOVIS

Design a video/motion editing app that can create motion posters and visual effects in instant with or without a design background

SUMMARY

Overview

We are looking to develop an app to produce a motion poster that is time-convenience, easy to use, and user-friendly. As opposed to Adobe apps, which is sophisticated and requires a long time to learn, our app will simplify the such complex system and provide a much easier route for non-professional designers/ common users. This app will allow the user to design their own motion poster with various effects that enhance visual attraction.

Role

UI designer
UX researcher
Illustrator

Time

Jan 2021 -
Feb 2021

Tools

Adobe XD
Procreate
Miro

Team

Jazzmynn Hong
(UX Designer)

Background

With the advent of videos in technology in the present day, the need for motion pictures grew in size. A motion poster communicates better information than a static one. We, as designers, sometimes also produce motion graphics for projects. For non-designers, they produce posters for events. However, the learning curves for the existing software, such as Adobe after effects or iMovie, take very long to learn.

Problem

In essence, we are trying to create a lightweight application that is easy to use for non-designers and designers. The general goal here is to design a non-designer friendly, efficient, and easy-to-use motion graphic app.

Solution

FEATURE #1

Preset lists and templates

○ Have multiple preset effects list that the users can choose from to adjust graphics

○ Simple and quick creation process

FEATURE #2

Explore nearby events

○ Easier for the customers to share their artworks and networking with others

○ “will go” option gave the customers stats

FEATURE #3

Purchase and sell templates

○ Sell your templates to gain side income

○ Solution for designers who want to practice while gaining profits

UX VISION

We aim to develop a lightweight application that creates motion graphics and visual effects for people with or without a design background.

RESEARCH

Qualitative and quantitative data

Initial research

Having the inspiration, we first set out and did some initial research.

1. Observation:
Observed the people using those motion software.
2. Personal experience: had a personal experience using the software (Adobe AE, Pr).
3. Interview: had an interview with a student currently learning AE in class to understand our user and their pain-points.

Mass Survey

Survey

The next step is to verify if the problem we have discovered is a a real needs for many users. We have received in total of 63 responses. We have asked the users on their opinions about learning motion graphics. Among the responses, 78% of people rated current motion software as medium/ hard to learn. Over 50% of respondents think the current motion software is has complex system.

Who are the users?

Mass Survey

Story boards

An observation!

Next, I have illustrated the storyboard that we are trying to let users achieve. Here, I have illustrated both the designer and the non-designer storyboards.

Market matrix

Then, I have first made a matrix diagram based on two different standards: amount of functions, and either graphic or video.We have included other motion graphic softwares as a basic standards for our matrix analysis. To sum up, we want it to have mild amount of editing features.

DESIGN OPPORTUNITY

What if, we reduce the amount of custom works on the app?

Ideation

Thinking about the features

Brainstorming

Based on the research results we got and the APP analysis I did, we started to brainstorm some features that the users might need in the APP. To simplify the motion graphic process, we decided to go with templates and presets effect.

Loop: Main Design Features

As a designer, I always wanted to find the simplest way to approach to solve the issue. In the end, what I have suggested to the team is what I called a loop system, and it summarizes the flow and main features of the app:

Structure

Card sorting

After decent amount of brainstorming, we have asked users to group the features into categories to better set up our information architecture. Some of the feedback they gave us include grouping all templates with free temples under one category. In addition, one of the user suggested there can be a social networking aspect to the app.

Information architecture

Based on the card sorting result and some of the additional comments made by users, we have set up this information architecture for the app. The main features of the app include

:1. Studio: create motion graphics with simple tools
2. Library: select templates for easy designs
3. Events: explore special events and friends in the community
4. Markets: purchase and sell projects for side income

User flow

To further define users’ actions, I created user flows for the two different stakeholder to gain a better understanding of how different users will use it.

DESIGN

Wireframing

Visualize ideas

To further define users’ actions, we created a simple, hand drawn wireframe that includes all the four main features.

Visuals

Logo

I also made this logo. Here, we are trying to capture the sense of speed, and fast like the picture shown. So the M, which has lines extended out, makes it looks fast and speedy.

Colors and fonts

We decided to minimize the colors into neon green, black and white to fit the taste of the younger generation! The colors also wish to bring out the feeling of being concise, and efficient. hence, if added too many colors, it would be distracting for the customers.

Illustrations

Then followings are the illustrations made for landing pages. All of which done by me.

Final design

REFLECTIONS

Key takeaways

Prepare plan B

My teammate was responsible for doing the prototype, while I will be finalizing the presentation. However, 5 hours before the deadline she told me she can’t finish the prototype. Though the time given to me is limited and I did feel the pressure, I managed to deliver the final presentation with an interactive prototype that works smoothly on time. From the experience, I realized it is always important to prepare time in case of emergency, and when you did encounter them, prioritize the ones that need to solve first.