Pebbler

Project Overview

Pebbler is a video-sharing app focused on fostering meaningful connections between users through shared interests and thoughtful interactions. The name “Pebbler” is derived from the act of “Pebbling,” inspired by penguins offering pebbles to each other, symbolizing small, caring gestures. Pebbler prioritizes human connection over monetization, ensuring that users are able to engage in an authentic, supportive, and engaging community experience.

Key Features:

  • The Stream: A personalized video feed tailored to each user based on their interests and preferences.

  • Customizable Algorithm: Users can influence what content appears on their Stream, ensuring it’s relevant to their unique hobbies and needs.

  • Communities: Users can share videos and interact with like-minded individuals in niche communities centered around their passions.

Goals and Objectives

  • User-Centric Design: Prioritize intuitive and easy navigation, personalization features, and emotional connection.

  • Create a Meaningful Feed: Ensure that the content on The Stream is relevant, supportive, and tailored to user preferences.

  • Community Building: Foster deeper engagement through hobby-based communities where users can share and connect over shared interests.

  • Accessibility: Ensure that the app is usable for people with disabilities, following WCAG 2.1 guidelines.

  • Scalability: Design for future growth with flexible UI elements that can adapt as new features and content types are introduced.

My Role & Responsibilities

As the Lead UX/UI Designer for Pebbler, my role encompasses leading the design process from conceptualization to final execution, ensuring that the user experience aligns with the app's mission of fostering meaningful connections. Below are the key responsibilities that I have undertaken:

A. Product Vision & Strategy

  • Defining the User Experience: Collaborating with product managers and stakeholders to define the overall user experience strategy, ensuring it aligns with the core values of the app—putting people over profit.

  • Feature Prioritization: Working closely with the product team to prioritize features based on user needs, business goals, and technical feasibility, ensuring the most impactful features are developed first for the Beta and Product launch.

B. Design Leadership

  • Design Direction: Leading the visual design direction of the app, establishing the overall look and feel while maintaining consistency throughout all user interfaces.

  • Design System Development: Creating and maintaining a scalable design system, including UI components, typography, color schemes, and iconography, ensuring design consistency across all platforms.

  • Branding: Developing and refining the Pebbler brand identity, ensuring that the app’s design reflects its core values of connection, care, and community. This includes choosing appropriate visual elements, colors, and animations inspired by the penguin and pebbling concept.

C. Human Centered Design

  • User Research: Conducting user interviews, surveys, and usability testing throughout the design process to validate design decisions and ensure user needs are being met.

  • Personas & Journey Mapping: Creating detailed user personas and customer journey maps to better understand user goals, pain points, and behaviors, guiding design decisions.

  • Prototyping & Wireframing: Leading the creation of wireframes, prototypes, and user flows to communicate design concepts and ensure a seamless user journey from onboarding through daily engagement.

D. Collaboration & Stakeholder Communication

  • Cross-Functional Collaboration: Collaborating with developers, product managers, and other key stakeholders to ensure design requirements are fully understood and properly implemented.

  • Feedback and Iteration: Iterating on designs based on feedback from internal teams and external users, ensuring the design evolves in response to real-world user data.

  • Stakeholder Presentations: Presenting design concepts and solutions to stakeholders, ensuring alignment with both business and user needs.

E. Mentorship & Team Development

  • Mentoring Junior Designers: Providing guidance and support to junior designers and interns, fostering their growth and development within the design process.

  • Design Workshops: Leading design workshops to explore new ideas, brainstorm solutions, and align the team on design direction.

F. Accessibility & Inclusivity

  • Inclusive Design: Ensuring that the app is fully accessible to users with disabilities by adhering to WCAG guidelines and integrating accessibility features such as screen reader compatibility, high-contrast modes, and closed captions for videos.

  • Universal Usability: Prioritizing a user-centered design approach that focuses on ease of use for a diverse audience, considering factors such as varying technical expertise and language barriers.

G. Performance Monitoring

  • Tracking Design Success: Utilizing analytics and user feedback to track how design decisions impact user engagement and satisfaction. Adjusting designs accordingly to improve key performance indicators (KPIs) such as user retention and session length.

  • Continuous Improvement: Ensuring continuous refinement of the app’s design based on user feedback and performance data post-launch, focusing on areas that need improvement to enhance the overall user experience.

