Fun UX Example: Starbucks.com

[This site uses cookies, but not the kind you eat]

Today I clicked on a link to a Starbucks.com page, and a popup opened up, for the now ubiquitous cookie/privacy notification. Only this time, the words used were not the dry jargon filled trope we are now so used to seeing everywhere. Instead, the popup made it lighter by saying that this is about cookies, just not the ones you eat.
[This site uses cookies, but not the kind you eat]

Cute, isn’t it? It’s also noteworthy that they describe how they use these cookies in simple terms.

But wait, there’s more!

Why does the fun take on actual cookies work here? Because it’s Starbucks. And they know it.

Which is why, right after you dismiss the popup, up comes another one. Are you annoyed by two consecutive popups? I wasn’t. Because the next popup is this one:

[How about a real cookie?]

Colour me impressed!

This is awesome UX! You have to put up a notification because of regulations, you see an opportunity to connect it with a popular product of yours, and in a cheeky yet cute move, you create an opportunity to induce a sale!

I was so pleased with this experience that I opened the page in another browser just so that I could see the popups again (and take screenshots for this post in the meantime).

Lessons learnt:
Always look for opportunities to make UX of your product fun for the user. And quite often there might be an opportunity in the decisions that you don’t have much control on – you need to be able to spot it and make it work for you.

New WordPress Plugin: Playing Card Notations

If you run a WordPress blog or site related to card games, like poker, bridge, rummy and the likes, and have the four suites’ unicode characters pasted away somewhere so that you can paste it whenever you are writing a new article where you need to show hands with cards, you need to take a look at my latest WordPress plugin: Playing Card Notations (PCN).

All you need to do, is install the plugin from WordPress’s repository, activate it, and use the shortcode [pcn] with simple text notations. E.g. Four of a kind, Aces can be represented as [pcn]AhAcAdAs[/pcn] by the shortcode [pcn]AhAcAdAs[/pcn].

You can configure display options like font, colour scheme and standard or reverse from the Appearance > Playing Card Notations Settings page in your WordPress admin panel.

Do install it, use it, and let me know of your feedback or feature requests in the comments below.

Link to the plugin’s page on WordPress.org.

Installation

For an automatic installation through WordPress:

  1. Go to the ‘Add New’ plugins screen in your WordPress admin area
  2. Search for ‘Playing Card Notations’
  3. Click ‘Install Now’ and activate the plugin

For a manual installation via FTP:

  1. Upload the addthis folder to the `/wp-content/plugins/` directory
  2. Activate the plugin through the ‘Plugins’ screen in your WordPress admin area.

To upload the plugin through WordPress, instead of FTP:

  1. Upload the downloaded zip file on the ‘Add New’ plugins screen (see the ‘Upload’ tab) in your WordPress admin area and activate.

Usage

You can use the shortcodes pcards or pcn to display cards and card hands in your blog’s content. The standard card notations of (A-J, 10 or T, 9-2) followed by suite letter (s for spades, c for clubs, h for hearts and d for diamonds) work.

Uninstall

In the Plugins screen of your WordPress admin area, navigate to Playing Card Notations, click on Deactivate. On the refreshed screen, click on Delete.

Bad UX: Fixing What Isn’t Broken or Over-Designing

One of the key things UX designers and product managers focus on is how to reduce friction for their users while using their products. If there is any UX pattern in our product which causes confusion in the minds of the user, they have to double guess how to use it, or they have to put more thought than necessary into using it, we have failed.

One such product that bothers me a lot is the tap or faucet. (Don Norman wrote about it in his book The Design of Everyday Things)

You use a tap in a very simple way – you turn a knob that sits on top of the device anticlockwise to start the water flow, clockwise to stop it, the water flows out of a spout in the vicinity of the knob, and the flow of water is governed by how much you have turned the knob.
Like this one: shallow-focus-photography-of-gold-faucets-1021872

This is simple, universal, does the job every time as expected, and there really isn’t any reason to make any changes in the fundamental structure of this device. And if I encountered a tap like this everywhere I went throughout my life, I am not going to complain.

