Adobe Acrobat

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

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

I started by looking at some design inspiration and the overall framework and tried to unify 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.

Component sheet

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

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.

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.

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.