Blank Pageā„¢

AI Engagement Tool For Writing Education

Overview

The goal for the Blank Pageā„¢ project was to conduct extensive user research to solve the critical pain points for one of the Blank Pageā„¢ users, the teacher, and deliver a wireframe prototype at the end of a one-month duration project.

Background

Blank Pageā„¢ is a partnership between Finetune and Tangible AI, it is a hybrid education platform for teachers and a conversational AI teacher assistant tool to help young people learn and develop critical thinking, and prewriting skills for academic writing. Finetune is an educational tech company building a comprehensive platform for qualitative learning to help students in K-12 or higher education to develop essential writing and critical thinking skills. Tangible AI is a tech company helping nonprofit organizations and social sector businesses increase their impact and operate efficiently with artificial intelligence, machine learning, and chatbot technology.

The Problem

In the United States, the writing performance of K-12 students has continuously declined for over three decades leaving about 75% of graduating high school students underprepared for higher education and the job market. Students from urban, impoverished or disadvantaged and minority communities are at higher risk of not meeting basic writing proficiency skills which can negatively impact their success within the workforce.

Solution

Our approach was to deliver a wireframe prototype for three of the most critical user flows in the teacherā€™s interface; communicate with an individual student in a three-way chat with the AI assistant, communicate with multiple students in a multiplex (group) chat, and manage a classroom within an assignment.
Kanban Prototype
Card Prototype

My Role

During the one-month internship, I collaborated closely with two UX designers, James Porter and Allison Jin. Together we were a three-person design team beginning the project from February 9 till March 9, 2021. We utilized Zoom, Google Hangouts, and Slack to maintain frequent communication and met with stakeholders every week. The primary design tools we used were Figma, where we created low-fidelity wireframe mock-ups and a Miro board where we shared our ideas and collaborated as a team.
ā€
Duration: February 9, 2021 - March 9, 2021 (1 month)

Role

  • User Research
  • UX/UI Design

Technology

  • Figma (Prototype and Low-fidelity Wireframe Mock-ups)
  • Miro (Affinity Mapping)

Research Methodology

Interviews

After a thorough review of the existing user interview notes and affinity map, we felt that additional insights were needed because we were interested in specific insights that pertained to critical thinking and prewriting methods of teaching and the current usage of technology in the classrooms. We recruited three teachers from different teaching backgrounds for new user interviews to gain a deeper understanding of the pain and gain points encountered in teaching critical thinking or prewriting techniques.
We prepared eighteen thoughtful questions that lead to the discovery of qualitative data about gamified critical thinking exercises, techniques on class lectures, and the benefits of group discussions that contributed to a significant impact on our design ideations. For the three new interviews, each of us led an interview while one of us participated as a note-taker to document the interview.
Jordan
"It's important to design plans that challenge students at their own levels."
Lilian
"I encourage students to make connections to their life, culture or the times."
Denise
"I think many teachers go over the allotted time given for lesson preparation."

Top Research Insights

Together we collaborated on Miro board to create a new affinity map that contains new insights from our user interviews, newly discovered published secondary research data, and the previous user research insights.
  • Teachers need to build a good rapport and connect with students to keep them engaged.
  • Teachers donā€™t have enough allotted time to prepare for class, learn new technology, create lessons, and check-in with struggling students.
  • Teachers need to accommodate students that have different learning styles.
  • Grouped students will benefit by learning from each other.

Personas

Blank Pageā„¢ has identified a total of three personas, our project scope was to solely focus on the primary teacher persona. We defined the primary persona to be Elanore Ramos, she is a writing teacher using an AI assistant tool to help her teach critical thinking and prewriting skills to a large classroom of high school students.

Elanore Ramos

Creative Writing Teacher

Summary

Elanore lives in an apartment with her partner and two small dogs. After earning her Masterā€™s Degree in Literature from UCLA, she began teaching in the Los Angeles School District. She has been teaching composition and creative writing for 10 years. In her free time, she loves reading and hiking with her family in mountainous areas of southern California.

ā€œThe benefits of project-based learning is that students who may not be good test-takers can be great problem solversā€

Demographics

Gender: Female
Ethnicity: Hispanic
Age: 32
Location: Los Angeles, CA
Work: High School Teacher
Status: Long Term Relationship

