Designing an Enhanced
Online Learning Experience

Bridging the Gap for Online Learning Platform Interactivity with Product Design

The COVID-19 pandemic has accelerated the shift towards online learning, making it more popular than ever before. However, many existing learning platforms still fall short in meeting the needs of their users. Learners are finding it difficult to stay engaged and motivated due to limited interaction and engagement with course materials and fellow learners which leads to high dropout rates and low retention rate.

We set out to create uClub, an online educational platform that aims to1) Enhance social interaction and community to create a sense of social presence and encourage collaborative learning and 2) Increase convenience and personalization to better integrate in learner's daily life.


Product Designer


hi-fi Prototype


figma, Zeplin, anima, trello


4 months


Solo product Designer


Online learners struggle to maintaining their motivation and engagement throughout online courses.

...which undermine the learning outcomes and impede the skill acquisition. The motivation problem results in 10-15% completion rate of online course. How might we improve the completion rates and optimize the online learning experience?


How Effective Was the Current Online Learning Platform

Coursera’s user base increased by 66% in 2020, accounting for the pandemic. Its learners boosted from 45 million in the previous year to 75 million this year.

However, despite the advantages, a significant challenge faced by online learning platforms is the persistently low completion rates and high dropout rates among learners.


Completion Rate


Dropout Rate


Then, what went wrong?

What has made Long Distance relationship so difficult?

To explore the common challenges and pain points of online learning platform users, I conducted a preliminary survey and user interviews to gain valuable insights and identify recurring trends.

Through the survey, I narrowed down the list of learning platform users then conducted qualitative interviews to find out their user journey and the existing problems.

⭐Primary Problems

The nature of online courses is mostly designed to be self-paced, self-disciplined and self-manage. Even with an instructor, online courses often are:

  • Lack of engagement: Online learners may struggle to stay engaged and motivated without the social presence of instructor and peers.
  • Limited interaction and feedback: Online courses often lack interaction and personalized feedback
  • Inadequate for support systems: Online learning platforms may lack robust support systems, such as readily available assistance from instructors or support staff, which can hinder learners' ability to overcome challenges and seek help when needed.
  • Self-discipline and time management: Learners must take responsibility for their own learning progress and stay on track.
  • Difficult to navigate the right fit of courses: Different sources of courses lead to difficulty to decide the right courses

Competitive ANALYSIS

How are the Current Platforms Solving the problem

...and why doesn' they work?

As there are a plenty of online learning platform, we wanted to explore what hasn't their solution been helpful?

1) Discussion Forum: No Timely Response

learner is prompted to communicate and collaborate on the discussion forum


In asynchronous settings, learners progress at different paces. Instructors may not provide individualized attention as intended. Screenshot shows unanswered or delayed important questions, causing frustration and disconnection.

2) Personalized feedback and mentorship: Not as Persoanlized

instructors reviewing and providing individualized feedback on assignments or offering one-on-one mentorship sessions.


Instructors' commitment tends to decline after initial course months. Community blog mentors may lack specialization in learners' specific subjects, leading to limited support.


Based on the research, we set down our high-level product problem statement..

Online learners struggle to maintaining their motivation and engagement throughout online courses.

..with the design goal to
1) Create a robust support system by increasing interaction, feedback, and engagement.
2) Strengthen accountability for online learning to assist learners in overcoming challenges with self-discipline, time management, and staying on track.
3)Enhancing personalization to increase retention rate.


why don't we build Classes Around Community?

Based on the research, we discovered that the online learning community often lacks a strong sense of connection and collaboration. In light of this, a promising solution is to shift the focus towards building robust community and empowering learners by creating classes within and across the community.

By harnessing the potential of community-driven learning, we can create a more dynamic and inclusive online learning experience for all participants. With this idea, we started to build sitemap:

⚒️website Sitemap

All live classes & bootcamps are all created by communities and lectured by communities' member. If needed, cross communities' classes are also available; but no matter what, they are all community-based.

Stay in the Loop: Learn with Community

We have to patched the missing "interaction" and engagement back into the current online learning structure but still remains as the same type of learning in case of overwhelming new concepts.

⚒️Projected User Journey Map

Starting from the research and discovery phase, our aim is to streamline the user experience, minimizing browsing time and decision-making by directing users to their interested communities and courses for improved conversion rates.

Instead of enrolling in courses right away, users will first join communities based on their interests. These communities will be facilitated by experienced individuals who are readily accessible and willing to provide timely information.

Throughout the learning phase, courses will be community-based, with dedicated sections for asking questions and receiving live interactions during regular meetings within the community.

⚒️Wireframe (1st Edition)

I have placed a strong emphasis on the significance of interaction in achieving our design goal, which aims to encourage users to actively participate and connect with like-minded individuals who share their interests.

  • Messaging is the leftmost panel that allows user to quickly reach out for any possible questions.
  • Within community, direct communication like video and audio is incorporated to ensure effective communication and interactions.
  • Courses are listed directly in the landing page for the community to have quick glimpse on the course available in the community before joining.
  • Messaging is the leftmost panel that allows user to quickly reach out for any possible questions.
  • Within community, direct communication like video and audio is incorporated to ensure effective communication and interactions.
  • Courses are listed directly in the landing page for the community to have quick glimpse on the course available in the community before joining.