Feature Requirements

A. The Stream (Personalized Video Feed)

  • Personalization: The feed should adapt to users' preferences through both passive and active input (likes, follows, and interactions with content).

  • Continuous Scroll: Infinite scrolling will allow users to browse through videos without interruption.

  • Video Previews: Thumbnail previews for videos to give users a quick glance before committing to full playback.

  • Tagging & Search: Videos should be taggable based on content, community, and interests. This allows users to filter and search content effectively.

  • Accessibility: Provide options to toggle captions/subtitles and allow high-contrast modes to ensure inclusivity.

B. Customizable Algorithm

  • User Input: Users will be able to customize their feed by selecting specific interests or topics.

  • Filtering Options: Enable filtering out content that doesn’t align with the user’s interests or preferences.

  • Engagement Feedback Loop: The algorithm should learn from user engagement, such as likes, comments, or watch time, to adjust recommendations.

C. Communities

  • Community Discovery: Easy search and discovery of communities based on hobbies or interests.

  • Group Sharing: Enable users to share videos within communities and engage with others' content.

  • Member Profiles: Each community member will have a profile showing their videos, likes, and comments, as well as badges for community involvement.

  • Moderation Tools: Each community will have basic moderation tools to ensure a safe, respectful space for everyone.

Early Wireframes

Early Mock-ups

Information Architecture

  • Clear Navigation: Easy-to-understand navigation with a bottom navigation bar to switch between The Stream, Communities, Notifications, Profile, and Search.

  • Hierarchy: The home screen (The Stream) should be the central hub, with a prominent call-to-action for the main features, such as “Join Community” or “Customize Feed.”

  • Minimalistic Layout: A clean, uncluttered interface that emphasizes content with a focus on video viewing, community interaction, and user engagement.

B. Visual Design

  • Branding: Use soft colors and rounded elements that convey warmth, connection, and approachability (inspired by the theme of penguins giving pebbles).

  • Consistency: Ensure consistent UI components across screens, like buttons, cards, and icons, following a clear design system.

  • Motion Design: Subtle animations should enhance interactions, like smooth video transitions, hover effects, and community feed loading states.

C. Mobile-First Design

  • Responsive Design: Design layouts should adapt seamlessly from mobile to tablet, and future desktop versions should maintain ease of use and accessibility.

  • Gestures: Incorporate intuitive gestures like swiping to navigate between videos and tap for more options.

Accessibility

  • Color Contrast: Ensure that color contrast ratios meet WCAG guidelines for readability and legibility.

  • Keyboard Navigation: For accessibility on desktop, ensure users can navigate the platform fully via keyboard.

  • VoiceOver/Text-to-Speech: Ensure screen reader compatibility for all major iOS and Android devices.

  • Subtitles: Provide closed captions for videos whenever possible, especially for community videos.

Usability Testing

  • Beta Testing (June 1st - July 31st): Conduct usability tests with a range of users to ensure ease of use and intuitiveness of the video feed, community engagement, and content discovery features.

    • Feedback Loop: Collect feedback through surveys, interviews, and in-app analytics to make improvements.

  • User Stories: Develop user stories for various personas (e.g., “As a fitness enthusiast, I want to watch fitness videos from like-minded people so I can learn new workouts”).

Timeline and Milestones

  • Beta Launch: June 1st, 2025 – Focus on initial user testing and feedback for key features (Stream, Communities, Customizable Algorithm).

  • Final Product Launch: September 1st, 2025 – Feature refinement, accessibility improvements, and full community implementation.

Success Metrics

  • User Retention: Measure the percentage of users who continue to engage after the first month.

  • Engagement: Track average watch time per session, comments, and interactions within communities.

  • NPS Score: Aim for a Net Promoter Score of 7 or above, reflecting high user satisfaction.

Conclusion

Pebbler’s UX/UI design will focus on building an engaging, user-friendly, and inclusive platform for people to connect and share through meaningful video content. By prioritizing user engagement, customization, and community interaction, Pebbler is poised to create a space where users feel valued and connected through their passions.

Other Screens

These screens are still being refined, reworked. This includes removing placeholders, lining up pixels and other refinements.