Goals

  • Prepare students for success in their academic pursuits, the job market, and careers.
  • Support each studentā€™s range of abilities and learning styles.
  • Collaborating and sharing resources with other teachers to expand and gain the collective knowledge to become better educators.
  • Mentor and teach students critical thinking skills to expand writing abilities.

Frustrations

  • Too many digital resources and logins to keep track of (Google Classroom, Zoom, etc.)
  • Not enough allotted time to check-in with struggling students.
  • Some parents are only concerned if their children complete assignments, not effective learning.
  • The constant engagement required to teach is exhausting.

Defining The Product Features

The three key product features that were essential to include in our design thinking and explorations were the AI assistant, the four phases of an assignment progression, and the students learning analytics. We intended to design the interface of the product features from the context of the teacherā€™s perspective.

AI Assistant

The conversational AI assistant engages with the student via text messages to help the student develop ideas, critical thinking, or prewriting skills for a writing assignment. The AI assistant will learn and gather data for the teacher to access the studentsā€™ interests and learning styles. Our main focus was to explore design solutions on how the teacher can view the communication exchange between the student and the AI assistant, the ability to modify the AI assistant settings, and control the AI assistantā€™s real-time responses to the students.

Four Phases of Progression

During the progression of an ā€œassignmentā€, the system would place students within one of the four phases of the linear assignment progression; Engage, Catalyze, Confer and Confirm. It was critical to design and explore how the teacher can at a glance see an entire classroom of students and clearly see each of the studentsā€™ progression status during an assignment.

Student Analytics

The studentsā€™ learning style data analytics are defined in four categories; Valence, Verbosity, Sensitivity, and Mastery. It was essential to design a solution where the teacher can easily find the students learning style analytics because the knowledge will help the teacher become an effective educator.

Narrowing Down The Problem

I began my design ideation process by creating high-level How Might We? statements to help me quickly brainstorm solutions to the problem and organize my ideas in a concise list format that can be easily shared with collaborators. The How Might We? Statements that stood out to me were:
How might we help teachers stay on track and organized to prepare for class?
  • Create a dashboard UI for teachers to have quick access to important information such as schedule, the AI assistant, tools to create assignments and teaching materials.
How might we track the overall classroom progress?
  • Create a Kanban or Card layout to visualize the progress of all students (the classroom) within the phases of an assignment that is in-progress.

Our Design Explorations

After synthesizing the user research, we began hand sketching our ideas and solutions for the teacher interface and user flows on paper. My design process is to quickly create rough sketches to explore many directions, then I select a few concepts to digitize and refine into a low-fidelity mock-up. Typically when I transfer my rough sketches into a design software like Figma, I further edit and discover which solutions are worth pursuing or not because it allows me to easily increase the fidelity.

My First Iterations

I created three initial UI wireframe prototype directions. Each of these concepts incorporates minimal top navigation with access to assignment settings and an exit button to go back to the teacher dashboard.Ā 

Chat Collapse

  • Minimal kanban layout without side navigation.
  • A chat float action button fixed to the bottom right, that reveals the classroom of students.
  • When a student is selected, a split horizontal UI opens the three-way chat and studentsā€™ analytics.
view prototype

Kanban Style Version 1

  • Higher complexity kanban layout with side navigation of the classroom of students.
  • Quick access AI settings located at the bottom left side navigation
  • When a student is selected, a split horizontal UI opens the three-way chat and the studentā€™s analytics panel.
  • Handlebars on the UI panels to minimize or maximize the view.
view prototype

Card Style Version 1

  • Card layout with minimal and collapsible side navigation of the classroom of students.
  • Modal view for each segment of the class progression.
  • When a student is selected, the side navigation expands to reveal the three-way chat and studentsā€™ analytics.
view prototype

Team Iterations

As a team, we combined our best ideas and iterated all of our concepts into three distinct UI directions to share for initial stakeholder feedback. To show a range of possibilities, we intended to show an option without the need for a teacher dashboard and another option inspired by the Slack message thread.

