Talk • Future Shape of Tomorrow

yogiberraquoteEvery alternate year, Adobe hosts an event for all its engineers across the globe, to catch up on the latest happenings in technology, research, and get inspired. In 2013, I gave this talk titled “The Future Share of Tomorrow”.

GOAL

The goal was to communicate future trends in technology to a primarily technical audience of non-designers. We focused on the trends of

  • Nano-data
  • Vanishing interfaces
  • Digital Nomads
  • Cloud of workflows

PRESENTATION

We created an imaginative and speculative vision to communicate how these trends might apply in the context of Adobe and its business.

We used a character-based narrative – set some time in the near future – about Zoe, a graphic designer and a single parent. She accomplishes the chores of her demanding life with the help of her hybrid object Allie, that she wears as a pendant. Rather than Zoe telling Allie what to do, the story shows how the intelligent assistant Allie already senses what is required and sets commands in motion.

The experience goals were calm technology and beautiful seams between technology touchpoints. We proposed that product experience could be thought of as

“conversations between user and touchpoints along a user journey”

rather than as a set of interactions. Shown below are some of the visuals from the story.

Screenshot 2018-07-02 23.23.45

Screenshot 2018-07-02 23.23.52

Screenshot 2018-07-02 23.38.56

Screenshot 2018-07-02 23.25.56

Screenshot 2018-07-02 23.25.05

Screenshot 2018-07-02 23.26.45

Screenshot 2018-07-02 23.25.36

Screenshot 2018-07-02 23.27.04

Screenshot 2018-07-02 23.27.16

PROJECT DATE: 2012-2013

TEAM: Jaydeep Dutta (Design Manager), Ranganath Krishnamani (Sr Designer), Sunandini Basu (Sr Designer), Mrinalini Sardar (Intern)

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

Patent • Filling Forms with AR/VR

CONTEXT

The problems of filling forms on a touch device is not new to any of us. When we started thinking about it – here are some of the questions we asked ourselves:

  • We looked at the information that needs to be filled in; where is it coming from,
  • How can we improve the input mechanisms, whether from the user, or from a database
  • Existing workarounds that people tend to make

These set of questions became one invention idea – P6195-US Capturing media in context of a document.

forms01.png

At the other end of the spectrum, there were some of the questions:

  1. For some forms the current model of filling forms is closely tied to the printed paper format. What if that did not exist?
  2. And, navigation within the form: is it related to the document structure or the content type?

These two questions became 6195: Capturing media in context of a document.

UNIVERSAL PROBLEM COMMON IN BOTH CASES:

So lots of times we need to insert an image into a document, and most of the time, we break the flow of filling in the form, leave the app to take the photo, enhance it and then return. The workflow is cumbersome and the experience is broken. This is the problem which can be solved in two ways:

6195: Capturing media in context of a document

  1. Here’s a screen with a form open. The user can tap on the field to enter the capture mode – the live feed of the camera is displayed within the document.
  2. All the camera controls are available so enhancements can be made before the image is captured.
  3. It’s possible to take a video, or a burst at this time and then select the best image from there, all within the context of a document.

Show and Tell - Soo.008

6602: Contextually embedding AR/VR objects in a responsive form

This is an exploration of a different model of form filling, to pivot the filling experience to make it more about the content not the format.

  1. In this case the user needs to fill in the form about a physical object, i.e. a car.
  2. In the form the relevant fields that need to be filled in are shown
  3. Once the AR experience begins, the user can see where the form fields are in the context of the object.
  4. At the end of the process the information is in the required fields, and also linked to the object.

 

Video:

DATE OF PROJECT: June 2016

TEAM: Shilpi Aggarwal, Saurabh Gupta

The Times of India iPad App

CONTEXT

Times of India – India’s main English daily – wanted to create an app for their iPad users. It was to be one of the first English language Indian news apps. The competitors at the time were the NDTV news app.

In this project my role encompassed understanding stakeholder and user requirements, and designing the overall information architecture of the app, supervising the visual design and handling usability validations.

TOI_medianama.jpg

DESIGN PROCESS

The persona for the app was primarily the NRI reader of Times of India’s website, who now used iPads. Their biggest connection after the home page was the local news from their hometown.

Through exhaustive whiteboard sessions and boardroom sessions, I designed numerous iterations of the home page in both portrait and landscape orientations until we reached the final version shown below. One of the challenges was to get stakeholders articulate their thoughts, as well as get them aligned.

The rationale for differentiating the iPad app from the website, and understanding the visibility of the different news divisions within the experience were some real challenges I had to overcome.

TOI-1

TOI-2

IMPACT

It ran successfully until it was finally redesigned in 2017.

Launch day coverage from Medianama:

“The Times of India app for the iPad is a good beginning. Although, India is still at a nascent stage when it comes to tablets, news junkies are increasingly embracing them for the sheer usability they offer.”

Another review from 2011: The Gadget Fan:

“Times of India (TOI)’s iPad app is crowded but neatly done with no excessive use of colors. It’s like your newspaper with interactive features built in. There’s news, speed news, a way to browse through Videos and Photos and a big ad at the footer. TOI app has used the screen real estate very well. If IBN Live has used colors to stand out, TOI took the contrarian approach of using just black and white. 

IMG_0066

