Becoming the MVP: Babbel Meets Basketball

User Research

I initiated the exploration of the product by conducting user interviews with current subscribers, prioritizing user research as the foundational step in understanding the product. These interviews revealed valuable insights that became the cornerstone of the design process. From this user-centric approach, two distinct personas emerged:

1. International students aiming to enhance their English language skills for improved communication and integration through their passion for basketball.
2. European league basketball coaches with American players, necessitating effective English communication on and off the court. 

This user research-driven foundation guided the subsequent stages of design.

Usability Testing

Usability testing was conducted in two phases:

1. Phase one: Uncover user pain points.
2. Phase two: Validating and refining new designs.

Participants were selected from both user groups and given tasks such as setting up profiles, navigating the curriculum, and completing a course. Participants were observed for usability issues, feedback on visual cues, and overall comprehension.

The phase one agenda loosely followed this format:

Tasks

• Explore the website - Describe your first impression of this site and any visual elements you noticed.
• Create a new user account - What information were you comfortable/uncomfortable in providing?
• Take beginner lessons - What works/doesn't work as anticipated?
• Start the quiz and view the results screen - What works/doesn't work as anticipated?

Follow-up Question

• Which activities stood out in the lesson?
• How likely are you to continue taking courses?
• If you were to tell a friend about this program using one word, what would it be?

What we learned

• Users gathered that HoopsEnglish provided a service purely for basketball fans.
• The curriculum was easy to navigate through the use of breadcrumbs.
• The results page needed an overhaul due to cognitive overload.
• Users found speaking practice activities more engaging than others.

Challenges

• ‍Visual Hierarchy: The absence of a clear hierarchy in the design led to confusion, making it challenging for users to discern whether they are responding to the question above or below. This spatial ambiguity created user frustration and hindered the overall user experience, emphasizing the need for improved visual structure.‍
• Gamification Discrepancy: A notable discrepancy in user preferences arose concerning gamification elements. While students expressed interest in more gamified elements integrated into lessons and activities to enhance engagement, basketball coaches expressed a lack of interest in such features. This conflicting perspective highlighted the challenge of catering to diverse user needs and preferences.‍
• Activity Preference: Users from both groups preferred speaking activities over video analysis. The shared sentiment was driven by the time-intensive nature of the latter activity type. This user pain point emphasized the need for a more streamlined approach to activities, acknowledging the users' time constraints and prioritizing interactive speaking activities for a more favorable user experience.

Solutions

Visual Hierarchy

• ‍User Research: Conduct further usability testing to understand the specific areas where users are experiencing confusion due to the lack of visual hierarchy. Gather insights into user expectations and preferences regarding information layout.
• ‍Iterative Prototypes: Implement a series of iterative design prototypes experimenting with different visual hierarchies. Test these prototypes with users to identify the most effective hierarchy that minimizes confusion and frustration.‍
• Visual Cues: Implement clear visual cues, such as consistent color-coding, typography, and spacing, to distinguish questions and responses clearly. Provide instant feedback mechanisms to confirm actions, reducing uncertainty.

Gamification Discrepancy

• ‍User Segmentation: Recognize the diverse user base and tailor the platform experience with customizable options, allowing users to enable or disable gamification elements based on their individual preferences.‍
• User Feedback Mechanism: Integrate a user feedback mechanism within the platform to gather ongoing insights into the effectiveness and desirability of gamification elements. This allows for continuous improvement based on user preferences over time.‍

Activity Preference:

• ‍User-Centric Content Design: Reevaluate the content structure and prioritize speaking activities while minimizing time-intensive video analysis. Align the learning activities with the users' preferences by providing more interactive and practical language exercises related to basketball scenarios.‍
• Progressive Learning Paths: Introduce a progressive learning path that gradually incorporates more complex activities, allowing users to build confidence in speaking before advancing to more time-demanding tasks.‍
• Time Management Tools: Provide time management tools within the platform, allowing users to schedule and customize their learning sessions according to their availability. Clearly communicate the expected time commitment for each activity to manage user expectations.

Results

‍Since the implementations of the new design, HoopsEnglish has seen an increase in user adoption. Users appreciated the new lessons layout and receiving updates from their feedback (who knew users like to be heard?). Additionally I received positive feedback from stakeholders about the simplified approach, and engagement rates were promising.

Designs

Recognizing the challenge of cognitive overload faced by users in deciphering actions to take during various activities, I found that the out-of-the-box components had certain limitations in delivering an optimal user experience. Therefore, I took the initiative to create and/or modify the following components to address these issues:

• Tooltip
• Text Input
• Text Area
• Text Links

These additions aim to alleviate the strain on users by offering explicit guidance and more flexible input options.

Tooltip

The Tooltip component was introduced to offer users additional contextual information without cluttering the interface.

Design Documentation

1. When a user clicks the info icon the tooltip will display which in the example above gives more instructions on how to complete the activity and an inline link if the user needs additional support.
2. When a user clicks the "Show Translation" text link, the tooltip will expand to show translations.
3. The text link will remain fixed to the bottom edge of the container and text will display as show/hide translation respectively.

**The tooltip will display a close icon (optional).

Text Area and Text Input

The text field and text box components were created to provide more versatile and user-friendly input options, catering to various content needs.

Final Design