Klatch Shop Page

Online Learning Reimagined


1 months
Launched in 2023


Jeremy Doochin(CEO);Jordan Pakrosnis(Engineer);
Yao Xu(Product Designer).


Klatch, a E-learning platform, specializes in offering a diverse range of workshops catering to a wide audience of learners. With its growing popularity, Klatch expanded its workshop portfolio to cater to its users' varied interests and requirements. However, with growth came unforeseen challenges...


Our prior strategy of showcasing workshops directly on the homepage started showing signs of inefficiency as the number of workshops swelled. This linear presentation led to:

My Task

I was given the task to design the Klatch’s shop page from scratch.


Initially, I conducted an analysis of the various pages a user might encounter while exploring the workshop on our platform. What I found was:

• Difficulty in discoverability
• Cluttered homepage
• Inefficient exploration

Business Constraints

• 1PM and 1 engineer.
• Sole designer.
• Easy and quick to build.
• Build on existing designs.

Target Users


Competitors Analysis

‍I researched some competitors' shop page to find inspiration. What I took away were:


Navigation and organization

Designing a user-friendly and well-organized shop page with search functionality, filtering options, and clear categorization of workshops will ensure a seamless and intuitive browsing experience for users.


Trust and credibility

Building trust and credibility with potential learners by incorporating elements such as course overviews, user reviews, and facilitator profiles into our shop page will foster confidence and encourage user engagement with our offerings.


Conversion optimization

Implementing effective calls-to-action and streamlined user flows will facilitate the conversion of website traffic into customers or repeat users on our platform.

How might we design Klatch's shop page to minimize visual clutter and streamline workshops discovery, thereby elevating user experience and increasing conversion rate?


Here are the preliminary sketches I've prepared to consolidate information effectively.
Following a collaborative discussion with the manager and engineers regarding the initial drafts, we explored several variations and ultimately decided on the presented wireframes.

Mid-Fidelity Mockups

Ideation 1

How to display information in a most efficient way

To ensure design coherence, we have overhauled the workshop cards to align with the prevailing design aesthetics. This not only streamlines the user interface, but also simplifies the development process for our engineers, ensuring a consistent appearance throughout.

Shop Page Structure

Ideation 2

To streamline access to information about each workshop, we should consolidate relevant details rather than dispersing them across multiple pages.

Option A: Display secondary information on 'Quick View' click

My first proposal is to introduce a 'Quick View' feature. Upon selection, a screen will display the relevant details about the workshop, all within the current page. If the content doesn't align with the user's needs, they can simply click outside the modal to dismiss it and continue browsing.

Option B: Display secondary information on hover

I have developed an alternative version,  simply hovering over the workshop card will display a pop-up with essential information, eliminating the need for any clicks. Once the cursor is moved away, the pop-up automatically disappears.

Responsive Designs

Responsive design (from left to right: desktop - tablet - mobile)

Usage Date

Increased the site’s conversion rate by 139%


1. Make the key actions more discoverable and accessible
2. Improved consistency throughout several pages related to the shop page
3. Improved the efficiency enrolling in workshops

📔 My Takeaways

1. Collaborate with engineer and handoff final design.
2.Challenge myself to think of a lot of iterations.
3. Conduct user testing and incorporate user feedback.

Let's Chat!

View my Résumé

Made with love❤️ and lots of coffee ☕
© 2024 Chelsea Xu All Rights Reserved