There’s a Cricket ticker which gets your attention immediately. It’s a ticker with white fonts on a black background. You can browse through various sections through the Sections tap placed prominently at the top left corner. TOI iPad app renders well in both portrait and landscape modes. TOI iPad app is highly recommended for your daily news fix. (iTunes link)”

On Times of India’s website

Screen Shot 2018-07-03 at 10.31.40 PM

Date of Project: Sept 2010-Dec 2010, released 2011-2016

My Role: Principal Designer, Information Architect, Usability Specialist

Collaborated with: Pradeep Gairola (SVP, TIL) and Nigel Eccleston (Content).

Patent • Olinda: Create Location-Specific Artwork With AR

GOAL

This was a side project inspired by the street art/murals seen in Mission district in San Fransisco. I returned from there thinking there must be a way for artists all over the world to collaborate digitally without actually being physically present.

Later this became my Adobe Kickbox project.

SOLUTIONS

1. Concept

I came up with a workflow for creating, modifying and viewing location-specific artwork using augmented reality (AR). Here, AR would be used to project layers of digital information onto the physical environment. A mobile app called Olinda was designed to make it consumer-centric.

There were 3 steps:

  1. Create a canvas from the built environment
  2. Create the digital artwork on the canvas, and post it to the physical location
  3. View the artwork through an AR-enabled device

Screens from the workflow

olinda wfOlinda app as a hub for social street art creators and consumers

2. Communication

When a concept doesn’t solve an existing problem, but envisions a future value, it’s challenging to tell that story in a simple way. I tried a number of different ways:

a) Olinda film

The goal was to show that the app could be used by anyone for making an experience really special. I scripted the story and the screenplay, gathered actors and scouted for locations and equipment, shot the film, directed the music and edited the film. With a little help from my friends!

This slideshow requires JavaScript.

b) Digital presence

I worked on two types of websites, presenting the concept to two types of users: the creative pro and a typical consumer

www.getolinda.com|www.painttheworld.mobi

c) Social Media Campaign

I also launched a Facebook Ad Campaign and gathered a few likes:

FB_OLINDA.png

IMPACT

Overall it created quite a buzz internally, but the actual technology was pretty complex to build in 2013. However I was able to file a patent (AD01.3322US01).

Date of Project: May 2012-June 2014

My Role: Everything

 

 

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

 

XPath for Adobe FrameMaker 11

PROBLEM AREA

This UI component XPath Builder and Results, was a part of the larger product Adobe Framemaker 11. The idea was to include the XPath Builder with the Results pod, so that the user can continue working within the pod instead of having to focus on different areas of the screen.

It was a complex workflow taken up by proficient users, who primarily use the keyboard. They also create very complex queries and often search for multiple queries at the same time.

SOLUTION

During this milestone, multiple iterations were created, validated with stakeholders, and redesigned based on the feedback.

Wireframes:

These show the different versions as I discovered nuances of the workflow with successive iterations and validations:

Users needed a list, and queries are long:

02builder

Queries are made first, and run on different scope. Users often run multiple queries at a time. Users needed a list, and queries are long:

wireframe4

People generally work/read from top to bottom. Matching the workflow to define the IA. Queries are made first, and run on different scope. Users often run multiple queries at a time. Users needed a list, and queries are long:

 

wireframe1

Final Design:

This was the final design. I used the typical workflow to define the IA and the layout so the eye would naturally be oriented from query to results and continue using this multiple times in a single session.

003a005a

Visual specs were done keeping in mind the following:

  • Responsive on increasing and decreasing size of the pod
  • Localization of strings
  • Using elements of Gestalt to present a clutter-free UI

XPath Builder Spec_FINAL1

Date of Project: Jan 2011-June 2012

My Role: Primary Interaction Designer

Poster Design

GOAL

A fun project where each designer was asked to create a typographic poster from the book 57 things by Michael Gough.

DESIGN

I wanted to use hand lettering done digitally – because hands are our first interface in a way as we feel the world through touch.

Poster2

Created with Adobe Animate CC and Adobe Photoshop.

Date of Project: 2013

Patent • Derrida: Deconstructed Video Navigation

GOAL

Another side project that was born from the challenges of viewing video file without knowing much about its content beforehand. Our aim was to create either

  • a new navigation system, over the sequential timeline
  • a new video ad unit for Adobe Primetime that would build better brand engagement.

At the time I was quite inspired by the work of Ellsworth Kelly and Karel Martens.

SOLUTION

We explored video navigation using existing short films from Youtube and came up with

(1) An algorithm to generate the content visualization of a video

(2) A number of variations of these visualizations, to enable alternate non-linear navigation apart from the timeline.

We worked on about 50 videos of duration from 30 sec to 1.5 min. We found that any of these videos could be deconstructed to components which are then visualized in different ways to give different viewing experiences.

Example

We took this video as an example to show how many this works.

This video can be deconstructed into its components and then recombined to tell variations of the same story to different types of users.

Derrida 00

Maybe a repeat user might see a different version the second time. This would enable digital marketers to repurpose existing content to build further engagement.Derrida 01Derrida 02

Derrida 03

Links to other engagement could also be embedded. For example from this navigation, users can directly go to buy the displayed merchandise, download additional media, or learn more about the location, etc.

Derrida 04

 

Patent: P5209US01: Deconstructed Video Ad Units

Date of Project: Jan 2014-June 2014

My Role: Designer & Product Owner

Team: Nutan Sawant and K Balaji