Sparky: AI Assistant for teachers

How can we help tutors create dynamic lessons?

top

overview

problem

solution

research

design + improvements

final product

takeaways

impact

My Role

Product Designer Intern | Idea Generation, UX Research, Information Architecture, User Flows, Prototyping, Brand Application

Product Designer Intern | Idea Generation, UX Research, Information Architecture, User Flows, Prototyping, Brand Application

Product Designer Intern | Idea Generation, UX Research, Information Architecture, User Flows, Prototyping, Brand Application

Team Size

4 members

Duration

App Integration (API): 1 week

App Integration (API): 1 week

App Integration (API): 1 week

Minimum Viable Product (MVP): 1 week

Minimum Viable Product (MVP): 1 week

Minimum Viable Product (MVP): 1 week

AI Assistant: 1 month

AI Assistant: 1 month

AI Assistant: 1 month

Tools

Figma, Figjam, Notion, Goodnotes

Overview

Our tutors were the dominant group of users of the video call and whiteboard platform. Thus, in a mission to equip them with the best tools this virtual app could provide, it was important to apply AI to suit their needs: creating easy and personalized lessons.

With experience in creating an App Integration using ChatGPT, I created an AI prompt as an MVP. However, with user feedback after the release, the final product merged both a chatbot interaction with detailed prompts.

This feature was able to address user needs and gather interest with present users and potential clients.

CONTEXT

Pencil strived to support tutors in their lessons- from beginning to end

Pencil aligned with tutors, and by extension tutoring companies, to create the best lesson for the student. This was expressed through the presence of a content library, a plethora of whiteboard tools and applications, all with the intention to create an elevated learning experience.

With the wake of AI, Pencil was able to introduce these tools and applications seamlessly into lessons, just from one click.

problem

Setting up a lesson in Pencil was tedious

Pencil had a library of resources and tools- but it was difficult to find and use them. This led to many tutors using a small portion of Pencil’s capabilities. For example, only using the whiteboard tools, or only importing a PDF.

Constraints

Working within the platform: Pencil Spaces as an app had multiple resources and tools. It was not only important to seamlessly add in this feature to avoid complicating the platform, but to understand the importance this feature was to the user.

Working within the platform: Pencil Spaces as an app had multiple resources and tools. It was not only important to seamlessly add in this feature to avoid complicating the platform, but to understand the importance this feature was to the user.

Working within the platform: Pencil Spaces as an app had multiple resources and tools. It was not only important to seamlessly add in this feature to avoid complicating the platform, but to understand the importance this feature was to the user.

Short timeframe: As the trend of AI took off, it was important for pencil to adapt to the changing industry landscape.

Short timeframe: As the trend of AI took off, it was important for pencil to adapt to the changing industry landscape.

Short timeframe: As the trend of AI took off, it was important for pencil to adapt to the changing industry landscape.

Limited resources: Due to the nature of a startup, there was little investment on user research.

Limited resources: Due to the nature of a startup, there was little investment on user research.

Limited resources: Due to the nature of a startup, there was little investment on user research.

Limited reaction to the AI: Due to the engineering constraints, there was little to no room for iterative feedback between the prompt and AI generating the final product.

Limited reaction to the AI: Due to the engineering constraints, there was little to no room for iterative feedback between the prompt and AI generating the final product.

Limited reaction to the AI: Due to the engineering constraints, there was little to no room for iterative feedback between the prompt and AI generating the final product.

💡

The challenge is to create an easy, customizable tool to generate dynamic lessons

solution

AI assistance must fully integrate with the platform

Generate lessons seamlessly

  • Has the capability for users to import their own teaching material

  • Can fine-tune the lessons based on the specific student and their learning style

Solve issues in a matter of seconds

  • Users can engage in discussion with Sparky, the Pencil AI assistant for troubleshooting, and helpful guides of navigating the Pencil platform

research

Chat or not chat with AI?

The competition had two types of AI assistance: chatbots and non-chatbots.

  • Chatbots have memory of the interactions between the user

  • Non-chatbots had no memory

Insights

Many AI assistants had partial automation

AI assistants did not solely operate by itself. Their assistance manifested through recommendations and required direct approval from the user, and mostly had an exit point for the user to cancel the execution.

AI assistance can be helpful for troubleshooting

One thing that I noticed while conducting research on ChatGPT was its capability of troubleshooting even though it’s not its main purpose (answering general questions). As long as the user initiated the conversation, ChatGPT can seamlessly guide the user through heir technical issues.

