finding community —
finding community —
Leela - an app that aims to help people invest back into their existing communities, as well as explore new ones.
The founder envisions a blend of e-commerce, investing, donations, and social media functions to help members reinvest into communities.
Leela - an app that aims to help people invest back into their existing communities, as well as explore new ones.
The founder envisions a blend of e-commerce, investing, donations, and social media functions to help members reinvest into communities.
Role
Role
UX Designer
UX Designer
UX Designer
Duration
Duration
2 months
2 months
2 months
Sign Up
Your Community Reviews
4/5 stars
—
—
Payment
Billing
Billing
Shipping
Review
Sign Up
Your Community Reviews
4/5 stars
—
—
Payment
Billing
Billing
Shipping
Review
Sign Up
Your Community Reviews
4/5 stars
—
—
Payment
Billing
Billing
Shipping
Review
Features
Find and join communities
based on our recommendations after taking a quick survey that finds your interests.
Do everything community related
in the home page. Take actions ranging from checking out community events to donating.
Support your communities
by buying directly from other members and exploring trendy items in your communities.
Build your profile
as you continue supporting your communities.
Features
Find and join communities
based on our recommendations after taking a quick survey that finds your interests.
Do everything community related
in the home page. Take actions ranging from checking out community events to donating.
Support your communities
by buying directly from other members and exploring trendy items in your communities.
Build your profile
as you continue supporting your communities.
context
A broken dream
A broken dream
New York City - a dream for many. The founder of Leela was no exception. He worked hard to raise money and leave his old life behind to come to the city of opportunity.
Yet something was off. Growing up, he had been used to tight knit communities and families. But even amongst so many people and crowds, he never felt more alone.
New York City - a dream for many. The founder of Leela was no exception. He worked hard to raise money and leave his old life behind to come to the city of opportunity.
Yet something was off. Growing up, he had been used to tight knit communities and families. But even amongst so many people and crowds, he never felt more alone.
A dream reignited
A dream reignited
Doing what he loved eventually allowed him to meet his lifelong friends. He couldn't be more thankful to the yoga community, yet he wasn't sure how he could give back to the community that gave him so much.
This problem kickstarted a new passion and endeavor, which eventually grew into the startup now known as Leela.
Doing what he loved eventually allowed him to meet his lifelong friends. He couldn't be more thankful to the yoga community, yet he wasn't sure how he could give back to the community that gave him so much.
This problem kickstarted a new passion and endeavor, which eventually grew into the startup now known as Leela.
Built by the community, for the community
Built by the community, for the community
The founder envisioned Leela to be a centralized platform where people can easily find, interact, and give back to their communities.
The founder envisioned Leela to be a centralized platform where people can easily find, interact, and give back to their communities.
Now Introducing:
Leela
A centralized platform that not only helps connect people to communities they love or want to explore, but also the veteran and newbie members inside the communities themselves. View the Figma Prototype here.
Connect
Find and join communities
based on our recommendations after taking a quick survey that finds you interests.
Do everything community related
in the home page. Take actions ranging from checking out community events to donating.
Support your communities
by buying directly from other members and exploring trendy items in the community.
Build your profile
as you continue supporting your communities.
problem
Breaking it down
Breaking it down
What exactly constitutes finding, interacting, and giving back to the community? The founder details four steps in this process:
Buy
Purchase items to kickstart an opportunity to invest.
Purchase items to kickstart an opportunity to invest.
Invest
Allocate a portion of your purchase towards investments.
Allocate a portion of your purchase towards investments.
Donate
Fund communities of your choosing using your profits.
Fund communities of your choosing using your profits.
Engage
Interact with your community using posts and messages.
Interact with your community using posts and messages.
That's A LOT of features…
That's A LOT of features…
There are already entire platforms dedicated to just a single step in the process. Trying to combine these into a single app is going to be tricky, since there is a lot of information that in every step of the process.
There are already entire platforms dedicated to just a single step in the process. Trying to combine these into a single app is going to be tricky, since there is a lot of information that in every step of the process.
How might we guide consumers through each step in giving back to the community?
How might we guide consumers through each step in giving back to the community?
My focus: Consumers
Each designer on the team took a different user and focused on that specific experience.
Each designer on the team took a different user and focused on that specific experience.
Guiding users
Merging multiple flows into a single experience may be unfamiliar to users.
Merging multiple flows into a single experience may be unfamiliar to users.
define
Which platform?
Which platform?
The first question I had was what platform we will use to build the experience. Given that we can create a responsive website or make an app, I weighed the benefits against each other.
Responsive Site
Site
Mobile App
App
No barrier to entry. Users don't need to download and create accounts to use our services.
There were too many choices when deciding on frequency level
Convenience. Access to the service anywhere, anytime, with faster loading speeds.
Slider labels now use a Likert Scale of three options - not frequent, same, very frequent.
Cross platform. The service can be accessed via multiple different platforms.
Cross platform. The service can be accessed via multiple different platforms.
Flexibility in function. It will be easier to create custom functions in an app.
Flexibility in function. It will be easier to create custom functions in an app.
Quicker launch. Developers won't need to create multiple versions for multiple mobile platforms.
Quicker launch. Developers won't need to create multiple versions for multiple mobile platforms.
Device capabilities. Adding features like notifications and location will be possible.
Device capabilities. Adding features like notifications and location will be possible.
Weighting each factor
Weighting each factor
Device
capabilities
Device
capabilities
Quick launch
Quick launch
Cross
platform
Cross
platform
Convenience
Convenience
Flexibility in function
Flexibility in
function
Barrier to
entry
Barrier to
entry
Deciding
Factors
My Questions
Flexibility in function. The service itself was quite complicated, attempting to offer four completely different functions. It would be helpful to work with less restrictions.
Flexibility in function. The service itself was quite complicated, attempting to offer four completely different functions. It would be helpful to work with less restrictions.
Convenience. Users would be accessing the service quite often, especially for staying updated with their communities and investments.
Convenience. Users would be accessing the service quite often, especially for staying updated with their communities and investments.
With these two factors being the most important considerations, I recommended a mobile application for Leela. After consulting with my PM and the founder, we agreed to move forward.
With these two factors being the most important considerations, I recommended a mobile application for Leela. After consulting with my PM and the founder, we agreed to move forward.
structure
As a consumer, I want to…
As a consumer, I want to…
I wanted to first lay out the general steps that a consumer might take in the process. To help me come up with what the specific steps might look like, I started by brainstorming some MVP use cases and user stories.
I wanted to first lay out the general steps that a consumer might take in the process. To help me come up with what the specific steps might look like, I started by brainstorming some MVP use cases and user stories.
Mapping out the process
Mapping out the process
From here, I was able to start mapping out how the user might go about interacting with our app.
From here, I was able to start mapping out how the user might go about interacting with our app.
Legend
Legend
Market User Flow
Market User Flow
Community User Flow
Community User Flow
Investment User Flow
Investment User Flow
Donation User Flow
Donation User Flow
Finding where everything goes
Finding where everything goes
Having the user flow and use cases also gave me a pretty good idea of what the information architecture might look like as well.
Having the user flow and use cases also gave me a pretty good idea of what the information architecture might look like as well.
I structured the initial information architecture based on my current model of what the service might look like. Since my mental model doesn't apply to everyone, I needed to do some user testing.
I structured the initial information architecture based on my current model of what the service might look like. Since my mental model doesn't apply to everyone, I needed to do some user testing.
dive
How do users navigate the app?
How do users navigate the app?
The first and most important issue I wanted to test was the navigability of the app. I mocked up and prototyped low-fidelity screens of important steps in the MVP flow so that I can insight into what users thought about the navigability.
The first and most important issue I wanted to test was the navigability of the app. I mocked up and prototyped low-fidelity screens of important steps in the MVP flow so that I can insight into what users thought about the navigability.
Users had a really hard time navigating through things. They often took more than three clicks of exploration to complete the task. If they did, I marked it as incomplete. Shown below are the results the user test:
Users had a really hard time navigating through things. They often took more than three clicks of exploration to complete the task. If they did, I marked it as incomplete. Shown below are the results the user test:
Task 1: Buy a basketball
Task 1: Buy a basketball
Task 2: Link a bank account/card
Task 2: Link a bank account/card
Task 3: Donate to one of your communities
Task 3: Donate to one of your communities
Task 4: Look for past donations
Task 4: Look for past donations
Task 5: RSVP an upcoming community event
Task 5: RSVP an upcoming community event
User 1
User 1
User 2
User 2
User 3
User 3
To Think
About
To Think About
Common Information. What is universal information that need to placed in the profile page?
Common Information. What is universal information that need to placed in the profile page?
Complexity. How do I present a lot of information without overwhelming the user, while also not hiding anything in the process?
Complexity. How do I present a lot of information without overwhelming the user, while also not hiding anything in the process?
Going back to the beginning
Going back to the beginning
I needed to refocus my designs. To help me spot places of opportunity, I tried mapping out the user journey of what it's like to move into a new place.
I needed to refocus my designs. To help me spot places of opportunity, I tried mapping out the user journey of what it's like to move into a new place.
KEY DISCOVERY
Refocus: Community
Refocus: Community
Our target persona really only cares about finding a community of people she can really connects with. Everything else, while important to the business model, is peripheral.
Our target persona really only cares about finding a community of people she can really connects with. Everything else, while important to the business model, is peripheral.
reframe
How might we help newcomers connect with communities they are interested in?
How might we help newcomers connect with communities they are interested in?
iterate
Getting the priorities straight
Getting the priorities straight
Now that we know our users primarily want to find a community to join and interact with, I can start reorganizing the information architecture and user flows to match this priority.
Now that we know our users primarily want to find a community to join and interact with, I can start reorganizing the information architecture and user flows to match this priority.
Unifying the experience
Unifying the experience
Previously, I broke the experience down into 4 disjoint parts. Now, I realize that just because the business model has four separate services, that doesn't necessarily translate to four separate experiences.
Previously, I broke the experience down into 4 disjoint parts. Now, I realize that just because the business model has four separate services, that doesn't necessarily translate to four separate experiences.
Community Interaction User Flow
Community Interaction User Flow
This user flow gives the user a lot more options. We accounted for the main goal, which is finding a community, but we give options for the user to do more along the way. This happens because how we are going to integrate the different features into the community home page.
This user flow gives the user a lot more options. We accounted for the main goal, which is finding a community, but we give options for the user to do more along the way. This happens because how we are going to integrate the different features into the community home page.
Visualizing the revisions
Visualizing the revisions
With the revised IA and user flow, I started reworking the structure of the app.
With the revised IA and user flow, I started reworking the structure of the app.
Incentivizing Connection
Extra pages to help users explore and join communities they are interested in.
Extra pages to help users explore and join communities they are interested in.
Humans, not products
Putting emphasis on sellers, values, and communities as opposed to the product.
Putting emphasis on sellers, values, and communities as opposed to the product.
Everything at Home
A comprehensive feed with information specific to users’ communities.
A comprehensive feed with information specific to users’ communities.
Navigational Freedom
A universal collapsable side menu that gives users another option for navigation.
A universal collapsable side menu that gives users another option for navigation.
Checking if the revisions work
Checking if the revisions work
To ensure things changed for the better, I asked three new users to complete the same tasks as last time. Also like last time, if users needed three or more clicks of exploration to complete their task, I marked it as incomplete.
To ensure things changed for the better, I asked three new users to complete the same tasks as last time. Also like last time, if users needed three or more clicks of exploration to complete their task, I marked it as incomplete.
Task 1: Buy a basketball
Task 1: Buy a basketball
Task 2: Link a bank account or card
Task 2: Link a bank account or card
Task 3: Donate to one of your communities
Task 3: Donate to one of your communities
Task 4: Look for past donations
Task 4: Look for past donations
Task 5: RSVP an upcoming community event
Task 5: RSVP an upcoming community event
User 1
User 2
User 3
refine
Thinking long term
Thinking long term
Even when starting low fidelity, I was keeping track of what components I was using. I compiled this into a UI kit so that future designers and developers can reference and use the same components.
Even when starting low fidelity, I was keeping track of what components I was using. I compiled this into a UI kit so that future designers and developers can reference and use the same components.
Making it real
Making it real
To have a prototype ready to show investors, we needed to increase the fidelity of the current designs. Some considerations I had when thinking about the visual design of the product:
To have a prototype ready to show investors, we needed to increase the fidelity of the current designs. Some considerations I had when thinking about the visual design of the product:
Branding
I want to be consistent with my color, icon, etc. usage to have strong branding.
I want to be consistent with my color, icon, etc. usage to have strong branding.
Friendly
The app should have an inviting, approachable, and overall human feel to it.
The app should have an inviting, approachable, and overall human feel to it.
KEY NOTE
Generative AI
Generative AI
Generative AI was extremely helpful in creating realistic product and profile information. I used Adobe Firefly to generate product pictures, and Chat-GPT to come up with product descriptions.
Generative AI was extremely helpful in creating realistic product and profile information. I used Adobe Firefly to generate product pictures, and Chat-GPT to come up with product descriptions.
reflect
Learnings
Learnings
Simplify the problem and designs.
I got really overwhelmed trying to tackle too many problems all at once. This made me lose focus of what exactly I was designing for. This experience taught me how to keep goals in mind, and also how to break down the problem into simpler pieces.
Understand how to navigate constraints.
I had a lot have constraints here. The first thing was time - there were a lot of features that I wanted to develop and ship, but not enough time to develop them. In addition to this, I needed to get approval and compromise on designs because of PM and founder influences. It was difficult balancing these factors, but I found clear communication to be beneficial here.
Simplify the problem and designs.
I got really overwhelmed trying to tackle too many problems all at once. This made me lose focus of what exactly I was designing for. This experience taught me how to keep goals in mind, and also how to break down the problem into simpler pieces.
Understand how to navigate constraints.
I had a lot have constraints here. The first thing was time - there were a lot of features that I wanted to develop and ship, but not enough time to develop them. In addition to this, I needed to get approval and compromise on designs because of PM and founder influences. It was difficult balancing these factors, but I found clear communication to be beneficial here.
Next Steps
Next Steps
New Features. I wasn't able to develop all the features of the consumer experience. Doing so would be able to round out the experience overall.
New Features. I wasn't able to develop all the features of the consumer experience. Doing so would be able to round out the experience overall.
Design Systems. I left the designers and developers a UI Kit to reference, but having a design system would benefit the start up greatly in the long run.
Design Systems. I left the designers and developers a UI Kit to reference, but having a design system would benefit the start up greatly in the long run.
