In today’s challenging economic climate, businesses are struggling to keep their lights on. As consumers become more demanding and market saturation increases, the competition to capture their attention becomes more intense. However, in recent years, we have seen a shift towards product design over user experience (UX) design with businesses increasingly focused on short-term results rather than long-term goals. This shift has been driven by the weak economy and a focus on driving profits. As a result, product design is becoming increasingly important, and UX design is taking a back seat.

It is true that UX design has a high Return on Investment (ROI) in the long run. By investing in UX design, businesses can create products that are more user-friendly, which leads to happier users, increased customer loyalty, and ultimately, higher revenue. However, when businesses are struggling to keep their lights on, that thinking seems like a luxury.

When businesses have two options to keep the lights on, they often choose the first option — to design and develop innovative and crucial new ideas that might bring in a ton of new customers. This is because new ideas have the potential to bring in significant revenue and help the business succeed in the short term. However, designing and developing new products is often expensive and time-consuming, which is why businesses are increasingly turning to product design to help them make the most of their limited resources.

Unfortunately, this focus on product design often comes at the expense of UX design. As businesses cut costs, they are less willing to invest in the research and development necessary to create a truly exceptional user experience. This can lead to products that are difficult to use, frustrating to interact with, and ultimately fail to meet the user’s needs.

Product design takes a more pragmatic approach, considering the immediate needs of the business and the constraints of time and budget. Product designers must balance the needs of the user with the needs of the business to create products that are both user-friendly and commercially viable. By taking a more pragmatic approach, product designers can help businesses save time and money by creating products that are more likely to succeed in the market.

For example, suppose a business wants to cut costs to stay afloat. In that case, a product designer can help by identifying areas where the product can be streamlined or simplified to reduce production costs. Alternatively, a product designer can help by identifying new features that can be added to an existing product to make it more attractive to customers.

Product designers can also help businesses by identifying new markets or niches that the business can target. By researching the needs and preferences of potential customers, product designers can help businesses create products that meet the specific needs of these markets. This can help businesses to grow and expand their customer base, which is essential for long-term success.

In conclusion, while UX design is future-looking and promises happier users in the long run, product design is becoming increasingly important in today’s weak economy. When businesses are struggling to keep their lights on, they often focus on short-term results and are more likely to invest in new product development or cut costs. However, product design can help businesses make the most of their limited resources by creating products that are both user-friendly and commercially viable. By taking a more pragmatic approach, product designers can help businesses succeed in today’s challenging economic environment.

I hope you’ll enjoy reading this article.

_

Kiran Shivlingkar a Principal Product Designer at Nykaa

_

Peace out

Reach out to me on Linkedin

From UX to Product Design: A Paradigm Shift in the Making was originally published in Bootcamp on Medium, where people are continuing the conversation by highlighting and responding to this story.

“I’m a believer in doing over reading. You learn the most from actually designing and building products instead of reading about the practice.” (Mizko)

Designers come from different backgrounds, with some having studied arts and crafts at school and college, while others are self-taught. Regardless of their training, it is crucial that you as a designer understand the foundations of the Design field. In today’s design-driven world, designers take many avatars — graphic designers, UX designers, fashion designers, animation designers, and so on.

To pursue one’s interest in design and to choose the right design career, here are 10 best design books that will strengthen your understanding of the fundamental principles of design and its applications.

Books

• Don’t Make Me Think
• Rocket Surgery Made Easy
• The Design of Everyday Things
• A Pattern Language
• Designing Your Life
• User Friendly: How the Hidden Rules of Design Are Changing the Way We Live, Work, and Play
• Invisible Women: Data Bias in a World Designed for Men
• Change by Design
• Loonshots
• This Might Get Me Fired
• Good to Great
• Make Time
• Find Your Why
• Design Leadership Handbook

Podcasts

• 99% Invisible
• The Crazy One Podcast
• High Resolution Design
• Twenty Thousand Hertz
• The Design of Business | The Business of Design
• Clever
• The Deeply Graphic Design Cast
• The Honest Designers Show
• Design Matters
• UI Breakfast
• The Design Better Podcast
• User Defenders
• The Method and Design Notes Podcast
• Presentable
• The Futur Podcast
• The Reflex Blue Show: A Graphic Design Podcast
• Grits & Grids

Short films