design + improvements

AI assistance works best when integrated with the platform

  1. Initial start as an API with ChatGPT

📌

Though the API was successful, lesson generation was a limited experience. If a tutor were to use this to create a lesson, the API would only provide text. This was not a valuable experience based on two things:

Text, though can be written to be engaging, will not be useful for students who may require additional content supplement that text (ie. visual or auditory learners).

This API didn’t reflect the capabilities the Pencil Spaces platform had, which could help to supplement the text.

  1. The MVP provided great insight for the next iteration

The Minimum Viable Product (MVP) was a prompt with additional settings for lesson generation. However, there was a collection of feedback right before and after the MVP release.

The Minimum Viable Product (MVP) was a prompt with additional settings for lesson generation. However, there was a collection of feedback right before and after the MVP release.

The Minimum Viable Product (MVP) was a prompt with additional settings for lesson generation. However, there was a collection of feedback right before and after the MVP release.

Problem: MVP usage was limited

Due to this constraint, usage happened before the sessions to prepare the lesson. Rarely, the MVP was used during the session.

Solution: Full Integration- Sparky, the Pencil AI assistant

By changing the AI assistant to a chatbot appearing on the right side, interaction is possible with the whiteboard and ongoing call. This allows the user to not only use Sparky to help with lessons before a session, but also for troubleshooting during a lesson.

Problem: MVP had a tedious user experience

When the user created a prompt and selected the settings, the AI would immediately follow up with a result. If the result left a lot to be desired, the user couldn’t ask the AI to refine the result. The user had to rewrite and refine the prompt and selections instead.

The feedback modal shown after is asking the user about the experience using AI in general. This is a crucial distinction from AI receiving feedback and acting on it immediately. Any information provided here would be valuable when designing for the next iteration.

The feedback modal shown after is asking the user about the experience using AI in general. This is a crucial distinction from AI receiving feedback and acting on it immediately. Any information provided here would be valuable when designing for the next iteration.

The feedback modal shown after is asking the user about the experience using AI in general. This is a crucial distinction from AI receiving feedback and acting on it immediately. Any information provided here would be valuable when designing for the next iteration.

Solution: Use a chatbot instead of a non-chatbot

As chatbots have memory, it can build upon the user’s initial responses to improve the result. This manifested through three user flows.

Ideally, AI produces the desired result

As the second iteration used a lightbox modal to prevent interference of the user to the board, a blurry overlay has been placed on the board only. In this way, the user can still interact with Sparky and the people in the call.

As the second iteration used a lightbox modal to prevent interference of the user to the board, a blurry overlay has been placed on the board only. In this way, the user can still interact with Sparky and the people in the call.

As the second iteration used a lightbox modal to prevent interference of the user to the board, a blurry overlay has been placed on the board only. In this way, the user can still interact with Sparky and the people in the call.

AI can ask more specific questions depending on the user's responses

This will inspire user collaboration and reduce the amount of iterations needed.

These questions can be an additional step in the user flow, or can be multiple steps. The user can always skip these questions and generate the lesson at any time.

These questions can be an additional step in the user flow, or can be multiple steps. The user can always skip these questions and generate the lesson at any time.

These questions can be an additional step in the user flow, or can be multiple steps. The user can always skip these questions and generate the lesson at any time.

The user can now ask the AI to improve upon its result

After the content has been generated, there is now a dedicated action to refine the content to the user’s benefit

After the content has been generated, there is now a dedicated action to refine the content to the user’s benefit

After the content has been generated, there is now a dedicated action to refine the content to the user’s benefit

Clicking on the Refine Content CTA opens up the initial prompt with the ability to edit or add onto the prompt. This could be changing the text or deleting the file input etc.

Clicking on the Refine Content CTA opens up the initial prompt with the ability to edit or add onto the prompt. This could be changing the text or deleting the file input etc.

Clicking on the Refine Content CTA opens up the initial prompt with the ability to edit or add onto the prompt. This could be changing the text or deleting the file input etc.

If there have been responses from Sparky’s questions before, Sparky will confirm to keep those selections when generating the new content. This is an advantage for chatbots who have memory.

If there have been responses from Sparky’s questions before, Sparky will confirm to keep those selections when generating the new content. This is an advantage for chatbots who have memory.