Yet, we see the following variations of the tap at various places, where the variations are not just in scale, shape, texture, material, but in how the tap is used:

We are left confused as to which component to turn to use the tap, or which way to turn it, or whether we are turning it in the right axis even, or whether we have to push on the “knob” instead of turning it! Why have tap designers gone to these lengths to confuse us while using such a simple device? Mind you, I am not even talking about faucets where both hot and cold water comes and there are complex knobs to ensure you get the right temperature by mixing both, or sensor-driven taps, where you don’t need to touch the tap to activate it (they come with their own challenges – where exactly do I place my hand so it works? The tap next to mine seems to be working – why isn’t mine working?).

In Software Design

What are some of such scenarios in software & app design where the interface has been over-engineered to the detriment of user experience?

  1. Synthetic scroll: This was a pattern in vogue on blogs and magazine sites a couple of years back. If you used your mouse wheel or trackpad to scroll the page, the scroll speed would be higher than usual. Why? Either because the designer had found a nifty Javascript trick to make it happen, or … I cannot think of any other reason, least of all a user-centric one.
    Scrolling is something the device & browser handle and they handle it very well, and unless your experience involves things like scrollspy and page section navigation, there is no real reason to tamper with this behaviour.
  2. The sticky mastheads on sites, which would disappear when scrolling down, but would pop up again when you scrolled up a bit. Why do we need this interaction at all? Is the screen space so limited that the content isn’t visible when the masthead is perpetually visible? It is a little bit annoying to scroll up to re-read something you had just seen, only to have it hidden behind the masthead, so that you need to scroll just a little bit more.
  3. Form validations that go ‘above & beyond’:
    1. Some form fields take only specific types of inputs, e.g. numbers. But some designers go beyond just filtering unacceptable characters – there are forms where if you press anything other than the 11 keys (10 numbers and the period), the data you have already entered in the field is simply deleted, and you have to re-enter your data!
    2. There are forms where when the page load completes, a script goes through all the input fields to reset them. How is this a problem? Say the page takes some time to load, and the user has already started to input some data, once the page load ‘completes’ (in today’s times of progressive web apps, this could be an arbitrary point in time), the script just removes your inputs.
    3. Fancy input fields which are broken into multiple input fields one character wide. The most common example is the OTP field in many e-commerce apps. Why is this done? To visually denote how long an input is expected. As you input the OTP, the focus keeps moving to the next field, and thus the experience is completed, except when the backspace isn’t coded for. When you press backspace, the previous field should be emptied and put in focus, but at times the developer forgets to code that and it becomes an issue. Going one step forward, when the user manually goes to the respective field to delete the input, the code checks the existing data length, decides that the input is complete, and thus pushes the focus to the next field, without letting the user delete the wrong data.
      1. The special case of this issue that has bothered me for years can be seen on the IPv4 configuration screen on Windows. An IP address consists of 4 one-to-three digit numbers separated by periods. While other systems let you enter it all in one textbox, and you have to type the periods as well (leaving us in total control), Windows’ designers decided to make it fancier – there are four textboxes and the periods are ornamental pieces between them. It’s nifty, except that if you are typing any number less than 100, you fill only two places in a 3-digit field, and you cannot move to the next field except by clicking it using your mouse or trackpad. The tab key takes you to the next group of fields. Pressing a backspace on an empty field doesn’t take you to the previous field either. I’ve seen this behaviour and been annoyed with it for years now, but nothing seems to have changed here over multiple versions.
        windowsip

As you can see in the examples above, designers at times go overboard in over-designing interactions where it’s not needed, breaking away from the expected pattern, thus leaving the user confused or worse still, frustrated. These mistakes are almost always avoidable, simply by falling back on the most used and easily available pattern. This goes for taps as well 🙂

What are some of the examples of over-designing, in software or other products, that you have come across?

Bookmarklet: Add Keyword Search to the Listings on IIMJobs.com

Job hunters from the IIMs and other such colleges often go to this cool site called IIMJobs.com, started by an alumnus of my alma mater. It’s quite a live board, but there is one thing that I sorely miss there – filtering the job listings by keyword. You can select your experience range, your preferred location, and search. You get to see all jobs in your preferred city for your preferred vintage, but you may not be interested in them. And you have to sift through the listings page to find jobs suitable for you.

