RevAIse Web App

Project Overview

Project Length: 3 weeks

Goal: To design a web application for classroom use that incorporates generative AI as a way to improve student writing performance.

Inspiration: The idea for this project stemmed from my personal experience as a high school English teacher. In order to prevent artificial intelligence from becoming purely a replacement writing tool for students, we wanted to show students how to use it to become stronger writers in a structured and engaging way.

Roles

Project Manager
Collaborated with 4 other team members in UX Research, UX Design, and UI Design

Tools

Google Suite
Figma
Trello

Bottom of Page

DISCOVER

The Problem

In the discover phase, we wanted to dig into the issues faced in the world of secondary education—middle and high school—that could be alleviated through the use of generative AI. We sent out a survey to secondary students, parents, teachers, and school district employees; the 53 responses that we collected gave great insight into the current writing performance of students, the overall understanding of modern technology and generative AI, and the opinions over its usage in the classroom.

The Buyers and The Users

To further our research, we conducted 6 teacher interviews and 5 student interviews. We discovered that our potential buyers and users shared similar pain points regarding writing: time and relevance. Teachers are struggling to provide relevant writing experiences, and they simply don't have the time to provide individualized feedback consistently. Students, on the other hand, are relying on artificial intelligence to complete writing assignments to save time doing homework because they do not see the relevance in their writing assignments. We gained great insight into the aspects of "gamified" learning were both helpful and enjoyable for all.

The Market

In order to make sure our service would be unique, we completed a competitor analysis of the current websites and web applications that students and teachers said that they have used in the past. This helped us identify some common features of these popular educational platforms as well as opportunities for improvement and AI-integration.

Platform

Teacher Services

Student Services

Incorporates AI

Writing Assistance

DEFINE

organizing data

Affinity Map

Our team created a digital affinity map to organize our qualitative research and find data trends. We gleaned our major insights from the intersections of feedback across both user groups.

Writing Benefits

Writing Challenges

Insights:

Feedback is crucial to the writing process, but it is not always personalized or provided consistently
Students struggle to engage with writing in a meaningful way
AI is most often used by students without permission to replace learning
Games and competition tend to make learning more enjoyable

personas and journey maps

In order to properly empathize with all users of our web app, we created a buyer persona for teachers and a user persona for students. These helped us ensure that we kept both audiences' needs in mind as we began to discuss our features.

Our buyer, Mrs. Calhoun, wants to lessen her workload while still providing quality instruction to her students. By mapping out her current experience through the Journey Map below, we realized that our use of AI could provide a fast, personalized, and ethical way of assessing students' writing.

Our user, Jayden, also has an intense workload that he would like to reduce. By mapping out his current journey as well, we realized that better writing instruction may give him the skills and confidence he needs to do his own work rather than rely on AI to do it.

problems

Teachers need a structured writing-assistance tool because it is becoming increasingly difficult to keep students engaged and provide personalized feedback to every student.

Students need a writing tool that is captivating with fun activities to encourage them to keep writing in and away from the classroom.

solution

RevAIse is an AI writing-assistance tool to encourage students to write and improve their skills, all in an online space that teachers can trust!

DEVELOP

ideation

With so many opportunities for features that could assist teachers and students, we needed to brainstorm through a Feature Prioritization Map to figure out the features we could highlight in a limited time frame and which we could save for future development. Our graph assessed features in terms of their value to the buyers/users as well as the effort they would take for our team to produce them. In the end, we prioritized the features below to maximize our efficiency.

Progress Bar/Checkpoints — helpful to monitor personal growth and/or compete against other students
AI Revision Suggestions — while students would write their initial responses themselves, our generative AI would suggest improvements based on teacher input (i.e. appropriate use of tone, spelling errors, etc.)
Visual Cues for Revisions — suggestions would be color-coded for different skills and overlap with student responses to encourage direct interaction
Positive Feedback — celebrate student success to increase confidence with writing skills and willingness to return to platform

key

walkthrough

To make sure our features would flow together in a realistic and efficient way for users, our team mapped out a User Flow that we imagined our student, Jayden, would follow as he used revAIse in the classroom.

Just like any strong lesson, Jayden would be guided with modals that prompt him to revise individual elements, and we noticed multiple opportunities for micro-interactions and other exciting elements to engage students. We also realized users may want to save student work in a portfolio, so we would need an export screen that offered options to download or integrate with platforms like Google Classroom. With the path set, it was time to begin visualizing and prototyping revAIse!

DELIVER

Wireframes and prototypes

Lo-Fidelity Wireframes and Prototyping

We sketched out a few screens for desktops to document that path and establish our creative ideas for revAIse's aesthetics. After being sure to prioritize those features from our matrix, we decided to incorporate clean but positive visuals that would excite students while they worked.

Usability Testing

We used Figma to create simple versions of our favorite sketches. After completing 5 usability tests with 4 tasks, we received great feedback on how to improve. Our users didn't fully understand that they would be completing their own writing — it seemed like the AI was doing it for them. They also felt like the "stats" on the screen could be helpful but took up too much space. However, they liked seeing a progress bar/timer at the top that would keep them on pace, and they felt exporting the work at the end of the lesson was easy to do.

Mid-Fidelity Prototyping

To better guide users through the AI suggestions, we added clear instructions to the top and color-coded revisions based on different skills. When users wanted to incorporate a suggestion, we added "Type Here" instructions to make sure they would know that they would be writing new content themselves. We also moved the "stats" to the bottom of the screen to maximize the space and keep users focused on the primary task of writing/revising.

Design

Throughout this process, we also began considering color schemes, mascots, typography, and other design elements. We focused on brighter colors to draw in younger audiences, clean and legible typography, and illustrated mascots of famous authors to stress the importance of the writing process and provide encouragement from the best of the best.

Not Just Desktops

Many of our teachers stated that they would use desktops, Chromebooks, or tablets with students as their primary form of technology. Since many secondary teachers expressed concerns over phone usage within the classroom, we decided that a mobile version of our platform would not be best for our buyers. We wanted to develop a responsive flow that would work on a screen that students would use specifically for educational purposes. This required us to condense material a bit and add keyboards as needed.

Usability Testing

We conducted 5 more usability tests on a combination of desktop and tablet screens, and it seemed like the majority of our changes were well-received. Even though users wanted to begin typing their own responses into the boxes, rather than be limited to our pre-scripted examples, they better understood the flow and finished the tasks more quickly. We decided to go to a UX Expert and test the flow again, which emphasized crucial feedback: it seemed a bit too tempting to click "ignore" on an AI suggestion, which would defeat the purpose of the platform altogether.

Hi-Fidelity Prototyping

We changed the "ignore" option to "edit" to encourage positive behaviors, and we added a modal that would remind students to consider all suggestions if they attempted to submit early. With a few final screens to celebrate students' hard work, revAIse began to come to life.

Desktop Prototype

Mobile Prototype

Next Steps

Because we focused purely on the student view, we would love to build out a user flow and screens for teachers that provides opportunities to input rubrics, set success metrics, etc.
Upon actual AI integration, we could potentially add in a variety of new AI suggestions, like sentence starters for struggling writers.
Students can export their work, but we'd love to integrate a Portfolio into our platform for students to access all their previous work as well as tracking growth and writing insights over time.
We had quite a few students tell us that they would want the option for independent/self-paced work that they could complete outside of the classroom to practice with specific skills. We would like to build out an option for this and continue meeting with teachers and students to see how we can always adapt to their needs.

Click for full case study!