Building a community platform for everyone.

Story of creating a platform where people can interact in various ways, and anyone can run their community efficiently. This case study will take you through all the design processes, decisions, problems we faced on the way, and how we tried to solve those. This is one of the most complex apps that we’ve built so far. Many great ideas didn’t make through for the first push since we were playing on time.Let’s start???? Cover????Timeline: Total 8 weeks including research and design ????Team: Himanshu(me) (PD), Abhinav (PD), Harsha(PM). Background: The goal of this product was to make it easy for everyone to become part of communities or manage their own community. Design the platform in a way that can attract prominent creators and Companies, allowing them to utilize this platform for various purposes. Let’s set a few terms that will be used in this project: Terms used in the projectCurrent app We already had an existing app that allowed users to create their scene, talk freely and engage with listeners in the chat section.Firstly I wanted to write this as a redesign case study, but there are just so many changes, I ended up writing this one from scratch. Previous appWith our major redesign, we wanted to go global and expand our target audience. So the first step we took was to shift into the white mode for the initial release (we know that a lot of people love dark, but we were going for a bigger audience this time, dark mode will make a comeback????).The second thing we wanted was to make everything as simple as possible. And I’ll tell you how we transformed ???? this into ????this. https://medium.com/media/2dfc5a31cbd5fad6c0ad1e735cb54c62/hrefThis is the final product that we’ll be releasing (some features might get delayed because of the dev team's bandwidth). With this version, we tried to solve all the problems we had previously, making the platform appealing to a range of people and allowing them to use the platform in various ways (hosting events, video calls, playing games, late-night gossips, meeting new people/ communities, watching a movie together and whatnot) ✍PROCESS With V2(version 2), we decided to expand our target user base, so we researched various social platforms to know what keeps users hooked. We conducted user research with people on our app to learn what things aren’t working for them. Figuring out how to make communities discoverable in better ways. What will encourage or start community engagement? Making everything simple, be it signing up, joining Scene/ creating their own, etc. Designing product to give users maximum value with minimum effort to slowly kick-in network effect. ????RESEARCH We started by studying who we are going after. Competitors who are doing best in this field. Some of them are Discord, Guilded, and Clubhouse.The goal of research: Why users prefer them above us. What are the things that keep them engaged? How these platforms hold their creator so that it’s hard for them to shift to a new platform. Studying our competitorsStudying and holding interviews with people from existing community apps and our app gave us many insights. Some common issues users face from our competitors were (from discord and guilded): New users thought it’s very hard to manage servers. They don’t know how most of the features work. Platforms don’t promote server discoverability. Organizing roles and channels is hard. The design seems very new to them, takes time to figure out how everything works. Users who’ve putten time to create their server feel like it’s a lot of work to go somewhere else. User interview (converted from video to text)After concluding our primary and secondary research, we decided the major things we want to focus on while our redesign process: Platform redesign targetsThat being said, we can start with design finally ????! ????DESIGN Mapping out user flow took a lot of time because we needed to figure out how everything will connect, users skipping over screens, browsing while connected, and many more. Flows were so complex that making it as one would’ve made it even messier, so we decided to break those down, which helped us connect branches between different flows effectively. In house app flowHaving the flow broken down also helped us to plan upcoming features in a better way. A simplified user flow to give an idea about how major flows are connected. Simplified version????Onboarding To start with: Since we didn’t find any good illustration set that everyone on the team liked, we didn’t want to hire someone just for illustration in this early stage. So we settled on using emojis???? to start it (designs turned out better than we expected, I’m not sure how our boss agreed with the usage of emojis). We are giving users google and email as sign-up options. The plan was just to provide a sign-up option with google to resolve the problem of trolls who ruin the experience for other users. As second-level protection, we are taking phone numbers (not to send

Building a community platform for everyone.

Story of creating a platform where people can interact in various ways, and anyone can run their community efficiently.