Slack-Esque Message Thread

  • Designed with side navigation that contains access to teacher resources, other classrooms or assignments, and current assignment phases with the student list. No teacher dashboard is needed.
  • Minimal top navigation with access to Blank Pageā„¢ home or account info with a search bar.
  • Panel top navigation with assignment settings.
  • Message thread that shows the grouped students with options to view the three-way chat or student statistics in detail.
view prototype

Card

  • Designed with side navigation that contains access to teacher resources, other classrooms or assignments, and current assignment phases with the student list. No teacher dashboard is needed.
  • Minimal top navigation with access to Blank Pageā„¢ home or account info with a search bar.
  • Folder tab organization with card layout UI.
  • Modal view for each segment of the class progression.
  • When a student is selected, a right panel opens revealing the three-way chat and the student analytics.
view prototype

Kanban

  • Designed with top navigation with access to assignment settings and an exit button to go back to the teacher dashboard. The teacher dashboard would contain all access to pages not directly related to the assignment.
  • Quick access AI settings located at the bottom left side navigation.
  • When a student is selected, the side navigation expands to reveal the three-way chat and studentsā€™ analytics.
  • Handlebars on the UI panels to minimize or maximize its view.
view prototype

Feedback

Based on the shareholderā€™s feedback we revised and narrowed down our concepts into two directions, the kanban, and the card directions. For both directions, we further explored the group chat interaction and refinements for the student analytics.

The Card Approach

The card direction is designed to have one main access point to the entire Blank Pageā„¢ platform located on the left side navigation, it includes the teacher's educator resources, all classes, and assignments as well as the current class assignment phases with a complete student list.

Manage a Classroom Within an Assignment

Four Phases of Progression

The four phases of an assignment progression are represented with a series of grouped cards and each card component is intended to represent a question or a segment of the assignment. During the progression of an active assignment, the studentā€™s name and user photo will appear on the card that they are currently engaging on. Visually indicating the status of all the studentsā€™ progress at a glance.

Folder Tab Navigation

Located at the top of the main view, is the folder tab navigation. This visual style is a subtle detail that invokes the idea of education and school supplies. The folder tabs enable the teacher to change the main view to display other information such as class statistics, class files, and the assignment progression.

Communicate with a Student (Three-way Chat with The AI Assistant)

To view the three-way chat with the AI assistant and student analytics, select the studentā€™s name or user photo from the class roster list on the left main navigation. A new panel will appear on the right side of the interface.

Communicate with Multiple Student (Multiplex Group Chat)

The ability to interject with an alternative AI or teacher response into the three-way chat conversation is a key feature. When a card is selected within the assignment progression, a radial selection modal will appear with all the active students participating in the segment. This is where the teacher will be able to customize and simultaneously submit responses to multiple students.

Elanore Initiates An Assignment

Persona

Elanore Ramos

Scenario

ā€œElanore initiates an assignmentā€

Steps

  • During Elanoreā€™s Period 2 class, Elanore logs in to the Blank Pageā„¢ platform and finds the side navigation to view all her classes.
  • Elanore selects her Period 2 class from the Class List section.
  • She selects her Literary Essay to initiate the assignment and engage with her students.

Elanore wants to chat with Student

Persona

Elanore Ramos

Scenario

ā€œElanore wants to chat with a student"

Steps

  • During the Literary Essay assignment, Elanore notices that Chad Cano needs help. She hovers over scrolls down the main left navigation to find his name on the student list.
  • Elanore selects Chad Cano and the three-way chat opens on the right side of the UI.
  • She reads the conversation and submits a direct message to the chat.

Elanore wants to submit a response to multiple students

Persona

Elanore Ramos

Scenario

ā€œElanore wants to submit a response to multiple students"

Steps

  • During the Literary Essay assignment, Elanore notices that multiple students need help on a particular question, she selects the question card to view further details.
  • A modal opens, Elanore reviews all the student responses and the AI suggestion on how to move forward. She selects the AI suggestions and submits the responses.
AI Settings
Multi-Student Modal

The Kanban Approach

The kanban direction is designed to include a Blank Pageā„¢ platform dashboard, where the teacher may access classroom analytics, teacher resources, all classes, assignments, and files. The direction is inspired by the Kanban-style board, an existing visual workflow management method that helps people stay organized.

Manage a Classroom Within an Assignment

Four Phases of Progression

