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.
🕤Timeline: Total 8 weeks including research and design
👥Team: Himanshu(me) (PD), Abhinav(PD), Harsha(PM).
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🤩
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:
🔒Edit 28–8–21: It’s great if you’ve read this case study before this date because I’m asked to put down some content from this case study (upcoming competitive segment). Request full content at Linkedin.
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.
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.
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:
- 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 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.
After concluding our primary and secondary research, we decided the major things we want to focus on while our redesign process:
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.
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.
📲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.
- 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.
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.
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).
🧭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).
- 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 focus on feed being exclusive to events.
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.
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
So After plenty of iteration, we decided to go with a switcher on the top that can be scrolled vertically.
🔔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
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).
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:
- 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.
- 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 they
🧾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 show icons of respective channel types in front of them to give users information about what type of channel they will join.
🎉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.
🎤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.
✨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):
, 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 ❤
(🤯If you liked this project then you can give up to 50 claps👏 )
🔭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 👀
