Wrkble: Online e-learning platform to get you career ready

- brief -

Wrkble is an e-learning platform that emphasizes hands-on experience by providing students with real projects on GitHub. This unique approach ensures that users gain practical skills directly applicable to advancing their careers.

- context -

Wrkble was developed to address the gap between theoretical knowledge and practical skills in the job market. Many e-learning platforms offer courses but lack the opportunity for students to apply what they've learned in real-world scenarios. Wrkble aims to bridge this gap by providing real projects and challenges that mirror industry needs.

- problem statement -

The traditional e-learning approach often leaves students without the practical experience required to be job-ready. Wrkble's challenge was to create a platform where users could apply their knowledge in real-world scenarios, thereby gaining relevant experience that would make them more attractive to employers.

- quick glance for hiring managers -

• Problem: Wrkble aimed to bridge the gap between theoretical learning and practical, job-ready skills through hands-on projects on GitHub. The challenge was creating a platform that combined learning with real-world experience.
• Approach: I developed personas and conducted surveys and interviews to understand the needs of students and professionals. We explored ways to integrate real-world projects, ultimately hosting them on GitHub for collaboration. I iterated on the design based on user feedback, focusing on the user journey, accessibility, and navigation. Usability testing identified critical issues, leading to design changes that significantly boosted course sales. I worked with a cross-functional team, balancing design goals with business and technical constraints, ensuring the platform's accessibility and scalability. A key stakeholder was a Udemy instructor with 12,000 students, helping us enter the market.
• Contribution: As UX Engineering Lead, I drove the design process, created user flows and wireframes, and conducted usability tests. My leadership in the redesign improved engagement and usability, resulting in increased course sales.
• Outcome: The redesign improved user satisfaction and met business goals, but the project was ultimately sunsetted due to heavy market competition. Despite entering the market with the help of the Udemy instructor, it wasn't as fruitful as expected, but we gained valuable insights from the experience.

- crafted solution -

Wrkble offers a unique learning experience by integrating real-world projects into the curriculum. Students tackle actual problems in tech, hosted on GitHub, which provides them with hands-on experience. This practical approach prepares them for real job challenges, making them career-ready upon completion of the courses.

- timeline -

• Team: Paawan (Designer), Yogendra (Senior Designer), Sahil (Product Manager), Gourav (Frontend), Lovely (Frontend), Shubhi (Backend), Merul (Senior Backend & CTO), Ananya (Frontend Intern), Prashant (Marketing Lead, Host for click actions), Jyoti (Social Media), Pratibha (Marketing & Sales), and Yash (User Experience Lead).
• Role: UX Engineer Lead
• Duration: 8 weeks
• Tools Utilized: Figma, HTML, CSS, JavaScript, TypeScript, Svelte, Postgres, GitHub, various UI/UX tools

- brand kit (Using Outfit) -

- project goals -

• To provide an e-learning platform that goes beyond theory and prepares students for real-world jobs.
• To increase user engagement by offering hands-on projects.
• To improve the employability of students by bridging the gap between education and employment.

- research -

• Personas: Developed personas focusing on students, recent graduates, and professionals looking to upskill.
• Target Audience: Individuals seeking to gain practical experience and make themselves more marketable in the job industry.
• Analysis: Surveys and user interviews revealed a strong demand for practical experience and real-world applications in e-learning platforms.

- future development -

We are currently researching new features to enhance Wrkble's offerings. Our goal is to connect with recruiters and companies to send them resumes of our top students. Upon completion of certain skills, we provide a complementary resume builder and add the student's name and resume to our database. This allows companies to reach out to highly skilled students directly. These features are in the research phase, but they represent our commitment to bridging the gap between education and employment.

- brainstorm and ideation -

• Possible Solutions: Explored various ways to integrate real-world projects, including collaborations with companies and open-source communities.
• Chosen Solution: Opted to host projects on GitHub, where students could work on real issues and showcase their work to potential employers.

- sketches and wireframes -

Created initial sketches focusing on user flow, navigation, and key interaction points. These were translated into wireframes, emphasizing ease of use and intuitive design.

- iterations -

Iterated on the platform's design based on user feedback, focusing on improving navigation, enhancing user engagement, and ensuring the platform was accessible and intuitive.

- components -

- svg animations -

Created interactive SVG animations for cart and wishlist and the interactions helped people enjoy the purchasing (and wishlisting) process with gamification effect, try clicking the icons below:

- prototype -

Created a fully interactive prototype in Figma, showcasing the user journey from course selection to project submission. This prototype was used for stakeholder presentations and usability testing.

- usability report -

Conducted usability tests with real users to identify critical issues and areas for improvement. The tests were conducted in person, without screen captures, focusing on user behavior and interaction with the platform.

Usability Report that led to a Redesign

- redesign -

- case study: usability improvements boost course sales by 500% for wrkble -

- normalcy bias -

Normalcy bias refers to how people expect things to work based on their past experiences, which may not always align with reality. For example, users might expect their camera's flash to activate automatically at night, not considering that a low battery could prevent this. We observed normalcy bias in Wrkble and addressed it by implementing an offline and online event listener. This feature checks if the user or admin is offline, ensuring that important course edits and submissions are not missed. We added a spinning offline animation to indicate the system is trying to reconnect and a 1-second check symbol to show the user is back online. This approach helps manage user expectations and maintain a seamless experience.

Try Going offline and see what happens!

- new design -

The final design focused on clarity, engagement, and practicality. It included features like breadcrumb navigation, clickable elements, and a more human-centric design on the landing page to foster empathy and connection.

- conclusion -

• Challenges: Addressing normalcy bias in users who expected certain functionalities to work in specific ways, improving accessibility, and making the platform more intuitive.
• Learnings: Identified the importance of user-centric design and the need for continuous iteration based on user feedback.
• Outcomes: Usability improvements resulted in a 500% increase in course sales, demonstrating the effectiveness of the redesign.

- scope of improvements -

Future developments include integrating a resume builder and a recruiter connection feature. These are in the research phase and aim to further bridge the gap between education and employment.

- what could have been better -

The initial launch could have included more comprehensive user testing across different devices, particularly iOS, to catch platform-specific issues earlier in the process.

- final feedback and suggestions -

The usability report provided actionable insights, such as the need for better iconography and more intuitive navigation. These improvements were implemented in the final design, resulting in a more user-friendly platform.