This case study will take you through all the design processes, decisions, problems we faced on the way, and how we tried to solve those. This is one of the most complex apps that we’ve built so far. Many great ideas didn’t make through for the first push since we were playing on time.
Let’s start????

Cover

????Timeline: Total 8 weeks including research and design

????Team: Himanshu(me) (PD), Abhinav (PD), Harsha(PM).

Background:

The goal of this product was to make it easy for everyone to become part of communities or manage their own community.
Design the platform in a way that can attract prominent creators and Companies, allowing them to utilize this platform for various purposes.

Let’s set a few terms that will be used in this project:

Terms used in the project

Current app

We already had an existing app that allowed users to create their scene, talk freely and engage with listeners in the chat section.
Firstly I wanted to write this as a redesign case study, but there are just so many changes, I ended up writing this one from scratch.

Previous app

With our major redesign, we wanted to go global and expand our target audience. So the first step we took was to shift into the white mode for the initial release (we know that a lot of people love dark, but we were going for a bigger audience this time, dark mode will make a comeback????).
The second thing we wanted was to make everything as simple as possible.

And I’ll tell you how we transformed ???? this into ????this.

https://medium.com/media/2dfc5a31cbd5fad6c0ad1e735cb54c62/href

This is the final product that we’ll be releasing (some features might get delayed because of the dev team's bandwidth).

With this version, we tried to solve all the problems we had previously, making the platform appealing to a range of people and allowing them to use the platform in various ways (hosting events, video calls, playing games, late-night gossips, meeting new people/ communities, watching a movie together and whatnot)

✍PROCESS

  • With V2(version 2), we decided to expand our target user base, so we researched various social platforms to know what keeps users hooked.
  • We conducted user research with people on our app to learn what things aren’t working for them.
  • Figuring out how to make communities discoverable in better ways.
  • What will encourage or start community engagement?
  • Making everything simple, be it signing up, joining Scene/ creating their own, etc.
  • Designing product to give users maximum value with minimum effort to slowly kick-in network effect.

????RESEARCH

We started by studying who we are going after. Competitors who are doing best in this field. Some of them are Discord, Guilded, and Clubhouse.
The goal of research:

  1. Why users prefer them above us.
  2. What are the things that keep them engaged?
  3. How these platforms hold their creator so that it’s hard for them to shift to a new platform.
Studying our competitors

Studying and holding interviews with people from existing community apps and our app gave us many insights.

Some common issues users face from our competitors were (from discord and guilded):

New users thought it’s very hard to manage servers.
They don’t know how most of the features work.
Platforms don’t promote server discoverability.
Organizing roles and channels is hard.
The design seems very new to them, takes time to figure out how everything works.
Users who’ve putten time to create their server feel like it’s a lot of work to go somewhere else.
User interview (converted from video to text)

After concluding our primary and secondary research, we decided the major things we want to focus on while our redesign process:

Platform redesign targets

That being said, we can start with design finally ????!

????DESIGN

Mapping out user flow took a lot of time because we needed to figure out how everything will connect, users skipping over screens, browsing while connected, and many more. Flows were so complex that making it as one would’ve made it even messier, so we decided to break those down, which helped us connect branches between different flows effectively.

In house app flow

Having the flow broken down also helped us to plan upcoming features in a better way.

A simplified user flow to give an idea about how major flows are connected.

Simplified version

????Onboarding

To start with: Since we didn’t find any good illustration set that everyone on the team liked, we didn’t want to hire someone just for illustration in this early stage. So we settled on using emojis???? to start it (designs turned out better than we expected, I’m not sure how our boss agreed with the usage of emojis).

  • We are giving users google and email as sign-up options. The plan was just to provide a sign-up option with google to resolve the problem of trolls who ruin the experience for other users.
  • As second-level protection, we are taking phone numbers (not to send spam) to verify users, removing multiple entry doors to get a fake account and enter again after getting banned.
  • We are showing interactive cards while user onboarding (the initial idea was to show screens from the app) because we wanted to show users what this platform has to offer and let users explore and experience the app by themselves so that the wow factor is there.
  • Later we scarped the option of choosing interests to make the onboarding process as short as possible. Users will see a pop-up of picking interest after their 3rd opening of the app(after signup). If dismissed at that time, they will always have an option to add or modify their interests from the profile section (When a user syncs their contact, we will show their friends' activities from various Scenes to start with).

Landing Screens

New user lands on Explore screen. Here we show Scenes depending upon the interests they picked while onboarding.

Random: We wanted to show Scenes getting refreshed live based on active participants.

A big problem that struck was people keep joining and leaving channels all the time. If refreshed feed that quickly, the Scene card users were about to tap will be gone even before they tap on it.

*We scrapped this idea*.

Scene Card

The Scene card will help the majority of users discover new Scenes. Scenes are what everything comes down to; hence, it was necessary to design this card to give users the best set of information to make quick decisions.

We did countless iteration to figure out what could be the best option for them.

Exploring card types

Something we figured out in our research is users don’t create quality Scenes or event covers when they are starting. This was because of various reasons such as:

Creating covers is too much of an effort.
Since this is a new platform, they aren’t convinced that they will get good visibility.
Creators don’t think that putting up well-designed covers will attract more participants.

Considering this, we started exploring ways to take the majority of visual control from creators, making the app feel better to new users (new users watching terrible covers on the main screen is the last thing we wanted).

  • The first idea we explored was giving creators some handpicked presets for their cover image. To use custom covers, they need to reach a certain member count, which will help us to ensure that this particular creator can grow their community and has something good to offer, so they are willing to put effort into content and might as well do the same for the cover image (It might have encouraged creators them to reach a particular milestone on the other side this could’ve made many new emerging creators feel bad because we restricted some features from them).
  • The second idea we had was to allow everyone to upload covers but to restrict visibility with other elements on top of it. This might sound good what it resulted in making those cards look even worse by adding more clustered.
The card looks clustered when taken visual control.

Looks bad, right? So we concluded that let creators feel the need for a better cover by promoting Scene’s having nice-looking covers. Plus, leaving that space empty to design whatever they want (we are just showing participants on the bottom right ).

Finalized Scene cards

????Explore Page

We took an intentional decision to use big, bold headings for the app instead of going with the traditional look (my boss loved big headings and wanted it in our app, I was a bit skeptical???? when starting with heavy headings, but we somehow managed to make it work).

Trying designs for explore page.
  • Initially, we focused on being an audio exclusive platform; hence, we tried how our screen will look to people when we only focus on events.
  • Ideas included making coracles of each category like Netflix/ Spotify, helping people easily browse through multiple Scenes easily and fast.
  • Later on, we concluded that since we were building to be more than just an audio platform, why to focus on feed being exclusive to events.
  • Users will now be able to see multiple activities that are possible in a scene, such as a creator’s updating shop item, hot thread in the forum section, the live game going on, scheduled events and scenes, etc.
Final explore section.

Explore will show Scenes, forums, shop items, etc., based on the interest you picked while onboarding, plus showing content that your friends are interacting with along with trending stuff.

????My Scene/ Feed

My scenes are the section where you stay updated with the Scenes you’ve joined. Even with this page, our initial focus was on events.

If we would’ve done event-focused screens, then this is how we planned for showing the user’s home page. However, we decided not to show covers of Scenes that users have joined because they’re already part of it and don’t need the same data they needed while discovering it.

Home screen iterations.

In the end, we finalized the design for “My Scenes” that will show events from your Scenes on the top, set reminders, or join directly.

Activities such as Forum, Shop, etc., from the Scenes you’ve joined, will be shown below the event section.

Final home scre

All the different channels activities are arranged into similarly structured cards providing information about what type of activity it is. Allowing users to interact with posts by voting, commenting, or sharing them.

Friends Activities:

“Rashmi, Himanshu, and 4 others liked your post” those type of nudges grabs your attention, don’t they? There’s a reason Facebook, Instagram, Linked In, Twitter, etc., do this. Having those acquainted names associated with certain information makes you wonder why my friends were interested in this and give you a push to have a look.

Building on this, we tried what all types of slight nudges could be possible that will get user attention and increase their chances of reacting to a post.

????Scene Navigator

Since we were doing a feed page and whole exploration thing, we couldn’t fit the Scene (Community) switcher vertically like discord does because it will cause different card structures on explore section and My Scenes Screen. So After plenty of iteration, we decided to go with a switcher on the top that can be scrolled vertically.

Scene navigator

????Notification

Notification is a very crucial part of any social platform. A well-designed notification is a great way to keep users hooked and making them come back continuously.

We designed a notification panel for the previous app, too. Still, it wasn’t on the priority list of development because there weren’t many types of notifications to show back then.

Talking about the current app now, there are so many things that users need to stay updated with, so we designed a simple but well-functioning notification panel to kick off the first release.

????Search

Search function

We’ve chosen to put the granular search feature on hold because

  • Every activity(Forum, shop, events, etc.) in the end is part of a Scene that is already a filter option.
  • We will be observing user flows to see how deep a user goes after presenting a search query ( do users need to go deep inside a scene searching for a particular thing such as forum topic, shop, article, etc.). Depending upon that, we’ll decide what the most searched activities other than events, scenes, and users are.

????Messages

In-app messaging was a must-have feature with this version because we don’t want users to leave our app to message their friends, share events, shop items, etc. (in the previous app, if users want to share an event, they need to share a link with some other messaging platform).

Having an inbuilt messaging system allowed us to be more flexible about how we present data to users. For example, instead of sending an event link on WhatsApp or other platforms, you’ll have a join button with an event card in our app. Plus many more features such as

  • People sharing Scenes
  • Sharing forum topics, events, shop items, etc
  • Joining friends directly
In-app messaging.

And yes, if showing your “online” status is pulling unwanted attention from your friends, we respect your privacy, and hence we’ve given users a toggle to turn off their activity any time from the settings.

????Profile

We totally redesigned the profile section by taking user feedback from the previous app. Some of the issues were:

  • As users listen to people talking on the stage, there was no way to define the speaker's credibility. Thus, resulting in people with no proper knowledge passing it on and creating noise????‍♂️.
  • For this, some of the ideas that we came up with to help users judge the credibility of speaker(s) were: the feature of commenting on profile, rating system, social account integration, showing more information about their job/where and how they work.
  • But considering how less time we have to complete this project, we decided to table those ideas but allow users to tag their socials so that people can have a look to know whether the people they are listening to are experienced enough or not.

INSIDE A SCENE

This space is the MVP of the app, where users will be spending most of their time, and hence we wanted to make it the best experience for everyone????, be it for creators who are here to create their Scene and grow their audience or the users who are here to engage with new people.

One of the main targets of our design was to make things around community engagement and interaction.

????Scene Creation

Other community-building platforms in the market don’t offer reasonable community appearance control.

  • Making various communities with different vibes is tricky because every type of Scene looked similar until now. So we wanted creators to customize their space and set the tone/feeling of their space.
  • We explored multiple options as to which places might be the best to define community ascent without being too bold, resulting in various communities looking so different that it might feel like they are not on the same app.
  • We noticed if we put custom ascent on buttons, it might make some CTA either hard to read or in red color, which can confuse the user.
  • Even though we wanted creators to customize communities, we didn’t want to give them complete control, which can result in people using bad covers???? with wrong accent colors, making it a bad visual experience for our users.

So we decided to put dark grey color in CTA’s in settings level screens or places visible just to Hosts or mods (so that they don’t mess up main settings like deleting categories or channels by mistake because their ascent makes it hard to read core actions).

????Channel Navigation

When users are inside a Scene, they can do a left swipe(or tap on the hamburger icon)to access channels.

We were offering various channel types that creators can use ( I’ll cover that in a bit), which was easy to fit in, but the challenge was how do we use Scene ascent in this place. So we went into a loop of exploring multiple iterations with colors and pattern placement.

If colors are done in the wrong way, not just for the host, but even normal users will struggle because these screens will be visible to everyone????. This overlay is what helps users to navigate inside a Scene.

We decided to have minimal ascent in the end because we wanted to minimize the effect of badly picked colors.

We decided to show icons of respective channel types in front of them to give users information about what type of channel they will join.

Participants on stage are shown along with the channel name instead of the event because if we compare, the average length of the channel name will usually be smaller than the event name.

????Channel Types

This was one of the main features we wanted to capitalize upon and hence did extensive research before finalizing what we should go forward with for the first release.

Offering various channel types was one of the ways to give community creation/ customization powers to creators. Types of changes we finalized for the initial release are:

Calendar, Shop, Announcement, Text, Voice, Forum, Media/ Resources.

Creating channel inside Scene

????Stage

The stage is one of our core functionality, and we wanted it to be the best amongst any other app has to offer.

All the top social voice apps allow you to either speak in a conversation or listen to it. However, if you are a participant, you can’t interact with speakers (mods have to give you permission) or other listeners.

We had chat functionality with a voice feature in the previous app. So we started out by keeping the same button format as the previous app and played with the background.

Even though we liked the solid background colors, but we couldn’t make it through the idea stage because managing solid colors in other parts of that scene, including the settings panel (to keep it consistent), would’ve taken time in terms of design as well as development (if you think we should have this ping me on Twitter and I’ll pitch this idea again).

Because of the time we had, we used slight accent colors along with patterns. This time we also rearranged stage buttons because of the variety of functions we were going to offer (making it easier for us to fit in new things we design in the future).

✨On Stage Features

After conducting research on various communities (online and offline) to figure out what’s the common reason that spaces die down (because that’s what we were trying to avoid):

People get bored with the same set of people after a while (normal human tendency, they starve for dopamine hits which usually comes from new experiences).

We tried to solve this by giving multiple types of interaction forms so that people can be engaged even when they aren’t talking. To increase user engagement ( e.g., amongst hosts and speakers), we decided to introduce interactive features for voice channels because most of the active engagement occurs over there. We will add and improve features depending upon the user's feedback.

All these features had different flows of their own. So I’ll cover those in the next article because if you’ve made it this far, you know this one has gotten too long. So the next article will be covering a lot of interesting.

And that’s a wrap for now. Thank you for your time ❤

????SCOPE OF WORK

Since this was V1 and we delayed a lot of features because of time constraints. Now that MVP is ready, we’ll be going back to exploring benched ideas again.

Some more things that we’ll be working on are:

  • Introduce intuitive and delightful micro-interactions.
  • Refine notification panel.
  • Optimize for small screens.
  • Having presets while creating communities.

Once the beta is out, we’ll closely observe user behavior throughout the app to see what’s working and what isn’t.

Consider this: you are connected to a stage, and while being connected, you want to have a look forum channel. Once in the forum channel, how do you find out at which stage you were connected to (especially if a Scene has 50+ channels)?. Conclusion This and many problems that we enjoyed solving will be covered in the next article, so don’t forget to follow me on medium.

????LEARNINGS

  • Don’t tell your devs to “can you do this.” Talk to them like they are part of your team, not as someone who is working for you. I read this thing somewhere on Twitter. Once I tried this with my team, Damm! I saw the changes around me.
  • If you are building a complex product, it’s necessary to maintain consistency and map everything out before starting. Last-minute changes are super hard.
  • Your product needs to keep evolving, create the first built, push it and make it better depending on user feedback.

In the end: this project was super tedious, but I enjoyed working on it and learned a lot.

Liked my work? Let’s connect on Linkedin ????


Building a community platform for everyone. was originally published in Muzli - Design Inspiration on Medium, where people are continuing the conversation by highlighting and responding to this story.