Skillshare

My Role

During my internship at Skillshare, I worked on five projects that contributed to the integration of Superpeer, a newly acquired creator hub where users can sell digital products. One key project involved designing a responsive multi-image carousel for product detail pages, enhancing the browsing experience for potential buyers.

Due to NDA restrictions, I cannot share every detail of this project.

The Challenge

Creators on Superpeer could upload unlimited images and videos for their digital products. However, Skillshare's platform lacked an optimized way to display this media to potential buyers. Additionally, the integration had technical constraints, such as limited support for autoplay videos.

Skillshare only allowed one thumbnail upload

Key considerations

01 Intuitive Experience

Allow potential buyers to view multiple images and videos in a clear, responsive format.

02 Technical Constraints

Addressing limitations, such as preventing autoplay for videos, to avoid surprising users.

03 Optimized Performance & Accessibility

Meet Skillshare’s standards for performance, accessibility, and SEO.

Establishing objectives

Design Principles

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.

The approach

Research and collaboration

Understanding User Needs:

I worked with my product manager and conducted secondary research to define the requirements. Buyers needed:

A clear way to preview images and videos.
Smooth navigation, especially on mobile.
Non-intrusive video playback options.

Technical Constraints:

Through discussions with the PM, engineers, and my design mentor, I identified:

Videos couldn’t autoplay due to platform limitations and potential negative user experience.
Overloading the carousel with excessive controls could lead to clutter.

Design process

Designing for launch

Layout Exploration

The first step involved brainstorming and iterating on layout designs for the multi-image carousel. I considered design constraints such as the need for responsiveness, integration with Skillshare’s design system, and the optimal display of both images and videos.

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 the PM and engineering team, I simplified the video player’s functionality to balance technical limitations and user needs.

The final design retained only the essential controls: Mute/Unmute Play/Pause

‍This decision avoided overwhelming users while keeping the experience straightforward and functional. Advanced controls (e.g., skip 5 seconds, volume adjustment, playback speed) were omitted to reduce cognitive load and streamline interactions.

Communication

Communicating design decisions

Notes for devs

I made sure to include multiple notes like the following to ensure there is no confusion in the delivery of the designs.

Prototype

I built interactive prototypes to demonstrate carousel functionality, including swipe gestures, video player controls, and responsive behavior.

Iteration

These prototypes were tested and iterated upon based on feedback from design critiques and internal testing.

competitive research

Strategic Impact

During this project, I was also involved in a design iteration for image card carousels. Through competitive analysis, I identified that many competitors had initially introduced similar features but removed them due to low engagement.

‍Outcome:
I successfully pitched to deprioritize this feature, allowing the team to focus on higher-impact areas. This decision helped inform the product roadmap and saved resources for more strategic initiatives.

Impact

Launched multi-image carousel, improved purchase experience

The feature went live on Skillshare’s platform, enabling learners to view multiple images and videos of digital products seamlessly across devices.
The carousel empowered users to make more informed purchasing decisions through an intuitive and responsive interface.

Looking back...

Takeaways

This project allowed me to deepen my skills in balancing user-centered design with technical and business requirements.

‍Prioritization: Effective research can guide design decisions and help the team focus on high-impact features.

Collaboration: Prototyping was a crucial tool for alignment between design, engineering, and PMs.

‍Optimization: Ensuring performance and accessibility requirements were met enhanced the overall user experience.

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