Skillshare

Designing Multi-Image Carousels for Skillshare’s Digital Products
Timeline
Context
Project Type
Team
October 2024 (2 week project during my 3 month internship)
Internship
UX Design
High-fidelity Prototyping
Responsive Design
E-commerce
1 Product Designer (Mentor)
1 PM
2 Developers
Introduction
Bridging the Gap Between Superpeer and Skillshare
During my internship at Skillshare, I worked on five projects to integrate Superpeer, a newly acquired creator hub that enables users to sell digital products.

One major challenge surfaced quickly: creators could upload unlimited images and videos, yet Skillshare’s platform only displayed a single thumbnail.

This disconnect meant buyers lacked essential product previews, which could hurt engagement and conversions.
‍
To solve this, I designed a responsive multi-image carousel that allowed users to browse digital products more seamlessly—while ensuring accessibility, performance, and consistency with Skillshare’s design system.
Link to live site
The Challenge
Why This Problem Mattered
Limited Media Display:
Superpeer creators could upload multiple product images and videos, but Skillshare’s product pages only supported a single thumbnail. Buyers lacked visual context, making it harder to evaluate products before purchasing.
Key considerations
01 Technical Constraints
Users could upload videos on Superpeer, but no video support existed on Skillshare’s side. We had to determine how to utilize the existing video player controls in the system and seamlessly integrate them to fit the purpose of this project.
02 Accessibility and Performance Standards
Any solution had to meet Skillshare’s strict WCAG accessibility standards and be optimized for seamless mobile performance.
How might we design an engaging yet lightweight carousel that enables frictionless exploration of digital products—while working within Skillshare’s technical and business constraints?
Design Principles
Establishing Objectives
01 Seamless Responsiveness
Ensure effortless navigation across devices with a focus on mobile-first design.
02 Minimalist Clarity
Simplify video player controls to enhance usability without overwhelming users.
03 Design System Alignment
Leverage Skillshare's existing UI components for efficiency and consistency.
Research and Collaboration
The Approach
Understanding User Needs:
To define the right solution, I collaborated with my PM and conducted secondary research on digital product browsing behavior. Key insights from buyers included:
  • ✅ A clear way to preview images and videos.
  • ✅ Smooth navigation, especially on mobile.
  • ✅ Non-intrusive video playback options.
Identifying Technical Constraints:
Working closely with engineers and my design mentor, I uncovered:
  • 🚫 Autoplaying videos can be disruptive, especially when users are browsing multiple products. Unexpected motion or sound may create a negative experience, particularly for users in quiet environments or those with sensory sensitivities.
  • ⚠️ Excessive controls could clutter the experience, reducing usability.
  • 📱 Mobile navigation required a gesture-friendly approach
Design process
Exploring Layouts & Interactions
Initial Concepts:
  • A thumbnail strip for quick browsing (adopted for web screens, discarded on mobile due to space constraints).
  • A fade-in transition effect for smooth image/video switching (discarded due to performance concerns on lower-end devices).
  • A simplified left/right swipe system (adopted for its intuitive feel and low cognitive load).
Interactions for Accessibility
I focused on making the carousel interactions intuitive and accessible. For instance:
  • Clearly defining hover states and selected states for both images and videos to ensure users can easily navigate.
  • Incorporating WCAG-compliant designs to accommodate users with varying abilities.
Designing for Responsive Screens
I ensured the carousel worked seamlessly across mobile, tablet, and desktop. This involved creating prototypes for different screen sizes and ensuring media resizing maintained clarity and usability.
Addressing technical constraints
Collaborating with engineering, I simplified the video player controls to avoid unnecessary complexity:

✅  Kept only essential controls: Mute/Unmute and Play/Pause.
🚫  Removed advanced controls (e.g., playback speed, volume adjustments) to streamline interactions.
Communicating design decisions
Developer Handoff
Detailed Figma annotations specifying responsive behaviors
To ensure smooth implementation, I provided detailed logic notes:
Prototype
I built interactive prototypes to demonstrate carousel functionality, including swipe gestures, video player controls, and responsive behavior.
Iterating Based on Feedback
I refined the design based on internal testing & design critiques, addressing:
‍Overly complex video interactions (simplified to keep focus on content).
Gesture feedback on mobile (tweaked swiping thresholds for a more natural feel).
competitive research
Strategic Impact
During this project, I was also involved in a design iteration for adding multiple images to the Digital Product card for the product browsing page.
‍
🚨 Through competitive analysis, I identified that many competitors had initially introduced similar features but removed them due to low engagement.
‍
This led me to challenge the initial project scope. Instead of blindly implementing the carousel, I proposed a smarter prioritization approach:
✔ Track engagement data before committing resources to enhancements.
✔ Shift focus to higher-impact product discovery features, rather than investing heavily in an unproven component.

‍Outcome: I successfully pitched to deprioritize non-essential carousel features, saving development resources and improving alignment with Skillshare’s long-term strategy
Final Impact
Launched multi-image carousel, improved purchase experience
🚀 Live on Skillshare’s platform – Users can now browse multiple images and videos of digital products seamlessly.
💡 Influenced future roadmap – My competitive research helped redirect focus toward more impactful UX improvements.
Looking back...
What I learned
This project allowed me to deepen my skills in balancing user-centered design with technical and business requirements.

📌 Prioritization Matters – Effective research can prevent wasted effort on low-value features and help focus on what truly impacts users.
📌 Collaboration is Key – Working closely with PMs and engineers ensured that design decisions aligned with both user needs and technical feasibility.
‍📌 Simplicity Wins – A minimalist approach led to a cleaner, more intuitive UX, reinforcing the value of removing unnecessary complexity.

This project strengthened my ability to create scalable, user-centered designs that meet both business and user needs.