• AIGA medalists profiles
• Everything is a Remix

Feature films

• “Tim’s Vermeer”
• “The Creative Brain”
• “The Pixar Story”
• “Jeremy Scott: The People’s Designer”
• “They’ll Love Me When I’m Dead”
• “Print the Legend”
• “Have You Seen the Listers”
• “Helvetica”
• “Objectified”
• “Urbanized”
• “Rams”
• “General Magic”
• “Design Disruptors”

TV series

• “Abstract: The Art of Design”
• “Grand Designs”

Digital opportunities

• Be My Eyes
• Design to Combat Covid19

Want to learn more?

Want to get an industry-recognized Course Certificate in UX Design, Design Thinking, UI Design, or another related design topic? Online UX courses from the Interaction Design Foundation can provide you with industry-relevant skills to advance your UX career. For example, Design Thinking, Become a UX Designer from Scratch, Conducting Usability Testing or User Research — Methods and Best Practices are some of the most popular courses. Good luck on your learning journey!

I hope you’ll enjoy reading this article.

_
Kiran Shivlingkar a Director of Product Design

_

Peace out

The best design books, podcasts, movies, and more was originally published in UsabilityGeek on Medium, where people are continuing the conversation by highlighting and responding to this story.

I’m a huge fan of Spotify and particularly Discover Weekly. Why? It makes me feel seen. It knows my musical tastes better than any person in my entire life ever has, and I’m consistently delighted by how satisfyingly just right it is every week, with tracks I probably would never have found myself or known I would like.

Spotify is a prime example of this technology. Every Monday, over 100 million Spotify users receive a new playlist, Discover Weekly, tailored to them. This custom playlist contains around 30 songs that they have never listened to before but will probably enjoy it.

The user base goes crazy for it, which has driven Spotify to rethink its focus and invest more resources into algorithm-based playlists.

So how does Spotify do such an amazing job of choosing those 30 songs for each person each week? Let’s zoom out for a second to look at how other music services have tackled music recommendations, and how Spotify’s doing it better.

History of Online Music Curation

Back in the 2000s, Songza kicked off the online music curation scene using manual curation to create playlists for users. This meant that a team of “music experts” or other human curators would put together playlists that they just thought sounded good, and then users would listen to those playlists. (Later, Beats Music would employ this same strategy.) Manual curation worked alright, but it was based on that specific curator’s choices, and therefore couldn’t take into account each listener’s individual music taste.

Like Songza, Pandora was also one of the original players in digital music curation. It employed a slightly more advanced approach, instead manually tagging attributes of songs. This meant a group of people listened to music, chose a bunch of descriptive words for each track, and tagged the tracks accordingly. Then, Pandora’s code could simply filter for certain tags to make playlists of similar-sounding music.

Around that same time, a music intelligence agency from the MIT Media Lab called The Echo Nest was born, which took a radical, cutting-edge approach to personalized music. The Echo Nest used algorithms to analyze the audio and textual content of music, allowing it to perform music identification, personalized recommendation, playlist creation, and analysis.

Finally, taking another approach is Last.fm, which still exists today and uses a process called collaborative filtering to identify music its users might like, but more on that in a moment.

So if that’s how other music curation services have handled recommendations, how does Spotify’s magic engine run? How does it seem to nail individual users’ tastes so much more accurately than any of the other services?

Spotify’s Three Types of Recommendation Models

Spotify doesn’t actually use a single revolutionary recommendation model. Instead, they mix together some of the best strategies used by other services to create their own uniquely powerful discovery engine.

To create Discover Weekly, there are three main types of recommendation models that Spotify employs:

1. Collaborative Filtering models (i.e. the ones that Last.fm originally used), which analyze both your behavior and others’ behaviors.
2. Natural Language Processing (NLP) models, which analyze text.
3. Audio models, which analyze the raw audio tracks themselves.

Let’s dive into how each of these recommendation models works!

Recommendation Model #1: Collaborative Filtering

First, some background: When people hear the words “collaborative filtering,” they generally think of Netflix, as it was one of the first companies to use this method to power a recommendation model, taking users’ star-based movie ratings to inform its understanding of which movies to recommend to other similar users.

After Netflix was successful, the use of collaborative filtering spread quickly and is now often the starting point for anyone trying to make a recommendation model.

