acrobat37.jpg

Adobe Acrobat

acrobat36.jpg
 

Adobe Acrobat is the industry standard for digital documents on desktop. Our team’s challenge was to make Acrobat simpler, lighter, more modern, and more inviting.

brief

To update the visual language for Acrobat 12, adopting flat and minimalist design patterns and incorporating new initiatives and features for this release.

process

My focus was visual design for the desktop app. Current UI was too heavy and a bit too complicated. I tried to eliminate unnecessary elements. So users can focus more on document not the UI. Also improving user experience by removing frustrations in user journey and adding delightful microinteractions. Then I worked closely with engineers to make sure all the design elements were implemented correctly.

rolE

Visual Design Lead

 
acrobat40.jpg
 

DEFINING THE PROBLEM

The vision for this project was to allow people to easilly access, consume and share their documents. We wanted the UI to be less distracting and help users focus more on content not the UI.

 

BEGINNING THE DESIGN PROCESS

We started by whiteboarding what can we make it better, looking at the overall framework and unified main landing pages. Then I prioritized all the tools by the most frequently used and group them by function on the main toolbar, second toolbar and HUD (floating bar at the bottom). Next, I explored different visual design directions to see how the color, typography, and layout could work together. Finally, I created specs and worked closely with engineers to make sure the design was implemented correctly.

 
acrobat30.jpg
acrobat31.jpg
acrobat32.jpg
acrobat33.jpg
acrobat34.jpg
 
 

Component sheet

This component sheet I created was the single source of truth that all the designers and engineers on the team used.

 
 
acrobat28.jpg
 

USABILITY TESTING, INTERATING, & SHIPPING

When the design was ready, I worked with the usability team again to spot any issues and make sure all the colors used met standards.

At this stage, we also released beta version for internal testing inside Adobe. Based on feedback, I iterated the product further, and then worked with developers to ship version 1 in April 2015.

 

DOCUMENT VIEW

The most frequently visited 'view' of Acrobat, the Document View, needed to be simplified as much as possible. While hiding a significant portion of power tools, we still provide a way for the same power users to customize and add shortcuts to their favorite tools either on the top toolbar or in the customizable right sidebar. Additionally, with Acrobat DC we re-introduced after many years the ability to have multiple tabs open in the same window which was a delight to many of our pro users.

 
acrobat15.jpg
acrobat28.jpg
acrobat14.jpg
 
 

Dark UI

A few months after the first release, we created Dark UI intentionally for those who want to reduce eye strain at night. Many dark mode lovers use their devices at night and this would be extremely useful. For those users, it can be a lifesaver over time. We also believe it can improved readability of text, better contrast and can save small amounts of electric. The higher contrast of text makes it easier to read documents and menu items. Using dark colors instead of white reduces glare, which in turn reduces eye fatigue.

 
 
acrobat16.jpg
 
 

the process

I wanted the Dark UI to be easy for engineers to implement, so I grouped all the elements into 9 categories: gray text, white text, icon color, background color first toolbar, background color second toolbar, background color underneath document, 1px divider line, hyperlink text color, and new blue color. Then I picked a few key screens for mockups and reversed all the colors to Dark UI based on the PhotoShop Dark Mode. I also worked closely with the Spectrum team to ensure consistency with other Adobe apps. I then created a detailed spec for all the components (different stages of buttons, tabs, text fields, checkboxes, and radio buttons) for engineers.

 
 
acrobat17.jpg
acrobat21.jpg
acrobat12.jpg
acrobat10.jpg
acrobat21.jpg
acrobat19.jpg
acrobat27.jpg