Overview
PyBot is an AI-powered learning companion that I built to help users learn Python, prepare for DSA interviews and improve their resumes through interactive AI-powered conversations.
PyBot started as a simple CLI-based chatbot for learning Python. As I continued working on it, it evolved into a web application with more features and different ways for users to interact with it.
The idea was to bring learning, interview preparation, resume analysis and progress tracking together in one platform instead of making users switch between different tools for each task. PyBot supports both text and voice interactions, allowing users to learn, practice and get feedback in a more interactive way.
My Role: UI/UX Design & Development
Tech Stack: Next.js, Flask, Appwrite, Google Gemini, Vapi
Live App: https://pybot-ecru.vercel.app/
Demo Video: https://www.youtube.com/watch?v=QFDiq8dHv9g
The Problem
While learning Python and preparing for interviews, there are different things a learner needs to work on. Learning concepts, practising DSA questions, preparing for interviews, improving a resume and keeping track of progress can all require different tools and ways of learning.
I wanted to bring these parts together in one place with the help of AI. Instead of limiting PyBot to a simple text-based chatbot, I wanted users to be able to interact with it through both text and voice, practice interviews, take quizzes, analyze their resumes and keep track of their progress.
The main challenge was to design an experience that could bring all these features together without making the platform feel complicated to use.
Existing Solutions & Comparison
Before designing PyBot, I looked at existing platforms that already solve different parts of the same problem.
Codecademy focuses on structured programming learning. Its Python courses include lessons, projects, quizzes and AI-assisted learning.
HackerRank focuses more on coding practice and technical interview preparation. It provides coding challenges and AI-powered mock interviews for areas such as algorithms and data structures.
Jobscan focuses on resume analysis. It compares a resume with a job description and provides information about missing keywords, formatting and other areas that can be improved.
| Platform | Main Focus | What It Offers |
|---|---|---|
| Codecademy | Learning | Python learning, projects, quizzes and AI assistance |
| HackerRank | Coding & Interviews | Coding practice and AI-powered technical mock interviews |
| Jobscan | Resume Improvement | Resume scanning, keyword matching and ATS-related feedback |
| PyBot | Learning + Interview + Resume | Python learning through chat/voice, DSA interview practice, quizzes, resume analysis and progress tracking |
Looking at these solutions helped me define what I wanted PyBot to do. Instead of designing it around only one of these areas, I wanted to combine Python learning, interview preparation, resume analysis and progress tracking in the same product.
This also meant that the main design challenge was not just creating individual screens. I had to think about how all these features would fit together and how a user would move between them without getting confused.
Designing The Experience
Once I had the main features planned, I started thinking about how users would actually navigate through PyBot.
The main parts I wanted to bring together were:
- Learning Python through AI conversations
- Practising DSA and technical interviews
- Interacting through text or voice
- Taking quizzes
- Analysing resumes
- Tracking progress through a personalized dashboard
I planned the page structure around these different activities so that each feature had its own place while still feeling like part of the same product.
The conversational experience was an important part of PyBot. Since users could interact through both text and voice, I designed the flow around starting a conversation, choosing the interaction mode and receiving AI-generated responses.
I also wanted the dashboard to give users a quick view of their activity and progress instead of making them go through different sections to understand how they were doing.
As more features were added, I kept updating the structure and UI. The project went through several iterations, including the addition of the personalized dashboard, quizzes, resume analyzer, verification flow and different UI fixes.
The goal throughout these changes was to make the different parts of PyBot easy to understand and use without making the interface unnecessarily complicated.
UI & Iterations
Once the main flow was decided, I started building and refining the interface. Since PyBot had multiple features, I wanted the UI to stay simple while still making each feature easy to find.
I started with the main chat interface and then added the voice interaction, personalized dashboard, quiz and progress section, and resume analyzer.
As I worked on the project, I made several UI changes based on how the different features were coming together. I also added smaller interactions such as confirmation modals, download options and verification-related flows.
One thing I focused on was keeping the text and voice experiences connected. Users could switch between the two modes without having to leave the main interaction area.
The dashboard was also updated to bring the user's DSA questions, resources and analysis into one place, while the quiz section made progress visible through the quiz results.
The interface went through multiple small fixes and iterations rather than being designed perfectly in one go. This helped me improve the screens as new features were added to PyBot.
From Design to Product
Once the UI structure was in place, I moved from designing the screens to connecting them with the actual functionality.
I built the frontend using Next.js and connected it with a Flask backend and Appwrite for authentication and data storage. Google Gemini handled the text-based AI interactions, while Vapi was used for the voice-based interview experience.
The main challenge here was making sure the different parts of the interface actually worked together. The chat needed to communicate with the AI, the voice interaction needed to handle the conversation, and features like quizzes, resume analysis and the dashboard needed to work with the user's data.
I worked on these features incrementally, adding and refining them as the project developed. This included authentication and email verification, the personalized dashboard, quiz and progress tracking, resume analysis, and the different chat interactions.
This was where the initial UI decisions had to work with the actual product functionality, rather than just looking good as individual screens.
Outcome & Learnings
Building PyBot helped me understand that designing a product with multiple AI-powered features is not just about making individual screens look good. The different parts of the product need to work together and still be easy to understand.
One of the biggest things I learned was how important it is to keep refining the UI as the product grows. Features like the dashboard, quiz, resume analyzer and voice interaction were added over time, so the interface also had to evolve with them.
I also learned more about designing around AI interactions. Text and voice interactions behave differently, so the interface needs to make it clear what the user can do and what kind of response they can expect.
Working on both the design and development side also helped me understand how design decisions translate into actual product functionality.
PyBot started as a simple CLI-based chatbot and gradually evolved into the product it is today. Seeing that progression helped me understand that a product can keep growing and improving through continuous iterations.
Overall, PyBot gave me the opportunity to work on the complete process i.e. from planning the user experience and designing the interface to building and connecting the different features into a working product.
Thanks for reading!😊🤍
Top comments (0)