Acrobat Mobile Android

CONTEXT

I was the primary designer for Acrobat Mobile on Android from 2014 to 2016. During this time I delivered designs for a number of key releases:

  • Document Cloud (2015)
  • Dropbox Integration (2016)

DOCUMENT CLOUD (2015)

Designed the framework, keeping in mind

  • The new Tool Switcher model for business continuity
  • Incorporating the new Material Design, yet maintaining Adobe’s brand
  • Designing experiences for the new features like Export PDF and Organize Pages
  • Solving existing pain points like helping users find their documents faster

Design: From first exploration to final design

aa__0005_Layer-1aa__0003_Layer-5aa__0004_Layer-6aa__0001_Layer-4aa__0002_Layer-3

From the Play Store

More about this project on Behance

DROPBOX INTEGRATION (2016)

This was part of a partnership with Dropbox.

The user could open a PDF file from Dropbox, work with it in Acrobat and return to Dropbox with changes synced.

Shown below is the workflow where a first time user is going from Dropbox to Acrobat, but there’s another default .pdf app on his/her phone.

dropbox_wf2.png

In the following workflow the user wants to add a second Dropbox account.

dropbox_wf1

An additional file repository tab for Dropbox was included.tablet.png

While this did not pose a challenge on the tablet, fitting all the tabs within the phone screen width was a problem. Specially because of the tab labels, which were in text, and also quite a localization challenge.

Here’s an exploration where I tried using icons as the tab labels, but there was also the issue of icon recognition. So I created a video where this micro-interaction will communicate the names of the icons to the user the first time he arrives on Home.

However we decided to retain text only labels for the tabs for the final version.

My Role: Primary Interaction Designer from April 2014-Dec 2016

Team: Collaborated with Kishore Kumar and the extended Adobe Design team.

Play Store: Acrobat Mobile

Read Next: Contextual Commenting for Acrobat Android

Talk • Three Essential Skills for a Designer

This was a talk given at IXDA Delhi NCR in June 2017.

With the cycle of time, progress and development, industries change. The arrival of desktop publishing took away entire professions in the printing industry – and our industry is again changing. We’re at the cusp of a wave when Machine Learning and Artificial intelligence are nibbling their way into the design industry.

ES_1

Wendell Berry said recently,

“The next great division of the world would be between people who wish to live as creatures, and people who wish to live as machines.”

The contrast he’s making here is people as creatures and people as machines.

How would we describe people as machines? Would that be machines as we know them today, or a superior kind of machine in the future?

Fully logical or fully random processes are already being done by today’s software, and the fuzzy middle between logic and randomness is where Machine Learning and Artificial Intelligence would operate.

So the writing on the wall is pretty clear: with the greater chunk of design work as we know it today outsourced to ML and AI, there’s a great need to create a more significant role for designers…And how can we do that?

We can build on what is uniquely human. We can use those human traits to go up the value chain – influence business and strategy, and guide Artificial Intelligence. And we’re in luck, because some of the essentially human traits are also key skills for Design:

Listening, Empathy and Critical Thinking

Some designers inherently have these skills and use them intuitively. However for others – how we can enhance these and apply them to design better?

Here is a chart showing how we used those skills during the design of the Comment feature in Acrobat Mobile.

ES_2

Some key points to note:

  • During the dev cycle of 1 year, the business goals changed
  • We did a bunch of face to face usability tests in the middle with different prototypes and then a final one with global users to finetune the experience
  • The core team consisted of 1 product manager, 1 developer and 2 designers

 

1. LISTENING

Why is listening important? Because, we have two ears and one mouth…

Listening is different from hearing. To listen you have to have an open mind, without bias.

Design begins with listening.

It’s the first step to understanding your problem area. Take time to listen.

At Adobe, we listen to our users very seriously. We engage in customer forums, on the Stores and during research activities and usability tests. Here are a few comments from the play store.

ES_3Tools Some people are naturally good listeners, but if you need a tool, Active Listening provides a 4 step method of listening:

  1. Listen
  2. Synthesize – what you’re hearing
  3. Generate your point of view
  4. Engage & respond

Over time, these steps will become muscle memory if you do it often enough.

2. EMPATHY

Empathy is a highly under-rated skill. Simon Baron-Cohen said that