This got me thinking – what if there was a filter box, where I could type in my preferred phrase and it would filter the listings on the page, keeping only those that you want to see?

So, I spent a Monday morning putting together some code, and here it is – a bookmarklet which, if you save it on your browser’s toolbar and click on it when you are on the IIMJobs listing page, you will get a cool keyword search input box. This will let you filter the listings on the page by keyword – basically it will hide all the listings which do not match your search phrase.

All you have to do is drag the button below to your browser’s toolbar.

<a style="padding: 18px 32px; font-size: 16px; margin-bottom: 40px; background-color: #444; color: #fff;" title="Drag me to your bookmarks/favourites" href='javascript:(function(){$("#searchform").find(".greybtn").closest("div").before("

“),$(“ד).appendTo(“.keywordParent”),$(“.keywordSearch”).keyup(function(e){var%20o=$(“.keywordSearch”).val().toLowerCase();$(“.jobRow”).each(function(e){-1Add Filter @IIMJobs

Do let me know in the comments below if you like it, or if you have any feedback on how to make it better.

Can We Make Newspaper Articles Shareable & Trackable

While reading an article in today’s ET Brand Equity, I felt like I had to share it with my friends, maybe put it up on LinkedIn with a comment of my own. The thing is, I was reading it on the paper, not the app or the website. And being the lazy person that I am, I would not usually go looking for this article on either of those two, just for sharing it.

But I did want to share this article with my friends, and I looked for ways to do so.
Can We Make Newspaper Articles Shareable & Trackable

Apart from the author’s email address, I could not find anything to go by.

This puts the physical paper and its reader at a disadvantage compared to the app/site & their reader.

The Obvious Way

One obvious way out is to take a picture of the said article, and WhatsApp it to the relevant people. Or tweet it, or share it on Facebook or LinkedIn.

I would have to overcome the hassles of getting a clear picture, each word being clearly captured, the lighting being right, the paper not flying away due to the fan yada yada. At the same time, there is an obvious opportunity that the newspaper company is missing here – in this method they would not know who all has read this piece of content, or even how many people it has reached.

In this day and age of tracking user attention and retargetting, don’t you think that’s a big piece all physical newspapers and magazines are missing out on?

Go Digital

So, I have a proposal for paper publications, who also have a website and/or an app where the same content is published.

Why not simply print the QR code to the link of the content at the beginning or end of the piece?

I got off my lazy behind, and found out what the online home for this particular article is: https://brandequity.economictimes.indiatimes.com/news/business-of-brands/huls-secret-recipe-of-success/71401983

A simple QR code leading to this article looks like this:
QR to ET article

But this would take some space to print, wouldn’t it?

This is where a URL shortener service like bit.ly comes in handy. Not only can the URL be shortened to something like 20-25 characters, they provide tracking data as well. This is how a bit.ly version of the same link looks:
QR to bit.ly to ET article

And a crude representation of how it could look on the same article:
Can We Make Newspaper Articles Shareable & Trackable
It doesn’t take up a lot of space, and it is scannable – try it out!

I am sure the designers at these papers would find a way to make it look way more attractive than this.

With this small addition to every piece of content in a paper, I am sure sharing and adoption of the online versions would also take off. Meanwhile, knowing that I can share content I would definitely be more open to reading the physical paper, since reading something like Brand Equity is not only driven by updating my knowledge about the industry, but also about finding shareable content for this blog and my LinkedIn feed.

Short Commentary: PineLabs POS UI

I was in Nature’s Basket the other day. When I took out my credit card to pay the bill, I noticed the fancy all-touch-screen POS the cashier pushed towards me. It’s a device with a cradle charger, and frankly looks quite fancy, though I do not have any qualms with the usual all-black push button POS machines we see everywhere else.

Nevertheless, it caught my attention. It looks somewhat like this:
Probable interface when actually using the POS

Except, when my card was inserted and I had to enter the PIN to authenticate, it looked somewhat like this:
Probable interface when actually using the POS

Do you see the difference? Yes the digits are switched around. Possibly some team convinced everyone that it is a high security feature and would reduce fraud/misuse of cards. Here’s my take on why this design decision has gone wrong.

What are we trying to solve here?
  • Negative use case: Someone is carrying a stolen card and has somehow figured out the PIN, though a skimmer, social engineering, maybe overheard the owner somewhere, or looked over their shoulder. Such users remember the PIN’s digits, commit them to memory, and would maybe revise it in their head while the card is being swiped. Does this interface gimmick prevent them from using the keypad? I doubt it. They are anyway going to be looking for the digits on the screen, and pausing after every keypress. There is hardly any change in behaviour for such people.
  • Positive use case: The actual owner of the card. Most of us do not repeat the 4-digit PIN in our heads before punching it. After the initial 5-10 times, we just repeat the keystrokes on the POS. It’s muscle memory for most of us. Because of this design change, we have to punch in the keys like anyone from the negative use case bracket would – punch-pause-punch-pause, and in between try to remember if 2 came before 8 or after and if there really was a 7 in the middle, because the keys aren’t where our brains expect them to be. All this design change does is make the legitimate users look like they have just cracked the PIN to a card they found on the street.
  • Now let’s talk about the other positive use cases: The elderly, disabled, kids carrying the card. Those who do not depend on muscle memory to punch in PINs. These people might anyway be remember one digit at a time, so should it be okay to switch the digits around? These people are not going to touch type, why are we making it difficult for them to look for digits? Nothing is where you expect it to be.

What is the point really of such an interface change, when it a) prevents legitimate users from using the system effectively, and b) does nothing to prevent misuse/fraud, when I’m sure that fraud prevention would have been cited as the reason number one to implement this.

Zomato, Radhika Apte, Netflix, #Radflix, and Me-too Marketing

If you have been online around the end of August, and you follow the really cool people online, you must have heard about Netflix India’s love for Radhika Apte – how she seems to be a part of every piece of Netflix India original content, be it movies they produce or shows. The public has been creating jokes and memes about the affinity, and it’s gone viral.

How Netflix India’s social media team handled the attention was just brilliant. They joined in the meme fest. Not just did they appreciate the memes that the public made about Radhika Apte & Netflix, they created their own memes, coined the term ‘Radflix’, made a mock trailer of a mock film titled ‘Omnipresent’, starring Radhika Apte, written, directed, shot, and what not, by Radhika Apte, and went full throttle on having fun with it.

In short, they pwned the internet at their own game.

But this post is not about the larger phenomenon that Radflix was. It’s about a simple series of ‘ads’ that appeared in a short period of time, which shows how most Indian brands cannot think beyond “yeh wala cool hai, hum bhi karenge“.

So, while Netflix was enjoying the attention that Radflix was bringing them online, the witty social media team at Zomato made a simple two-column text format of an ad, which simply said ‘And you thought only Radhika is versatile’. The subject of this ad was Paneer, which, as per the ad is present in so many dishes / everywhere, much like Radhika Apte is.

https://platform.twitter.com/widgets.js

Simple, cute, topical.

What happened next was nothing short of a masterstroke by Netflix. In 3 hours time, Netflix India just replied to that ad by editing the creative, finding the letters R-A-D-H-I-K-A in the left column, crossing off Paneer and writing instead the name of their mock movie Omnipresent.

https://platform.twitter.com/widgets.js

Quick, witty, playful, and funny.

The internet imploded! As I’m writing this, both these tweets have generated over 22000 interactions, almost two-thirds of which has come to Netflix’s response. And we don’t even know how many times these tweets were screenshotted and shared on Facebook, LinkedIn, Whatsapp, Telegram etc.

All well so far.

Then, the Indian thing happened. Other brands noticed the buzz. Heads of marketing & CEOs of companies said “This is so cool! I want to join in too!”

So here’s the list of brands which attempted to join the party, and my commentary on each.

Reliance Mutual Funds

https://platform.twitter.com/widgets.js
This is the first me-too tweet I saw that day. Reliance MF replied to both the handles, “Only if you have the wealth to binge watch and eat whenever you feel like!”, which doesn’t fit the context in any way, placed a weird reading sentence in the left part of the ad, where each word exists solely so that the word W-E-A-L-T-H could be spelled out, and the right part simply sports their own tagline.
Talk about butchering the format.

IIFL

I found IIFL’s tweet in a reply thread to the one by Reliance MF above. It’s clear that they didn’t even try beyond copying the two-column text format. Though in terms of content style, they came closest to the Zomato ad, but sadly nobody paid any notice to create a Netflix style reply.

KFC

KFC came up with a follow-up, with the exact same approach as that of Reliance MF. Left side, let’s spell out chicken over a force-fitted longish sentence, and right side, our tagline.

Union Bank of India

A PSU bank also wanted to join in the fun. They had a strange take though, spelling out U-N-I-O-N-B-A-N-K over an insipid and weird sentence on the left, and the entire logo unit and tagline on the right. The graphic work looks like it was quickly put together on Powerpoint only.

Tata Sky

My favorite DTH service provider ;), Tata Sky, didn’t want to be left far behind. So their social media team cooked something up. But brand visibility is paramount, so they just list random keywords along with the words “Tata Sky” on the left, so that they can spell out R-A-D-H-I-K-A (thank god for small mercies!), and their tagline on the right.

Cashify

Cashify, (who are they?) made an ad, where they wrote a sentence which is just copy for what they offer, force-filled with the earlier brands’ names, just so they look like they are also “in”, and a boring “Cashify now” on the right. Wait, what does the sentence spell out? No R-A-D-H-I-K-A, no C-A-S-H-I-F-Y?

Daily Objects

This hashtag laden copy came 2 days late, where they list items that they presumably discuss on the left, only to spell out their own name, and on the right they have their logo. Narcissism much? The only connection to the original story is the tags Radflix and Omnipresent, almost as if this is their half-hearted entry to a contest called Radflix.

Indigo Nation

Indigo Nation listed its sub-brands on the left, its logo on the right, and spelt out C-R-E-A-T-I-V-E, and its tweet read ‘Creativity is where it all started, and after all humaari creativity apt hai!’, again hashtag Radflix hashtag Netflix. Because how else do you show you are creative, if you don’t write creative three times in your creative?

Fullerton India

Fullerton India, created a starkly orange creative, with an insipid tweet ‘your partner in growth’, the list of things they do on the left, but interestingly enough, instead of circling letters to spell out F-U-L-L-E-R-T-O-N, they use the crossword format. They were afraid their audience would have to be spoon fed the word in one straight line. And on the right (this is my favourite!), they cross out Radhika and write Fullerton India. Guys, Radhika was supposed to be spelt out on the left! Stay with the format!

That’s What Sri Said

Some young individual professional who is presumably just starting off also wanted to use the format to get likes & retweets, and some visibility. Let’s just talk about the creative – it’s a list of issues on the left, and the words ‘Problems after college’ on the right. R-A-D-H-I-K-A is spelt out all right, but look at what words were put in so that it could be done – ‘Kam holidays’, ‘Taunts’, ‘Hormones’! The best part of this one is the tweet ‘Radhika Apte being versatile. We found her too.’ Can someone translate this for me please?

Playgard Condoms

The only thing missing from the mix was a condom brand. Playgard copied the format, replaced the left side with types of positions, and quite ‘helpfully’ wrote Positions on the right, because wouldn’t you really want to know what the things on the left are called? No spelling out words, and no crossing out words. But look what else they have written – “the only time Radhika won’t be present”. How presumptuous! Or on second thoughts, it’s just humble on the brand’s part 😉

Buzzinga Digital

An agency called Buzzinga Digital also made an ad, listing out R-A-D-H-I-K-A over a list of things they seem to offer. Nothing on the right. And the tweet content is a slight change to what Netflix had tweeted.

IFW Web Studio

Yet another agency, but this time from Udaipur. Their ad shows the same – the left column lists out a series of places in Udaipur, spelling out R-A-D-H-I-K-A over it, with the right part saying Udaipur – shooting ke liye apt hai! And the tagline to the logo, and the tweet are little more than implorations to Radhika Apte to visit Udaipur.

Hungry Head

This was the most inane one so far. The left half lists food items (with an all-small case nachos), and the right half just says Maggi. I don’t know how the left connects to the right, and what they all have to do with anything we have seen so far. And I don’t even know why the Maggi is in a smaller type than the others even though it’s alone on the right. The tweet says ‘Not only Radhika can fit everywhere. Our Maggi does too!’ Oh and did you notice the innovative hashtag #scaredgames?

What’s common across all these attempts at marketing are a) an attempt to just exploit the trend using the visual structure and the hashtags with no understanding of why the originals worked, b) tagging Radhika Apte, Zomato, and Netflix India’s handle in an attempt to gather attention and hoping for retweets from them, c) usage of the hashtags #omnipresent and #Radflix to appear in searches, and d) a cringeworthy overuse of the word apt (it’s a wordplay on Apte – do you see how clever all these brands are?) everywhere.

