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. We used an iterative research and design process, and then I worked closely with engineers to make sure all the design elements were implemented correctly.

rolE

Visual Design Lead

 
acrobat15.jpg
 

DEFINING THE PROBLEM & RESEARCH

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 their content.

Based on industry trends (Apple iOS7, Microsoft Windows 8, Google Android, etc.), we moved the design away from 3D and skeuomorphic to flat and minimalist. 

 

BEGINNING THE DESIGN PROCESS

We started by looking at the overall framework and deciding see how many types of landing pages we would have. Then I prioritized all the tools by the most frequently used and group them by function on the main 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 for the main landing pages and all components.

 
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 to spot any issues and make sure all the colors used met standards. I also worked closely Adobe’s Spectrum team, who created the visual language for Adobe, to make sure Acrobat’s look and feel matched the other apps in the Adobe family.

Based on feedback, I iterated the product further, and then worked with developers to ship version 1 in April 2015.

 
 
acrobat28.jpg
acrobat14.jpg
 
 

Dark UI

A few months after the first release, we got feedback from users that the product’s “Light UI” was a bit harsh on the eyes when they had to read documents for a long time. So we created the “Dark UI” to fix this issue.

 
 
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 UI theme. I also worked closely with the Spectrum team to ensure consistency with other Adobe apps. I then created a detailed spec for different stages of buttons, tabs, text fields, checkboxes, and radio buttons for engineers to use.

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