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:
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
• 1PM and 1 engineer.
• Sole designer.
• Easy and quick to build.
• Build on existing designs.
I researched some competitors' shop page to find inspiration. What I took away were:
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.
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.
Implementing effective calls-to-action and streamlined user flows will facilitate the conversion of website traffic into customers or repeat users on our platform.
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.
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.
To streamline access to information about each workshop, we should consolidate relevant details rather than dispersing them across multiple pages.
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.
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 design (from left to right: desktop - tablet - mobile)
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
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.
chelseaxudesign@gmail.com
Made with love❤️ and lots of coffee ☕
© 2024 Chelsea Xu All Rights Reserved