Empowering Learners with Choice: A Personalized Approach to ESG Education

This project aimed to restructure how users engage with Competent Boards education. We identified a critical need for flexibility and personalization within the program structure.

Our solution? Select specific ESG topics that align with their individual needs and interests to empower learners with the freedom to curate their learning journeys. This approach not only makes ESG education more accessible and affordable but also fosters a more engaging and impactful learning experience.

To achieve this vision, we embarked on a comprehensive redesign of the program's online presence, leveraging Shopify's power to create a user-friendly e-commerce experience.

Problem: For users, the ESG program was too long and expensive, and some people only wanted to learn specific parts of it. For the company, there was a Lack of mini-courses and a “pick your class” option.

Solution: Create new products with specific classes/ESG topics. Introduce a shopping cart experience to allow users to buy single products or bundles.

Deliverables: Market Research, Technology specs, user research, information architecture, user journey, wireframes.

Shopping cart and New products: Personalized Learning and Optimized Experience 

To enhance the website and drive sales, we designed new products and pages with a Shopify-based integration that allows users to use a shopping cart. 

From Idea to Reality, the Design Process 

Our process involved rapid cycles of brainstorming, building, and refining. We streamlined this into three key stages: 

1. Research and Ideation:

• Understanding the Challenge: We began by deeply understanding the problems we were trying to solve. This involved analyzing user behaviour, identifying pain points in the existing website, and exploring potential opportunities for improvement.

• WordPress Capabilities: We also deeply explored WordPress's capabilities and limitations, especially concerning e-commerce functionality and integration with other platforms like Shopify and Thinkific.

• Brainstorming Solutions: With a clear understanding of the challenges and platform capabilities, we brainstormed a wide range of ideas. We explored how to best leverage each platform (WordPress, Shopify, Thinkific) for its strengths while ensuring a smooth and unified user experience across all three.

2. Wireframes and Validation:

• Visualizing Concepts: We translated our ideas into visual representations using wireframes. These low-fidelity mockups helped us map the website's structure, navigation, and key elements without getting bogged down in visual details. This included visualizing the user flow between WordPress, Shopify, and Thinkific.

• Gathering Feedback: We shared the wireframes with potential users and stakeholders to gather early feedback. This allowed us to identify usability issues, unclear elements, or missing features before moving to the next stage.

3. Prototype, Validation, and Iteration:

• Building a Functional Prototype: Based on the validated wireframes, we developed a functional prototype. This interactive model simulated the website's core functionality and user flows, including interactions with Shopify and Thinkific, allowing users to experience the proposed design.

• Seamless Transitions: We paid close attention to creating a seamless user experience as users moved between the WordPress site, the Shopify store, and the Thinkific learning platform. This involved ensuring consistent branding, navigation, and user interface elements.

• Testing and Refining: We conducted user testing sessions with the prototype to observe how users interacted with the website and transitioned between platforms. We gathered valuable insights into their behaviour, preferences, and remaining pain points, particularly concerning integrating the three platforms.

• Iterative Improvements: Based on the user feedback, we iteratively refined the prototype. This involved adjusting the design, content, and functionality to address the issues identified during testing. This cycle of testing and iteration continued until we achieved a user-friendly and effective solution with a seamless flow between WordPress, Shopify, and Thinkific.

Prototype Design Decisions 

• Program Display: We replaced the proposed Elementor tabs (which proved unworkable) with interactive boxes or two separate static boxes to present program information.

• Checkout Flow: We maintained a consistent visual style (the "bar status") if the checkout occurred within WordPress. If it redirected to Shopify, we explored ways to ensure a smooth and visually consistent transition.

• Purchase Options: We incorporated two "Buy Now" buttons at different stages of the user journey – one for immediate purchases and another for users who chose to learn more first. This simplified the buying process and aimed to reduce cart abandonment.

• Module Loading: To enhance site speed and user experience, we implemented a "Load More" button for program modules (similar to the ESG Certificate page) instead of displaying a long list. We determined this was unnecessary for Climate modules due to the limited number of current modules.

• Content Recommendations: We utilized two content boxes linked to related modules based on similar topics to offer relevant suggestions without immediate AI integration. However, we recognized that investing in AI for personalized recommendations is crucial for the future.