Skip to content

Commit

Permalink
Additional content
Browse files Browse the repository at this point in the history
  • Loading branch information
@sm98
sm98 committed Nov 7, 2024
1 parent ae2e648 commit 6130df1
Show file tree
Hide file tree
Showing 11 changed files with 125 additions and 84 deletions.
Binary file modified .DS_Store
View file
Binary file not shown.
152 changes: 94 additions & 58 deletions msr.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -131,10 +131,14 @@ <h3>Timeline</h3>
</div>
</div>

<img style='height: 100%; width: 100%;' src="/res/jbs.png" alt="partner organizations">

</div>



<div class="subsection content2 container">
<h5><span class="highlight">PROBLEM</span><br><br></h5>
<h5><span class="highlight">CONTEXT</span><br><br></h5>

<h3>Most organizations lack tech resources to bring their services online.</h3>
<p>This gap in technological capabilities leaves organizations struggling to keep up with modern demands. The inability to leverage digital tools not only limits their operational capacity but also affects their ability to scale, innovate, and meet customer expectations efficiently. As a result, they face several key challenges:
Expand All @@ -146,16 +150,7 @@ <h3 class="">Can we leverage Gen AI to empower the novice-developers?</h3>
<p>Gen AI advancements have significantly empowered novice developers, making coding more accessible and user-friendly. Many developers now rely on Gen AI for key tasks, leveraging its capabilities to assist them in various stages of development:
<br>
<img style='height: 100%; width: 100%;' src="/res/msrcode.png" alt="problems">
</div>

<div class="subsection content2 container">
<h5><span class="highlight">RESEARCH</span><br><br></h5>
<p>
I conducted a comprehensive, multi-phase research process, utilizing diverse methods to gather insights that would drive informed decisions. Each phase was designed to uncover trends, understand user needs, analyze the competitive landscape, and validate our design solutions, ensuring a user-centric and strategically sound development process.
</p>

<img style='height: 100%; width: 100%;' src="/res/msresearch.png" alt="research process">
<br><br><br>
<br><br>

<h3>Partners & Clients</h3>
<p>
Expand All @@ -164,8 +159,8 @@ <h3>Partners & Clients</h3>
</p>
<img style='height: 100%; width: 100%;' src="/res/partners.png" alt="partner organizations">
<img style='height: 100%; width: 100%;' src="/res/clients.png" alt="partner organizations">
<br><br><br>

<br><br><br>
<h3>Let's start with a chatbot builder!</h3>
<p>
Chatbots have evolved from simple rule-based systems to sophisticated AI-driven platforms,
Expand All @@ -175,78 +170,126 @@ <h3>Let's start with a chatbot builder!</h3>
Chatbots offer several key benefits:
</p>
<img style='height: 100%; width: 100%;' src="/res/msrchat.png" alt="problems">


</div>



<div class="subsection content2 container">
<h5><span class="highlight">RESEARCH & DESIGN</span><br><br></h5>

<h3>What kind of studies has been done in this domain?</h3>
<p>
As part of Jugalbandi Studio design and our ongoing work on an HCI research paper,
I conducted an extensive review of 150+ academic papers to explore foundational approaches
in novice programming for conversational agent development. While specific insights are NDA-protected, our focus areas included:
</p>
<img style='height: 100%; width: 100%;' src="/res/msrlit.png" alt="problems">
<br><br><br>
<p>To understand the landscape for this new solution, I examined products within the same domain, including chatbot builders, low/no-code tools, general-purpose generative AI, code generation AI, copilots, assistants, and generative AI studios.</p>

<h3>What is the state of current solutions?</h3>
<p>
<p>To understand the market landscape, I examined products from similar domains, including chatbot builders, low/no-code tools, general-purpose generative AI, code generation AI, copilots, assistants, and generative AI studios.</p>
<img style='height: 100%; width: 100%;' src="/res/comp.png" alt="jugalbandi competitors">



</div>
<div class="subsection content2 container">
<br><br><br>

<h5>
<span class="highlight">IDEATION & DESIGN</span>
<br><br>
</h5>
<h3>What exactly do the organisations want?</h3>
<p>
I led an initial workshop with each client organization to thoroughly understand their needs and collaboratively create mockups of their envisioned chatbot solutions.
These mockups were iterated and validated with clients, serving as a foundation for aligning our development team and partners on key platform features.
This approach clarified the essential functionalities needed to empower novice developers in building effective chatbots on our platform.
</p>
<img style='height: 100%; width: 100%;' src="/res/msrw01.png" alt="problems">
<br><br><br>

<h3>Initial versions</h3>
<p>
With limited developer resources, we concentrated on small, iterative design changes to enhance the user experience. Early iterations evolved from a prompt-only interface to a chat-based interaction model, eventually adding a dedicated test feature for improved usability.
</p>
<img style='height: 100%; width: 100%;' src="/res/msrinterface01.png" alt="problems">
<br><br><br>

