Adobe Acrobat DC
Adobe Systems, Inc.
User Experience Designer
June 14 - March 15
Adobe Acrobat is the industry standard for digital documents on desktop. Our teams challenge was to bring it mobile.
With a rapidly growing population perpetually on the go and working across multiple devices, the Adobe Acrobat team knew it was the perfect time to create a cloud-connected ecosystem of products and services that worked seamlessly, whenever and wherever.
Each designer focused on a different part of the app (product areas). My focus was on document editing, organizing pages, signing, & scanning documents. The design process started with research, moved to interaction design, visual design, prototyping, usability testing, iteration, and then production.
The app was released in to the app store on April 2015. It was covered by all the major tech outlets and had generally favorable reviews.
Defining the Problem & Research
The overarching vision for this project was to allow people to access, edit, and share their documents, everywhere and anywhere. The idea is that documents should not just be accessible on your desk, but when you're on the train, when you're traveling; your documents are with you everywhere, digitally.
We found that 61% of people would switch their job if they could reduce their paper-work & administrative tasks. We knew this was a huge pain point for people and strived to design something better.
Many people use paper because it is something they can touch, and having a desktop-only experience didn't allow for that sort of interaction. We looked at the touch interfaces, and tried to make it function like paper.
Many people use paper because it is something they can touch, and having a desktop-only experience didn't allow for that sort of interaction. We looked at the touch interfaces, and tried to make it function like paper. We also strove to have a consistent experience & tool set across all touch-points (desktop, iOS, Android, web)
In a meeting with Jamie Myrold, director of design. Source: Adobe
Beginning the Design Process
Since this was a massive project, each designer was responsible for different product areas and platforms. I was on the mobile team and particularly focused on editing PDF's, scanning documents, and page manipulation. I also contributed to the signing & commenting experiences, and worked closely with the lead designers on the overarching vision for mobile platforms.
I started with research of the various product areas: what were customers pain points, how did they utilize our existing suite of products on desktop, and what were scenarios where a mobile version of Acrobat would be neccesary? At this point I dug in to stakeholder interviews (who had a strong understanding of users), existing qualititative research, and a competitive analysis of mobile apps that solved similar needs. It was also essential for me to understand the business goals of the project.
I then proceeded to sketch user flows, interactions, and a basic interface.
Very early-stage wireframes
Slightly higher fidelity wireframes for "organize pages" sections
The process began on a whiteboard, moved to pencil sketches, and eventually made their way to digital wireframes. These wireframes were meant to 1) chart a clear user flow through the app areas, 2) make early interface design decisions, 3) share with stakeholders.
This part of the process was perhaps the longest, given that there was plenty of iteration and changes based on stakeholder meetings. I often sat with developers, designers, and PM's, exploring many possible outcomes, flows, and often debated the merit of having certain features or not.
Once the overall wireframes were finalized with the team, I created a few prototypes XCode to iron out interaction details. This allowed me to fine tune the details of the apps; and to experiment with things such as gesture-based rotation and movement. With touch and mobile, it is all about how the app feels, and static mocks and wireframes cannot always express these qualities of an app.
Since I was working in Swift and XCode, I also figured out animation details during this time, such as easing curves and spring elasticity. The idea here was to not only have a consistent visual look, but also a consistent "feel" (animation) across the app.
Prototyping the scanning section of Acrobat in XCode / Swift
At Adobe, there is are distinct teams for branding & icons. Since the Acrobat team was striving for consistency across all apps and platforms, there was little visual design exploration on my part. I was mainly responsible for implementing the established visual specs, making sure that I implemented the branding guidelines correctly in my product areas.
For the visual design hand-off to developers, we began by using the traditional red-line spec sheets. Pixel perfection was especially important since my engineering team was remote, and I couldn't work side by side to ensure that everything looked right. Ultimately, we ended up adding Zeplin to our workflow, which really saved us time and increased the effectiveness of our developer-designer collaboration.
Color pallette specs delivered to engineers
Toolbar for editing pdf's
Usability testing, interating, & shipping
Once we had high-fidelity prototypes, usability testing was led by our lead designer, Shin Kang, to spot any glaring usability issues. We first did in-person usability testing, and then used remote unmoderated sessions with the help of usertesting.com. These sessions were testing the entire app, and I helped shape the questions and testing script for my product areas.
Based on the feedback, we iterated the product further, and then worked with developers to ship version 1 in April of 2015.