Pen & Paper
Site Map Creation
UI & Visual Design
In 2016, disruptED launched their mission to utilize Augmented Reality (AR) & Virtual Reality (VR) to transform the way children learn educational content. With the release of each new book and its accompanying workbook and game, they realized that parents, teachers, and students lacked a way to track their progress and mastery over subject areas.
How can disruptED provide a way for parents, teachers, and students to track their progress in a visual and accessible way?
Design a parent and teacher platform to view student progress and assign work.
This was a client-facing, three-week project with disruptED in collaboration with General Assembly's User-Experience Design Immersive. My duties consisted of:
Additionally, I worked with a Project Manager and Visual Designer on the project.
Our team organized the Discovery phase into the following pieces:
I used my past experiences as a 2nd to 4th-grade bilingual educator to create a persona highlighting pain points and needs of an educator navigating a database. The visual designer also created a survey for teachers to validate the teacher persona's pain points and areas of need. Additionally, I created a parent persona based off of past discussions with parents and utilized prior disruptED parent interviews.
After synthesizing the findings from stakeholder interviews and identifying pain points for both teachers and parents; we defined our problem and solution statements :
I conducted a heuristic and competitive analysis of teacher dashboards primarily used by educators in Texas schools. I focused on dashboards and content used Texas school districts because : 1. disruptED is based in Austin, Texas and has built relationships with educators in the area. 2. Narrowing the scope would not only help us deliver the products to our client in three weeks but also benefit local teachers who are actively using disruptEd's content.
The project manager and I ordered the Ideation phase in the following order:
I collaborated with the project manager to sketch screens for the teacher dashboard. We ran a design studio, a Lean UX methodology where UX designers converge/diverge their thinking to sketch, present ideas and vote, collaborate on and prioritize highly valuable ideas.
TOP DISCOVERIES - TEACHER DASHBOARD
Below are my concept sketches :
My experience as an educator proved useful in understanding how educators and school administrators segregate data. Usually, teachers and administrators see a top-level to a highly detailed view, while the reports given to parents are averages across different content areas. After explaining to my team the different levels of data views, we collaborated on how to best visually represent this data :
Child - Teachers can see content scores for the class, student groups, and the individual student. Parents are only able to see scores for their children.
Subjects - Both parents and teachers can see scores across various subjects.
Missions - Teachers and parents can assign missions and view scores on the disruptED platform based on the subject matter.
Stars / Streaks - disruptED engages students through gamification methods, such as stars and streaks (frequency of completed missions), where students are incentivized for completion of missions or assignments. Teachers, parents, and students can view the number of stars and activity streaks of each child, and for teachers, this includes student groups and the whole class.
Metrics - At this plane, only Teachers and school admin would view scores and percentages of students, student groups, and whole class across performance indicators of mastery, satisfactory, or below satisfactory.
AR / VR / ER - School admin and teachers would be able to segregate scores across different modes: augmented reality, virtual reality, and e-reader; to see where students or classes are experiencing growth or struggling. When explaining this to disruptED stakeholders and the design team, it would be important to understand if the content area or the various modes is contributing positively or negatively to student progress.
TEKS / Common Core - Teachers and school admin view student academic progress through TEKS/Common Core, state standards for K-12 curriculum and standardized testing. The Common Core State Standards Initiative is adopted by many states in the U.S., whereas Texas Essential Knowledge and Skills or TEKS are the state standards for Texas public schools.
Since the teacher platform would be web-based, I suggested that there be a login button on the site header so that teachers and school admin can login and not only manage educational content but also their subscription.
As I was ideating for both platforms, I thought through what typical tasks a teacher would conduct to view data and update parents about their child's progress. I created the following flows for both teacher and parent personas.
As lead interaction designer, I organized the last part of the Ideation phase into the following pieces :
To deliver high fidelity mockups and prototypes for both teacher and parent platforms in 3 weeks, we utilized the MoSCoW method to determine product requirements.
To understand if students are mastering content on all disruptED modes, I thought it was important to prioritize these data points :
These data points paint a picture of how well a child understands the content, particularly the time spent piece. If a child is spending a longer amount of time on the VR mode versus the ER mode, it could be an indicator of which learning style best promotes academic success.
I chose a card layout to display these data points upfront along with names of students/groups and corresponding colors that align to ranges of mastery percentages. These ranges form student groups based on district or school policies.
Depending on the school and district policies, student groups are arranged by percentages of proficiency (mastery) regarding content standards. These groups are primarily used for small group teaching where the teacher or interventionist can hone in on certain TEKS/Common Core standards. This differentiated teaching model aides students who struggle to learn in a whole group setting by providing extra guidance and one-on-one practice with students.
Below is a table of how I arranged student groups based on my experience as an educator :
The initial wireframes included a tab layout based on competitor dashboard designs. I focused on featuring important data points upfront along with a graph to visually represent student progress. However, after researching design best practices for dashboards and feedback from stakeholders; I created further iterations presented below.
Here I incorporated modular elements along with notifications, messages, and account navigation at the top. I designed a card layout for representing data points upfront. Additionally, I designed for data intelligence functionality to recognized and pull out trends of students' academic progress.
The designs below present a more detailed view of the student group and individual student data through graphs. Teachers can sort graphs by Subject and TEK. I also segregated Readiness TEK Standards from Supporting TEK Standards. School administrators and teachers prioritize Readiness standards since they are essential for success in the current grade and will also appear on the State of Texas Assessments of Academic Readiness (STAAR). Supporting standards are introduced in the current grade but will be emphasized in a subsequent year, and they may or may not appear on the STAAR Test. Finally, I included a "Student View" screen to showcase how cards would appear for all students in a classroom.
This was the most challenging aspect of the project. We only had a few days until we presented our deliverables to the client. At this point, there was a breakdown in team communication and performance. The project manager, the visual designer, and I agreed that the visual designer would produce wireframes and comps for the parent platform as part of the deliverable; while I fleshed out the teacher dashboard prototype to be ready for usability testing. It came as a surprise to the project manager and me when the visual designer did not deliver on the parent platform but instead used my initial work to re-design the teacher dashboard.
Unfortunately, this hurt team morale, performance, and caused delays in our workflow. There were only a few days left, so I needed to make sure that we delivered on the promise we made to the client. I decided to stop production on the original version of the teacher dashboard prototype, and chose instead to work on the parent wireframes to deliver as a proof-of-concept to the client.
Besides having little time left to design the parent portal wireframes, the other difficulty was designing for a horizontal mobile view. When I presented the initial vertical screen, the stakeholders informed me that I would need to re-design the parent portal horizontally like the children's platform. This is due to a coding issue where the children's disruptED platform is only viewable in a horizontal layout.
Below is the teacher dashboard prototype I contributed before the handoff, and the parent platform prototype I designed after the handoff.
The tasks of the original prototype differ slightly from the finalized version since I had to stop the production of this prototype to focus on the parent platform deliverable.
We conducted usability tests with the second version of the prototype that the visual designer reproduced from my original prototype, while I worked on the parent platform wireframes. Here's a screenshot for reference :
Since we were pressed for time, we were only able to recruit 3 testers - 2 were current teachers and one was a fellow cohort member who was a former teacher. Here are there were the top findings from their feedback :
"Coming together is a beginning. Keeping together is progress. Working together is success." - Henry Ford
When I think back on this project and the missteps the team made, empathy was the key oversight. The ability to communicate and understand each team member's needs, communication styles, and workflows are critical in delivering a valuable product to the client. And we did not do the groundwork to establish those aspects, for example :
Bottom line - "If you fail to plan, then you are planning to fail." We didn't plan our team routines effectively, therefore breakdowns began to occur. And when there's no common vision, then people will be driven by personal gain and ambition. Although we delivered both platforms to the client, I believe that these deliverables could have been of higher quality if we didn't have team dysfunction.
With the help of our instructors, we had a meeting to repair the tears in our team dynamic. We outlined what had worked initially and areas for improvement. We re-aligned to our vision for the project, and how we could move forward. Even though this session helped our team regain traction on our work and set up foundational routines we should have had at the beginning of the scope, it still impacted the quality of the deliverables. A valuable lesson I learned is that the work and synergy of the team affect clients and users, so we should always prioritize delivering value above all else.
Success is not final, failure is not fatal. It is the courage to continue that counts. - Winston Churchill
Although we delivered the products to the client, I still want to fulfill the vision we had in mind at the onset of the scope. My next goal is to redesign the interface of both platforms incorporating the feedback from users and best practices from modular dashboard design. Once that's complete, I will update this case study with the redesign. Thank you for reading and stay tuned!
Hit Enter to Search or X to close