If there have been responses from Sparky’s questions before, Sparky will confirm to keep those selections when generating the new content. This is an advantage for chatbots who have memory.

The new content is generated on a new board, not replacing the old content. The CTA remains the same, if the user still wishes to refine their content.

The new content is generated on a new board, not replacing the old content. The CTA remains the same, if the user still wishes to refine their content.

The new content is generated on a new board, not replacing the old content. The CTA remains the same, if the user still wishes to refine their content.

Problem: MVP didn't fully address user concerns in its release

In the development and execution of the MVP, users were mostly focused on navigating technical issues. This affected the customer support team greatly.

📌

A troubleshooting feature was in the works to address these concerns, however the design team and I thought it best for these troubleshooting flows to live within Sparky on two reasons:

  • Sparky can be adaptable to the user’s concerns

  • Less is more; we didn't want to add more feature that could complicate the platform

This feature and Sparky would also be placed around the same area, so there could’ve been confusion over what to use for support.

This feature and Sparky would also be placed around the same area, so there could’ve been confusion over what to use for support.

This feature and Sparky would also be placed around the same area, so there could’ve been confusion over what to use for support.

Solution: Sparky is fully adept on troubleshooting

This decision also lead to Sparky being placed right next to the Help button on the top right corner. Not only was this to highlight Sparky’s importance to the platform, but to also build association of Sparky with the Help center; where any supporting information Sparky gives can also be found in the Help center.

This decision also lead to Sparky being placed right next to the Help button on the top right corner. Not only was this to highlight Sparky’s importance to the platform, but to also build association of Sparky with the Help center; where any supporting information Sparky gives can also be found in the Help center.

This decision also lead to Sparky being placed right next to the Help button on the top right corner. Not only was this to highlight Sparky’s importance to the platform, but to also build association of Sparky with the Help center; where any supporting information Sparky gives can also be found in the Help center.

final product

Sparky, the Pencil AI chatbot

Dark Mode of Sparky

Dark Mode of Sparky

Dark Mode of Sparky

takeaways

In hindsight,

Making a feature with AI was an interesting task. There were many insights to gain from not only the design process, but also about the relationship between AI and the user.

Partial automation AI works best. Although users would like the opportunity to streamline their process, users prefer to collaborate with the AI and verify the work themselves. Partial automation allows users to use AI as a tool rather than a replacement of their work.

Partial automation AI works best. Although users would like the opportunity to streamline their process, users prefer to collaborate with the AI and verify the work themselves. Partial automation allows users to use AI as a tool rather than a replacement of their work.

Partial automation AI works best. Although users would like the opportunity to streamline their process, users prefer to collaborate with the AI and verify the work themselves. Partial automation allows users to use AI as a tool rather than a replacement of their work.

MVPs gather valuable user feedback. As users are able to test the feature in combination with the platform itself, they offer valuable insight on the feature’s experience and its integration.

MVPs gather valuable user feedback. As users are able to test the feature in combination with the platform itself, they offer valuable insight on the feature’s experience and its integration.

MVPs gather valuable user feedback. As users are able to test the feature in combination with the platform itself, they offer valuable insight on the feature’s experience and its integration.

If I could do things differently, I would have liked to conduct user testing of the MVP before its release, but it wasn’t possible due to time constraints. By conducting user testing and interviews, there would’ve been a smooth transition between the second and third iteration, and thus users wouldn’t need to relearn a new format for the third iteration.

If I could do things differently, I would have liked to conduct user testing of the MVP before its release, but it wasn’t possible due to time constraints. By conducting user testing and interviews, there would’ve been a smooth transition between the second and third iteration, and thus users wouldn’t need to relearn a new format for the third iteration.

If I could do things differently, I would have liked to conduct user testing of the MVP before its release, but it wasn’t possible due to time constraints. By conducting user testing and interviews, there would’ve been a smooth transition between the second and third iteration, and thus users wouldn’t need to relearn a new format for the third iteration.

Impact

✍️

In particular, their AI Lesson Generators can built lessons in seconds by adding a single sentence into the platform. The AI bot can provide editable materials, like worksheets and assessment activities, directly on the platform for tutors to deploy.

  • Ed Richardson, Managing Director at Keystone Tutors (Client)

Thank you for reading!

More works

More works

More works

Analytics Dashboard

Analytics Dashboard

View Case Study

Information Architecture

Prototyping

Information Architecture

Prototyping

Analytics Dashboard

+1

Information Architecture

View Case Study