Jaunt Desktop App: Camera Controller and Media Manager

Capture and manage media in a simply and reliable way

Brief


Timeline
Nov. 2016 - May. 2017
Team
Engineering team, PM
Role
Lead UX/UI Designer
Targeted Users
Indie movie producers and creators
Design Scope
Full design lifecycle (UXR, UX/UI) Experience map Living style guide
Outcome
Well received app releases. Timelapse and live feed are top rated features by Jaunt camera users

Capture recordings


Jaunt flagship product Jaunt One camera is paired with the camera controller app to access a wide variety of features. While connecting to the camera, users can adjust the camera exposure, capture preview and even get real time views. Jaunt media manager is the gateway tool to transfer recordings between VR camera, cloud services and user local data. It organizes 24 camera footage into formats ready for ingestion, to upload and download from the cloud.

Camera controller app pain points

Overloaded with lots of features and tangled statuses, the users had a hard time understanding all the modes and controls. In addition, the camera has 24 modules and each one may need manual adjustment. How to design the viewport layout to support both global and individual camera adjustments?

Media manager app pain points

VR video data is very large at 50+ GB level sheer size with 4+ formats of stitched results. Long download time and internet connection stability are also challenging to manage the media in a secure and stable way.

Design challenge


How to redesign the desktop app to provide a stable, fluid and transparent experience?

Experience goals

Alleviate the user burden: simplify configuration flow and automate unnecessary steps

Transparent system status: monitor changes, visualize and update the progresses up-front

Balance advanced settings with simplicity to support diverse user needs

Fluid and scalable UI to support newly added features and long term vision

Solution framework


Media manager

Download media workflow and UI

Cloud-local sync model

MVP with a focus on download feature

Although synchronization model between local and cloud is desirable, it poses huge technical challenges for the team. Given the limited engineering resources, we re-define the project scope to focus on batch download. After talking to more editors and data wranglers, we learnt that users usually gather the same type of media for each session. Hence the design introduces the default setup to cater to most frequent use cases, while the user is able to customize settings to their occasional needs.

Camera controller

Experience goals

How to provide a more fluid and scalable UI with new added features
- to adopt a similar mental model to DSLR camera operation: switch between commands and actions, instead of showing all buttons and UI at once, prioritize and group functions.

How to make widgets more accessible and efficient
- to lower the learning bar to understand the UI, focus on user tasks to simplify the flow. Learn from mobile camera apps, simple WYSIWYG model while still powerful with advanced settings

IA Structure

Modes: Record or Time-lapse, Capture Preview and Video Feed

Settings: The camera has Setting Profile, difference between auto and manual modes

Viewport: View of All / Individual Camera Modules: naive stitch, list, side by side

Design Iterations

Iteration 1:

My first iteration is to design the button group, which helps prioritize functions. But the introduction of modes is making design more complicated. The coupling relationship makes users more confused with the view and action dependency. Also the location of the customization view is not scalable, and taking up the valuable screen space.
Iteration 2:

For the next iteration, I tried to have the left sidebar showing the default parameters while expanding to edit: powerful but also too complicated, not mapping to camera controller mental model. Live feed as a separate way to streaming views, is designed with more visual emphasis to encourage user interaction to try it out.
Iteration 3:

While research and keep trying out different layout, it's critical to remember the base principle of balancing simplicity with being powerful. Then I introduce the toggle control of camera settings to allow for hide / show components.

Outcome


When I shared the proposal via InVision prototype with creators remotely, they are very excited about the upcoming timelapse feature. I worked tightly with the app engineer to prepare all the assets and UI specs, and got the app released in May 2017. It was well received among creators using Jaunt camera.

Takeaway


Fast and slow: During the first week of joining Jaunt, I started designing the download module right away. However, in the following months, I learnt more about how users actually interacted with the Media Manager, only to discover the initial download dialog is not addressing the key pain points. Then I started iteration of the download dialog based on user input, to craft each interaction to support the user tasks better. The easiest and most accessible right at hand solution always turned out not a best solution to solve the problem. Because it might overlook the real priority and edge cases, and where UX matters most. It has to be thought through with all use cases, and tested against all possible routes to ensure a successful design solution.

Camera is very prevalent in our daily life. But the adjustable controls vary a lot between mobile and professional cameras. Optimizing the UI layout alone doesn’t help address the workflow problem. Also with so much camera configuration work involved, how to uncover the user mental model is critical.