The Journey of Vision to Visuals of Live Buzz

How to go about crafting your product vision, defining digital wireframes and perfecting the final visuals

From Ideas to Interfaces

As a product designer working on a project, where you have a very clear picture of the user journey, the app’s vision, and the Information Architecture of the app, is it very easy to translate it into wireframes and final UI? Well, my answer is a definite “NO”. A good designer should know multiple ways to manifest the same vision into entirely different wireframes. The question then becomes, which one is the best fit for the application you are designing for?

In this blog, we will discuss about:

1. Getting Started with Wireframing: Overcoming the challenges of starting wireframing for an app from scratch and effective approaches
2. Essential Tips for Wireframing Best Practices
3. Exploring Feeds: Types and Step-by-Step Guide to Creating One from Scratch
4. Atomic Units: Definition, Structure, and Design Principles.
5. Creating Final Visual Wireframes: Bringing it all together into a cohesive design

The story till now

Any design project starts with ideas and then translates into a vision. We have spoken in depth about this in the blog linked below. If you want to understand the process of how to start a project, the problems faced, how to contribute more in brainstorming sessions, mastering stakeholder communication, and how we finally solidify the vision, feel free to read this before starting this one.

What’s the ‘Buzz’ on Roposo

In a nutshell, the vision of our project, which we call “Live Buzz,” is to:

1. Create a platform where users can access information about a particular buzzing topic
2. Offer this information in various formats such as live shows with hosts discussing the topic, short videos for those preferring concise content, or articles for readers seeking in-depth coverage
3. Ensure users can easily find what they are looking for and feel free to express their opinions

For easier comprehension, let’s take Taylor Swift as a buzzing topic:

How would a Live Buzz feed look for her?

The question now is, how do we assemble this for users in a way that is not overwhelming and caters to all types of users? Let’s start putting the pieces together. It’s time to delve into the user journey after that!

Starting with no constraints

The next step is to start creating wireframes. Wireframes help us visualise the structure of the product we are trying to build, structure the user interfaces, and communicate our vision better to all stakeholders.

At the initial stage of my career, I used to start creating wireframes directly on my laptop, thinking it was easy and helpful for conversion into UI. I didn’t have the habit of sketching things out. That’s when my manager ~Swapnil advised me:

1. Believe it or not, the first few ideas that you put down will not always be that great. Get them out and then push yourself to think more.
2. The more time you spend on a wireframe, the more attached you become to it. Hence, your initial interactions should be quick and rough.
3. It doesn’t matter how fast you are on your system; you can’t be faster than sketching on paper.
4. It’s best to start designing on a tool once we have clarity on what we want to create.

These tips have helped me think beyond what we see every day and increased my pace of working!

While designing Live Buzz, I sketched down countless ideas, from which three ideas made it to digital wireframes.

Initial visual drafts; no wireframe is flawless. Combine elements that work best for a perfect experience!

As the experience of our live show was new and unfamiliar to users, it required time to grow on them and for them to understand and use it seamlessly. Keeping this in mind, we aimed for simplicity and familiarity. Hence, the best-suited flow for the user at the beginning would be option three, and that’s what we proceeded with.

If you’re not aware of the unique universe we envisioned for a live show experience, you can get started with it in this blog link.

Defining the next era of Live Show experiences

Let’s talk a little about feeds in general

Feeds are UI patterns that facilitate the sharing and promotion of content among users. They are ideal for managing and displaying dynamic, ever-changing information.

Feeds typically present items in a list format, ordered by criteria such as time, popularity, frequency, age, or relevance. Few very common feed types are:

1. Chronological Feed: Displays content in the order it was posted. Example : Twitter’s timeline, where tweets appear in the order they were posted.
2. Algorithmic Feed: Uses algorithms to personalise content based on user preferences, interactions, and relevance. Example : Netflix’s personalized recommendations, tailored based on your viewing history and preferences.
3. Topic-based Feed: Organises content by specific topics or categories, allowing users to explore content based on their interests. Example : Example: Reddit’s subReddit feeds, organising content into categories like technology, gaming, or news.
4. Activity Feed: Shows users’ actions, such as likes, comments, and shares, providing real-time updates on user activity within a platform. Example : Facebook’s news feed, showing likes, comments, and shares from friends and pages you follow.
5. Aggregated Feed: Gathers content from multiple sources or users into a single feed, providing a comprehensive view of related information. Example: Google News, aggregating news articles from various sources into a single feed based on your interests.

If you want to learn about feeds in-depth, one amazing resource that I came across while studying feed patterns is this.

Activity Feeds: Basics and Best Practices Lesson | Uxcel

Atomic unit of the feed

As we mentioned earlier, any feed is essentially a list of content. Each piece of content has a defined structure that repeats with minor changes, helping users become familiar with it. This repeating unit is called the atomic unit of the feed. Let’s delve deeper into this concept by looking at examples from a few popular apps that we are all familiar with.

Atomic unit of some popular products

Now as we understand atomic unit better, let’s create the atomic unit of our feed. Let’s start with listing all the content types that we will be catering to and all the meta data required for each of these content type.

Final UI of the Atomic Unit

Overall visual identity of Live Buzz

Now that we have designed the base elements of the feed, let’s analyse what we have so far. We have a feed of heterogeneous content arranged one after another, centred around a single buzzing topic. This feed is designed for easy consumption and requires minimal input from users.

With the structure of the feed put together, we came across a few pain points in the overall design. We need a few elements to tie the feed together and help users better understand it.

With that we have our live Buzz Ready. What next?

The action we want to promote in the step back is clear. We have a vast variety of Live Buzz pages covering different trending topics. We need users to choose the topic they’re interested in, enter, and consume the content related to it. Is that all? Well, that’s the obvious and initial thought.

However, if you spend a little more time with the problem, you’ll realise: what if users don’t want to make that decision? Then what? If they don’t make a choice, we don’t show them anything. And what if they’re here for our core proposition, Live shows? Is that the only way for them to engage?

With this, we categorise our users into three groups:

1. Decide and then consume — Users who know what topics they like can browse a list of topics and choose one easily. They are not overwhelmed by decision-making.
2. Content-specific users — These users are interested in live shows. They want to quickly find and watch live conversations without much browsing.
3. Just here to consume — Users who are not interested in making decisions. They prefer to be entertained and may skip browsing topics. For them, content should be engaging from the start.

With these three broad categories, we started designing out home feed. With our atomic unit designed it was much easier to put together the home feed.

With that we have the final flows and designs ready for our product!

Final User Interface of the key screens

Here is a prototype link for you to play around and experience the fine designs.

Live Buzz | ProtoPie Cloud

Key takeaways in the process

In this journey, we have covered essential aspects of product design, from translating vision into wireframes to mastering user experience principles and understanding feed patterns. Few pointers to keep in mind:

1. Vision to Wireframes: Experiment with various approaches to translate your vision into wireframes, then refine based on the best one.
2. Be aware of existing solutions: Understanding different feed types accelerated the design process in this project.
3. When unsure, simplicity wins: For complex products, starting with a simple design allows for easier building and innovation.
4. Begin design work once your goals are clear: It’s ideal to start using design tools once you have a clear vision of what you want to create.

Final words of wisdom 😇

This particular project took a while to figure out what the ideal experience should be. I know upon reflection, you might feel that the final answer was just a simple feed! This should have been my first exploration. Maybe it was, maybe it wasn’t. But what I genuinely feel is that

If we stop imagining and start replicating what is tried and tested, then who in the world will be creating unseen things? You should know when to break the wheel and when to stick, because at the end of the day, it’s what’s best for our users. ✨