Anas KA is a Designpreneur, UX Strategist, Design Blogger and Product Designer who is passionate in mentoring designers. Writes at Kikkidu.com & designPULI.com
Image for post
Image for post

Friday Evening

Kabir walked into the meeting room with two cups of tea, some biscuits and chocolate. Yogesh and I were waiting for him as he greeted us with a smile.

“Would you gentlemen like to share a tea with me?”

We hesitated for a second as we just had a hot chocolate drink from the cafeteria.

“This is a very good Masala Chai from the shop around the corner at our office lobby. It is not machine made, the shopkeeper himself makes it on a stove.”

Yogesh ran out to get an empty cup so that we can share and enjoy the tea during the upcoming discussion. …


The United States political map represented in the Election 2020 data visualization by various media outlets
The United States political map represented in the Election 2020 data visualization by various media outlets
The United States political map represented in the Election 2020 results data visualization by various media outlets

When I floated the idea of writing this article, my friends implored me to start the narrative with a couple of ‘disclaimers’ upfront. So here goes…

This article is about the design/visual representation of the US Presidential Election results covered by various media outlets. …


Two UX stories.

Disney+ Hotstar and YouTube
Disney+ Hotstar and YouTube
My experiences with OTT Media Services and a Video Platform

UX Story One: The Dungeon

I had at least five hours of waiting in front of me. I was in the basement of a building and the cellular network was nearly non-existent. But I came prepared; I once had a 16-hour flight where my in-flight-entertainment system was not working. I opened Disney+ Hotstar Android app (INDIA) on my mobile. Before venturing out that day, I had downloaded a couple of movies from my home WiFi.

First, the nice splash screen of Disney+ animation appeared (Fun fact: the shooting star is travelling clockwise unlike Walt Disney Studios’ counter-clockwise flight path). Then a preloader animation started.

I waited. …


“How do we make the journey from London to Paris better?”

A framing by thumb and index fingers — usually practiced by photographers in setting an imaginary frame before clicking
A framing by thumb and index fingers — usually practiced by photographers in setting an imaginary frame before clicking
A different perspective

Rory Sutherland, Vice Chairman of Ogilvy Group, has delivered some hilarious, yet insightful TED Talks. In ‘Life lessons of an adman,’ he brings up the question of “How do we make the journey from London to Paris better?”

The engineering solution is to spend six billion pounds to build completely new tracks so that about 40 minutes can be saved from the three-and-half-hour journey time.

Rory’s imaginative way improving a train journey is not about making the journey shorter. His solution is…

Employ all of the world’s top male and female supermodels, pay them to walk the length of the train, handing out free Chateau Petrus for the entire duration of the journey. …


People in a video conference call using laptops
People in a video conference call using laptops
Muting and unmuting the mic is the most frequent feature that people uses during a video conference call.

“Do you want to view Peppa Pig? Or is it Doraemon that you want?”

“Peppa Pig, Peppa Pig…”

“Here. Let me help you with the TV remote control.”

This conversation with my younger kid was telecasted to a dozen people in three continents because I forgot to mute! A Microsoft Teams conference call was going on while I was working from home. But I’m lucky compared with some souls who became the subject of viral ‘Zoom Fails’ during this Covid 19 lockdown.

Why are we finding it difficult to determine whether the video feed is ON or OFF? …


Where do I search? Help me…

Twitter, Pocket Casts, Amazon Prime Video Android App screens along with a Magnifying Glass on a yellow background.
Twitter, Pocket Casts, Amazon Prime Video Android App screens along with a Magnifying Glass on a yellow background.
Where do I search? Help me…

I was flipping through some hand-drawn low fidelity screens of a bill payment mobile app (Yes, some of us still prefer the old-fashioned way of drawing on paper first, than a pixel perfect, auto aligned digital version on Adobe XD). Then I saw it on the bottom tab bar.

“No, no, no. I believe we cannot do this.”

“What, the ‘Search’ function? Why?”

“Well. ‘Search’ is an action — much like ‘compose an email’ or ‘delete.’ …


Image for post
Image for post
Information overdose. No time to read and digest.

There are 400+ bookmarked articles in my Medium, Flipboard, Google Chrome, Evernote and Google Keep apps. I have amassed them in the past couple of years while skimming through various blogs, news articles and websites. I’m aware of the fact that I have read only less than 10% of these links.

My new year resolution is to stop bookmarking articles till I complete reading and absorbing the links I have favorited.

2017 will be the year of de-cluttering my bookmarks and slow reading of articles. Wish me luck!

What is yours? Awaiting your responses…

Cover image courtesy: Pixabay.com


Image for post
Image for post

A coffee cup can exist in the following five states .

  • Empty cup
  • A cup that is being poured with coffee
  • Half full/half empty cup
  • A broken cup
  • A cup full of hot, steaming coffee!

What if I tell you that a UI screen of an app should be designed in these exact five states?

1. Blank/Empty State

Image for post
Image for post
Empty coffee cup and ‘Watching’ empty screen of eBay app.

Think about the initial state of a UI — during the first run of the app when there is no data to be shown to the user. This is the ‘empty cup' state.

Design the screen in such a way that a call to action can be shown. Did you notice the “Go shopping” button in the ‘Watching’ screenshot of eBay app? …


Image for post
Image for post
Yes, what you heard is right. Medium.com no longer offers the option to put text over a title image. What you see here is a Photoshopped title image. Aha!

All my recent assignments were app designs for banking and insurance sectors. Forms are a regular feature of these apps. I studied the existing form fields in mobile apps and noticed some interesting implementations of text fields.

Keep in mind that this is not an exhaustive list. Android Material Design Guideline has a very detailed section on Text Fields.

Text Box — Single Line

Image for post
Image for post
‘Sign in’ screen from LinkedIn app. ‘Label inline the value field’ animates to ‘label above the value field’ when the text box is in focus.
  • Initially, the label is displayed inline on the value field.
  • When the text box is in focus, the label animates to a smaller sized font and floats above the value field.

Text Box — Multiline

Image for post
Image for post
‘Add Note’ from Google Calendar app. Single line field expands to multi-line field.
  • This element is similar in appearance to ‘Text box — single line.’ …


An ‘Unscientific’ Study

“Which color do you recommend for an app icon? Ours should stand out from the rest of the icons.”

“Don’t you have a brand color?”

“No. We are a start-up company and we are going to launch a mobile app soon.”

A couple of young guys asked me this question and so I embarked on a ‘highly unscientific study’ on 90 app icons that happen to come my way.

Insights

Following insights are based on my observations of the 90 app icons I managed to get hold of. The modus operandi is mentioned at the end of this article.

To stand out from the crowd of app icons, don’t follow the crowd in terms of color, name placement, shape of app icon…

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store