Improving UX of Shuru App (a location-based social media app)

In this case study, I am going to share my journey of redesigning and enhancing the Shuru app experience🎭🌈

📍Context

I joined a startup company named- ‘Shuru’ where I got the opportunity to improve the user experience of their app. I learned a lot from the brainstorming and design decisions taken based on iterations.

What is Shuru?

This App is currently Live

Shuru is a location-based social media app that connects you with the people, businesses, and services in your city. People can participate in the discussion, and question/answers, and list their business and products on the Shuru app to grow their business and income in their area.

As an individual designer, I focused on optimising the UX to drive conversions, resulting in a 40%📈 increase in the creation of user accounts.

Problem Statement 1:

⬇️ Low user engagement on the Shuru App Homepage

Let’s first have a quick look at the old Homepage Design. Some UX flaws are highlighted below:

Some highlighted UX flaws on the Homepage

From here I started observing and using the app as a user. I noted down a few UX flaws on the Homepage and discussed them with the team.

• No showcasing of the brand logo- being a startup, branding is a must
• What if the location is a long string- then it may hinder the visual hierarchy
• Audio player looks boring- visual improvement of the audio player design to increase clickability
• Feed post not engaging- The UX design of the Post could improve

We had a lot of discussions on the above points and did iterations based on feedback received from users as well as team members.

✍🏻 Solution- Part 1: Homepage Header

In the beginning, the Homepage header had a Brand name with a share icon, a location name (since it’s a location-based app), a wide search bar and post feed and how to use app guide link. Being a new social app, there were requirements to keep some features at the top of the Homepage.

Requirements to add:

1. Profile
2. Settings
3. Go Live
4. Create meetings
5. Call link (a link feature- where users could audio/video call without sharing numbers)
6. My Calls (list of all call logs)

We prioritised and deprioritised some requirements based on relevancy with the help of secondary research. Observed how other app’s homepage headers are designed with multiple features to show.

Before and After of Homepage Header

✍🏻 Solution- Part 2: Homepage Feed post

For the Homepage feed post, I tested with approx. 10 users and asked them to scroll through the feeds, some of them were unconsciously scrolling without looking at the content and hardly 1 person clicked on the Audio media player. I observed that users are more likely to read or listen to feeds if the images/video get their attention.

According to the requirements, include Comment, Like, Share and Call counts to encourage users to engage with the post. Did a lot of iterations for the right visual and UX of the feed post.

Before and After of Homepage Feed post

💁🏻‍♀️ A feed should be adaptable for all the edge cases. Cases like when the user only posted 1 image with no text, multiple images/videos etc.

All edge cases of Feed posts

🥁 Final showcasing of the Homepage

Home prototype

Problem Statement 2:

💪 Improve Live Streaming UX

Let us first analyse the previous Go Live feature UX and understand the main problem context.

Highlighted UX flaws of Live feature

Previous design was focused on

• Showcasing of Live participants in the background so that someone could easily find people attending Live Show
• Ability to switch both minimized and maximized screen
• Multiple sharing CTAs increase the chances of the Live being shared
• Privilege for less educated people to easily use the Audio and Camera features without trouble.
• Invite people an option to quickly invite the Shuru App users
• The host having the privilege to allow permissions to the viewers

🎯 Updated Goals

• Increase engagement- Make the Live experience more engaging by introducing Chats, Product Catalog, Gamification and stickers.
• Keep up Communication- Communication is the most essential part of increasing engagement. Chats (to be introduced) where people could participate in sharing thoughts and knowledge.
• Allow people to explore- By having games in the Live Show, one can explore the fun experience of playing with some people nearby and with friends.
• Maximalist UI yet premium- Since we were planning to introduce a lot of features to the Live Show. Putting everything together could make the screen look cluttered and not easy to understand. (Figure out the right standard)
• Easy to use Live UI features- We are focusing audiences from a diverse backgrounds, so the UI should be easy to understand and less cluttered as compared to other Live Shows
• Let Host feel proud- The host conducting Live features biggest achievement when his/her audience participates and interacts back
• Make people share more- Apart from keeping up people's engagement, it is also essential to make users share or invite others

👥 Our Target Audience

People of age group : 20 – 40 years

Mostly for people living in tier-2 and tier-3 cities where people don’t have knowledge about using an app efficiently.

Types of Hosts in Live

1. Businessman
2. Event Manager
3. Priest
4. Influencer
5. Teacher

Referring to some Live shows featured app

To get a clear idea about the Live show feature in an app, we referred to some apps having the same. Downloaded and experienced live shows in apps like Instagram, Facebook, Uplive, LiveMe, Bigo Live, Eleolo, etc. Considering the perspectives of hosts as well as the audience.

Some references

Analysed some of the common features of Live apps through Competitive analysis. Found that all of them had Live chat as common for user engagement. Most Live apps have a record feature for host. And additional features like Gift, Rewards, Reactions, Games are seen in niche Live Apps.

Competitive Analysis of some live featured Apps

Considering the results of analysis, finalised the inclusion of Live chat, participants permission, reactions, share live as they are the most common features provided in a Live show of the above apps.

Also added a feature called data saver since the live will happen on browser. This allows user to save battery from drainage.

👩🏻‍💻 Final designs

With every iteration, we identified possible layouts and user behaviour on their app. With more brainstorming, the wireframes made even more sense to the overall experience in a Live show.

⬇️ Here are some edge cases for mobile experience -

Some edge cases of ongoing Live show

⏳ Wait, it’s not complete yet!

What would happen if user rotates and switches to Landscape mode to view full screen?

If the user rotates the phone 90 degrees to view the full screen, they should be able to see the Live show along with the ongoing chats. Keeping visual hierarchy in mind, we placed the elements in a meaningful way so that the user will have a smooth experience while interacting with the interface.

📝 Learnings

1. User-Centred Design: Learned the importance of putting the user at the centre of the design process, conducting user research and gathering feedback to inform design decisions.
2. Collaboration: Collaborated with stakeholders and learned effective comminution with the team members.
3. Problem-Solving: Honed my problem-solving skills by identifying and solving complex design challenges, and developing creative solutions that balance user needs and business goals.
4. Prototyping: Gained experience in creating low-fidelity and high-fidelity prototypes to test and validate design concepts.

That’s a wrap

Thank you for going through my case study. Do long press if you like it :)