<h3>Challenges along the way</h3>
<p>
Throughout the project, several challenges emerged that shaped our approach and my personal growth.
</p>
<img style='height: 100%; width: 100%;' src="/res/msrchallenge.png" alt="problems">
<br><br><br>

<h3>User testing</h3>
<p>
We conducted multiple rounds of usability testing within the organization to validate our prototypes, test assumptions, and gather critical feedback.
</p>
<img style='height: 100%; width: 100%;' src="/res/msrw02.png" alt="problems">
<br><br><br>

<h3>Iterated versions</h3>
<p>
In subsequent iterations, we incorporated a visual flow representation, followed by a sleek, modern UI design with larger code representation view for enhanced readability and usability.
</p>
<img style='height: 100%; width: 100%;' src="/res/msrinterface02.png" alt="problems">
<br><br><br>

<h3>Implemented features</h3>

<p>With my background in computer engineering and previous experience with Gen AI, I was able to brainstorm and refine ideas that balanced user needs with technical feasibility. Through multiple iterations, we defined several critical features:

<!--

<div class="col-12 verCenter ">
<br><br>
<div class="row gy-4">
<div class="col-4 verCenter">
<h4>👩🏽‍💻 Code Comprehension</h4>
<br>
Understanding Code is the most time consuming part of development process. Novices can easily get overwhelmed by huge chunks of code.
Understanding code is time-consuming and overwhelming, especially for novices. Our platform simplifies this, making code easier to grasp.



</div>
<div class="col-8 ">
<div class="card noborder">
<img class="card-img-top border-0" src="res/msrideate01.png" alt="Thumbnail for TCS internship Project">
</div>

<img style='height: 100%; width: 100%;border: solid; border-color: lightgrey;border-width: thin ;'src="res/idea01.gif" alt="Thumbnail for TCS internship Project">

</div>
</div>
<br>
<br><br>

<div class="row gy-4">
<div class="col-4 verCenter">
<h4>🛠️ Debugging Tools</h4>
<br>
some text here
Debugging is complex. Instead of web-searching errors, developers can use integrated built-in suggestions for seamless corrections in one place.
</div>
<div class="col-8 ">
<div class="card noborder">
<img src="res/msrideate02.png" alt="Thumbnail for TCS internship Project">
</div>
<img style='height: 100%; width: 100%;'src="res/idea02.gif" alt="Thumbnail for TCS internship Project">
</div>

</div>
<br><br>
<div class="row gy-4">
<div class="col-4 verCenter ">
<h4>🧩 Plugin Store</h4>
<h4>🧩 Plugin Library</h4>
<br>
Organisations need flexibility to slect services of their liking. We can build platform over the time.
Organizations need flexibility. Our library of "JB Features" (avoiding jargon) grows over time, supporting more plugin types.
</div>
<div class="col-8 ">
<div class="card noborder">
<img src="res/msrideate03.png" alt="Thumbnail for TCS internship Project">
</div>

<img style='height: 100%; width: 100%;border: solid; border-color: lightgrey;border-width: thin ;'src="res/idea03.gif" alt="Thumbnail for TCS internship Project">

</div>
</div>
<br><br>
<div class="row gy-4">
<div class="col-4 verCenter">
<h4>🤖 Smart Assist</h4>
<br>
Gen AI's content genration aspect can be used to ease users and provide suggestions
Generative AI helps users with smart suggestions and content generation for a smoother experience.
</div>
<div class="col-8 ">
<div class="card noborder">
<img src="res/msrideate04.png" alt="Thumbnail for TCS internship Project">
</div>

<img style='height: 100%; width: 100%;' src="res/idea04.gif" alt="Thumbnail for TCS internship Project">

</div>

</div>
Expand All @@ -255,26 +298,18 @@ <h4>🤖 Smart Assist</h4>
<div class="col-4 verCenter ">
<h4>✨ Prompt Support</h4>
<br>
we support lot of types of prompts.....
Based on user feedback, we offer support for three main categories of prompts, improving user interaction.
</div>
<div class="col-8 ">
<div class="card noborder">
<img src="res/msrideate05.png" alt="Thumbnail for TCS internship Project">
</div>

<img style='height: 100%; width: 100%;' src="res/idea05.gif" alt="Thumbnail for TCS internship Project">

</div>
</div>
</div>
-->
<br><br>
<img style='height: 100%; width: 100%;' src="/res/jbfeature.png" alt="partner organizations">
<br>

<h3 class="">Evolution of Interface</h3>
<p>
We went through multiple UI iterations, gradually refining the interface while considering the limited availability of front-end developers on the team. Each iteration focused on adding features, improving accessibility for novice developers, and conducting usability testing after every update to ensure a seamless user experience.</p>
<img style='height: 100%; width: 100%;' src="/res/msriterations.png" alt="UI Iterations">
<br><br><br>