Unlike Netflix, Spotify doesn’t have a star-based system with which users rate their music. Instead, Spotify’s data is implicit feedback — specifically, the stream counts of the tracks and additional streaming data, such as whether a user saved the track to their own playlist, or visited the artist’s page after listening to a song.

But what is collaborative filtering, truly, and how does it work? Here’s a high-level rundown, explained in a quick conversation:

What’s going on here? Each of these individuals has track preferences: the one on the left likes tracks P, Q, R, and S, while the one on the right likes tracks Q, R, S, and T.

Collaborative filtering then uses that data to say:

“Hmmm… You both like three of the same tracks — Q, R, and S — so you are probably similar users. Therefore, you’re each likely to enjoy other tracks that the other person has listened to, that you haven’t heard yet.”

Therefore, it suggests that the one on the right check out track P — the only track not mentioned, but that his “similar” counterpart enjoyed — and the one on the left check out track T, for the same reasoning. Simple, right?

Collaborative filtering does a pretty good job, but Spotify knew they could do even better by adding another engine. Enter NLP.

Recommendation Model #2: Natural Language Processing (NLP)

The second type of recommendation model that Spotify employs is Natural Language Processing (NLP) models. The source data for these models, as the name suggests, are regular words: track metadata, news articles, blogs, and other text around the internet.

Natural Language Processing, which is the ability of a computer to understand human speech as it is spoken, is a vast field unto itself, often harnessed through sentiment analysis APIs.

The exact mechanisms behind NLP are beyond the scope of this article, but here’s what happens on a very high level: Spotify crawls the web constantly looking for blog posts and other written text about music to figure out what people are saying about specific artists and songs — which adjectives and what particular language is frequently used in reference to those artists and songs, and which other artists and songs are also being discussed alongside them.

While I don’t know the specifics of how Spotify chooses to then process this scraped data, I can offer some insight based on how the Echo Nest used to work with them. They would bucket Spotify’s data up into what they call “cultural vectors” or “top terms.” Each artist and song had thousands of top terms that changed daily. Each term had an associated weight, which correlated to its relative importance — roughly, the probability that someone will describe the music or artist with that term.

“Cultural vectors” or “top terms,” as used by the Echo Nest. Image source: How music recommendation works — and doesn’t work, by Brian Whitman, co-founder of The Echo Nest.

Then, much like in collaborative filtering, the NLP model uses these terms and weights to create a vector representation of the song that can be used to determine if two pieces of music are similar. Cool, right?

Recommendation Model #3: Raw Audio Models

First of all, adding a third model further improves the accuracy of the music recommendation service. But this model also serves a secondary purpose: unlike the first two types, raw audio models take new songs into account.

Take, for example, a song your singer-songwriter friend has put up on Spotify. Maybe it only has 50 listens, so there are few other listeners to collaboratively filter it against. It also isn’t mentioned anywhere on the internet yet, so NLP models won’t pick it up. Luckily, raw audio models don’t discriminate between new tracks and popular tracks, so with their help, your friend’s song could end up in a Discover Weekly playlist alongside popular songs!

But how can we analyze raw audio data, which seems so abstract?

With convolutional neural networks!

Convolutional neural networks are the same technology used in facial recognition software. In Spotify’s case, they’ve been modified for use on audio data instead of pixels. Here’s an example of neural network architecture:

This particular neural network has four convolutional layers, seen as the thick bars on the left, and three dense layers, seen as the more narrow bars on the right. The inputs are time-frequency representations of audio frames, which are then concatenated, or linked together, to form the spectrogram.

The audio frames go through these convolutional layers, and after passing through the last one, you can see a “global temporal pooling” layer, which pools across the entire time axis, effectively computing statistics of the learned features across the time of the song.

After processing, the neural network spits out an understanding of the song, including characteristics like estimated time signature, key, mode, tempo, and loudness. Below is a plot of data for a 30-second snippet of “Around the World” by Daft Punk.

Ultimately, this reading of the song’s key characteristics allows Spotify to understand fundamental similarities between songs and therefore which users might enjoy them, based on their own listening history.

That covers the basics of the three major types of recommendation models feeding Spotify’s Recommendations Pipeline, and ultimately powering the Discover Weekly playlist!

___
I hope you’ll enjoy reading this article.

_

