UI/ UX Case study: Simplifying user experience for the users in a gated community
This project showcases my thought process & design journey while redesigning a gated community management app. I’m not affiliated with Nobrokerhood in any capacity, and the views for this case study are strictly my own.
Who and What is Nobrokerhood?
Nobrokerhood is a gated community management app that serves all kinds of users, including residents and management committee members to security guards and facility managers. Loaded with features like
- Daily log & Authorizing gate entries for Guests and deliveries.
- Payments of rent and maintenance bills.
- Communication with the facility management team
- Build strong community
- A marketplace to buy daily essentials
Why a redesign?
Since I am a user of the app, I had an idea about it. But still, I decided to do an in-depth analysis of the app first. I wanted to understand the functionalities, overall architecture, and navigation. I had to deconstruct the application and understand the Design thinking and research that possibly went into crafting the app.
After dissecting the application myself, the need to validate my pain points seemed necessary.
Understanding the application through user interviews.
Doing my research was pretty easy as my society has a coalesce with Nobrokerhood. I simply went out and started asking a lot of open-ended questions to users who know & use the application.
The inference from the user interviews and self-assessment gave me an idea of what the problems were…
Defining the problem.
Through the self-analysis and user interviews, I was able to identify some clear usability issues and pain points. A closer look at each user flow in the current app made me come to the following conclusions:
- Pain Point 1- Weak Onboarding and Sign-in: Confusing to sign up as it lacks proper labeling and signing in to the app without verification raises security concerns for an app that boasts security standards.
- Pain Point 2- Confusing and cluttered Screens: Multiple tabs, overload of information, and lack of categorization make it hard for the user to absorb all the content at once.
- Pain Point 3- Lack of updates- Lack of a notification section, leads to the user not being updated with what's happening in society.
Goals
Here are a few things I wanted to change to improve the user experience.
- To deliver a secure experience with improved security standards when signing up and logging in.
- To deliver a personalized experience with a better profile section where you can interlink your and other flat members' account.
- Improving the experience of a more engaging and simple UI for the user to perform quick actions.
- Make it easier for users to connect with other society users and discover new events and updates easily to build a strong community.
- Create a better store/ market page to increase the commerce side of the application.
Let's get started
To understand the redesign and solve this gravy (khichdi) let’s just dive into it with a hypothetical situation with 3 friends who have rented up a place in B-84, Spaze Privy, Gurgaon. Now we can understand the application through their journey.
Log-in page
It's a crucial part of any application's UX journey. Good design helps users to sign in with ease and it's the first impression the user gets about the application. It also gives returning users an easy way to log in to your website.
Down below is the original user flow of signing in, to the application.
Distinguishing between sign in and log in
When a user comes to the application to register or if they’re returning to log in, you want them to be clear on where to go. After the onboarding, the Login page only nudges users to login, theirs is no mention of sign-in which can be confusing for the user in the beginning.
Social login is rapidly becoming the way users login into their web accounts. Creating multiple accounts for different websites is time-consuming and confusing. It’s difficult to remember a bunch of different passwords and usernames. Social login cuts through all of that by allowing users to create an account using information from one of their social media accounts.
Security issues
Finding your own flat and directly signing in to the flat account without any verification felt like breaking into a house. To fix this, an idea occurred to me… when visiting a bank you get a token with a unique code to meet with the management. So why not provide a unique code from the management team to the user when they register the flat under the user's name.
This way the house head signs up into the application first. It’ll be easier for the management team to understand the house hierarchy in the future too.
Adding roommates
Once Jeremy is signed in, his next step is to add his other roommates to the application. Earlier it wasn't an option. But now it is. Users can add people and decide who they want to share the QR code with.
Now the Jeremy has to add all his flatmates and fill in the relationship that he shares with them, that is “friends”. The relationship can differ according to any given situation. Helps the management team map the users and understand their possible relationships. This will be immensely useful in providing more curated content.
Now that Jeremy has added his two flatmates. Signing up for both James and Richard becomes very easy.
Navigation
It's the discipline of creating ways for users to navigate through a website or an app. Navigation plays an integral role in how users interact with and use your products. It is how the user can get from point A to point B and even point C in the least frustrating way possible.
Redesign
With the new navigation for the application. I have reinvented Destination tabs. I’ll go through the redesigns as I go through the flow of the app below.
Home page
The homepage is your company’s face to the world. It's a gateway to a site’s content, functionality, and overall UI/ UX design. It dishes out the first taste of what the app has to offer.
To make these delightful interactions, designers employ a combination of design patterns including links, labels, and other UI elements. These patterns provide relevant information and make interacting with products easier. To understand these better let’s analyze the original application. To understand the design thinking and research that went into the creation of the original solution, I decided to deconstruct the entire Home page and carefully inspect the current design, to understand how it works.
Let me break down how I redesigned the information architecture to make sure that the users don’t miss out on important data points.
- I made a list of all the functions that the users need on these cards.
- I grouped the functions in different categories based on their context.
- Ranked the functions according to priority and ranked the pointers further inside each function.
- Better logos for the user to understand the function of the card.
- Better CTA demarcation.
While diving deeper into the process and trying out so many iterations, I gained an insight :
Attaining good Information Architecture and Visual Hierarchy is the most fundamental yet the trickiest part of designing a solution.
These two things play an integral role in optimising the process of conveying information to the user in an effective and efficient way.
The whole redesign of the application was done in a way that we are designing a utilitarian app. It needs to be done in a way where different typologies need to be grouped together.
Designing a more efficient invitation process for the visitors
It’s second nature for humans to socialize and make friends. Many of the time, calling friends and family over is but obvious... Since the covid era, the biggest need of the hour is contactless transitions of activities. When the guests enter the society they need to interact with the management team to check in, which seems not so safe…. so I introduced a new feature QR code entry.
Designing a more efficient process for the society members to enter society clubhouse.
With the growing urbanization, the clubhouses of our societies are getting equipped with new facilities day by day. Hitting the clubhouse is the new fun thing to do. Doing a manual entry when you enter the clubhouse is time-consuming. So entry again with a QR code seems easy and quick.
Visitors log.
Managing an operational house is not an easy chore. In an era where most of the items are ordered. A lot of deliverable items come through the house. The original design had multiple tabs from which the user had to swipe left and right to reach the proper destination.
Different cards according to the different situations to show in the visitor's log
Improving Chat initiation.
When you move into a new place, not knowing your neighbors seems to be an issue, and ringing the call — bell and talking to the neighbors seems too much hard work.
Offers.
The application fails to grab the user's attention with its offers.
Increasing that community bond.
In a world where it is easy to feel disconnected from others, strengthening your bonds with the people in your community can be an essential step towards better mental health and well-being. As community members, strengthening the bond, that ties us to one another is something that we all need to do.
Building community bonds helps people feel connected to their communities, but it can be challenging for people to get started. Therefore, people need to find ways to establish good relationships with the people in their community.
Home chef
Here I show how a user uploads his dish to the application.
once the post has been posted one can start ordering the dish.
Community page
Many people I interacted with had one common problem with the application (which I agreed to). They are not happy with how their forum page (News Feed) doesn’t showpieces of information in a categorical way which fails to bind the society members together. So I set out to reimagine a space where all the society members could update and meet everybody virtually. A place where the community bond can be enhanced.
Store page
No broker has some awesome products which never reach the audience because the overall structure and the way they represent the products is not easy to go through.
That’s all, folks!
If you’re reading this, then thanks to you for sticking to the end. The experience was pretty good and got to learn a lot.
Huge thanks to Lavanya Gopal for guiding and motivating me throughout this project.