<h3>Jugalbandi Studio</h3><h7></h7>
Transform your ideas into chatbots through simple conversations.
<img style='height: 100%; width: 100%;' src="/res/jbs.png" alt="partner organizations">
Expand Down Expand Up @@ -363,4 +398,5 @@ <h5><br><a href="mailto: sanoopmenon30@gmail.com" class="highlight">sanoopmenon3

</script>
</body>
</html>

</html>
57 changes: 31 additions & 26 deletions msr02.html → msr03.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -190,61 +190,63 @@ <h5>
</h5>
<p>With my background in computer engineering and previous experience with Gen AI, I was able to brainstorm and refine ideas that balanced user needs with technical feasibility. Through multiple iterations, we defined several critical features:


<!--
<div class="col-12 verCenter ">
<br><br>
<div class="row gy-4">
<div class="col-4 verCenter">
<h4>👩🏽‍💻 Code Comprehension</h4>
<br>
Understanding code is time-consuming and overwhelming, especially for novices. Our platform simplifies this, making code easier to grasp.


Understanding Code is the most time consuming part of development process. Novices can easily get overwhelmed by huge chunks of code.
</div>
<div class="col-8 ">

<img style='height: 100%; width: 100%;border: solid; border-color: lightgrey; border-width: thin ;'src="res/idea01.gif" alt="Thumbnail for TCS internship Project">

<div class="card noborder">
<img class="card-img-top border-0" src="res/msrideate01.png" alt="Thumbnail for TCS internship Project">
</div>
</div>
</div>
<br><br>

<br>
<div class="row gy-4">
<div class="col-4 verCenter">
<h4>🛠️ Debugging Tools</h4>
<br>
Debugging is complex. Instead of web-searching errors, developers can use integrated built-in suggestions for seamless corrections in one place.
some text here
</div>
<div class="col-8 ">
<img style='height: 100%; width: 100%;border: solid; border-color: lightgrey;border-width: thin ;'src="res/idea02.gif" alt="Thumbnail for TCS internship Project">
<div class="card noborder">
<img src="res/msrideate02.png" alt="Thumbnail for TCS internship Project">
</div>
</div>
</div>
<br><br>
<div class="row gy-4">
<div class="col-4 verCenter ">
<h4>🧩 Plugin Library</h4>
<h4>🧩 Plugin Store</h4>
<br>
Organizations need flexibility. Our library of "JB Features" (avoiding jargon) grows over time, supporting more plugin types.
Organisations need flexibility to slect services of their liking. We can build platform over the time.
</div>
<div class="col-8 ">

<img style='height: 100%; width: 100%;border: solid; border-color: lightgrey;border-width: thin ;' src="res/msrideate03.png" alt="Thumbnail for TCS internship Project">

<div class="card noborder">
<img src="res/msrideate03.png" alt="Thumbnail for TCS internship Project">
</div>
</div>
</div>
<br><br>
<div class="row gy-4">
<div class="col-4 verCenter">
<h4>🤖 Smart Assist</h4>
<br>
Generative AI helps users with smart suggestions and content generation for a smoother experience.
Gen AI's content genration aspect can be used to ease users and provide suggestions
</div>
<div class="col-8 ">

<img style='height: 100%; width: 100%;border: solid; border-color: lightgrey;border-width: thin ;' src="res/idea04.gif" alt="Thumbnail for TCS internship Project">

<div class="card noborder">
<img src="res/msrideate04.png" alt="Thumbnail for TCS internship Project">
</div>
</div>
</div>
Expand All @@ -253,16 +255,20 @@ <h4>🤖 Smart Assist</h4>
<div class="col-4 verCenter ">
<h4>✨ Prompt Support</h4>
<br>
Based on user feedback, we offer support for three main categories of prompts, improving user interaction.
we support lot of types of prompts.....
</div>
<div class="col-8 ">

<img style='height: 100%; width: 100%;' src="res/idea05.gif" alt="Thumbnail for TCS internship Project">

<div class="card noborder">
<img src="res/msrideate05.png" alt="Thumbnail for TCS internship Project">
</div>
</div>
</div>
</div>
-->
<br><br>
<img style='height: 100%; width: 100%;' src="/res/jbfeature.png" alt="partner organizations">
<br>

<h3 class="">Evolution of Interface</h3>
<p>
Expand Down Expand Up @@ -357,5 +363,4 @@ <h5><br><a href="mailto: sanoopmenon30@gmail.com" class="highlight">sanoopmenon3

</script>
</body>

</html>
</html>
Binary file modified res/.DS_Store
View file
Binary file not shown.
Binary file added res/idea03.gif
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added res/msrchallenge.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added res/msrinterface01.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added res/msrinterface02.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added res/msrlit.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added res/msrw01.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added res/msrw02.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.

0 comments on commit 6130df1

Please sign in to comment.