Case Study

Adobe | Adobe Photoshop CC

Pushing 3D in Photoshop to the next level

When Adobe, the global leader for creatives, asked me to take the lead role of their flagship product’s newest feature, 3D in Photoshop, it was an honor, and I said yes.

But how do you approach such an immense challenge when working on such a renown product?

By understanding the users needs through conversations, studies and research, and aligning management goals.

By working within or extending the current UX/UI patterns and conventions.

By engaging with engineers to push the boundaries of what can be achieved.

By becoming a domain master, learning the technology and what’s coming next, and planning for the next 5–10 years.

Services:
Product Design
UX & UI Design
Interaction Design
Graphic Design
Strategic Planning
User Research

Tools:
Illustrator
Photoshop
Atom
Cinema 4D
iWork
MindNode

Reading time: 6 minutes.

Content has been modified or recreated to comply with my non-disclosure agreement and does not necessarily reflect the views of Adobe Systems.

Introduction

When Adobe introduced 3D in Photoshop, many users were excited. Very excited. However, the experience was less than friendly. Users were very vocal about their unhappiness of the features, questioning why it was even part of Photoshop.

The task was to understand user frustration with the tools, how they anticipated the tools to work, and what they wanted to do with 3D in Photoshop. I then worked across design, engineering, managment and products teams, to composed a rich and meaningful solution to 3D experience in Photoshop.

The challenge

The challenge of this project was immense — to design a better way to use the latest 3D features in Photoshop. To create a way to ease the use of 3D for the Photoshop users. And to drive adoption of the features in a meaningful way for the users.

The Response

By removing the modal pop-up and fully integrating the 3D features into Photoshop we made the 3D tools a first-class citizen in Photoshop. By providing real-time control and feedback of the workspace we enabled users to have a direct connection with the experience. And by targeting main use cases, such as creating 3D Text, and bring those workflows to the forefront of the UI, we drove adoption and usage — but more importantly, we were satisfying the users needs.

UX Challenge 1

Understanding the users needs, desires, and how they interacted with the features was paramount in developing a plan to address optimizing the 3D experience, as well as preparing for future features and management goals.

UX Challenge 1 Response

A week of customer studies and interviews provided an incredible amount of observations to pull from about the current experience model and how the user was interpreting and interacting with the UI elements. I compiled pain-point/feature matrix to target where the user's experience was breaking down.

I performed several teardown of Photoshop’s tools, the current 3D experience, and correlated what features and tools were overlapping. I mapped out which functional goals needed to be addressed and engaged with product management and engineering to confirm and priorities the goals.

Simplifying the number of tools and to reduce complexity for the user was an immediate goal. By merging tools with the same functions together, and overloading tools already in the Toolbar, I reduced the number of tools by more than 40%. I was able to refactor the modal dialog UI into a single, multi-pane panel. This enabled user to work with their 3D objects and assets in an all new, yet familiar way, delivering on ease of use and user adoption.

Simplify number of Tools and Tool Options by 40%
Real-time interaction and update
groundwork for Properties Panel

UX Challenge 2

For most users, working with 3D objects using a 2D input like a trackpad or mouse can be overly complicated. Understanding the spacial relationship of the object(s) in the scene, the interaction mechanisms of the object and viewpoint (camera), and the perceived users desired goal to make it do what they want is a complicated problem.

How do you use traditional interaction models as well as extend the capability, thereby enhancing the user experience?

UX Challenge 2 Response

Luckily, the traditional models are there to provide a baseline, updating the sizing of the Object Axis Widget was first. The lights were a bit trickier as you need to account for several parameters at once — or as many as you can at once. When designing, I always wanted to create an interaction patterns that could be user for other objects or methods — repeating a pattern increases action perception, reinforces user, and reduces user cognitive load.

On-Canvas Controls provide real-time feedback
Object Cage provides 95% more hit-area
Increased user proficiency by 35%

UX Challenge 3

A particularly interesting challenge was the integration of 3D printing with Photoshop. 3D printing was becoming a tool for creatives and hobbyist alike. But there are several problems that need to be addressed before you can 3D print something.

The goal was to make it easier to go from a virtual model to an actual 3D printed model with as little resistance along the well. This would mean creating a solution that was approachable to users, and be able to leverage partners for online fulfillment, providing a solution for users who do may not have access to a 3D printer.

UX Challenge 3 Response

Working with engineering we created a new virtual view of the 3D printers print volume, as defined by drivers, in the application main view — active when Printing is selected in the Properties panel. We integrated local and third-party partner print services into the Printing properties, as well as material selection, and price estimates for ordering.

We used the same interactive view in the Print dialog, reinforcing the context of purpose, providing the user with additional options such as scaffolding, manifold repair, and final export options.

Provided local and service based 3D printing access to 100% of all Photoshop CC users
Rendered interactive view of final printed object, print options, final price estimates.
Created the 3D Print Utility App to configure and test local 3D Printers

3D Printing with Photoshop CC

In conclusion

In refactoring the 3D experience in Photoshop, we were able to create something special for users that was easily accessible and provided meaningful impact for the product, driving user adoption of the 3D tools and features in Photoshop.

We revolutionized the ease of 3D printing and provided a simple process for going from virtual 3D object to 3D print-ready objects, as well as provided integration to partners to provide printing services, and ways to share 3D content with others.

I was able to champion the implementation of the Properties panel, extending functionality, and allowing it to be used by all the Photoshop tools. This allows users to have a single place to adjust properties and control attributes for 3D objects, shapes, text, gradients, video, and more.

This was an incredibly well received advancement in the UI — and reduced on-boarding time, discovery, and mastering of Photoshop tools. It aligned the UI to the rest of the Adobe Creative Suite’s application, most of which already had Properties panels in their UI.

Working on this project was an incredible opportunity. We had created something meaningful for all users that was easier to use and offered a richer experience.

Return to work

Let's chat

I'm always happy to talk about technology, design, food and more.

Send me an email

Contact Information

Contact

Kevin Bomberry

Burlingame, CA 94010

kevin+contact@bomberry.com