Having said all of this, I came across a funny take on the whole thing as well. A kind of subversion, a tongue-in-cheek ad, by a brand called JOOG. Take a look.

JOOG

Let me know in the comments if you have found any more copies of the concept, and I’ll add them to the post.

WordCamp Mumbai 2016 Day 2 Wrap

Speakers & Volunteers

WordCamp Mumbai 2016 Day 1 Wrap

My favourite talks of day 2 at WordCamp Mumbai 2016, in chronological order:

  1. Naoko Takano (@naokomc) came all the way from Japan (and brought really cool WordPress tattoos for us – you saw a sample in yesterday’s post) to talk about how WordPress became successful in Japan, capturing 78% of the website share. A relevant talk for anyone interested in internationalization and localization.
  2. Michael Eisenwasser (fb/eisenwasser) is the co-founder of BuddyBoss, a company which build products for the BuddyPress ecosystem. Great talk to help us build user engagement using “social tools” on WordPress.
  3. Sakin Shrestha (@sakinshrestha) came all the way from Nepal, where he heads various companies and also manages to host WordCamp Nepal. He introduced the audience to different approaches to developing themes for WordPress, ranging from modifying an existing theme, to building one from scratch, including using frameworks and starter themes.
  4. Darshan Sawardekar (@_dsawardekar) is a Lead Web Engineer at 10up, and a vim enthusiast – to the extent that he is the author of a vim plugin called WordPress.vim. He explained why URLs are important, how pretty URLs/permalinks work in WordPress, what Rewrite rules are, and how we can leverage them to our advantage.
  5. Mahangu Weerasinghe (@MahanguW) is a Happiness Engineer at Automattic, and like Bryce & Sam, I had met him and heard him speak on stage for the first time at WordCamp Mumbai 2015. This time he shared how he, a non-programmer, taught himself to write code on WordPress that lets him do things one step at a time, using action & filter hooks. But beyond just the technique of it, his deeper message was that programming is not only for the math-minded toppers in school – essentially, programming (at least algorithms and high-level programming languages) is language, and similar to any language we speak in with each other – so any person who can communicate well can also code well.