Peace out

How Spotify Discovery Algorithm Works was originally published in Prototypr on Medium, where people are continuing the conversation by highlighting and responding to this story.

Building Design with data

BookMyShow (Founded in 2007) has grown leaps and bounds and is now becoming the one stop shop for everything entertainment; offering it’s users content such as music, videos, podcasts and even holds its own concerts and live events.

BookMyShow recently underwent a complete redesign — the goal being to increase user conversions. In order to do this, we reduced the number of steps of booking a movie from 14 elaborate steps to just 7. We saw our conversions increase by 50%.

The Problem:

Even though we got it down to 7 steps, the process of booking a movie was still time consuming and tedious.

To plan for a show, users have to first decide which movie they want to watch. Post this decision, they have to choose the date and which cinema they would like to go to and the showtime for the movie. This process often requires some back and forth in order to settle on the ideal date, venue and time. They then have to choose the number of the seats and the availability of their desired seats. This long process can often be tedious when making ad-hoc plans.

User Stories:

In order to build realistic user stories, I surveyed the top 10 transactors of BookMyShow through Secret Society. These users were aged between 18 to 35, and go to the theatre at least once a week. The questions focused on their experience of booking a movie. The main takeaways were as follows:

1. Five users said they always book 2 tickets, so either they go with a friend, their better half or with a family member.
2. Eight users said they always go to their favourite cinema, so they were looking for the best movie available at that venue.
3. Five users said they usually go to the cinema at a specific time of the day during the week.
4. All of them said they prefer specific seats, so they would change cinemas or even the date to get the required seats.
5. What was interesting was that all of them had different seat preferences.
6. Nine users said they book tickets on the same day of the show.

Pain Points:

I created a few open-ended interview questions to understand the major pain points of my target audience. Some of the findings are below:

1. 8/10 users complained about not getting the seats of their choice after going through the entire process.
2. 4/10 users complained about the quantity selection screen to be irrelevant.
3. 6/10 users still complained that the process feels long.
4. Other complaints included the app’s slow speed or bugs resulting in errors.

Solution

It wouldn’t be fair to our users to simply include all the 7 steps on one screen and say, “Here you go! We solved it.” Instead we take one step and a time. We relied on data to validate every step we cut down, and eventually made it a 1–2 click booking.

So we started with series of experiments by inserting small components (kinda widget) on different screens.

Suggested Solution

1. Pre Selection of a Movie

We got data on our user’s movie-watching preferences and mapped each type of user in a specific bucket. Some users only watched english language movies, where as some only watched movies based on their rating. Based on their last transactions, genre selections, and overall browsing patterns we started preselecting the movie for the user. This took them directly to the showtimes page. Ofcourse, the user had an option to change the movie, on the same page itself. Here are some of the key takeaways were:

Here are some of the key point

1. 8/10 users ended up going to the same movie which was preselected for them.
2. Remaining complained that they couldn’t figure out how to change the movie from the showtime page.

2. Pre Selection of a cinema and quantity

Our data highlighted that 88% of users end up going to their favourite cinema. Our next step was to preselect the cinema and get the showtimes on the seat layout.

1. The quantity of seats that were pre-decided was based on the previous transaction of the user.

This experiment was crucial as we were cutting down 3 major steps.

Some of the key takeaways were:

1. 7/10 users changed the showtimes on the seat layout to check availability.
2. 10/10 didn’t change the quantity selection (Success!! :D).

3. The Final Showdown

After collecting all the data on the above experiments in the form of heat maps, last transactions, browsing patterns, user funnels etc., we gathered all the components which were successful on one single page.

This experiment was introduced as an overlay just for testing purposes, and didn’t hinder the current booking flow.

Testing

We ran a small experiment to see if our solution works well. So we tested it on 5% audience.

1. Some people appreciated the preselection done for them, and overall enjoyed this simplified booking process.
2. Since we rolled out this idea in different stages, the data we had on users were based on each specific step and wasn’t necessarily holistic enough to provide the combination of all the steps for the user.

While the steps we took before we implemented 1 click booking was a success, 1 click booking in itself wasn’t necessarily adapted by as many users as we’d like.

Success Points

Our next steps would be to detect user trends and patterns. With the help of deep learning and machine learning we can improve our recommendations engine and work on visual interactions to make this flow intuitive.

