Blink - Real Time Video Editor

Blink is a real-time professional video editor built by Anomalous specifically for the iOS platform. By taking advantage of Apple’s marriage between hardware and software,  every adjustment, filter, and tool works in real-time. No loading screens, no render times, no waiting--ever. Blink brings desktop-level editing tools and power to the palm of your hand.

Blink is my passion project. I am responsible for every visual representation, physical interaction, branding, and marketing material of the app.

Client

Anomalous

Type

Product design

My Role

Designer / FE Dev

Year

2017

Process

The Challenge

Editing videos instantly, meant designing an interface that supports simultaneous and seamless capabilities: easily moving among editing tools and manipulating videos, photos, and audio while also seeing the movie play during edits.

Outcome

User Interface Design

It's no easy task to create a truly seamless experience for product with so much complexity. The process involved immense competitor research, evaluating the best UI layouts and navigation patterns, running task flows to solve for repeated patterns, discovery of what components/information should always be on screen, prototyping, iteration upon iteration, usability testing, and development. Result: The Continuum Interface.

  • Pencil
  • Sketch
  • Xcode
  • Invision
  • After Effects

Continuum

[ kənˈtɪn.ju.əm ]  noun

Something that changes in character gradually or in very slight stages without any clear dividing points.

The Continuum Interface

Blink's Continuum Interface sets a new standard for mobile UI architecture. It enhances the user experience by allowing users to focus on the task at hand without interruptions due to traditional navigation patterns.

Core Editing Loop

Designed to optimize performance

Performance is often overlooked during the design process. Various design choices require tremendous computational power to display. Throughout development of Blink, however, my goal was to minimize the memory cost of the UI. Using Xcode's Activity Monitor provided real time memory feedback while running the app and find costly UI elements such as blur views. In the end, the Continuum Interface is as simple and efficient as possible.

Performance monitoring in Xcode

Clear

Using text over icons removes any guess work or surprises. This allows buttons to clearly communicate their function.

Flexible

The interface expands and contracts to present what you need when you need it without disrupting the editing process.

Forgiving

Forget mistakes. The persistent undo button provides contextual information about the last undoable change as well as the count.

Hand-Crafted
Joystick Recording Mode

Continuously record while switching between front and back cameras in Joystick Mode. Simply press and hold the record button to activate the joystick and slide it up and down to move between cameras without skipping a beat.

Recorder Interface

Dynamic Project Layout

Blink's home screen layout provides a unique twist on the traditional scrolling experience and allows more projects to be displayed on screen at once. As you scroll through your project library, the cells dynamically resize, revealing the full project image as they reach the top of the screen. On an iPhone 7, subtle haptic feedback can be felt as each cell snaps into place.

AirPlay:
Custom Second Screen

Gone are the days of huddling around someone's screen: mirroring your device to an AppleTV while in Blink displays a series of custom designed screens as you move throughout the app. While editing, your project will play live in AppleTV fullscreen making editing with a group simple and fun.

Master of Content

With Blink, having content on your device isn't necessary. Integrations with free third-party libraries Pixabay and FreeSound provide endless content.  If you have an idea, you can easily search, preview and import photos, videos, and sounds using these custom designed controls.

Logo Design

Deciding how to represent Blink as an app icon was a difficult challenge. I went through over 20 different designs.

  • Pencil
  • Illustrator
  • Sketch
Logo evolution

Marketing

Creating the marketing material for Blink was an exciting process-- I was able to set the stage for how Blink would be perceived. The App Store screenshot were created in Sketch. The videos were a fun process involving several programs: QuickTime Player to screen capture sessions with Blink, Terminal to generate text to speech, Audition to correct the pitch and speed of the speech, and After Effects to piece it all together and render the final productions.

  • Sketch
  • After Effects
  • Audition
  • QuickTime Player
  • Terminal
App Store screenshots

Advertising Slogan
Discover the Director in You.

App Store Demo

Developers have 30 seconds to show an app preview on the App Store. Instead of simply cutting between features, I wanted to show a demo of Blink working in real time to showcase a few of the features. Selecting the proper music soundtrack and aligning the beat changes to the length of each video track was no easy feat. Finally, in case users were not sure of the app's purpose, I created a banner at the top to cycle through what you can do with the app.

Competitor Matchup

Before beginning work on Blink, I found our top competitor, VideoShop. When Blink launched, I wanted to create a demonstration of how powerful the app was and the goals we reached by comparing it to the best and most-used video editor on the App Store. The results are still surreal.

Getting Started with Blink

Instead of creating an interactive in-app tutorial, a hypothetical programming nightmare with the endless feature set, I decided to create a video tutorial to ship with the app (now found in the tutorials tab). This allows users to familiarize themselves with the Continuum Interface and have access to the tutorial when needed.

Advanced Crop

One of the most powerful, but most undiscovered features of Blink is the power of the crop/ken burns tool. Because our crop tool behaves much differently and gives the user unlimited freedom, I decided to create a tutorial to show how it works and demonstrate three ideas of when and how to use crop.

Facebook Ad Campaign

Marketing Blink was a challenge and took a great deal of research. As a free app, we are paying out of pocket to market Blink. We started with Apple's search ads, and eventually created a Facebook campaign. The goal has been to choose the most effective material and copy to grab attention and inspire curiosity.

User Flow

Early explorations

Other work

Want to create something awesome? Drop me an email.

→ milesdavidlee@icloud.com