MOBILE PHOTOGRAPHY APP
Filmborn introduces a new generation to the beauty and timelessness of esteemed film stocks by offering a true-to-film experience, preserving analog films' look for the digital future of photography.
PROJECT ROLES
PRODUCT DESIGNER
ART DIRECTOR
PROJECT MANAGER
Publisher: Mastin Labs, Inc.
Category: Photo & Video
Release: Nov 03, 2016 - Jan 2020
Downloads: Half a million.
Feature App: 2x US market, 1x Asian market
Work on Filmborn began with an in-depth discussion with Mastin Labs' CEO about his short and long-term aspirations for the camera and photo editing app. What were the problems with existing apps that Filmborn would solve, and what new features would the app bring to the Photo & Video category?
CAMERA & PHOTO EDITING APPS
Existing Problems
Throughout the Development phase, we extensively used competitor apps to identify what they did well and their common mistakes. To fully understand why certain things were bad experiences in other apps, I broke down and analyzed the user experience of competitors' fundamental interactions. This research and testing led to decisions about our approach to solving the problems we had identified.
- Overloaded with tools and filters.
- Photos required editing to look good.
- Filters are trendy and dated.
- No quick access back to the camera.
- Edits are destructive/baked-in.
- Internal photo libraries that require exporting.
- Lack of features to capture better images.
BETTER PHOTOS, LESS TIME.
To put our mission statement into the context of a user story we could connect with, I wrote an Experience Treatment, a document that helps guide the initial development stages. This production phase involved extensive R&D to reproduce the companies' successful film emulation presets for Adobe Lightroom within the iOS platform's capabilities.
Using the Experience Treatment and research from the development phase, I wrote the first draft of an Interaction Script, describing how every aspect of Filmborn will be used and experienced. Just like a film script, this method reveals strengths and weaknesses in the initial concept early on. Once we had a development studio contracted, their input helped rework and refine the IX script.
Wireframes, flow charts, storyboards, visual development, and mock-ups are produced at this stage.
FLOW STORYBOARD
Camera: In-app Purchase/Restore
INTERACTION STORYBOARD
Camera: Image Capture
This short storyboard represents an interaction concept for image capture. A newly captured image rapidly slides down into a nesting position behind the camera tab bar, offering visual confirmation of successful image capture and a subtle reference to advancing a film roll in an analog camera.
VISUAL DEVELOPMENT
Camera and Configuration Panel
Presented below is a series of concepts showing the design exploration of icons and layout for the camera interface as they are reworked and simplified in the emerging visual brand.
Icons and layout of the primary camera tools were finalized for the production phase after about ten design variations. By keeping all controls at the bottom of the camera, Filmborn was easier to use than other apps that placed certain features at the top left and right corners of the screen, areas difficult to reach comfortably.
The configuration panel needs to accommodate a large number of options within a single container. To provide a better user experience, selecting a viewfinder, lens, and film preset needed to be accomplished with little to no scrolling. This requirement led to a more simplified look and layout we began production with.
At this stage in the production process, the approved Interaction Script™ guided the iterative design refinement and coding during the app's production, ensuring the same information and understanding directs all work. The development studio coding Filmborn used a dedicated process for tracking work, but this production model managed and drove the entire project.
The following samples represent the debut build; Filmborn 1.0.
FILMBORN: V1.0
Camera
CAMERA
We achieved the experience of "Better photos, less time." through a trio of features, just some of the standout functions of Filmborn's custom-built camera module.
The first and second features are the two most critical actions necessary to take better photos; setting the proper exposure and white balance. No camera app available offered these settings together in a cohesive interaction, most only offering the ability to adjust exposure. Filmborn introduced an innovation in mobile photography by combining exposure and white balance adjustments into a pair of simple, intuitive gestures, conceived by the CEO and founder of Mastin Labs, Kirk Mastin.
Adjusting exposure is achieved by sliding your thumb up/down within the camera's image area (viewfinder), an established interaction with many apps; Filmborn innovated by adding a left/right gesture of the thumb within the viewfinder to set the correct white balance. These simple but critical settings are effortless to use, helping the user take better photos and reducing, often eliminating the need for later editing.
The third central feature of the camera, called 'Film Live-Preview,' indicated by the film strip/eye icon in the tab bar, completed the trifecta of components that enables users to take better photos in less time. Activating this function applies your chosen digital film preset (filter) in real-time, providing the vital preview of a selected presets' colors and tone, critical visual cues necessary for setting proper exposure, and white balance.
CAMERA CONFIGURATION
The heart of this camera. With the Configuration Panel open, you can select a combination of the viewfinder (image aspect ratio), simulated lens, and film preset (filter) to use when shooting photos.
Another original feature to debut with Filmborn is Custom Camera Kits. Save up to three different configurations of the camera's viewfinder, lens, and preset for quick access later. This unique feature enables the user to switch between cameras for specific uses, like portrait, travel, or street photography.
FILMBORN: V 1.0
Library and Loupe
LIBRARY
The iPhone's native photo libraries are utilized in the app, saving every photo you take with Filmborn directly to the camera roll. This approach eliminated a common point of frustration experienced with many photo apps, where images taken with a camera app exist only within that app until exported.
Included in the Library is a feature that solved another common pain point with many photo apps; Batch Editing. This functionality is a staple of professional photo editing software, allowing edits from one photo to be quickly applied to one or more images.
Throughout Filmborn, we provided easy and immediate access back to the camera. This feature resolved the often awkward and slow process of navigating back to the camera, experienced with other apps. With a single tap, you are instantly back to the camera, ready to shoot.
LOUPE
The Loupe's four functions are centered at the bottom of the screen, maintaining the principles of efficiency and usability in Filmborn's design. Viewing an isolated photo up-close in the Loupe, the user can like, begin editing, share, or delete the image.
Just as within the Library, the Loupe provides the same one-tap path back to the camera.
FILMBORN: V 1.0
Darkroom
Three Darkroom panels provide a cohesive editing experience, offering efficient and consistent edits in less time. We improved the mobile photo editing experience by eliminating the need to save individual changes to a photo and making edits non-destructive.
FILM PANEL
Most photo editing apps offer dozens of filters and use tiny thumbnails to show the effects each will have on your photo; those previews are too small to be effective in making a decision, requiring you to tap it anyway to see what it looks like. If you have to tap a filter anyway, there is little value in using photo thumbnails that make the interface visually heavy.
DEVELOP PANEL
We simplified one of the biggest pain-points of other photo apps, editing tools. Should you need to post-process a photo in Filmborn, only essentials are provided. The minimal editing tools are thoughtfully chosen to meet professional photographers' needs and the average iPhone user.
ALTER PANEL
Meaningful improvements were made to these common tools for finessing a photo's composition. To minimize the number of tools on screen, I nested secondary functions into each aspect ratio. Once a selection is made, the active red icon changes to its second function; tapping it switches that aspect ratio between portrait and landscape orientation. Additional tools in this panel also had secondary functions, further minimizing the icons and tools on screen.
FILMBORN: V 1.0
Manual & Education
APP MANUAL
Like traditional cameras, Filmborn comes with a comprehensive user manual that provides succinct overviews of every feature. Filmborn is easy to use, and the core experience is simple to achieve; the manual serves to help users get even more out of the app and better understand the intuitive tools throughout the app.
ONE-SHEET
Beyond offering better photos in less time, Filmborn strives to teach people how to shoot better photos and learn to shoot film. In support of this mission, each preset in the app includes an informative one-sheet offering characteristic and best-use guidance for each preset, background on the photographic film each preset emulates, and steps for shooting real film.
After the extensive work designing, coding, and testing Filmborn during the production phase, post-production was used to add motion to the interface; finalize in-app images and video content; perform last-minute tailoring of the UI and code; build a website, and produce marketing content.
MOTION DESIGN
Camera Interface
Art Direction: Chad Syme
UI Animation: Issara Willemskomer of UX in Motion
When tapped, the large center triangle fluidly inverts it's self to accent the configuration panel's opening.
The small outlined triangle button to the left of the shutter release fluidly inverts when tapped, hiding/revealing the camera tools tab bar.
A swipe gesture animation with a Z-axis scale down and push-in is used to transition between camera tools and custom camera kit buttons.
I met with the Director of Marketing as she was putting together pre-launch plans for early press and a marketing campaign for Filmborn's debut. In this phase, my roles were art director, principal designer, producer, and project manager. I designed and produced all static media and some videos, contributing copywriting for the press kit and digital ads. As a producer and art director, I helped create marketing videos. I Prepared and manage an external testing environment for media outlets and set up an online and App Store presence for Filmborn.
'The emulation here of actual photographic film may be the best around, even compared to stalwarts like Hipstamatic and VSCO.'
– PC Magazine.
'I love the idea of having the features of my film and digital cameras in my phone.'
– TechCrunch.
'This excellent camera app wants to make you love film and become a better photographer.'
- Stuff
ADDITIONAL WORK
