Box is a content management platform with a focus on enterprise customers (from GE to Pixar) that require a host of secure file sharing capabilities. With content at the center, Box is continuously simplifying how companies create, edit and review documents on any device.
A key part of Box is being able to preview content in the browser, collaborate on it with colleagues, and share it with others—without having to save it locally. Box aims to keep those files off the harddrive by supporting more and more document types that can be previewed.
This past year, there has been a big push to expand the types of files that Box can preview in the browser, including HD video, DICOM images and 3D files—which is how I came to work at Box.
In 2015, Box acquired the start-up I worked for called Verold—an 8 person team based in Toronto, working on an online editor for creating interactive 3D projects for the web.
As the designer at Verold, I joined the Product Design team at Box. Since 3D fell under the 'Content Experience' team, I took on a number of other projects, including HD video, document annotations and watermarking.
3D preview in Box is a big deal for those that work with these files everyday—historically, 3D renders are shared with clients or colleagues as still images or videos, losing the file's inherent interactivity. Being able to preview and interact with a 3D model in the browser— without needing expensive proprietary software—opens up a slew of new sharing and reviewing workflows for these content creators and consumers.
Design a seamless user experience for uploading and previewing 3D models. Ensure content uploaders are happy with the look and position of their content in preview.
The first order of business for the team, before getting to more advanced functionality, was to integrate the most important piece—the processing and rendering of multiple 3D model formats. While Verold Studio was a very feature-rich browser-based editor, our MVP in Box included displaying textures and materials and adding 3D-specific controls to preview the file. Every previewable file in Box has a set of controls specific to that file format—documents, for example, require zoom in/out, pagination, print and full screen.
With the 3D preview controls, we began with:
These settings are then saved to metadata by the content owner, to be sure the model appears as intended when sharing with clients or colleagues.
During the 3D preview Beta, we onboarded 40+ customers to start previewing their 3D files. A couple of weeks in, we ran a user study to dig deeper into some really interesting use cases ranging from 3D product displays to orthodontic scans. We found that 50% of users currently send 2D images instead of 3D files as a workaround, and that 90% of beta users found that Box's 3D preview made sharing and viewing 3D files easier than before.
There were a number of pain points that became clear with 3D workflows:
In conjunction with Box functionality such as Box Sync for asset syncing, email notifications when files are updated, granular sharing permissions, file comments, version history to revert to prior renderings and large file uploads, 3D preview becomes part of a much larger streamlined workflow.
3D Preview is still in Beta and will be GA'ing in September. We've also added support for (2D & 3D) 360-degree photos and videos, as well as Oculus and Cardboard support—definitely bound to turn some heads in the office!
Back in 2013, Box acquired a technology called Crocodoc, which converts Office documents and PDFs to HTML5 so that they can be viewed and embedded in a web or mobile app without being downloaded.
When Crocodoc was acquired, it enabled developers to preview files stored in Box in their app using what was called Box View API—but in order to manage and share files in an app, developers had to use the separate Box Content API. In an effort to unify the APIs, a new endpoint in the Content API was added to bring the same preview experience available in the Box webapp to developers' apps. In addition, a new document rendering technology was being implemented to replace Crocodoc's that would bring better fidelity to documents.
Annotations were a key feature in Crocodoc—used heavily by educational customers—and needed to be brought into the new Preview experience to reach feature parity. Looking at the usage data, we found that the most commonly used annotation types, by far, were highlight, highlight with a comment and point annotation.
The lawyer highlighting sections of a contract for clients to review or the teacher highlighting passages for students to read, can now do so through with the unified Box API. PDFs, Word docs and Powerpoint docs can now be highlighted. If the highlighted text needs to be discussed, users can also add a comment to the highlight. This adds a marker to the highlighting, indicating the presence of a comment and a number to reference.
Point Annotations can be added to any part of a document or image, displaying the username, photo, comment and date and time of the comment.
We went through a number of iterations and user testing to find the right balance between a point comment and a highlighted text comment. An initial version with circular annotation proved confusing for users, as it looked like it was floating—it wasn't clear that it was an annotation and linked to a comment. We changed this to a pin-shaped annotation with a circle below to anchor it to the location where the comment is placed.
Annotations are numbered to help users reference other comments in the document, as well as to be referenced from a separate list of comments (ie, a toggle-able side rail, a downloadable PDF, etc).
Annotations have just gone into beta for developers to use in their apps.
With a lot of customers in the media & entertainment space, it was particularly important for Box to upgrade the video player to support HD (1080p) video (and it's 2016).
The previous video controls in Box were limited and bulky—the controls obscured the video and the scubber was small and imprecise.
We refreshed the player with more subtle hover controls that wouldn't obscure video content, extended the scrubber to the width of the screen and added additional settings like quality level and video speed.
The HD video player (available via the Content API, in Beta for Box web app) will also support 360 videos and 3D 360 videos!
Security conscious users watermark documents to deter information leakage—think a film studio sharing a top secret script with directors and actors. This can be a very manual process—individually adding and exporting the file for each recipient with their name and date watermarked.
Watermarking documents in Box greatly simplifies this process—with the click of a button on a single file or whole folder of files, watermarking can be enabled. The file recipient's email, along with the date and time, is watermarked when previewed and downloaded. While it doesn't prevent the document getting into the wrong hands, the watermark asserts ownership and reminds the recipient that they are responsible for their copy of the file. So if that script gets out, the studio knows exactly who's to blame.
When designing the watermark, we had to strike a balance between size and visbility of the watermark without obscuring the content.
A quick peak at the projects I'm working on at Box—feel free to reach out for more details!