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.

Designer Learnings:

Jo Sturdivant

Adapting to an Established Team: Joining the team in week 6 of 8 was challenging, as I had to quickly adapt to existing workflows, dynamics, and goals. This mirrors real-world situations where you often integrate into teams mid-project, and flexibility is essential.
Work-Blocking for Efficiency: With only two weeks to complete the project, I learned the importance of a structured work-blocking system. This approach allowed me to manage my time effectively and meet deadlines under pressure.
Making Data-Driven Design Decisions: Unlike my past projects, I had to rely on research conducted by others. This was a valuable experience in using pre-existing data to guide design decisions, helping me focus on the core insights without starting from scratch.

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.

Developer Learnings:

Vanady Beard

&

As the back-end developer, I learned how important it is to create efficient and reliable systems that support the entire application. This experience also taught me the importance of optimising the database and ensuring the backend is scalable and easy to maintain.

Developer Learnings:

Stephen Asiedu

&

As a back-end developer, I've come to understand the importance of being familiar with various database systems and modules. This knowledge enables me to build diverse applications and maintain versatility in my work. I've also learned that the responsibility for making the right choices rests on my shoulders, guided by my best judgement.

Developer 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.

Developer Learnings:

Maurquise Williams

&

Process of Creating an MVP: Developing a Minimum Viable Product (MVP) taught me how to focus on delivering core functionalities balancing between essential features and avoiding scope creep.
Collaboration in a Real-World Tech Setting: This experience taught me how to collaborate efficiently in a fast-paced tech environment, keeping the team aligned and productive, even while working remotely across time zones.
Sharpening Critical Thinking and Problem-Solving Skills: This experience honed my ability to think critically and solve problems efficiently. By tackling challenges and finding quick solutions, I sharpened my decision-making and troubleshooting skills in a dynamic, real-world setting.

Developer Learnings:

Jeremiah Williams

&

All in all this experience was very awesome I learned that in coding with others being transparent is key

Developers Learnings:

Justin Farley

&

I learned how important communication is when working with a team. Communication provides understanding, advice, ideas, and much more. While working with the product team, I’ve found that communication keeps everything flowing smoothly. Working with a team also showed me that every member brings something different to the table and we all have to work together in order to align and meet our end goal.

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.