Designing Cards for Media Entertainment
Exploring our approach to designing and portraying trends for seamless consumption
We humans are naturally drawn to entertainment, whether it’s a casual chat with a friend or an adrenaline-pumping activity like skydiving. To enhance people’s entertainment experiences, we explored ways to deliver captivating content. This journey led us to introduce widgets on our lockscreen, focusing on the most common form of entertainment: media entertainment.
Media entertainment encompasses a wide variety of topics, ranging from movies, television and radio shows, music, celebrity features, magazines, comics, to podcasts and numerous other related fields. Yet, within the sphere of creative media, the very essence of entertainment has consistently revolved around a central question:
What’s Hot and Trending?
The criteria for mapping what’s hot and trending is based on three key factors:
01. How topics become trends —
The key to a topic becoming a trend is the amount of interest it gets. This interest can come from various sources like current events or just because the topic is interesting to people. Trends are all about what’s catching people’s attention, and this initial interest is really important in making something a trend.
02. Discussion and opinion dynamics —
The more people talk and share their thoughts about a topic, the more important it becomes. When lots of discussions and opinions happen, it shows that the topic matters to many people. These talks can be debates, stories, or just people sharing what they think. All this talking gives life to a trend and makes it important in our conversations.
03. Influence of trends on media —
When a trend starts, the media often starts talking about it too. This shows how the media can adapt to what people are interested in. And when this happens, it can shape how stories are told and what gets the most attention in the media.
As these trends progressively start gaining significance, they become relevant to the entertainment enthusiasts. In this blog, we will explore our approach to design and present the information about these buzzing trends for effortless consumption.
Strategic and Iterative Process to Enhance Design Representation
Because we are involved in creating experiences for the entertainment industry, there is a significant focus on ensuring high-quality visual design. and thus, we started exploring and iterating on various modules to represent trends to pique user interest.
Starting with the What’s and How’s
In this initial phase, we started noting down what all things have conventionally been associated with entertainment and trends. How these trends are depicted in the realm of entertainment.
During this stage, we established the most effective methods for visualizing trends through card-based representations.
Coming down to the Why’s
Among the various options that we were exploring for representing the trends, the three that stood out the most were:
- Trend Cards
- Short Videos
- Sticky Notes
These bring us down to a very fundamental question
Why these three options were the best way of representation?
Let’s discover why we brought out these options and why they best present the trend:
01. Trend Cards | Bringing trends to life; capturing the buzz
Our trend cards go beyond news articles — they’re windows into buzzing trends that are stirring up discussions. These are essentially compact cards featuring the name of the trending topic accompanied by a supporting image. They serve to precisely capture the essence of that specific topic.
Usually, we notice that the liveliness of a topic becomes apparent when it’s surrounded by conversations and excitement. That electrifying and zinging feeling signifies its “hotness”. To capture the vibrancy and liveliness of these trends, our interface should be all about portraying the essence of the trend that’s capturing everyone’s attention.
Let’s dive into how this visual representation was finalised through multiple explorations.
At the very first, we began by deciding what information should be included within each card.
Post this, we started defining content on the card and where they would be placed on the card on the basis of importance and hierarchy.
Next, we proceeded to add colours and images into this layout, aiming to establish a clear visual design direction.
But at this point, we noticed that the cards looked too much like regular news articles and didn’t capture the excitement of the trending topics. So, we began to find ways to make the topic more lively and establish it as a popular trend.
Once we had settled on the card’s visual design, we took a step further to enhance the overall experience. This led us to add animated waves in a continuous ripple motion, which vividly conveyed the card’s liveliness.
After this, we moved on to our second card, short videos.
02. Short Videos | The power of effortless delight
Short videos are the epitome of easy and engaging content consumption. With their concise and crisp nature, they require minimal attention span while their swift pace enables absorbing more information in less time. Additionally, these videos are curated to each individual’s preferences, offering a highly personalised viewing experience.
These videos with their preview and title set a context of what they depict. The interface for these videos entice an individual to enter the realm and spend some time there consuming the trending video content.
Let’s see how the visual design was finalised for these.
Just like with the trend cards, we began by identifying the key content to highlight. In this case, the video takes the spotlight, so we kept other elements on the card to a minimum.
After this, we started placing content and understand how to represent them in accordance to hierarchy.
Then we started exploring the design for the visuals of these cards. Here’s how it went:
Once the design was finalized, we refrained from adding any animations or interactions, ensuring that the video remained the sole focus of attention.
And, now finally we come down to our very final card, the sticky notes.
03. Sticky Notes | Beyond fleeting comments
In a world where personal opinions shape trends, brief comments might lack excitement. For a hot and buzzing trend, the opinions surrounding it should be equally electrifying. And there emerges the idea of ‘sticky notes’, that convey significance in a delightful and engaging way. We’ve always associated sticky notes with reminders, and that’s precisely why we’ve replace comments with these — to enhance the user experience, making it more meaningful and memorable.
To know more about how Sticky Notes replaced comments, you must check these out!
These could be multiple notes on different trends that will grab the attention of an individual and invite them to deep dive to explore further. Accompanied by GIFs, these stickies not only provide context but also entice more individuals to join in and explore the trends themselves.
Let’s jump into the last bit of exploration we did for this project.
Similar to our previous steps, we initiated this exploration by establishing the content to be featured on the card.
Hereafter, we started the similar process of arranging information on the basis of prior hierarchy.
And this process was followed by the extensive visual design exploration. This is how it looked:
And with this, we defined the interaction of vertical swiping for all the stickies inside the card.
With this, we come to the end of this intensive iterations and explorations.
Reflecting on the Experience
While designing the overall experience had its own set of challenges, it was in the aspect of visuals that we encountered the most significant hurdles. My most valuable takeaway from this endeavor is that achieving effective visual design goes beyond mere application of colors and images to an interface. There are certain things, that always comes to help when we start designing visuals:
- Visual Hierarchy: Establishing a clear visual hierarchy enhances user experience by making information easy to understand. It helps users identify content based on priority, from most to least important.
- Spacing and Padding: This is a fundamental principle in UI design but holds utmost significance. The proximity of information organises content, providing context and aiding better comprehension.
- User Delight: Lastly, but certainly not least, the utmost priority is visual design’s ability to evoke positive emotions. We, as human, enjoy feeling rewarded, and small, delightful details in digital experiences greatly improve the overall user journey.
In conclusion, crafting this experience presented a unique challenge, considering the omnipresence of trends across diverse platforms today. Our primary objective was to ensure user satisfaction, aiming for a seamless journey that not only drew users into the realms of both hot and trending topics but also engaged them deeply, fostering meaningful interactions.
