Loopchat
UI/UX and graphic designer
2020
-
2021
LoopChat is a college social media platform that started in Berkeley. It provides a comprehensive suite of features including group messaging, direct messaging, voice chat rooms, and group notices, allowing students to connect with peers across campuses.
I led the design efforts for four key features and spearheaded a comprehensive redesign to enhance the app’s usability and organization.
Tools used
Concepts App
Figjam
Figma
Affinity designer
Adobe Indesign
Adobe Illustrator
Luma fusion
skills
UI/UX design
branding
Graphic design
problem solving
Design thinking
User empathy
user research
marketing
Competitive analysis
Highlights
I was the sole designer on an 8-person team, and led redesign efforts that led to a massive increase in users and engagement on the platform.
Users in less than 7 months
Circle Post
5 stars reviews on App Store
Group chats created
My User Experience (UX) Design Process
Understand current app design and user flow
Brainstorming to uncover the right solution
Replicate the mock-up into the final product
Talk to users and look at the competition
High fidelity prototype to validate idea and generate user feedback
App is live, now we monitor and get more feedback
UX Audit
Home page
To create a Group Chat, you must select at least two people
The home page quckly becomes cluttered as the user joins multiple group chats
There is no way to pin important chats so they are easy to find
Discover
Campus groups takes you out to a mini app which is disruptive to the user experience
No easy way to discover other group chats created by students on your campus
No easy way to create affilia
Circle
Images on circle can't expand, which breaks the immersion
It's not easy to identify which post have comments under them
It's not easy to tell what school someone is from
User Research
I surveyed hundreds of students leveraging different channels such Instagram stories polls, chats directly on our app.
Leila, 18
UCSB Class of 2024
“What frustrates you about the app?”
It is really hard for me to keep up with conversations in large group chats. I wish there was a way easily find and located messages that are of relevance to me.
Annelise, 17
VT Class of 2025
“Tell us about your experience using loopchat”
I really like the app, but I sometimes receive too many notifications, I would like for ability to potentially be able to mute some groups at certain times of the day.
Peter, 18
NC State Class of 2024
“How would you improve the app?”
I hate that right now in the app we don’t have a space for group announcements, rules, etc... I think that adding such a feature will be game changer for group admins, and also students joining new groups.
Outside of interviewing our users, I also researched the competition to anticipate potential users pain points.
The competitive analysis consisted in auditing competitors UX as well as well as go through their apple store and google store reviews to get a clear view of what their customers were frustrated about and leverage that to our advantage to build something more intuitive and appealing.
Research summary
Pain points
Sharing resources is hard
No group rules
No group announcements
Endless scroll to find group chat
3 people to create a group
Group management is challenging
Can't locate tagged messages
Who's from my school
Covid makes campus life hard
etc...
Challenges to consider
Make experience fun and intuitive and easily accessible
How to make a group chat with 100s of student not chaotic
It's covid and students have limited ways of connecting with their fellow classmates. How to make Loopchat feel like a community?
How to protect students from dangerous content?
Explore and design
At this phase, I use sketching as a tool to generate ideas quickly and visually communicate concepts.
Sketching helps me think through problems, iterate on solutions, and align with my team early in the process. It allows for rapid exploration without the constraints of digital tools, making it easier to focus on the big picture rather than getting lost in details.
Once key directions start taking shape, I transition into higher-fidelity designs to further develop and test ideas.
Refining Concepts
While sketching is a great way to kickstart the design process, low-fidelity wireframes can sometimes be too abstract—especially when presenting to stakeholders or testing with users who need a more tangible experience.
Moving into high-fidelity prototypes earlier helps bridge this gap by making interactions and flows clearer, leading to more actionable feedback.
That said, I remind myself to stay flexible—no design should feel too precious. Testing and iteration remain key to refining the best possible solution.
Group notice
Group notice idea came to life was in reaction to students complaining about not having a place within the group chat to share resources. Students wanted to be able to share announcements with other group members, share notes, and also promotes other Group Chats that may be relevant to the Group.
This feature was also highly requested by some universities like the University of Oregon which was one of the Universities to adopt Loopchat for its class of 2024.
Pain points we were trying to address
It’s hard to document and share resources with friends.
No solution to add group rules & announcements
Folders and @me
Folders and @me were introduced to help students manage their chat better. Folders, specifically, introduced a lot of nice to have, such as being able to set custom notifications per folder. That way student could mute certain group based on their needs.
@me on the other hand, allowed students to quickly find message they have been tagged in and thus better keep up with conversations especially in large chats.
Pain points we were trying to address
Endless scroll to find the right group chat.
User can’t easily find message they have been tagged in.
Too many notifications
Campus Lounge
Campus lounge was a feature we developed quickly to help students stay connected in the midst of COVID, It allowed students to not only study, but also engage in fun conversations that that felt more humane.
Pain points we were trying to address
Not easy to build friendship outside of chat especially with COVID
No real sense of presence
College circle
While group chat were amazing to connect and interact live with other students, students had also expressed to us how they wanted something similar to instagram where they could document their lives and share it with their school friends.
Pain points we were trying to address
No real sense of presence
Posting life update in large group chats doesn't feel appropriate
No private space to document life and share it with people in my circle
Preparing for Handoff
Design isn’t finished until it’s in the hands of users. I work closely with engineers to ensure smooth implementation, providing detailed documentation and addressing any questions that arise.
Clear communication and iteration are key to maintaining design integrity while adapting to technical constraints.
Note
Most of our developers were located in China so I had to put together written documents that were then translated by one of the interns.
Group Notice
Discover
Campus Lounge
Circle
Key takeaways
Some metrics
3k - 240k users in 7 months
Our user base grew exponentially following the redesign and release of new features which was supported by great marketing efforts.
20x Circle Posts in 2 weeks
After the redesign, College Circle saw a massive jump in microblogging with the most post averaging at least 200 characters.
10x Link sharing in a few days
Group notice increased the rate at which students shared links. We particularly saw an increase in school related links such as google docs, financial aid, etc...
More Projects