Adobe Scan - Mobile App for iOS and Android
Role: Senior Experience Design Lead
Details: Adobe Scan is a mobile app for iOS and Android, expanded from a feature in Adobe Acrobat. The development cycle for version 1.0, from concept to release, was only 5 months. As the Lead Designer, I worked very closely with Engineering, Product Management, and one other designer to design, prototype, and test features in a very short time-frame. Our effort was well-received, and Scan had over one million downloads in its first month, and over 20 million to date, with a 4.8 rating on the App Store.
Description: The free app turns any mobile device into a portable scanner, allowing users to simply hold their phone over a receipt, business card, whiteboard, or other document, and Scan automatically captures, cleans, crops, and saves it as a PDF. On the design side we needed to convey to users all the automated functionality and power available, while still allowing manual use if desired. We wanted to make the scanning process as simple and efficient as possible.
Adobe Scan is broken down into 3 main sections -- Capture, Review, and the File List -- with some intermediate steps.
Scan 1.0 Capture screen on iOS. A user just holds their phone over a document, and Scan finds the edges and snaps the photo automatically. It's easy to scan a single or multiple pages.
Scan 1.0 Review screen on iOS. Users can review their scans, adjust the crop, reorder pages, enhance the color, or delete pages, then tap Save PDF when they are ready.
Scan 1.0 Recent/File List screen. After a scan is saved, the PDF is created and uploaded to Adobe Document Cloud, then the text is recognized using the OCR process. Coachmarks were used throughout the app to guide users to their next steps.
There are at least 4 designs for each screen - iPhone, iPad, Android phone, and Android tablet. The overall UI is very similar, with differences where needed for the OS and device hardware.
Scan is developed by an agile team, allowing for frequent updates. After 1.0 was released, we were able to focus on adding some cut features and on improvements based on user feedback and testing. Lots of improvements were behind the scenes in the auto-capture, cleaning, and cropping process or the OCR. We also had some UI changes. We realized that while our coachmarks were helpful, the actual scanning process was fast enough that some were being ignored or missed altogether. We decided to cut out a few unnecessary coachmarks. We also decided to improve the discoverability of manual capture for users who wanted to snap and crop the photo themselves.
Changes to the top bar to better expose Auto-Capture / Manual Capture.
In 2018 we added some advanced features. Users could always import photos from their devices, but by utilizing Adobe Sensei, Scan could find just the photos of documents and import those. Scan was also able to do more with saved PDFs. If a PDF contained a business card, Scan could detect this and add the information (name, email, phone) to the device Contacts app.
After scanning a business card, Scan can add the card info to the device Contacts. Sometimes corrections are necessary, so we added some suggested replacements based on the recognized text to make it easier. A coachmark helps guide the user to the Save Contact button the first time they scan a business card.
To help users find some of the new features, cards were added with helpful hints and calls-to-action to try out importing photos and the document detection.
New features have also been added to help with finding and organizing scans. A Search feature can be accessed from the top of the All Scans list. Scans can also be sorted by name or date, and viewed as a list or grid. And finally multi-select was added to allow sharing or deleting multiple files at once.
Scan has recently started taking advantage of Notifications to alert users to new features and functionality they may not be aware of.
If a user scans a business card but doesn't add it to their Contacts, we let them know. We also use notifications to highlight some features users may not be aware of.
The Scan team is constantly improving the ability to find document edges and auto-crop photos. This functionality has sometimes been confusing to users though, especially when it isn't quite right. User feedback showed that some thought the rest of the image was gone when scan was cropping. We added two dialogs to help with this. One is a coachmark, shown only once, when we're pretty sure the cropping was accurate. The second appears if we think we may not have gotten the cropping exactly right, and it allows a user to adjust the cropping.
Two screens to help users understand the auto-cropping feature.