How to ask Question (And Get Answer) Efficiently?

Having the high-level requirement and vision set up, I then dive down to the most urgent question that I have to solve: to ensure the interactivity within the learing experience. How to make sure they can ask questions (and get answer) efficiently and timely?

I noted down three key characteristics of an effective question-asking process, based on my research and insights:

  • Easy to ask: The process should be user-friendly and intuitive, allowing users to ask their questions without any unnecessary complications or barriers.
  • Maximum exposure: Questions should receive maximum visibility within the community, ensuring that they reach a wide audience and increase the chances of receiving helpful responses.
  • Active involvement: Answerers should be actively engaged and encouraged to provide prompt and valuable answers, fostering a sense of participation and collaboration within the community.

By prioritizing these characteristics, I aim to design a question-asking process that simplifies user experience, facilitates knowledge sharing, and promotes active engagement among community members.

⚒️User Flow

click to check the detail

With the user flow chart, I drafted solutions to the three key charactestics above through wireframing.

  • Easy to ask: Rather than relying on a less frequently visited comment area, I prioritized an "Ask Question" button to streamline the process. By doing so, I ensure that the question reaches a wider audience of active community members who are more likely to provide prompt and valuable responses.
  • Maximum exposure: I implemented a centralized bulletin board area to increase visibility and ensure broad access to posts for maximum engagement.
  • Active involvement: All assigned community moderators will receive notifications and checklists to promptly respond to questions, ensuring timely attention and engagement with the community.


Usability Testing

During the usability testing, I assigned 10 potential users to complete specific tasks, including 1) seeking help for bootcamp content and 2) locating question posts to view updates in another day.

⭐What went well?

  • 8/10 successfully created questions post.
  • 9/10 was able to locate their post within the channel in less than 15 seconds. (average)

👎What can be improved?

  • 3/10 expected to add screenshot while adding details to question; 5/10 stops on deciding which channel to post on
  • Though they can locate their post within channel, 4/10 users had difficulty locating the channel they posted.


Keep Communication Organized

Based on the testing results, we identified the need for improved organization and communication within the platform. To address this, we implemented the following changes in the subsequent iteration:

Limit the Options to Centralize Questions

To improve communication, we introduced designated question channels controlled by administrators. This simplifies the process of finding and addressing questions, benefiting both users and moderators.

Communication Organization

We previously had separate text and video channels, but users found it more intuitive to locate channels based on their purpose. Therefore, we consolidated all video and text channels into accordions, categorizing them into general, bootcamp, and live class channels.

FInal design

Visual Design


Streamlining Personalized Interaction and Group Accountability

with Community-based learning experience


Real-Time Engagement with Live Classes & Bootcamps

Interact in real-time and join Bootcamp channels for regular support for community-based live classes and Bootcamps. (also prepared by different communities)

Fostering Mutual Support and Motivation

Easily Access Help from Peer through Chat or Video

Create discussion in video or chat channel to receive answer from fellow learners and instructors alike.

guided by gurus

Effortlessly Connect with Mentors for Guidance

Connect with bootcamp or live class instructor to create virtual or in person connection

Stay on track

seamlessly monitor Learning Progress

Access learning progress and stay on top of assignments and deadlines with a clear dashboard.

What happen next

Future Plans

⭐Current Status

This product, founded by Dylan Huey, is currently undergoing optimization for back-end development. With the successful funding received based on the prototype, the development team is actively working on refining and improving the product. The focus is on delivering a robust and fully functional solution, and efforts are underway to optimize the back-end infrastructure. The founder is dedicated to ensuring the project's success and continues to drive the development process towards the desired goals.

⭐Future Plans

With the first beta release of the product, our focus now shifts towards continuous improvement of the user experience. We have plans in place to develop a B2B interface, which is currently on the schedule. However, it is important to note that the timeline for this development is indefinite at the moment. We remain committed to enhancing the product based on user feedback and evolving market needs, ensuring that we deliver a seamless and valuable experience to our users.

What have I learned?


Iteration Control
To Prevent Long Haul

As a sole designer, I've faced challenges during the iteration process, particularly when collaborating with engineers. One issue I encountered was that each design iteration often contained too many elements, making it difficult to effectively communicate and hand off the work.

To manage these challenges, I break down the design into manageable chunks, focusing on one flow at a time. Flowcharts for each iteration help gather feedback and manage task on Trello for better management. Clear communication with the engineering team streamlines the hand-off process, enabling successful implementation.

Team of One Experience

Working alone on a large-scale project with limited time can be challenging, but "The User Experience Team of One: A Research and Design Survival Guide" provides valuable insights and tools to overcome these obstacles. The book offers effective strategies for managing time and resources efficiently, allowing solo designers to maximize their productivity. By applying the principles and techniques outlined in the book, solo designers can enhance their effectiveness and deliver high-quality user experiences despite working independently.


Hand Off Guideline

As a designer and engineer, effective communication is key to bridging the gap between our disciplines. We utilize tools like Zeplin to establish a unified standard for design annotations and file definitions, ensuring clear guidelines for development. This streamlines the coding process, promoting better collaboration and a more efficient workflow. By establishing a shared language and utilizing Zeplin's features, we enhance our ability to work together seamlessly, resulting in a cohesive user experience and high-quality development output.


More Work


Product Design: Bridging the Gap for online educational Platform