Project Description
Lifebonder, a burgeoning startup headquartered in Copenhagen, is dedicated to developing a social media application that strengthens human connections in the physical world, countering the trend of isolation. The project spanned three months, and the majority of tasks were executed through Adobe XD, Zeplin, and Jira.
My Role: Serving as the UI/Graphic Designer, I collaborated closely with UX researchers and Developers. My responsibilities included feature determination, wireframe creation, and the development of an interactive prototype for the web application.
Background
In the current era, an abundance of social media platforms has established extensive networks that transcend geographical boundaries and temporal constraints, enabling people to connect globally. Despite this connectivity, research indicates that prolonged usage of social media often correlates with increased feelings of loneliness among users. Paradoxically, these platforms designed for connection can inadvertently contribute to a sense of isolation.
In response to this phenomenon, our team committed to the creation of a social platform with a distinct focus. Our aim was to foster more meaningful and profound social connections between individuals in real life, counteracting the unintended isolation that can accompany excessive use of conventional social media.
Design Process
Wireframing
Given the users' needs for automatic matching based on intentions and detailed profiles, showcasing relevant social events, and facilitating friend management and group creation, I recognized the unique challenges posed by web applications used on laptops, where interactive actions like swiping are less practical due to fixed locations and larger screens.
To address this, I redefined the web application as a dual-purpose platform, serving as both a content display hub and a management tool. Collaborating with UX researchers, I worked to articulate the user actions' flow and intricacies of the web application in greater detail. This involved outlining the sitemap to visualize the structure, screens, necessary elements on each page, and the transitions between them, ensuring a seamless and intuitive user experience.
UI&Visual Design
Subsequently, I delved into shaping the overall aesthetics of the app, adopting a modular approach to the design process. Beginning with the onboarding module, I referenced the sitemap to lay out each page, ensuring the inclusion of necessary elements. To maintain consistency between the web and mobile app, I collaborated closely with the mobile app designer, establishing a unified color tone for the application. Moving forward, I defined typography and meticulously crafted each UI element, encompassing icons, spacing, and fonts, culminating in the refinement of interactions.
Throughout this process, I created multiple mock-ups at each stage, facilitating efficient communication. This approach made it easier for product managers and developers to visualize the impact of each design, fostering clear discussions and enabling prompt iteration based on valuable feedback.
Color & Font
Landingpage
I strategically incorporated the circles from the company logo as the primary visual elements, utilizing them to symbolize individuals and their social interactions. These circles were thoughtfully interconnected, visually conveying the interconnectedness between users and emphasizing the significance of human connections within the platform. This design choice not only aligned with the company's branding but also reinforced the core concept of fostering meaningful social activities and relationships.
Homepage
Upon launching, three primary functions were introduced, allowing users to explore content within each module. Unlike new friends and events that are not immediately presented, users have the ability to check their matched friends, mark or attend activities, and manage groups. The homepage was designed to maintain clarity and neatness, with three relevant pictures serving as visual cues for each module. Navigation buttons further enhance user intuitiveness, ensuring an organized and user-friendly presentation of the main content areas.
Notification
On this page, users have the ability to read and manage their notifications. The interface provides options to review and delete notifications, offering users a streamlined and efficient way to stay informed about their interactions and activities within the platform.
Chat window
The color scheme maintains consistency with the mobile app, fostering a seamless visual experience for users. Additionally, users can utilize the search functionality to locate specific messages or friends efficiently, enhancing the accessibility and usability of the messaging feature.