“Empathy is like a universal solvent. Any problem immersed in empathy becomes soluble.”

The moment you engage with your users, you develop empathy to the problems they face and you start to identify elements that will help you design. Empathy means to feel and understand.

The role of empathy is to understand human motivators. Why do people take the decisions they do? What makes them take certain steps? This is where we need to work with researchers and ethnographers to really understand the deeper motivations of users.

What is the user’s purpose in annotating a document? Not to play around with the UI…but to review someone else’s work, or to mark up some content in the document for later.

Also through empathy we get an insight into the right problem to solve — for example in Acrobat Mobile, once we understood what is the user journey in marking up a document, it helped us prioritize design: we first re-evaluated the navigation gesture language, redesigned the tools and the gesture language, then introduced the comment list, and then created the contextual commenting experience.

For Acrobat Mobile, the fastest path to empathy was to watch users try out one of our early prototypes. The issues they faced immediately drove the point across to us about the problem we were trying to solve.ES_4Tools How would you use empathy in your design?

While you’re designing something, keep asking yourself, What would a thoughtful person do? (From Designing for the Digital Age by Kim Goodwin)

An empathetic design experience would be like your thoughtful friend, helping you negotiate through the design experience.

If you need a book about using empathy in design, read Well-designed: How to use empathy to create products people love by Jon Kolko. It’s incredibly inspiring and pragmatic at the same time.

Of course there are challenges with empathy: You need to balance between different types of user profiles, and playing the role of the outsider.

3. CRITICAL THINKING

Ellen Lupton said

“Design is Critical Thinking: A way to look at the world and why things work and why they don’t.”

Critical Thinking helps you make sense of listening and empathizing. Not taking anything at face value. For example, it helps you to find patterns in your data, to go from the specific to the universal — for example, in helping you find patterns from your user research. We’ve used this extensively in Acrobat Mobile at different times. Right in the beginning we use critical thinking to make sense of the problem area.

Question the business goals, question the customer feedback, question your assumptions.

ES_6Again when we evaluate design options internally in the team we use Critical Thinking a lot. Critical Thinking is essential as you grow as a designer – to critique your own work, and the work of your peers, and most importantly the designers you would mentor in the future.

Tools The 5 why’s. Essentially you keep asking Why? until you find a good reason.

Below are design explorations for the Comment Toolbar and the Contextual Comment unit. Questions we tried to answer while working on the experience:

  • How could the main toolbar be combined with the properties?
  • How would users get into the tool?
  • Is it a one-time use, or would the tool stay sticky until the user de-selected/exited it?

The ergonomic factors of the touch area and thumb reach while reading and navigating on the phone screen were also considered.

ES_7.png
Comment toolbar explorations

We needed to keep asking these questions until they were satisfactorily answered through the design.

These explorations below show how a user would see a comment in context of the document. Questions for this one:

  • How would a user go sequentially between comments?
  • How would the user change the properties of the annotation or choose another annotation tool?
  • How would the gestures work to navigate and interact with the content?
ES_8
Contextual Comment explorations

THE ROLE OF DESIGNERS

So what would the role of designers be in the future? Like we said above, going up the value chain, you will increasingly need to partner with business to influence strategy.

“When you view design as strategic competency, it goes beyond surface beauty or form and becomes a way of thinking about problems, people, and a way of working through ambiguity to make the world more engaging.”

Jon Kolko

The role of designers today can already be a strategic partner for business; and in the near future the human skills of Listening, Empathy and Critical thinking would be the foundational skills needed to guide AI.

“The role of designers would be to support the social consciousness of the product.”

John Maeda

The social consciousness of a product is going to be even more important in the coming future: We need to be the social consciousness of AI, and create responsible design, now more than ever.

The way we as designers evolve is therefore is to manage the relationship between creator and creation, man and machine. We orchestrate machines to do what they’re best at, and as humans we do the work we’re better at doing. Knowing that difference is the key for the future.

PROJECT DETAILS

  • Team: Astha Kabra (Primary Designer); Soo Basu (Design Lead/Design Manager)
  • Date: 2016-2017
  • Launched Contextual Commenting in May 2017.

Read about Framework design and Dropbox Integration for Acrobat Mobile Android

IMAGE CREDITS

  • Acrobat Android mocks: Astha Kabra
  • Wendell Berry from edibleradio.com