Sidelined
Sidelined is a dedicated social media platform designed specifically for injured athletes aged 14-30 to connect, share experiences, and support each other during recovery. The platform enables users to engage through posts, videos, and images, while offering specialized features like injury tracking, sports filtering, and mental health support. Its goal is to build a positive community for athletes to stay motivated, informed, and resilient during their recovery journey.
Problem Statement
Designing Sidelined requires creating a secure and engaging platform tailored to injured athletes, offering them a sense of community and reliable recovery resources. Key requirements include specialized injury tracking, personalized content recommendations, and robust engagement features like messaging, filtering, and content sharing, ensuring a safe space for mental and physical recovery.
Challenges
When designing Sidelined, I wanted to ensure the platform meets the needs of injured athletes and creates a positive, supportive environment which was listed in the environment.
-
Content Delivery: Creating an algorithm that effectively matches posts based on the user’s sport, injury, and body part while ensuring relevance and engagement.
-
User Engagement & Motivation: Developing features that keep users engaged during their lengthy recovery, including tracking progress, offering support, and promoting mental resilience.
-
Data Privacy & Security: Ensuring that sensitive health and injury information is securely stored and handled, especially with COPPA compliance for users under 18.
-
Inclusive & Supportive Community Building: Balancing an open, supportive environment with the right moderation to prevent negative or harmful content.
-
User Accessibility & Experience: Designing a smooth, intuitive user interface that works seamlessly across different devices (native iOS, Android, and optimized web application) for ease of use by the target demographic.
Timeline
November 2024 - Present
(In development phase)
Role
Lead Product Designer
(Research, Visual Design, Design system, UX/UI Design, Design Delivery)
Team
Self directed, with client, technical dev engineer and project manager
Site Map
After discussing the requirements with the client, I initiated the information architecture design by outlining key features and developing a site map for the application. Although some features were later removed, the initial version still includes essential functionalities such as chat, profile management, post creation, and networking. Some features that are complicated and requires more budget for example the group chat and public groups were put for the future versions.
Information architecture & site map
Userflow
The client requested that users receive posts and feeds upon signing up, so we developed an onboarding process to ensure users can select their preferences for the content they want to see. During onboarding, users can choose their sport type, injury, and specific body part. This filtering mechanism helps tailor the content, providing a personalized home page with posts relevant to their selections.
Userflow
Sketches & Wireframes
The next phase involved creating rough sketches to visualize the key screens of the app. This allowed the client to better understand the layout and flow of the application, helping them refine and prioritize features within the budget. It also gave them a tangible sense of the app's potential and how the user experience would unfold. These initial sketches acted as a foundation for further design, ensuring alignment between the client’s vision and the app’s functionality, and facilitating early-stage feedback to enhance the final product.
Adding these sketches also played a key role in identifying any potential challenges early on, which led to more effective decision-making as we moved forward with the design process.
Initial sketches
Design System
After refining the user flows and perfecting the basic features of the wireframes, I eagerly dove into setting up a design system file. Starting with just the client's logo, I drew inspiration from its blue color, using it as the foundation for creating cohesive color styles, variables, and components. Subsequently, I designed two themes—light and dark—each with its unique appeal. Utilizing the light theme, I crafted lo-fi wireframes that are not only functional but also visually engaging, laying the groundwork for a user-centric experience. Client wanted a strong deep engaging feeling and picked the dark theme.
Design theme decisions
Design Components
After the lo-fi wireframes were approved, the visual design was developed to align with the client’s vision of a dark theme that complements the brand’s blue. To complete the visual design, I built a design system incorporating all the essential components needed to support the dark themes.
Design system and styles
Design Wireframing
The design wireframes were developed by first narrowing down and selecting features in collaboration with the client. The client needed to see both the wireframes and the visual design together to make informed decisions. Client's budget for the project and time played a significant role in making this decision and shortlisting the features.
Design wireframes
1. Onboarding process
-
The onboarding process allows users to select their preferred sports, body parts of interest, and injury types. This ensures their home feed is tailored to their specific needs and interests.
-
Users can modify their selections at any time in the settings, providing flexibility and allowing their experience to evolve based on their preferences and needs.
-
The design prioritizes simplicity and ease of use, guiding users through a structured selection process with clear visual cues and interactive elements.
Onboarding process
2. Home feed and discovery
-
The home feed dynamically adapts to user preferences selected during onboarding, showcasing relevant posts, discussions, and content based on their chosen sports, injuries, and interests.
-
Users can explore content through categorized filters, search functionality, and suggested connections, creating a highly interactive and engaging experience.
-
A visually rich and user-friendly interface ensures smooth navigation, allowing users to engage with posts, follow others, and stay updated with trending topics in the sports and recovery community.
Home feed and discovery
3. Egagement and community interaction
-
Users can engage with posts by liking, commenting, and sharing, fostering an interactive and supportive community.
-
A built-in messaging feature enables direct communication, allowing users to connect, share updates, and discuss topics related to sports and recovery.
-
The post creation feature allows users to share content with relevant tags, ensuring better visibility and engagement within their community.
-
Customizable account preferences let users refine their feed by updating their interests, ensuring a personalized experience over time.
-
A notification system keeps users informed about interactions, including new followers, likes, comments, and tags, ensuring they stay connected and engaged.
Engagement and community interaction
This app is currently in the development phase, with exciting plans for Version 2 already in the works to enhance user experience and introduce new features. The design and planning have successfully met the requirements and effectively achieve the intended goal.