Making it easier to build with Box

While Box is known for its secure file sharing capabilities for enterprise companies, one of the company's larger goals is to help employees collaborate on content and get work done faster, through Box's apps or custom-built content-centric apps.

Overview

In 2015, Box announced Box Platform, which helps developers build apps with Box as a hidden layer for managing, previewing, securing and collaborating on content.

With content at its center, Box is particularly focused on the ability to view and collaborate on all kinds of content in the browser—from 3D models to Word docs to DICOM medical images.

My Role

In 2015, Box acquired Verold, a start-up I worked for in Toronto. We were an 8-person team working on an online editor for creating interactive 3D projects for the web.

Once I joined the Product Design team at Box, I worked as the sole designer on the Box Platform team, which encompassed projects relating to developer experience and content experience.

Below you’ll find an overview of some of the projects I worked on at Box. I would love to chat about the full process for each project with you, so please don’t hesitate to get in touch.

Shortcuts:

Redesigning the Box Developer Console

Overview

Developers use the Developer Console to configure the Box API settings for use in their apps. When Box introduced Box Platform, we ran into a few issues with the existing console:

  • Lack of hierarchy and structure: Over many years, the developer console became a very long form with every possible setting available, quickly becoming difficult to understand and navigate.
  • Out-dated design system: The rest of the Box web app was being updated to a new design system, and the developer console needed to follow suit.
  • Poor onboarding: Once a developer created a new app, there were no clear next steps to start configuring their app.

Previously, the developer console was a one-size-fits-all laundry list of settings and configurations that a developer would have to sort through without any clear hierarchy.

With the redesign, the settings are grouped by functionality and developers are only shown those that are relevant to their app type.

Goals

Through surveys and interviews by our user research team, we found that the biggest pain point for developers was configuring an app, particularly choosing what type of user authentication was appropriate for their use case.

Box developers prioritized functionality (What types of apps can I build? What features can I utilize?) and ease of use (How easy will it be for me to build? How quickly can I get started?) over security, cost and reputation when considering a platform integration, which highlighted the importance of a friction-less app setup.

Overall, our goal was to reduce the time it takes to create and configure an app, thereby increasing the number of developers able to self-onboard and get to what we defined as the ‘a-ha’ moment: making their first API call.

With the redesign, we introduced a left-hand navigation that provides clear access to a developer's apps, reference docs and account settings.

Settings are grouped according to function, with smart defaults and in the order the developer will logically go through when configuring their app.

Streamlining Settings

Since we were working with an existing product, we started with an audit of all the current settings and functionality. Because the code base was very old and most of us working on the project were new to working with the codebase, there was a lot of digging around to see how things worked.

The first step in creating a new app asked developers about their use case, to inform smart defaults provided in the next steps.

A user authentication method is recommended based on the type of app the developer chose in the previous step.

Focusing on App Creation

Knowing that authentication was causing the most friction for developers, we made this a focus for the new app creation flow to make sure developers could configure their application easily.

Since these were new app concepts being introduced, I experimented with many iterations of copy, graphics and layouts in order to make the choice as clear as possible. With feedback from the sales engineering team, along with testing with internal and external developers, we incorporated the terms they used into the short descriptions (above, left).

To get developers to their first API call faster (the ah-ha moment), the final step of creating an app gives them a code snippet with their developer token pre-filled.

Empty states provide more information for functionality that may be optional for their use-case, like integrating an app into Box's web app.

By reaching Beta ahead of schedule, we were able to showcase the new developer console at BoxWorks, which increased platform product awareness:

Through this redesign, we built a foundation that will allow the team to expand with new features without compromising the user experience.

3D Preview

Overview

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 requiring expensive proprietary software—opens up a slew of new sharing and reviewing workflows for these content creators and consumers.

The goal for this project was to integrate a very simplified version of Verold Studio in order for Box users to upload and preview 3D models within Box’s web app.

We started off with the most basic controls to help users configure the correct look and position of the model (rotation, render mode, camera projection).

A few early explorations of potential features: visual version history, multi-view, animation preview and visual render modes.

Beta Learnings

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 were previously sending 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.

We found a number of problems that 3D preview in Box was helping to solve:

  • Consolidated assets: With all files in Box with unlimited storage, 3D assets (which often have many linked files) are no longer lost between different servers and file systems.
  • Reducing email communication: Collaborating in Box reduces a lot of emailing back and forth or project management software that isn’t user-friendly.
  • New audiences: Stakeholders who did not have access to expensive 3D software previously are now able to preview the 3D files instead of 2D images.

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 GA’d on Box, enabling anyone to upload and share 3D files. Try it out below:

Document Annotations

Overview

The Box View API converts Office and PDF documents to easily embeddable HTML5. This API replaced an older service called Crocodoc, another Box acquisition, which had a document annotations feature.

Annotations were a key feature used heavily by educational customers and needed to be brought into this new preview experience. While there were many different types of annotation types previously offered, we found that highlighting, highlighting with a comment and point annotations were most commonly used by far.

When a user highlights a piece of text in a Word doc, PDF or Powerpoint, a contextual menu appears. Annotations are numbered to help users reference comments in the document.

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 a 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.

Box Annotations were released for developers to use through the Box View API. The Box Web app team is currently working on incorporating annotations into file previews.