GNARBOX (Part 2): Editing photos and videos

If you haven't already, please read GNARBOX (Part 1) first. Designing how customers edit their photos and videos is one of the most important parts of the app. It’s also the most complicated, and we spent a lot of time refining the design. In this case study we’ll explore the editor in more detail, including designs for both mobile and tablet.

Colour editor

Customers horizontally scroll through options to make changes. We used a horizontal scroll so there’s more room for content to be displayed clearly. Customers can tap on the photo to preview any changes.

Colour editor We used a horizontal scroll so there’s more room for content.

Applying filters and cropping photos

The app also comes with preset filters, for customers who want to quickly make edits without having to spend time manually adjusting colour settings.

You can crop, rotate and set the aspect ratio all from one screen. Incremental rotations are also available using the default iOS rotator.

Applying filters and cropping photos The app comes with preset filters, and you can crop/rotate your photos.

Trimming videos and exporting frames

The slow-mo and video trim elements follow the default iOS style, so they’ll be familiar to customers. To save space, we added overlay elements to the video, where you can set the slow-mo speed.

Customers can export individual video frames as photos right within the app. Perfect for capturing stills if you’re only shooting video.

Trimming videos and exporting frames Trim down your videos and export individual frames as photos.

Tablet editor

The editor is also available for tablet, and each section was redesigned to take full advantage of the larger screen.

Tablet editor Each section was redesigned for tablet, to take full advantage of the larger screen.

More company projects

trivago Deals navigation
Launching a followup usability test
Apr 2019
trivago Privacy settings
Small UI adjustment
Nov 2018
GNARBOX (Part 1)
Managing HD content
Feb 2015 - Dec 2016
Your private car and driver
Apr 2013 - Aug 2014
Richard brought experience, creativity and common sense practicality to the design of our application. Our developers are incredibly pleased with the design and thoroughness of the corresponding documentation, both vital elements of the development cycle. Simply put, Richard helped our team take a sprawling prototype design and feature list into an intuitive product.
Tim Feess Tim Feess
Co-Founder of GNARBOX