Enhanced Togetherness
BACKGROUND
57% of New Yorkers Sometimes or Often Feel Lonely
In New York City, 30% of older adults and 57% of the general population experience loneliness, exacerbated by recent challenges. Addressing this issue requires innovative solutions. The app Gather is currently in development to foster connections and enhance community well-being.
.png)
.png)
Market Opportunity: With 30% of older adults and 57% of the general population in NYC facing loneliness, there’s a strong market need. Gather offers a user-centered platform to enhance social connections and support mental well-being.
.png)
.png)
DECOMPOSE OBJECTIVE
DESIGN GOALS
Define Design Goals Using User Needs, Research, and Data
.png)
PROTOTYPE
Streamlining Social Planning for Enhanced User Experience
The app's quick plan creation feature is tailored to simplify social planning for Anna and John. By guiding them through a clear, structured sequence from the home screen to confirming their plans, it addresses their needs for safety and structured interactions. This efficient process helps them effortlessly organize and participate in social activities, reducing stress and enhancing their overall experience.
Enhancing Social Engagement with Quick Plan Features
Anna, a safety-conscious professional, and John, who prefers structured interactions due to safety concerns, both benefit from the app's quick plan feature. Anna can easily expand her social circle beyond work by joining diverse activities, while John can confidently engage in new events thanks to the straightforward and structured flow of joining plans, reducing his anxiety and making socializing simpler.
Boosting Safety and Engagement with GPS and Time Tracking
John, appreciates the app’s structured interactions and location-sharing features, which offer safety and control, making him more comfortable participating in new social events. Similarly, Anna finds that GPS and real-time messaging enhance her security during spontaneous activities, making them more accessible and enjoyable. Both users benefit from the increased confidence and safety provided by GPS and time tracking, allowing them to fully engage in their social experiences.
Summary
Our app's core flows—Plan Creation, Join a Quick Plan, and Plan Participation—efficiently address user needs. Plan Creation helps John, Anna,organize and engage in social activities tailored to their preferences. Join a Quick Plan enables easy access to spontaneous events, enhancing their social interactions. Plan Participation increases safety with real-time location sharing and communication, ensuring a secure experience. Together, these features streamline social activity management and participation.
05: LUNCH PLAN
Launch Plan for Social Companionship App
The launch plan is strategically divided into four quarters, starting with core development and initial testing in Q1, followed by feature expansion and market penetration in Q2. In Q3, we focus on enhancing user engagement and optimizing app performance, and we conclude in Q4 by expanding our market reach and incorporating advanced analytics for continuous improvement. This structured approach ensures a robust foundation and progressive enhancement of the app to meet user needs effectively.
Conclusion
This portfolio captures the developmental journey of the Social Companionship App, a project that has significantly honed my skills in UX design, project management, and strategic execution. The stages outlined here—from initial conception through to the pre-launch phases—demonstrate a commitment to creating a platform that will enhance social connections in urban settings like New York City.
Looking ahead, I am eager to launch this app and witness its impact on the community. Beyond this project, my ambition is to lead a team dedicated to innovative solutions, fostering a collaborative environment where technology and design converge to improve user experiences and community engagement.
HIGH- FIDELITY
High- Fidelity Prototype and Early Usability Testing
I conducted usability testing with 12 participants using our wireframe to assess and improve the app’s structure. Feedback revealed that merging functions like "Earnings," "Calendar/Availability," and "Edit Profile" into a single "Profile" section enhanced navigation simplicity and user experience. This process significantly refined our app’s layout, making it more intuitive and user-friendly.
Refining the Wireframe Based on Usability Feedback: After usability testing, I improved the wireframe by moving the "Messages" section from the bottom menu to the top right corner and shifting "Pricing" from the bottom menu into the user profile settings. These changes simplified the user flow and streamlined navigation.
DESIGN
Homepage Framework
Product Side: Streamlines social planning with a dynamic UI that adapts to user needs, enabling easy browsing, requesting, and scheduling of meetups. Key details like duration and distance are clearly presented for informed decision-making.
Design Side: Top-down design approach tackles the complexities and variability of user growth through structured design thinking, focusing on practicality and functionality.
Interaction Side: Interactions within Gather are intuitive and efficient. Users can quickly view available activities, send requests, and confirm plans with just a few taps. The straightforward design ensures that every interaction feels natural, fostering easy and meaningful social connections.
Visual Side: Color is a crucial element affecting visuals. The old version's bottom lacked design appeal and was overly monotonous.
Data showed this had a significant impact on user conversion. In exploring upgrade options, we chose a more distinctive solution from the competition—Option 2, featuring a gradient green background that makes the interface appear lighter and more breathable.
.png)
EMPATHIZE
Online Surveys
Using Google Surveys, I target potential users to uncover their pain points, habits, and behaviors, helping us refine and enhance their experience.
Research scenario: I targeted an audience in New York, aged 20-35, delivering 224 surveys with a strong completion rate of 78%. Using Excel, I organized and visualized the data, analyzing key issues to generate actionable insights. The goal was to identify core pain points and align the resolution strategy with the project's timeline.
.png)
Results analysis: Despite frequent social activities, 55% of NYC residents often feel lonely due to time, transportation, and financial constraints. This highlights the need for targeted community solutions.
.png)
Scalable Layout Boosts Operational Efficiency
Interaction Side - Expand Top Operational Space: Maximize homepage efficiency by reserving key spaces for operations. Flexible interactive methods allow for expansion, boosting visibility and clicks for marketing activities.
Interaction Side - Configurable Operational Positions: Adapt to various operational needs with configurable mid-section slots. Our layout supports customizable integration, ensuring control and quick updates to meet business strategies.
DESIGN
Pre-alpha Version
.png)
1.0 Version
.png)
Scalable Layout Boosts Operational Efficiency
Interaction Design - Custom UI to Drive User Conversion：
As users navigate through the product, their focus shifts based on different stages and status changes within the user flow. To address these varying needs, we tailor the UI design to specific use cases, helping users identify key focal points quickly and make decisions efficiently. This customized approach enhances the product experience, streamlining the journey and boosting conversion rates.
Visual Design - Enhancing Status Awareness: Leveraging color, motion, and icons reinforces users' understanding of their current state. Color signals changes, while animations and icons guide attention to key actions, promoting seamless navigation and engagement for a smoother experience.
.png)
.png)
User Security
Reach Perception
Product Side - Enhances user filtering: The profile design uses clear metrics and detailed bios to enhance user filtering, improving match rates and engagement by facilitating a deeper understanding among users.
Visual Side: F-Pattern Layout:
The design uses an "F-pattern" layout, placing key information like ratings and reviewer details at the top and left, optimizing readability and allowing users to efficiently scan content.
.png)
Interaction Side - enhance user engagement: The app incorporates dynamic interaction through interactive prompts and user-driven navigation, enhancing engagement by making profile exploration and feature use seamless and inviting for all users.
Trust Power- Facial Recognition: The optional facial recognition feature allows users to verify their identity, boosting their profile credibility and enhancing perceived safety among the community.
.png)
Build Trust and Optimize Pathways to Boost User Conversion
.png)
Interaction Side - Reducing Screen Transition Frequency: When users begin their current plan, the screen they enter provides a map and chat window, among other essential tools, to help them quickly reach their destination. This avoids the hassle of switching screens to find external maps. The built-in chat window further assists in facilitating real-time communication.
Visual Side - Enhancing Efficiency: The interface uses floating elements over the map for easy access to chat and details, enhancing navigation and communication without clutter.
.png)
Information conversion
cognitive experience
Product Side - Ensuring Visual Consistency and Fast Launch:
Maintaining a cohesive, professional visual style enhances user trust, while focusing on quick launch cycles enables rapid iteration and improvements. This approach balances aesthetics and speed, driving user satisfaction and market competitiveness.
Interaction Side - Optimizing Information Hierarchy with the Cross-Priority Method: In interaction design, the cross-priority method uses the F-shaped scanning pattern and adapts content based on user context. After booking a plan, key details like time and location are prioritized, reducing cognitive load and improving efficiency.
Interaction Design - Sticky Button for Improved Usability：
A sticky button at the bottom of the screen enhances usability by ensuring the call-to-action reappears after scrolling, even when the top CTA disappears. This design keeps key actions easily accessible, improving user convenience and interaction flow.
Establishing a Cohesive Design Framework
Our project to develop the design system for our social meetup app has laid the groundwork for a cohesive and scalable user interface. By refining our design language and enhancing key features, we've established a robust framework that ensures consistency and prepares us for future enhancements.
.png)
Design System: For the design system of our social app, we've chosen the vibrant shade of green, color code 0EAB56, as the main color. This fresh, lively hue reflects the app’s energetic and welcoming nature, aimed at fostering social connections.
.jpg)
IDEATE
Analyzing Social Process Blockages
I developed user personas from interviews and surveys with lonely New Yorkers, and paired them with journey maps. These tools guide feature design, aligning with specific needs and optimizing the user experience, ensuring the app remains relevant and effective.
Product-Side - Improving User Conversion Rate: The user journey in a social app involves multiple complex interactions, from signing up and creating a profile to exploring and joining activities. The design must minimize user drop-off and support the entire engagement process, ensuring users stay active and complete their interactions within the app.
Analyzing Design Opportunities:The key to this design phase is enhancing successful social matching. We can leverage user research and track the entire user journey through journey maps and page audits. By identifying inefficiencies and cumbersome processes via an emotion curve map, we can optimize these areas. Design efforts should focus on three key areas:
1.Streamline interactions by reducing steps and clicks to lower drop-off rates。
2.Simplify input requirements to reduce friction and improve user conversion.
3. Enhance platform identity to build trust and increase user engagement and retention.
DEFINE
App SiteMap Literation and Refinement
I designed the site map to streamline navigation and simplify interactions. By reducing complexity and merging key sections, I aimed to enhance user flow and minimize friction. Usability testing confirmed this approach improved app efficiency and intuitiveness.
.png)
Tree Testing: I refined the site map to enhance navigation efficiency and user interaction in the social app. Through tree testing with 20 participants, I optimized layouts, boosting task completion from 60% to 80%. This improvement aimed to streamline user flow and make discovering and joining social activities more intuitive and seamless.
