Learning another language is a quintessential skill that allows people to expand not only their job opportunities and networks but also their insights into other cultures. Numerous tools already exist to facilitate learning a new language such as textbooks, classes, or even applications such as Duolingo. However, while grammar and vocabulary can be learned independently, speaking with a partner allows one to learn the nuances of conversation. Our hypothesis is that providing users with a dedicated platform to simulate spoken conversations will greatly enhance their conversational skills.

Problem Statement

How might we improve access to verbal conversations with proper feedback for those trying to learn and practice English so that they can improve their conversational speaking skills?

Research Insights

To validate our problem space, we surveyed 20 users to discover more about their difficulties when learning another language and identified the following key insights:

1. The most difficult aspect of learning a new language is speaking.

75% of users struggle most with speaking with proper syntax

2. The best way to improve conversational skills is to practice speaking.

65% of users have difficulty finding a partner to practice with

3. People strongly value proper feedback.

50% of users are unable to receive proper feedback
70% of users strongly value proper feedback

4. As accessibility to software increases, users prefer to practice with software.

65% of users would prefer to practice with software applications due to convenience, cost, and lack of judgement from others.

Solution Explanation

To solve our target users’ pain points, we developed Habble, a web-based application that allows English learners to practice and improve their conversational skills with access to live responses and proper feedback via AI. Habble will contain key features such as choosing an avatar with predetermined personalities, combining speech transcription/translation software, evaluating conversations with AI-generated language models, and providing responses and feedback with various improvements in grammar, vocabulary, and syntax.

The goal of Habble is not to teach a new language from the ground up. Rather it is designed to build upon the existing knowledge of a new language and enhance the learning experience pertaining to conversation.

WorkFlow

Lofi Mockups

Hifi Mockups

Iterative Design Learnings

After we showcased our prototype to the users again, we learned that understand deeper user-centered design to solve problems from personas and MVP. UX and accessibility go hand in hand as they are both about putting the user first and making sure products are created with their needs in mind. We learned to consider by understanding the user’s journey and what design elements will make things as easy as possible for them.

Design Main goals are Feasible, usable and easy to navigate it. One of the biggest challenges when designing a website is figuring out how to guide users down specific paths you want with CTA (call to action)

Welcome Page

1. Attention : left top of the corner which is LOGO, immediately catches your attention.

2. Interest : The next element that draws you in is the header our slogan “Speak Easy”

3. Desire : This generates a sense of desire for how your speaking will be better with short intro

4. Action : then leads you directly to the primary CTA aqua color button to specific action for next step.

Next Pages

We ask only 1 question each page to focus to next step

Selectable blocs (cards) of Content

It has made the descriptive text you can select. we have hover features that draw your attention to the card and highlight that it’s selectable.

Chatbox

Have made to focus for speaking with automatically showing up feedback and simply have 3 icons with specific functions. Have noticeable animation when you are talking and loading. We have full script for script users too.

Implementation Details

Technical implementation

Hosted at:

Vercel (Habble)

Tech stack:

Javascript, React, Tailwind, HTML/CSS

Journey of a request:

user -> frontend -> APIs -> response

Technical challenges

Hardest part of development:

Since Habble involves verbal conversations between the user and our bots, the hardest part was dealing with microphone and audio permissions across different devices.

Scaling issues:

A major scaling issue we faced was with a text to speech service our app was using, whose costs became unaffordable when multiple users started using our app. So we had to make a trade-off between our bot’s voice quality and the app’s running costs.

Key takeaways:

We learned that seemingly small bugs can take a major part of the development period, and debugging should be allotted appropriate time while planning.
We learned how distributing the tasks according to everyone’s skillset can reduce individual workload significantly.

Future Steps‍

Our team will continuously improve Habble’s functionality and design by incorporating valuable user feedback, allowing our users to closely simulate human conversation. Given the time constraints of Co.Lab, we specifically chose to focus our efforts on English. However, in future iterations, we would like to introduce multiple languages, user profiles to save progress, and improvements to the bot’s pronunciation capabilities and Mobile App.

Learnings

Product Manager Learnings:

Andrew Lin

Preconceived solutions can lead to searching for the wrong problem. I learned to dive deep into the problem space with an open mind to properly empathize with the user's pain points. I also learned to maintain effective communication with a cross-functional team, ensuring a cohesive understanding in order to appropriately prioritize and descope our features to stay on track.

Designer Learnings:

Seung Yoo

I had more chances to learn about user research and problems. Users voiced that they would like to be able to have a speaking partner individually. To understand if the flow worked for people to use it smoothly and easily. I created better user flow mock-ups on Figma for users to test. It was a great experience to collaborate with other team members.

Developer Learnings:

Shashwat Jain

Through my journey, I've learned the significance of effective communication, with diverse team members which improved my ability to express ideas clearly and listen attentively. Exploring new technologies during the bootcamp expanded my technical skills and encouraged innovative problem-solving. Collaborating with project managers and designers highlighted the value of teamwork, leveraging individual strengths for successful outcomes.

Developers Learnings:

Jai Gaur

&

My most prominent learnings from colab were- the skill of communicating my ideas effectively especially with people of non technical background, and leveraging the skills of my teammates to make use of the technologies that I might lack experience in, thus utilising our combined experience to make the collaborative project a success.

Full Team Learning

By collaborating together, we learned the significance of constant communication as well as the importance and intricacies of each other’s roles in shipping a product.