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.
To update the visual language for Acrobat 12, adopting flat and minimalist design patterns and incorporating new initiatives and features for this release.
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.
Visual Design Lead
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.
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 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.
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.
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.