During my internship at Kardder, a social networking app that connects people based on proximity, I had the opportunity to play a key role in redesigning various features for the mobile app. I worked closely with the development team to ensure that designs were implemented seamlessly.
Role
TIME
Responsibilites
TEAM
UI/UX Designer
Oct. 2023 - June 2024
User Research, UI/UX Design, Usability Testing, Prototyping
4 UI/UX Designers
1 App Developer
Project goals
.svg)
Company Goals
User Goals
Redesign the interface to highlight Kardder's main features, ensuring the user experience aligns with company values of fostering local connections and community engagement
Connect with their local community, stay informed about events, and easily discover new people to create long lasting and meaningful friendships
01. Research
Defining key words
To better understand the Kardder's current interface and their goals, I noted the key features to be highlighted in the redesign.
Hyperlocal search
24 hour timeline
.svg)
Local events
Find nearby friends with similar interests to foster real-time connections and build a stronger network.
Keep content relevant and up-to-date to promote active engagement and real-time interactions.
Opportunities to connect with the community and strength community bonds
Key statistics
Pew Research Center's statistics reveal that social media platforms are not just for casual browsing—they are vital tools for communication, connection, and building relationships.
80%
72%
57%
Say social media makes them feel more connected to friends
Spend time with friends via social media
61%
Prefer communicating online
Target users
The target users for this project were young adults in population dense areas and new residents looking to build local connections and engage with nearby activities and local businesses.
Community oriented
.svg)
College students
New residents
People who love exploring local places and pop-ups, supporting businesses while enjoying their interest
Students eager to meet new people with similar interests or discover new places but may feel anxious about reaching out in person.
Someone who's just arrived in a new city, but unsure where to begin. They need to find local spots and new friends.
User interviews
I recruited 28 UCLA students to participate in research with energy drinks as compensation for their time. I prepared an interview script with 15 open ended questions.
78%
of participants said that showing where posts are on the map was one of the most important features
66%
of participants said that showing number of common interests with someone was not important
85%
of participants said that the browse and nearby tabs were confusing, and they didn't know what it meant
74%
of participants admitted to never using the icebreaker function when starting a chat with someone
User personas
Emily moved to a new city for a job transfer, excited to explore its opportunities and attractions. She soon realizes traditional social media doesn't prioritize local connections. Her goal is to forge meaningful relationships, uncover local events, and connect with like-minded individuals nearby.
Competitive analysis
I realized that Kardder's unique features, like proximity-based content and nearby user discovery, weren't emphasized. The app's homepage was similar to Instagram and Twitter but lacked advanced features like photo editing, endless scroll, and reels/stories. What set Kardder apart were its proximity-based content feed and nearby user discovery.
User journey
Before moving onto drafting solutions, we created an information architecture to better understand how a user might utilize Kardder for a multitude of reasons.
.png)
02. Ideation
Product checklist
Based on research, I compiled a list of product requirements to guide the redesign.
.svg)
Enhance the nearby search functionality
Enable profile customization options
Improve the intuitiveness of messaging
Integrate with other social media platforms
How might we?
Now that I had a better idea of user pain points, I drafted some ideas on solutions for the 4 categories of pain points.
Implement advanced privacy settings and clear consent mechanisms to address privacy concerns
Introduce a second font, change the color, and fix the typography and spacing to provide a more visually pleasing experience
Create a unique visual identity for Kardder that sets it apart from other social media using the maps function as the home tab
Send users notifications when another user on Kardder is in their vicinity
Drafting solutions
Restructured home tab that would now incorporate both an endless scroll and a map view to display the location of posts
Inspiration from the Find My Friends app and designed a "find places/people nearby" feature
I explored the idea of staggering face cards in the nearby tab to minimize redundancy and rigidity, as well as a more intuitive profile tab.
First iteration - I encountered the following constraints when presenting these changes to the development team
Users expressed a dislike for the full-screen profile view, but the development team was unable to implement a switch to a non-full screen profile as they would have to complete this manually
The team faced limitations in implementing staggered posts on the profile tab as all posts were currently the same size.
Why I didn't go with this iteration
Besides developmental constraints, I faced other challenges. Initially, I tried horizontal scrolling for the Nearby Tab, but it was impractical due to the large number of profiles. I also planned to keep the Home and Maps tabs separate to maintain the app's structure and ease development. However, this didn't effectively distinguish Kardder from other social media apps, as the feed still dominated the user experience. Recognizing these limitations, I embarked on another redesign to better align with Kardder's unique value proposition.
03. Finalize
Home
The new layout also enhances text hierarchy for readability and combines the feed and map tabs to provide a comprehensive and engaging user experience.
.svg)
Browse
I redesigned the browsing experience by renaming and clearly labeling tabs, optimizing sorting by interests, and improving the layout for better readability and user engagement.
Messages
The messaging interface emphasizes the sender's name, a streamlined date format, and improved readability with a light gray background, addressing user confusion and usability issues.
Profile
I revamped the profile interface to improve clarity, readability, and user experience by enhancing title visibility, adding social media and posts sections, expanding interests, and utilizing better text hierarchy and margins.
04. Test
Usability testing
A total of 20 participants, age 18 to 25, were were recruited on the UCLA campus to take part in the usability testing sessions. Overall, they were highly satisfied with new features, espeically the new home tab. With the addition of a simple "see more" button, 100% of participants scrolled down in the full profile view, instead of only 40% scrolling down previously without a "see more" button.
66%
Decrease in error rates while searching for nearby users
85%
Increase in Task Completion for creating a profile
40%
Increase in Engagement and daily active users
4.9/5
User satisfaction, compared to a previous rating of 3.0
Final Thoughts
key Takeaways
UX Writer Recruitment
Accessibility Audit
Recruit a skilled UX writer to collaborate on refining the app's language and microcopy. Their expertise will ensure text elements align with design, maintain consistency, and effectively communicate with users
Conduct an accessibility audit to meet standards for users with disabilities. Address identified issues and adjust to enhance inclusivity and accessibility.
User Feedback Integration
Geographical expansion
Set up channels for ongoing user feedback, like in-app forms or research studies. Review and analyze feedback regularly to identify patterns, address pain points, and prioritize future features based on user needs.
Consider expanding Kardder's availability to other university campuses or cities, leveraging the success and learnings from the UCLA community
Check out my other projects!
.png)
.png)
.svg){kind=icon}
.svg){kind=small}