Our individual components are currently live on the mobile app and have helped increase user conversions by 28%.

___
I hope you’ll enjoy reading this article, It’ll be great
if you hit the clap button.

_
Kiran Shivlingkar an Senior Product designer @We Are BookMyShow.

_

Peace out

Facebook has become one of the most important thing in a person’s life. it keeps you connected with your friends and family. The recent announcement of Chatbot API from Facebook was crazy and currently is the most hyped thing in mobile and web industry, as a growing number of leading social messaging platforms introduced bot development capabilities.

Recently, I tried my hands on Techcrunch’s Messenger bot and the experience was flawless. It felt like I was chatting with the coolest tech geek. So, I thought why can’t we deep link all the apps inside Messenger. There are so many apps doing so many things, mostly the same things. We switch back and forth, but Messenger is the starting point and the final destination to make things happen. What if we could take care of everything within the Messenger itself? simple widgets like booking flights, calling an uber, ordering food, splitting bills, whatever you can think of you do with friends. Why don’t have a common connecting ground where each app could be activated inside messenger by giving a trigger (like in the image below ‘Amazon Wishlist” is a trigger which opens my saved Amazon products)

It is said that the human tendency to type or chat has evolved over the years. Cell owners between the age of 18 and 24 exchange an average of 109.5 messages in a normal day — that works out to more than 3,200 texts per month and the typing speed of an average person is about 44 wpm. The bottom line being that we’re fuc*king fast at chatting. So, now I can find my Amazon wishlist even faster by mere typing then opening up an app and searching for my Wishlist, copying the URL and pasting it back into the Messenger.

Users shall be able to save 3 hours every week with deep links, to do what they want within the Messenger without even having to switch to different apps. Cost to search, switch to other app, tap unnecessary buttons before doing what they actually wanted to do and come back to the Messenger takes up your 3 fu*cking mins. On an average, 3 users switch between apps in the session of 9 min, the frequency is 3/week, which totals up to 27 mins/week, which is equal to 14 hours/year.

___
I hope you’ll enjoy reading this article, It’ll be great
if you hit the ♥ button.

_
Kiran Shivlingkar an Interaction designer @Bookmyshow, Previously UI Design Lead at Ajency.in Goa.

Early morning before you even brush your teeth, you open an app to start your day. Mobile applications are pouring like anything in everyone’s life and each app is getting personalized everyday for more user engagement. Pixels are cheap, so many apps introduces a number of option to choose from, hoping that the user will ultimately find what he’s looking for by clicking through. this is a shotgun approach used mostly by the marketing people. the problem is that the user’s time and focus is very important, and by providing with so many options the user might get distracted from your product or content.

The image above is a screenshot of a popular app known for Mobile recharge. That’s the landing screen of the app. it suggests that humans are generally able to hold only 7 plus or minus 2 units of information in short-term memory. to make it clearer I tried the squint test. it’s simple I took the image and blurred it by 4px. The result, everything looks equally important, there is no information hierarchy also this app has 7 long scrolls, and there are so many icons and recommendations to tap on, that I’m more likely to close the app then utilizes the content.

It’s great to have options, but too many of them can frustrate and distract the user which can reduce conversion. The users might take different flows through your app, but their surfing is linear because they only look at one thing at a time. you can capture the clicks and the flow by the users and use it as a tool to personalize and experiment to increase user engagement. Get to know your user to trim down on the options, and focus their attention on your content, products and ads.

Context and Previous behavior pattern are the best information about users and what might they want to do next.

New visitor? They will try not following you until they’ve gotten to know you, so allow them to go through your flow a few more time before heavily increase the number of options.

Frequent visitor or commenter? Their loyalty makes them more likely by making the whole app personalized based on their past behavior.

The role of your landing screen and your content or product screen should be taken into consider. users might want to quickly navigate to something more specific, from your landing screen. Users who have directly landed on your content or product screen might want to engage with your landing page first and then will be able to take another action.

Streamline your app flow, and utilize personalization to direct the user to clearer and relevant next steps. You want the user to give an experience of a Instagram or a Facebook, and keep them clicking on next, for cool things.

Want to learn more?

