Educative, a platform with over 2 million users, strives to deliver an exceptional learning experience. However, pre-built widgets presented challenges for both learners and editors. Learners faced difficulties navigating the widgets during courses, while editors encountered limitations when creating tests.
To address these issues, a cross-functional team of 1 product manager, 2 product designers, and 2 developers embarked on an initiative to revamp the widgets. This initiative aimed to streamline the user experience for both learners and editors.
Prioritizing High-Impact Widgets (MTA Widget)
Data analysis guided our selection of the most impactful widgets. We targeted three for initial improvement, including the Match the Answer (MTA) widget. In this case study, I will focus only on the MTA widget, which I worked on.
I checked the MTA widget design for editors and learners, finding room for design improvements.
Match the answer widget (Editor View)
Editors use this widget while creating content in courses.
No Limit set on input size
Different text lengths make different sizes of the section, disturbing the UI of the widget.
Extra spacing issue
Too much white space just to maintain the sequence of next statement to avoid confusion.
Editor CTA
Under this is hidden a Markdown Editor, which contains pre-defined code to use to apply different states. e.g. bold, italic.
Small preview field
Solutions explanation is provided here, it’s not easy to read as the longer copy gets hidden.
Changing the layout
Option to close the preview section, changes the UI hierarchy and confuses users when scrolling through content.
Markdown Editor view
Any edit made in the markdown editor is shown in the preview section, that’s why it is repeated everywhere.
Manual position adjustment
No easy functionality to change positions of the solution statements to make different matching sequences.
Match the answer widget (Learner View)
Learners use this widget when learning from courses.
Hover states
No visual hints are provided while hovering over these sections to indicate clickable state and to provide more interactive design.
Correct arrows matching
Very difficult to track which arrow is matching with which answer once it starts getting messy.
Less space for Explanation
Explanation can contain images, code blocks etc, showing this in the current way is a bad UX practice.
Accessibility Issues
Red and green colors can cause accessibility issues while viewing the results.
Different views
Different edits like images, bold, italic and code blocks make the current design cluttered and not easy to use.
To ensure a user-centered design for the MTA widget, I conducted user research to identify pain points. This involved interacting with users and gathering their feedback.
User Personas
Since the MTA widget has two user groups (editors and learners), I created user personas to understand their needs and perspectives. This ensured a well-rounded understanding of potential problems.
Ahmad Saeed
30 / Male
Editor
Ahmad creates content for Educative, including using the match-the-answer widget to design practice questions. He encounters issues that slow him down and cause frustration.
Persona Needs
Fatima Amjad
24 / Female
Learner
Fatima, aspiring to become a programmer, actively uses Educative courses with match-the-answer widgets, but she encounters difficulties that hinder her learning experience.
Persona Needs
User Research
Following user persona development, I conducted user research to identify problems in the MTA widget. This involved recruiting relevant users, scheduling interviews, and analyzing their feedback to understand their pain points.
I interviewed both editors and learners who use the MTA widget. The focus was on gathering feedback about their current experience. We asked them to identify areas for improvement and suggest desired features.
We conducted usability testing of the existing MTA widget design. This allowed us to observe users interacting with the widget and uncover potential issues we might have missed.
Surveys focused on specific areas of concern with the current MTA widget design were conducted. This approach helped us gather quantitative data and user feedback on these specific scenarios, providing valuable insights.
By synthesizing the data from user research, we created a user journey map. This map visually represented the steps users have to take when interacting with the widget, highlighting their pain points and opportunities for design.
Through user research, I compiled a comprehensive list of user pain points with the MTA widget. This research helped us clearly define the problems users face, ensuring our design efforts address their specific needs.
Pain-points
Following comprehensive user research (interviews, surveys, usability testing), and a design audit, we were able to identify clear design opportunities. This knowledge allowed us to set focused goals for improving the MTA widget user experience.
Now it was time to start turning ideas into designs. My goals were clear and I had a clear picture of the problem I was solving, so I started working on the design phase. This includes different processes like the wireframing, A/B testing, iterating and finalizing the designs.
Competitors Research
To gain insights from existing solutions, I researched competitor applications that utilize match-the-arrow interactions. Here's what I found:
Focus on Simplicity: Competitors primarily use simplified match-the-arrow interactions with smaller text sizes. This suggests a focus on clear information hierarchy and minimizing visual clutter, which aligns with our goal of improved user efficiency.
Content Division: Several competitors divide content within the widget, allowing users to easily scan information and interact more intuitively. This finding supports our goal of enhancing user control and reducing errors.
By analyzing competitor designs, I was able to extract valuable insights that informed my own design decisions for the MTA widget revamp.
Before creating fancy designs, I built simple mockups (wireframes) to test my ideas. This helped me find any problems early on, like how users might interact with the widget in unexpected ways. I tried different layouts to find the best solution.
Building on the initial wireframes, I created several design iterations. These were tested with users to gather feedback. I showed them rough ideas, listened to their thoughts, and used that feedback to refine the designs in an iterative process.
Different Iterations Designed and Tested with Users
Pros and Cons of some variations
User feedback was incorporated to refine the MTA widget design. Final usability testing confirmed the design effectively addressed user pain points, resulting in a positive user experience.
Editor View For MTA Widget
While creating the content using MTA widget
Learner View
While solving the courses using MTA widget
We tested the redesigned MTA widget with users through surveys and scenario testing. Their feedback was very positive! The tests showed the improvements made a big difference, like users completing tasks faster and making fewer mistakes.
Users Survey Results
| Before | Measure | After |
|---|---|---|
| 25% | Readability | 65%40% |
| 40% | matching Q&A | 85%45% |
| 30% | Usability | 90%60% |
We overall received positive responses from users and they describe it as modern, easy to use and very helpful.
Other key results were as follows:
Users can now interact with the MTA widget much faster. Content is clearly presented and organized into two user-friendly layouts.
It became much easier for users to add content and create tests without mistakes.
Feedback and surveys revealed a dramatic increase in user satisfaction with the revamped editor experience.
I learned many valuable lessons throughout this whole process of revamping widgets, some of the important ones are as follows:
By understanding their perspective, you might discover that what seems like a problem (a feature in your eyes) is actually helpful for users.
Review your process after each project. Identify areas for improvement and adapt your approach for future projects.
While additional features can be tempting, they can add complexity. If a simple design is meeting user needs, adding extra features might create confusion.
Don't get caught up in creating fancy designs. The goal should always be to create a solution that delivers positive outcomes for users, and can increase efficiency.
As the bigger goal is to revamp all of Educative’s widgets, we are planning to target important widgets which are often used in the content and improve their designs by user testing and bring positive results and to achieve consistency in overall Educative’s product.
Next Project
