Charlie: A New Way to Make Friends
Role: Sole Designer and Researcher
Details: Springboard Capstone Project
Tools: Figma, Miro,
Charlie is a friendship app that allows its users to interact with and be exposed to many different kinds of people. Unlike other friendship apps that require mindlessly swiping through people without knowing who they really are, Charlie gives the user an opportunity to really get to know someone. By letting our users post whatever they want, they can truly showcase themselves and their personality. There is only so much you can learn about a person in a 500 character bio. See how they really are with the help of Charlie.
Problems:
Despite the rise of social media and communication, making friends is harder than ever.
Outcomes:
Interviews with regular social app users who struggle with connecting online
Affinity map, Personas, Sketches, Wireframes, Hi-Fidelity Designs
Contrary to popular belief, building relationships isn't frivolous fun; it's hard work. It's not just about going out and having fun with friends. To actively make new friends and maintain them is difficult.
And the aspect of online communication can make it even harder.
Most existing apps follow the same tired formula—swiping through profiles with minimal insight into who these people truly are. It's no wonder they often fail to deliver. Can you really decide if you want to be friends with someone based on four photos and a brief bio? Even when you do find someone interesting, striking up a meaningful conversation is a challenge.
I set out to address both sides of the friendship struggle, acknowledging users' personal hesitations and the unpredictable nature of connecting with others.
I approached it the one way I could: how the user responds and behaves. I conducted five remote interviews with experienced social app users interested in meeting new people.
They missed the human element in online communication, felt there was too much focus on physical appearance in existing apps, and experienced a sense of sameness across platforms. Many struggled with putting themselves out there and were unsure of what to talk about with potential friends. I constructed an affinity map to synthesize my findings.
I identified three key focus areas:
Genuine human communication and aspect
Creating a safe and comfortable environment
Promoting engaging and meaningful conversations.
Drawing further from this research, I constructed two personas to help understand the kind of users we'd be dealing with.
Victor embodies the kind of user who doesn't ever see success with finding new friends, despite putting himself out there and trying. He feels like online communication is too superficial and wants to really understand know someone.
On the other hand, there's Sara. She's trying to break out of her shell to find new friends. She has a lot to talk about, but just needs that shove to get things started. Constantly overthinking, she finds herself not bothering with trying to reach out at all.
Clearly, the current approach used by social apps falls short. I recognized the need for multiple solutions. This is how Charlie stands out, helping users like Victor and Sara.
Current social apps often offer a standard template: a prominent profile picture, a brief bio, and a few answers to predefined questions. It's superficial, restricting a true understanding of who someone is. Friendship should transcend physical appearance.
Direct Messaging (DMing) is permitted, but to initiate a conversation, someone must comment on one of your posts. This restriction helps prevent spam and encourages users to actively participate by posting and commenting.
While it may seem counterintuitive for a social app meant to connect people, this measure was deemed necessary to reduce spam and foster genuine interactions.
For users like Sara who may be too shy to comment, they have the option to express interest through upvoting. This subtle interaction lets others know that their post has garnered attention. Additionally, I included a filter feature, enabling users to sort through characteristics such as interests or distance, helping them find like-minded individuals more easily.
To determine which features to prioritize for the MVP, I crafted user stories, user flows, and identified three critical user paths:
registration
creating a post
finding a conversation partner
My aim was to ensure that the app's design felt familiar, allowing users to intuitively understand its functionality upon their first encounter.
Following these user flows and user stories, I sketched these critical flows.
With these sketches in hand, I conducted guerrilla usability tests to assess the intuitiveness of the Charlie app.
The majority of users grasped the core concept of Charlie, but they pointed out some design flaws. For instance, there was confusion regarding the home feed, as some users mistook it for people's profiles rather than posts they could scroll through.Another issue was the presence of a "dismiss" button after applying filters. Some users misunderstood its purpose, thinking it was related to dismissing the filters themselves, not individual messages. While it seemed logical to me that the "dismiss" button referred to the message because it was placed below the "filters applied" text, I now see how it could be confusing for others.
As a solution, I opted to change the color of the filter icon to indicate active filters instead of using the "dismiss" button and 'filters applied' text. This change should make the app more user-friendly and reduce potential misunderstandings.
After implementing the suggested changes, I moved on to creating wireframes and addressing edge cases, such as excessively long user names or overly lengthy posts.
For the sake of streamlining the user experience, I opted to remove the "confirmation page." In the first round of hi-fidelity designs, I faced challenges when selecting Charlie's brand color. I initially chose orange to evoke feelings of happiness and comfort.
However, I encountered readability issues, especially when using black text against an orange background. Additionally, the combination of red text on an orange background posed visibility challenges. Recognizing the need to balance these elements, I embarked on my next iteration.
My attempt at balance in the second iteration proved slightly better. While some juvenile aspects remained, the improvements in readability and a less harsh contrast were notable. The design changes primarily focused on enhancing the brand's visual appeal.
In terms of the user interface, most of the screens from the other two flows remained consistent, with some minor tweaks. Originally, when users attempted to initiate a chat with someone from their profile, a pop-up message informed them that they couldn't chat with that person due to a lack of interaction on their posts. This led to user frustration during the second round of testing.
Adapting quickly to address this, I introduced additional screens at the beginning after users completed the registration process. These screens aimed to provide users with an overview of how Charlie works and communicated the restriction related to chatting with others.
While this approach sought to make the restriction less frustrating through an early introduction and explanation, I acknowledge the potential drawback of overwhelming users with a substantial amount of text upon app launch.
After iterating and testing, I ended with these hi-fidelity designs.
Humans are indeed complex beings, and one of life's unpredictable aspects is how we connect with others and make friends. The challenges of forging new friendships and maintaining them exist both online and offline. The design journey of creating Charlie underscored the intricacies of this process.
My initial vision for Charlie included more prompts and helpful information to assist new users, addressing the common issue of not knowing what to say in conversations. Time constraints limited the extent to which I could implement these ideas. In hindsight, the substantial chunk of text presented to users upon registration proved to be a source of annoyance, as expected. It's clear that I could have improved the user experience by animating the text to appear gradually upon interaction, rather than all at once as shown in the prototype.
Being the sole contributor to this project presented its challenges. Without the collective input and feedback of a team, I had to rely on my own judgment and the insights gained from remote testing and interviews. The limitations imposed by the pandemic, which prevented in-person sessions for testing and interviews, further added to the complexity of this design process.
In essence, Charlie blends elements of social media apps like Twitter and Reddit with friendship apps like Bumblebff, striving to introduce a different and effective approach to making and finding new friends. The core principle remains that building relationships is far from frivolous; it's demanding work, and Charlie is here to facilitate and support this challenging but rewarding endeavor.
Future Impact
Users like Sara and Victor can create meaningful, genuine friendships. Throughout their experience, Charlie will be there to help guide them.
As I reflect on this journey, I'm reminded that the design process is iterative, adaptable, and ever-evolving. While I couldn't address every aspect as thoroughly as I would have liked, I'm committed to continued refinement and improvement. With the goal of simplifying and enhancing the friendship-making experience, I look forward to the future of Charlie and its role in fostering meaningful connections.
By letting users post freely, we empower them to reveal their personalities. This approach aids in making more informed decisions about potential friends, especially for users like Victor who benefit from assessing posts rather than relying on a short bio and a list of interests. Furthermore, presenting users with a feed of posts, rather than one profile at a time, gives them the freedom to browse a variety of individuals without feeling rushed into making immediate decisions.
Rough sketch of home page or "feed" that contains people's posts
Rough sketch of home page or "feed" that contains people's posts
How might we make building relationships online easier?
Frustrations of existing social apps
Gaining insight
Introducing: Charlie
Navigating Charlie
Envisioning Charlie
Bringing Charlie to Life
Finishing Touches
Reflecting on Charlie
To infuse the app with a more authentic and human touch, I introduced a feed of user-generated posts where users can share whatever they like.
To create a safer and more comfortable environment, I transformed the app into a "smart" companion, giving it a human name—Charlie.
To stimulate engagement, I introduced features such as comments and upvotes/downvotes
Kinds of Friendship-seeking Users
Excerpts of Affinity Map capturing the major concerns and topics
Meet Sara and Victor
Charlie serves as the user's first guaranteed friend. While it can't replace genuine human connections, Charlie actively interacts with users. It periodically checks in on them, asks about their well-being, and offers message reminders. Charlie also provides conversation support, suggesting topics and prompts, sharing random jokes, and offering unconditional support.
Charlie's introduction and what the user first sees when they open the app
User flows of three flows
Registration Flow sketches. Screens 1-7
Creating a Post Flow sketches. Screens 1-5
Finding a Friend/Chatting sketches. Screens 1-6
User Stories
Registration Flow Wireframes
Creating a post Wireframes
Before: Registration Flow Hi-Fidelity Designs with Edge Case
After: Registration Flow Hi-Fidelity Designs with Edge Case
Creating a post Hi-fidelity designs
Finding a friend/chatting Wireframes
Hi-fi designs: messaging someone.
Top: messaging John is allowed
Bottom: messaging John is not allowed. This is what users saw.
Charlie’s introduction
Hi fidelity designs: finding a friend/chatting flow.
Top: scenario in which the user, Victor, cannot chat with John because he did not comment on the user’s post.
Bottom: scenario in which user chats with John because John commented on the user’s post