If you’d like to become an expert in UX Design, Design Thinking, UI Design, or another related design topic, then consider to take an online UX course from the Interaction Design Foundation. For example, Design Thinking, Become a UX Designer from Scratch, Conducting Usability Testing or User Research — Methods and Best Practices. Good luck on your learning journey!

Thank you!

Follow : Twitter | Facebook | Dribbble

App Personalization was originally published in UsabilityGeek on Medium, where people are continuing the conversation by highlighting and responding to this story.

Animation for the sake of “cool” can often hurt conversions since it’s distracting, but not always.Using animation on sites can add a lot of value to a website when it comes to user experience. Unfortunately a lot of websites over use it by animating every element; by slowing down the browser so much that they don’t want to continue using the site. Or even by just not testing very well and breaking the entire site.

Here are some rules to follow when implementing animation into your digital designs:

1. Use loading sequences that keep your user engaged.

Animations can keep the user engaged even before the website fully loads. This keeps users from leaving too soon. Even a 1 second increase in load time can equal a 7% loss in conversions. Animation can hide this load time by visually occupying the user.

2. Animate based on where the user should focus

Complete the UI incrementally before the content is fully loaded. This keeps users interested during slower load times. Animation is achieved by the content cascading onto the page skeleton.

3. Keep Users from getting lost

Users risk of losing the context of what they are seeing if suddenly the web page changes. Animation can be used to make transitions more obvious, so it’s clear what happened between where the user started and ended up

The point of an animation is to help the user understand where they’re coming from and where they’re going to. Animations can create layers in an interface, when you slide from one element to another, the user remembers where the interface slid from, and if you take advantage of that memory correctly, you can make the interface slide back just as they would expect. Although it’s a simple, almost thoughtless transition, it can relieve frustration and build trust with the user.

Dribbble.com — Zee Young

Do’s and don’ts

Here are some do’s and don’ts when it comes to using animations on a website:

• DO: Provide a similar experience regardless of the device.
• DON’T: Confuse the user by not allowing them to go back from where they came from.
• DO: Provide instantly recognizable and easy-to-use navigation.
• DO: Let the user control their browsing experience.
• DON’T: Hindering a visitor’s ability to scan the screen.
• DO: Make the most important thing on the screen the focal point.
• DON’T: Make things bounce, just… never.

Hierarchy

Elements on the screen are arranged in layers, one sitting on top of the other. Regardless of the content type — background images, shapes, patterns, labels, paragraphs, buttons or icons, cards or any other UI element, by animating the order of their appearance, we are able to emphasize the importance of a specific element and direction the user’s focus.

For example, layout elements appear on screen with subtle movement or animating the opacity value, but the last element to appear is an icon. This suggests it is also the most important action on that specific screen (e.g. the “add” button on a favorites list, share action on profiles etc.).

Dribbble.com — kiran shivlingkar

Sometimes we want to bring login or onboarding screens to life just by adding simple animations to it. This way we make the user have a better impression of the brand and make the whole experience more fun and interesting.

Some examples would include parallax effect (image and text area while scrolling, gallery items, cards etc.), animating background patterns, transforming icons, making brand elements appear throughout the app or even animating a mascot, if there is one..

Dribbble.com — Alexandre Naud

User navigation and control

Sometimes all we need is to reveal a hidden “search” feature by slightly dropping it down and pulling it back under the header bar, in which case the user is aware of search appearing on “swipe down” gesture. The other option is to place hints inside the app which appear only the first time user comes across that specific element, such as onboarding tutorials or slightly animated arrow with short description pointing at the element it describes.

Conclusion

Animation is a very powerful ally to our digital design efforts. It used to be just a fancy addition to websites, and later apps.

We can do more than what we’ve ever been able to do before. There’s a lot of power at our fingertips, and we can make it really easy and fun for users to use our websites and applications.

But please, just keep it to a minimum, keep it running at 60 frames per second (butter smooth) and put it in the hands of your actual users on real world devices before assuming anything.

Want to learn more?

If you’d like to become an expert in UX Design, Design Thinking, UI Design, or another related design topic, then consider to take an online UX course from the Interaction Design Foundation. For example, Design Thinking, Become a UX Designer from Scratch, Conducting Usability Testing or User Research — Methods and Best Practices. Good luck on your learning journey!

UI animation in Website/App was originally published in UsabilityGeek on Medium, where people are continuing the conversation by highlighting and responding to this story.