EDUblue
A productive app designed for teachers, harnessing the power of A.I. to help educators with their organizational, administrative, and planning tasks.
Project Type
End-to-End Application
Role
Solo Product Designer: Research, Branding, UX/UI Design, Testing
Time Frame
Approximately 100 Hours
Tools
Figma, Lyssna, Photoshop, Google Forms
Introduction
Background
As of 2022, approximately 2.5% of the working population of the United States – over four million people – are employed as teachers. For nearly a decade, I was one of those millions. Drawing on my experiences in the industry, I was interested in developing an End-to-End Application to assist teachers with their administrative, organizational and planning tasks.
The Problem
As almost anyone in the industry will tell you, teaching comes with an array of challenges. In Georgia, my home state, and nationally:
44%
16%
75%
75%
I'm interested in using A.I. technology to develop tools would save time, reduce stress, and allow teachers to devote more time to their students.
Project Goals
1.
Identify and understand user needs. What types of tasks do teachers struggle to complete, and what tools would help?
2.
Develop a user-friendly UI that allows teachers to access these tools easily and for a variety of purposes
3.
Create branding and high-fidelity mockups to demonstrate a variety of typical user flows employing these tools.
This application needed to be completed within a 100-hour time frame. I had limited access to people within the profession, so I utilized a variety of research methods to assure it met the needs of real teachers. The scope of the project was limited to essential features to assure quality within the given constraints.
In order to determine what features would be most useful to teachers, I considered these basic questions:
What organizational, planning, and administrative tasks do teachers have during a routine day/week of work?
What are the most significant sources of stress for teachers?
What tools currently exist to help teachers manage their organization, planning, and administrative tasks?
Methods
Competitive Analysis to examine what other teacher-focused apps choose to feature and how they integrate A.I.
Analyzing Research Data
As I pulled important quotes from interviews, surveys, and other research, I used the popular method of Affinity Mapping to visualize the data. For example, here are sorted responses related to planning: time for planning, lesson plans, and unit planning.
I also considered the survey data to understand common teacher needs that tended to be more quantitative. For example, 72.4% of my survey participants teach 2 or 3 different subjects per day.
Meet the Teachers: User Personas
Using the information and opinions expressed throughout my surveys, interviews, and associated research, I developed two distinct teacher personas: Carrie, a new teacher, and Arjun, an experienced teacher in a leadership position. They incorporate many popular opinions and needs of a likely user, based on research.
With a better grasp of teacher pain points, it's time to consider some solutions.
Defining the Big Questions…
How Might We:
Use A.I. to develop lessons and activities for new or inexperienced teachers while assuring that the material is high-quality, appropriate, and effective?
.Use A.I. to help teachers plan long- and short-term curriculums that support student success and various types of learners?
Use A.I. to develop the instructional documentation required by many schools while assuring that the materials meet state and national standards?
Use A.I. to assist teachers in communicating with parents more effectively while reducing the administrative burden on teachers?
…and the Main Features
Proposing solutions to these questions, I determined the following key features for the app:
User Account
Unit Planner
Lesson Plans
Class Activities
Communication
But what does that look like, exactly?
As I drafted the first version of the site map, I considered what information and tools users would want to see immediately upon opening the app. First and foremost: the current week's plans and materials, for teachers like Carrie who need to organize entire classes and units. For users who may just want to create materials, the bottom navigation will always include a link to the content generator.
And how would it work?
In order to assure that users like Arjun or Carrie would be able to navigate the app, I drafted User Flows to illustrate their likely steps as they complete basic tasks.
Branding
Throughout this project, I continually refined the branding, setting a basic philosophy.
Name & Logo Development
The name of the app, EDUblue, was an iteration of an earlier name, BluePlan. I wanted the app's name to be easily identified as one relating to education, but Education BluePlan was too long. Ultimately, it became EDUblue for the rhyme and simplicity.
The Bauhaus-inspired shapes allow for color and playfulness, while maintaining professionalism and simplicity.
Styling
The first draft of the styling identified several bright accent colors, along with blue as the primary brand color: a nod, of course, to the name of the app. I tried several different typeface options, ultimately settling on Lato because it is clean, modern, and very readable on small screens. Below, you'll see the final version of several UI elements.
Wireframes & Testing
This project went through multiple itterations of wireframes, with changes driven by mentor/peer feedback and user testing.
Sketching the Basics: Low-Fidelity Wireframes
I used Octopus.do to outline both the site map and the low-fi wireframes, getting an idea of which features need to be included on each page.
The Progression of an Account Page
As I developed the UI and branding, I created several different wireframe iterations, progressively refining both the appearance and functional elements.
Early Wireframe Testing
Between the mid and high-fidelity wireframes, I did some simple testing related to the navigation, calendar feature, colors, and search filtering, conducted through Lyssna.
participants preferred to not have icons on the calendar: keep the small blue plus icon on days without plans
search filters were important to users: refine the filter process
navigation confused participants: consider refining the bottom nav and eliminating the menu
In the revised navigation, the top menu's main account pages are mostly integrated into the bottom menu, and all the links to Material Generator pages are found under the plus button. These changes significantly improved user feedback.
Almost there: High Fidelity Wireframes
After the revisions based on testing, the wireframes were ready to prototype.
Prototype & Testing
User Testing Results
User testing involved moderated and unmoderated Prototype testing on the Lyssna platform. Participants were asked to complete the tasks outlined in user flows and give general feedback on their experience.
Assure that users are able to complete basic tasks on the prototype.
5 tasks were completed by 100% of users
2 tasks were completed by 80% of users
Determine the overall efficiency of prototypes: for example, whether or not users are able to complete tasks with ease, within a reasonable timeframe, and without excessive errors.
Users spent, on average, between 20 and 90 seconds on each task.
Two tasks had >20% misclicks, while the rest where between 3% and 14%
Assess user satisfaction with the overall process of performing the tasks.
Users reported high satisfaction with the design of the site.
One task (creating an activity) was moderately challenging for participants. The rest were "easy" or "very easy."
Suggested Changes Based on Testing
Incorporate a back button on Daily Lesson pages
Include a back button on Editing pages, with a modal warning they have unsaved changes
Add text on generator pages when material has been created: for example, “Here’s a plan for Chapter 6 of The Great Gatsby…”
Restructure the update/save buttons on generator pages
Revise the attached document section on Lesson Plan page
Based on testing and feedback, the next steps would involve…
building out the onboarding flow and developing a brief tutorial to explain the general navigation of the app for new users, emphasizing the Plus Button as their hub to create all types of materials
revisiting the design of the main profile page to develop and test alternatives that might work better for teachers who have to plan 4+ different classes a day
designing a desktop version of the app, since many teachers may prefer to complete these tasks on a computer