Thus ended my fourth WordCamp and the volunteer stint with it. In the process I had the chance to discuss with great people, some of whom are employees at Automattic, others are business owners in India, some developers, and every one of them a WordPress enthusiast.

Photographs courtesy: Bigul Malayi (@mbigul)

Until the next WordCamp!

WordCamp Mumbai 2016 Day 1 Wrap

On my way to the venue.
On my way to the venue.

The venue was set, the sandwiches, tea, coffee, water was all fixed, the projection on stage, the sound from the laptops, the presenters/clickers were tested, the WiFi worked finally after a couple of hours of tinkering.

47999106-9408-4c1d-9471-f450230a221fAfter around an hour of attendees walking in, collecting their goodie bags, and walking in to the auditorium after getting something to munch on & sip, we were ready for the talks to start.

WordCamp Mumbai 2016 was open!

This is my fourth ever WordCamp. I was an attendee at the first one (Mumbai 2014), a speaker at the next (Mumbai 2015), a sponsor at the next (Pune 2015), and I’m an organizer/volunteer/<localhost> at this one.

I was looking forward to this WordCamp eagerly, for the quality of the planned talks if not for anything else.

And this is the first WordCamp which was duly attended by the whole 13 Llama Studio team.


In the chronological order, here’s my take on what I liked about what went on today:

  1. Shilpa Shah (@IdleGazer, HWS) told us what customers want. It’s been a recurring theme in WordCamps, and rightly so. Developers have been known to not fully understand the importance of dealing with customers with empathy and a kind word. Shilpa delivered the message in her disarming fun way. A great start to a great WordCamp.
  2. Nirav Mehta (@niravmehta, StoreApps) had delivered this session at a WordPress meetup a few weeks ago, which I had missed. Later I heard many good things about it from those who hadn’t. Today I found out what I had missed then. Various insights into the WordPress plugin universe and what an aspiring plugin developer should focus on made this a must go.
  3. Bryce Adams (@bryceadams): I had heard Bryce for the first time in WordCamp Mumbai 2015, and was just blown away with the way he built his case for the famous “decisions over choices” principle. This time he spoke about building Freemium plugins, and how it follows from looking at The Bigger Picture.CdU57xTUAAAsQ9_
  4. Sam Hotchkiss (@HotchkissWeb): Same as Bryce, I had heard Sam last year, and he showed us a very cool picture of the admin panel of the future. This time around, he took us through the best practices for Plugin development. Very thorough, and very enlightening.
    I want this printed, framed, and hung on every developer's desk every where
    I want this printed, framed, and hung on every developer’s desk every where
  5. Karthikraj Magapu (@KarthikMagapu, HWS) in his inimitable style, took Nirav Mehta, Rohan Thakare (@rohanthakare, Wisdm Labs), and yours truly, along with a member from the audience on a panel discussion – the topic being how can growing WordPress based companies get to their first million. As much as it was fun, it was thought-provoking, forcing us to look inwards, and learn from each other. The learning opportunity for me was immense, since both Nirav and Rohan have been in business longer than I, and run larger companies than I.
    The panel at WCMumbai 2016
    Photo courtesy: Harshaja Ajinkya
  6. Rahul Bansal (@rahul286, rtCamp) is the god of scaling, speed, reliability, and taking off from his previous talk at Mumbai 2015, he taught us how to make WooCommerce scalable. Entertaining and educative.
  7. Raghavendra: though I missed a major part of his talk, whatever I heard moved me to the core. As a developer, I have always insisted on the alt tag, and warned against the indiscriminate mixing of alt with title in imgs. Today I got validation for this seemingly pedantic practice. But the alt is only one of the things we developers need to take care of while making the web accessible to those with disabilities. And WordPress is the only platform which focuses on accessibility. Yet another reason to be proud of using WordPress and being in the community.
  8. Kshitij Patil (@thekshitijpatil, kshitijpatil.com) is an entrepreneur who has sold web design services for years. And he shared his techniques and principles with the audience.
  9. Saurabh Shukla (@actual_saurabh, hookrefineandtinker.com) delivered one of the most fun, engaging, and moving talks of the day, where he shared his numerous stints with a development career, the failures & struggles, and finally simplified talent retention through the famous Maslow’s Hierarchy of human needs.

WordCamp Mumbai Day 2 Wrap

A new UI Kit for React-Native

I love Javascript.

And I have come to love ReactJS a lot more than I had loved any other Javascript library, sorry jQuery.

In the last few weeks, I have been learning React Native, while putting together an iOS app for a project of ours. While working with React Native, I realised that there isn’t a default styling/component kit available for creating native mobile applications. The ones that are there are not open source, each coming with a decent enough price tag.

And then I realised that even though React Native uses some form of stylesheets, I cannot simply drop the stylesheets from Twitter Bootstrap and expect it to work.

So I got down to creating usable UI components, with the style borrowed from Bootstrap.

It’s far from finished, but at the time of writing this you can use it to create a text input field with a label, and the six types of buttons provided by Bootstrap. I’ll keep adding more components to the kit as time permits.

Go ahead and use it, share it, give me feedback, and contribute to it if you would like to.

https://github.com/hypnosh/ui-kit-for-react-native