The four phases of an assignment progression are represented through a kanban-style board and each phase contains a series of grouped card components that represent a question or segment of the assignment. During the progression of an active assignment, the studentā€™s name and user photo will appear on the card that they are currently engaging on. Visually indicating the status of all the studentsā€™ progress at a glance.

Communicate with a Student (Three-way Chat with The AI Assistant)

To view the three-way chat with the AI assistant and student analytics, select the studentā€™s name or user photo from the class roster list on the left navigation or the kanban board. A new panel will appear on the right side of the interface.

Communicate with Multiple Student (Multiplex Group Chat)

The ability to interject with an alternative AI or teacher response into the three-way chat conversation is a key feature. When a card is selected within the kanban assignment progression, a drag and drop interaction modal will appear with all the active students participating in the segment. To submit responses to multiple students, the teacher will need to drag and drop the student into the desired AI suggestion response or create a new response.
The drag and drop interaction will prevent the teacher from accidently submitting the wrong response to a student.

Elanore Initiates An Assignment

Persona

Elanore Ramos

Scenario

ā€œElanore initiates an assignmentā€

Steps

  • During the SAT Writing class, Elanore logs in to the Blank Pageā„¢ platform and reviews her teacher dashboard.
  • Elanore selects her SAT Writing class from the My Classes section.
  • After Elanore reviews all her SAT Writing analytics and students learning style profiles, she is ready to initiate the Critical Writing Exercise by selecting the assignment card.

Elanore wants to chat with Student

Persona

Elanore Ramos

Scenario

ā€œElanore wants to chat with a student"

Steps

  • During the Critical Writing Exercise, Elanore notices that Chad Cano needs help. She hovers over scrolls down the main left navigation to find his name on the student list.
  • Elanore selects Chad Cano and the three-way chat opens on the right side of the UI.
  • She reads the conversation and submits a direct message to the chat.

Elanore wants to submit a response to multiple students

Persona

Elanore Ramos

Scenario

ā€œElanore wants to submit a response to multiple students"

Steps

  • During the Critical Writing Exercise, Elanore notices that multiple students need help on a particular question, she selects the question card to view further details.
  • A modal opens, Elanore reviews all the student responses and the AI suggestion on how to move forward. She drags and drops the students into the AI suggestions and submits the responses.
Dashboard
Student Analytics
Assignment Modal Drag and Drop

What I Learned

Being a part of the Blank Pageā„¢ project was inspiring and meaningful to me because about a year ago I would have not considered myself as a creative writer or an advocate for creative writing. I experienced synchronicity between my passions, creative projects, and design career connected to education and creative writing.
Shortly before I joined the Blank Pageā„¢ project, I began a new hobby in creative writing and I recently co-developed a web app for education, where students and tutors can connect called Find a Tutor. Throughout my career, Iā€™ve been passionate about education and creative learning for young people because of the impact and positive change it brings to a person's life.

Secondary Research Insights

At the beginning of the Blank Pageā„¢ project, I had little knowledge about the public school education system failures and the problems that students or teachers encounter in urban communities. I discovered, read, and studied two published dissertations that contained extensive research data about the problem. I became interested and immersed myself in learning about the subject matter, this was my approach to gain a deeper understanding of the problem efficiently and credibly.

One-month Project Scope

At the beginning of the Blank Pageā„¢ project, we defined a scope proposal to clarify the extent of all the project deliverables for a short one-month time frame. I expected the timeframe would be a challenge to accomplish but great team communication and the scope proposal allowed everyone to be informed and aligned as a team. I learned how valuable it is to set the project expectations and I plan to include this practice in my future projects.

Conclusion

My desired impact for the work I contributed was to advance the user experience design for the Blank Pageā„¢ product by exploring user-friendly ideas that would enhance the teachersā€™ quality of life and clarify the vision for the Blank Pageā„¢ interface.
Upon completing the internship we delivered comprehensive documentation of our user research findings for future incoming designers or collaborators to effectively be brought up to speed and smoothly transition into the project.Ā 

Next Steps

The next steps are to user-test the Kanban and Card wireframe prototypes with 10-20 teacher participants to discover and refine the usability issues. Additionally, continue with conducting user research by recruiting and interviewing high school writing students and academic researchers to create two more user personas.