OctoEd: learn, engage, connect by AnTsch78

Thesis Process Book Andrea Tscheschlog

Table of Contents 1 Background The Problem Target Audience The Solution

23 Research & Insights The Topic Gaps & Opportunities Insights

51 Design Strategies DS Chart Materials Matrix

59 Brand Identity The Logo System Guidelines

91 Brand Development Logo Virtual Learning Platform Website Awareness Campaign

145 Conclusion

The Future of OctoEd

OctoEd Process Journal

Background Understanding the background of the audience, enables that designer to get to the root of the problem and design a solution that us appropriate and successful. The following pages break down the problem with middle school virtual learning, that target audience and the goals and outcomes that are expected with a successful design solution.

OctoEd Process Journal

The Middle School Virtual Learning Experience Goals / Mission

Topic: Middle School Virtual Learning Goal: help middle school students learn, enagae, and connect in the on-line learning environment. Audience: Middle School Students & Teachers

OctoEd Process Journal

Background In 2020 the United States saw a drastic shift in the landscape of public education. Virtual learning came to the forefront, forever transforming the instructional methods available to our youth. This shift forced students and teachers alike to adapt quickly to a new learning environment. Some were successful, but many struggle, especially those in middle school. According to an analysis of 1st quarter results of middle school learners, the percentage of students earning Fs in at least 2 classes jumped by 83%. Middle School students are struggling to adapt to virtual learning.

Virtual Learning: A student uses computers at home to learn virtually.

Background

OctoEd Process Journal

The Problem The current platforms available do not meet the specific needs of middle school learners. Elementary platforms are too juvenile and high school platforms are designed for older more independent learners. Middle school learners are somewhere in the middle of the learning spectrum. Yet instead of an age appropriate option, they were given platforms that are far too advanced and overwhelming.

Middle School: Happy students in the classroom.

OctoEd Process Journal

Target Audience My main focus audience are middle school students in grades 6 through 8. This age range represents a unique and transitional stage in human development. They are no longer young children, but not quite teens. Middle school students need a nurturing supportive environment in which to learn new skills and gain independence. Social engagement and interaction are a crucial part of their development and education. Middle School teachers work hard to provide engaging curriculum. However, the current learning platforms are creating a barrier between teachers and students. Teachers are frustrated and overwhelmed and want a more streamlined and developmentally appropriate platform. School administration want to find cost effective, robust, and all inclusive, educational tools for their schools.

Blended Learning: Students use computers in the classroom.

Background

OctoEd Process Journal

Audience Profiles Primary Outside

Target Audience

Background

Outside

OctoEd Process Journal

The Elementary School Student

The Middle School Parent

Garrett Peterson

Monica Smith

Garrett Peterson This year we have to stay home and go to school on the computer. My teacher is really nice and teaches how to do everything. I am learning how to read and do math. It is fun to see my friends on the computer, but I wish we could play together on the playground. My mom helps me too and is super smart on computers. We play a lot of fun computer learning games. #male #age6 #elementaryschoolgrade1 #SeeSaw #VirtualLearning #momstayshometohelpwithschool

Background

Monica Smith Due to classroom space, my kids are going to school hybrid this year. They are home 3 days a week and in school 2. I work a lot, so I am home some days, and others I am not. I rely on the kids to keep up with their Zoom call and stay on schedule. Lately I have been getting a lot of emails about missing assignments. I have to sign up for an parent observer account to track what the kids are doing and if they are turning things in on time. But that is difficult when they use some many add ons and apps! #female #age46 #nurse #6thgradeson #8thgradedaughter #Canvas #Google #OneNote #Zoom #hybrid #fulltimejob

The Middle School Teacher

The Middle School Student

Peter Loftus

Makayla Cooper

Peter Loftus I have been a middle school teacher for 20 years. I have always preferred to teach my classroom through discussions and hands on activities. Adjusting to teaching virtually and blended has been a challenge. It is difficult to keep the students engaged. It is really hard to get classroom discussions up and running and students often sit silently and don’t seem to be learning, no matter how I try to get through to them. I spend most of my time helping them navigate the learning platform and teaching through slide shows so both my on-line and in person students can follow along. #male #age52 #middleschoolteacher #Canvas #Zoom

Makayla Cooper This year school is so weird. My best friend Crystal is learning from home, and I am in school. We are on the computer all day and sometimes my teachers barely talk to us because they are so busy with the kids on the Zoom class call. I get distracted by the virtual chat I have going with Crystal and a few other friends. Most times I am not sure what my teacher wants me to do or which app I should be in, it gets really confusing. I turned in the wrong assignment yesterday and got a 0. My mom is going to be so mad. #female #age12 #middleschoolgrade7 #Canvas #Google #OneNote #inperson #blended #bestfriendvirtual

OctoEd Process Journal

The Teaching Assistant

The Middle School Principal

Andrea Tscheschlog

Mariah Stevens

Andrea Tscheschlog I work with all grade levels and all learning abilities. Many of my students struggle to navigate the on-line learning environment. They are not turning assignments in on time, have a hard time following where they should be within the virtual classroom, and spend most of their time playing video games. It is also hard to help students virtually when I have so many struggling in person.

Mariah Stevens This year has been an exceptionally challenging year for students and teachers alike. Scheduling classes for virtual and in person has been difficult, so many classes are blended (with some in school and some on-line) Students are struggling with adapting to the on-line learning environment, and parents and teachers are frustrated. I am doing everything I can to help them.

#female #age42 #middleschoolteachingassistant #grade6 #grade7 #grade8 #Canvas #Google #OneNote #Zoom #onlinelearning #helpingstudentsallday

#female #age38 #middleschoolprincipal #Canvas #Google #Zoom #blendedlearning #virtual #inperson #easingfrustrationforstudentsteachersandparents

Background

The School Board Member

The High School Student

Jack Paulson

Charlie Jacobs

Jack Paulson I am very much in support of families choosing to keep their children at home to learn virtually, as well as those who want their students to learn in person. I think that it is important to use technology across all grade levels. As a business owner, I use technology everyday. The district has purchased licenses for See-Saw at the elementary level and Canvas for secondary learning platforms, but we are considering an option for middle school as well, as long as we can maintain our current budget. #male #age38 #businessowner #schoolboardmember #lookingforelearningprograms #costeffective #districtspending

Charlie Jacobs This year is my junior year and because of the pandemic my high-school is hybrid, which means I only have to go into school 2 days a week. My teachers only Zoom on Mondays and I get to work at my own pace the 3 days I am at home. I really like this laid back schedule and I love that all my work is on my laptop instead of having to carry around a ton of binders and textbooks. #male #age16 #highschoolgrade11 #CanvasGoogle #hybrid #gamer #computersavvy

OctoEd Process Journal

The Solution Goal: Streamline the virtual learning environment. Middle School students report that virtual classes are nearly impossible to follow, the format is confusing, teachers talk to fast, they can’t keep up and they are overwhelmed. There are far too many apps, add-ons, and ways to submit, causing students to give up out of frustration.

Goal: help students feel connected. Social interaction is a vital part of the educational experience. However, with minimal contact with teachers and peers many virtual students feel isolated and alone.

Goal: Find ways to engage middle school students. This lack of connection often leads to a lack of focus and engagement. Students find themselves zoning out or distracted by tv and video games.

Blended Learning: Students use computers in the classroom.

OctoEd Process Journal

Research & Insights The following pages outline the research used to develop insights and background knowledge on the topic of middle school virtual learning. in order to develop effective design deliverables and a robust thesis I utilized various research techniques that helped me to get to know my audience by asking questions and looking at the problem from their perspective. Socratic questioning lead me to new insights and perspectives. Defining my audience allowed me to have a better understanding of who I am designing for. Creating persona cards prepared me to hold a focus group Finally holding a focus group introduced me to my audience and opened my eyes to the problems from their direct perspective.

OctoEd Process Journal

The Topic The topic that I found most viable is middle school virtual learning materials. I feel that this is an area of need across the country as schools newly need to navigate the online learning environment. There are a plethora of platforms and add ons available, but no consistency. This causes students to struggle with navigation and the ability to find, complete and submit assignments. When you add on the challenges of having learning disabilities, and different learning styles, all of this becomes even more difficult. I would like to develop a streamlined platform that incorporates all the needed add ons in a easy to navigate desktop application. Because I work in a middle school, I know first hand the struggles that both students and educators face and I have direct access to materials and resources. In most schools, the current standard delivery method of education is a virtual or format. In the future, building on this model we can teach children using a blended model, incorporating in person and virtual learning simultaneously. This tool can be used to supplement and enhance in person learning. Many middle school students struggle to adapt, navigate, understand, and learn using virtual learning platforms and materials. Using graphic design I will help middle school children to adapt, navigate, and learn in the on-line learning environment by designing a platform specific to their needs.

In-Person Learning: Students in the classroom.

Research

OctoEd Process Journal

Gaps & Opportunities 1. There are many different on-line learning platforms. • These apps can word independently or in conjunction. The more add-ons, the more confusing it gets for atypical learners. • Create an app that uses more graphics and simple steps to access, complete, and submit assignments. • Less is more: simplify!

2. There are a plethora of add-ons to help students stay engaged and use active learning, but the more add-ons, the more complex navigating becomes • Simplify the processes. Create an organized hub and develop add ons that use the same steps and processes as the hub learning platform. • Include the virtual classroom, app hub, learning tools, and notebook all in the same platform. Keep navigation away from the platform to a minimum. Use the same navigation and tool bars across all apps and add-ons.

3. On-line worksheets are filled with instructions and require too much reading. • Include immersive readers on all pages • Decrease the amount of text on one screen. Include images and consistent icons. • Use video where possible. • Chunk information into smaller sections.

Virtual Learning: A student works on their laptop.

OctoEd Process Journal

Insights from Reading 1. “Reviewing Educational Children’s Books in Terms of Graphic Design in the Context of Multimedia” by Banu Bulduk This article breaks down the connection between the elements of communication design and the educational process in regards to multimedia platforms. The main focus is on e-learning and multi-media learning. I like this source because it breaks down the multimedia design principles that support the learning process. These concepts can be applied to all learning and educational platforms. The author reviews various materials using these criteria. I can apply these same concepts to the materials I will be designing

2. The Role Of Graphic Design In e Learning This article reviews the ways in which graphic design can enhance the effectiveness of e Learning platforms. The four main topics discussed are 1. Creating focal points 2. Using design elements to establish content relationships. 3. Navigation 4. Readability. It is important to create a consistent navigation system. Students with learning disabilities need repetition, consistency, images with text, and a streamlined submission process. Good graphic design will help with the layout and to provide an easy to read and navigate web-page.

Research

1. Online Learning with Learning Disabilities This You Tube video provided some insight on online learning from a professional tutor whose daughter has ADHD. Students with varying learning abilities and disabilities all adapt different to the online learning environment. Keeping students engaged can be a challenge for students with ADHD. Children with difficulty processing, cognitive delays, low level readers and sensory deficits can feel overwhelmed by the online learning environments. Not having an adult to read body cues and give visual, and auditory prompts limits their ability to stay on task. Routines and schedules need to be built in as well as breaks and sensory opportunities. Consistency and repetition is also important.

2. Using Google Classroom for special education Google Classroom is the most consistent of all the platforms I have come across. The system is more user friendly. There are a lot of add-ons that do not all use the same procedures and icons. Teachers can use this to stay in contact and follow up with students. There are options to access the students work and view it in real time while the student is working. This video teaches special education teachers how to utilize this platform to help provide accommodations to their students. Using Google classrooms provides an all in one option, but it still not user friendly. There are a lot of steps and options for submitting.

OctoEd Process Journal

Connections Connections can lead to insights. Thinking about potential users for a middle school learning platform helped me to develop a thought web of what type of needs and access would different users need. This then led me to envision a navigational system for a virtual learning platform. These insights allow me to see the problem from a users perspective.

Stem and plot graphs: What can a virtual platform contain? What does it need?

Research

OctoEd Process Journal

Insights from Listening TEDTalk with Daphne Koller “What We’re Learning from Online Education”• Daphne Koller is the co-founder of Coursera. Using feedback and data from the students and grades of the students taking online courses through Coursera, Koller was able to develop some insights on the best practices for on-line education. While Coursera is a collection of continued education and college courses, many of the insights apply to all e learning platforms. 1. Procrastination is a global problem. (How can we help students with this?) 2. Moving away from the constraints of a physical classroom provides an opportunity to break up content. Instead of a 1 hour course, you can have shorter modular units (recorded videos of lessons.) 3. Students can watch and re-watch portions depending on need and background knowledge. This provides a greater opportunity for mastery. 4. Students don’t learn from sitting and watching. Make it interactive. Videos can pause every few minutes to ask questions for comprehension checks. Gives all students an opportunity to engage. 5. Use the technology to grade multiple choice and math equations.

Virtual Learning: Video chat is used in virtual classes.

Research

OctoEd Process Journal

It is important to develop a platform that students and teachers are familiar with and comfortable with so that they can seamlessly transition from at home, virtual learning, to in person or blended learning. Students need to be able to easily navigate, learn and understand the platform so that it does not get in the way of them learning content.

Virtual Learning: A teachers uses video to teach online.

OctoEd Process Journal

In thinking about the various perspectives (students, teacher, parent, administrator, and school district) I believe I need to start from the point of view of the user who will benefit the most from a change in structure and design. Teachers are the second level perspective, because in order for students to learn effectively, the teachers need to be able to teach effectively. The parents, administrators and school districts will then see a platform with better results and ultimately want to chose the virtual platform based on its benefits to students and teachers. So while the audience as to who will be purchasing the product is the school districts and the administration, the users are the students and the teachers.

Blended Learning: A teachers uses computers in the classroom.

Research

OctoEd Process Journal

Asking Questions Why do you think middles school students need a platform designed to meet their needs that is different from elementary or high school? This question can be answered from my own personal experiences and observations of the current situation in my place of employment, Pennridge South Middle School. Students in elementary schools use platforms like SeeSaw, that are designed for younger, students grades K-6. The high school has been using Canvas for several years in a blended learning model as the students all have district assigned laptops. The middle school adopted this platform for their students just before the pandemic and the students struggled to use, navigate and learn during the school shutdown. Now that schools are returning to in person and or virtual learning, many of the students are missing assignment, failing to participate, getting overwhelmed and struggling. The platform is designed for older, more experienced users of technology. Developing a platform that builds on the skills they learn in elementary, while developing skills for the future at a slower more appropriate pace and preparing them for the independence of high school would greatly benefit middle school students. This will increase independence within the platform and the classroom.

In Person Learning: A student raises their hand to ask a question.

Research

OctoEd Process Journal

Research

Focus Group Participant 1: Middle School Parent / PCA Participant 2: Middle School Student (in person) Participant 3: Middle School Student (virtual) Participant 4: Middle School Teacher For my focus group I ran two sessions. The Zoom focus group session was with a middle school parent who is also employed as a Personal care assistant at the middle school where I work, her daughter who is a middle school student, and another middle school student who is learning virtually. The virtual student was not comfortable being filmed. The first half of our conversation seemed to focus on the student perspective. It took some time for them to warm up and they seemed nervous to say that they were struggling and that they did not love the virtual experience. From both the in person and the virtual perspective, learning was not as interactive as they would like. There are too many programs and it is difficult to know where to be and when. The students both agreed that it was confusing at times and that it was hard to submit assignments from programs outside of the main learning platform (Canvas). In Person student said that she liked the organization of One Note but disliked the lack of instructions in the notebook. She said exporting and submitting assignments from OneNote into Canvas was not always easy. She referred when the assignment was outlined in Canvas with an embedded Google document. That is the easiest to submit. Both students agreed that video or written instructions are helpful. They also expressed frustration with the lack of engagement. There is a lot of downtime as the teacher lectures most of the time and goes back and forth trying to get virtual students and then in person students to contribute to the discussion.

Focus Groups: I speak with a PCA and students via Zoom.

OctoEd Process Journal

They both wished they could interact more within the virtual environment. The Virtual Student says she hates being online and wants to feel like she is in a classroom. Both agreed that programs like EdPuzzle and NearPod, where the students can interact with the slide-show as the teacher instructs were the most enjoyable and engaging lessons. The student s lef t the conversation af ter about 20 minutes and the Parent/Teaching Assistant delved deeper into her frustrations with the way things were going for her an her student with learning disabilities. She explained that the student is often several steps behind the teacher and other students. The teachers seem to be lecturing most of the time and expecting the students to take notes on One Note, but there is very little interaction or engagement beyond that. This is especially true in classes that should be hands on like science. She feels that learning needs to be streamlined into one program that the students do not need to navigate away from. She felt as though a landing page that was organized with direct links and all the tools the students would need for the day would be helpful. Also, a lock-down type of browser where the students could not navigate away to play video games in the middle of instruction would be a huge necessity. The phone conversation I had with the Middle School Teacher emphasized some of the same insights and needs that were highlighted in the earlier virtual focus group. She teaches 8th grade history in a blended environment. Some of her classes have 10-15 students online and 6-8 students in the classroom being taught simultaneously. She finds it very difficult to engage all of the students at the same time. IN years past her classes were run with a lot of in class discussions and student interaction. Now she feels as though all she

Research

does is stare at blank screens (the students do not turn their cameras on). She spends so much time trying to get the online students to interact that she barely interacts with the students in the classroom. Many of her virtual students have not turned in a single assignment all semester. When finally works with them one on one, she discovers that they struggle to hear her and in many cases do not know how to access or submit their assignments. From these conversations I think the top priorities for the middle school learning platform is to create a streamlined platform that contains everything the student needs within the platform, instead of needing to navigate to outside apps and websites. It needs to contain more interactive options for learning. The submission process needs to be simplified. Students want to feel more included and to be able to interact with classmates. And lastly, the students need to be contained within a “virtual classroom” to discourage the navigation to online gaming. I learned a lot from these conversations and many of my observations were substantiated.

OctoEd Process Journal

Focus Group Insights “There are a lot of different programs. It is confusing to know which one the teacher is on, even when they are sharing the screen, between OneNote, Canvas, and Google.” –Virtual Student Providing a more streamlined environment for the students to work in would decrease student frustration and confusion. There are too many apps being used on a regular basis and the students do not know where to navigate to. This wastes time as well as the attention of the student and the teacher. Create a streamlined platform that contains everything the student needs within the platform, instead of navigating to outside apps and website.

“It would be helpful if I could interact more with my classmates.” –Virtual Student If the virtual classroom felt more like a real classroom it would feel less isolating. Creating an on-line environment for the virtual learner that incorporates classroom and peer engagement would make students feel more included. Using interactive programs such as Nearpod or Peardeck as inspiration for inclusion. Allow for in class virtual chatting, screen sharing and audio and/or video of the entire class.

Blended Learning: Teachers use virtual spaces within the in person setting.

OctoEd Process Journal

“It is kind of confusing. If we do things on One Note, we have to transfer it to Canvas to submit it. One place for everything would be better.” –Virtual Student Simplify the submission process and have one platform that does it all. Keep assignments in one platform. There are too many platforms and too many ways to submit assignments. There are multiple steps to getting assignments from one program to the other, Often the students complete the work and never submit it. They get halfway through the process and either get confused, distracted overwhelmed or give up. In Person Student agreed and stated, “ I don’t like how we have to transfer things from OneNote. Cause you have to like export it, then name it something you can remember, it is a lot of work.”

“It’s too much, it’s too fast, it’s too overwhelming” –Personal Care Assistant The virtual environment needs to be simplified. The teacher should be able to organize her space for only what the students need to accomplish the tasks of the day. If the teacher could design her lesson with only what they need for the lesson on the screen by dragging or linking those features into her lesson. It would be very clear cut and she could move faster because it is all right there on the screen. Class is usually a 45 minute period. There is not enough time and instructions are too fast for many of the students. When they open the screen there are too many options and too many tabs open, it is sensory overload, especially for learning support kids. Often times the students are overwhelmed and fail to start or start late and then they are behind. If is common for students to give up before class is over.

Research

“It is no longer hands on learning, it is a one dimensional flat screen. The kids can’t follow along because it is too small on the screen. (working split screen or on the projected screen in person)”

–Personal Care Assistant / Teaching Assistant

If there was a system where the kids where receiving the teachers notes in real time, they could focus on her speaking instead of typing feverishly and missing half the lesson. The act of typing, copying, processing, absorbing is too much in this environment (many students have low skills in typing). Again, this would also work in a more interactive environment. Teachers notes appear in real-time. Students can annotate thoughts and ideas as they come and focus on listening to the lesson. Including interactive responses would help with engagement on-line and in-person.

“Class is boring, they just talk on the screen and share their screen the whole time and they give us like ten minutes to actually do the work.”

–In Person Student

Students want to be engaged. Interactive lessons that allow the students to respond and interact in real-time with the teacher and their peers would increase comprehension, attendance and retention. She followed up by saying, “I like the Nearpods because there’s like different activities inside it. You kinda learn about something and answer a question. Then there are also things you can draw and describe. It is not as pressured as like the quizzes in Canvas.” The key is more interaction. Draw tool, real-time responses, interactive games and games that encourage practice and repetition. When kids are bored they resort to playing on-line games. Creating an environment that “locks” the students in during instructional time would limit this distraction.

OctoEd Process Journal

Design Strategies

Design Strategies The following pages outline the ways in which I will implement the insights into strategies to solve the problem of middle school virtual learning. I have chosen the three most important needs and focused on opportunities for solutions. The Materials Matrix breaks down the deliverables into a checklist of what each will contain.

OctoEd Process Journal

DS Chart

1 I S D

Current virtual learning environments are too complicated with too many apps and add-ons.

Find ways to stream-line the middle school virtual learning environment.

Informational Website Design an Advertising Campaign directed towards district administrators and teachers showcasing a streamlined virtual learning platform designed specifically for middle school learners. • Website that provides information about licensing and buying options for district administrators • Video that plays on website that describes the features and benefits of the platform.

Topic: Middle School Virtual Learning Goal: help middle school children adapt, navigate, and learn in the on-line learning environment. Audience: Middle School Students & Teachers

2 Middle School students get bored easily.

Many middle school students feel disconnected from their teachers and classmates in the current virtual learning environments being used in middle schools.

Find ways to engage middle school students.

Find ways to help students feel connected.

Prototyped Learning Platform

Middle School Materials Kit

Develop a streamlined virtual learning platform for

Supplemental print resources such as notebooks,

Middle School learners that is “all inclusive” and contains

binders and planners to use in conjunction with the

everything the students need within the platform.

virtual classroom so that everyone is using the same

• Home screen • Student Dashboard • Teacher Dashboard • Navigational system • Virtual Notebooks • Create a virtual classroom space for teachers and students to meet virtually, chat, and learn that is built

tools. Also a way to advertise the brand. • Planner/Assignment Book • Notebook • Classroom binder • Laptop case • Touchscreen Pens • Wireless Mouse

into the learning platform. • Video Chat that is built into the Platform. • Design icons in a playful style that appeals to middle school students. • Develop virtual chat program that mimics social media and works within the virtual classroom so that students can interact for peer discussions and group projects while still being monitored by the teacher. OctoEd Process Journal

Materials Matrix Virtual Learning Platform:

Description: In most middle schools, the current method of education is in a virtual or blended format. Virtual learning platforms often leave students feeling overwhelmed, disconnected and disengaged.

Goal: I will design a middle school specific virtual learning platform Email Announcements that will help middle school children adapt, navigate, and

learn in the virtual learning environment.

Schedule

Classroom Prototype Includes: 50 screens

App Library

Notebo

• Home screen • Student Dashboard

Audience:

• Navigational system

Middle School Students & Teachers

• Virtual Notebooks and workspace • Virtual classroom space for teachers and students to

Math

Science

meet virtually, chat, and learn and is built into the

Social Studies

learning platform.

Language Arts

Reading

• Video Chat that is built into the Platform. • Icons in a playful, easy to understand style that appeals to middle school students. • Virtual chat program that mimics social media and works within the virtual classroom so that students Art

Gym

can interact for peer discussions and group projects

Health

Music

while still being monitored by the teacher.

Purpose: Develop a streamlined virtual learning platform for Middle School learners that is “all inclusive” and contains everything the students need within the platform.

Goal: Find ways to stream-line the virtual learning environment and to engage middle school students.

STE

ssroom

guage Arts

Music

Student Materials Kit:

App Library Notebook Kit Includes: 14 items

Website & Awareness:

Grades

• 1 Box for Packaging

Announcements Connect Prototype Includes: 14 screens

• Prototyped Website that provides information about licensing and buying options.

• 1 Assignment Book • Cover

• Home page

• 6 interior spreads

• Informational page with video

• 3 Notebooks Covers

• Account Page

• 1 Classroom binder with organizational system Reading• Binder cover

• Order Free Trial Math

STEM

• 4 Dividers

Science

• 1 Laptop skin

• Pricing Options and Ordering

• 1 Touchscreen Pen

• Virtual Assistant

• 1 Wireless Mouse • 1 Drawstring Bag

Purpose: Design supplemental print resources such as notebooks,

• 3 minute Video ad featured on website that describes the features, benefits, and pricing plans of OctoEd. • Awareness Campaign Art • 2 social media posts

Gym

• 2 print ads

virtual classroom so that everyone is using the same tools. These items will directly correlate to

Purpose:

elements of the virtual learning platform.

Create an Informational Website directed toward district

Find ways to help students feel connected in the virtual environment.

• 1 email blast

binders and planners to use in conjunction with the

Goal:

Soc

• Menu

administrators and teachers that showcases the streamlined virtual learning platform designed specifically for middle school learners.

Goal: Find ways to stream-line the virtual learning environment for middle school learners.

OctoEd Process Journal

Materials Matrix cont. Description:

Virtual Learning Platform:

In most middle schools, the current method of education is in a virtual or blended format. Virtual learning platforms often leave students feeling overwhelmed, disconnected and disengaged.

Goal: I will design a middle school specific virtual learning platform that will help middle school children adapt, navigate, and learn in the virtual learning environment.

Screen Breakdown: 50 Screens • Sign In • Enter Period 1 • Enter Class Pop-Up Message • Open Menu • Enter Period 2 • Menu • Virtual Classroom • Enter Class

Audience: Middle School Students & Teachers

• Turn Camera On • Change Peer Video View • Send Teacher Chat • Raise Hand • Message to turn off Mic • Turn Mic On/Off • Request Bathroom Break • Bathroom Pass • Message to Turn Camera On • Turn Pen On • Student Writes on Screen • Open Calculator • Close Calculator • Submit Warm Up • Warm Up Submitted Confirmation • Open Assignment • Teacher Writes on White Board • Student Writes in Assignment • Break Out Room Pop-Up Message • Submit Assignment • Assignment Submitted Confirmation • Send Assignment to Agenda • Agenda Confirmation Pop-Up • Break Message Pop-Up

Website: Screen Breakdown: 20 Screens • Break Out Room • Turn on Camera • Turn on Mic • Chat with Teacher

• Home page • Menu • Create Account

• Turn on Pen

• Submit Form

• Write in Assignment

• Your Account Page

• Break Out Room Ending Pop-Up • Leave Break Out Room • Social Media Connect • School Message Board • Scroll Messages • Open Menu • Notification Alert • View Notification • Open Notification • Minimize Chat • Open Chat

• Sign In • Submit Sign In Form • Learn More • Get Started • Request A Demo • Fill Out Form • Submit Form • Confirmation • Open Virtual Assistant

• Start New Chat

• Send Message

• Send Chat Message

• End Chat

• Create New Post • Send Post for Approval • View Different Message Board

• Informational page with video • 3 minute Video • Pricing Options and Ordering • Cart • Submit Order

OctoEd Process Journal

Brand Identity OctoEd’s brand Identity is based off the idea of learning, engaging and connecting with students in the online learning environment. As the brand identity is developed, the visual standards guide helps us to define the parameters of use and ways to present the brand to keep our mission and core values in tact.

OctoEd Process Journal

Logo The name OctoEd was derived from the Octopus and the word Education. The octopus is a brilliant animal that creates intrigue and wonder, qualities that are important in any educational setting. They also have 8 legs. The OctoEd virtual learning platform has 8 primary directions that the student can navigate to in the virtual learning environment. The letters of the word mark are round and inviting. They are connected together to represent the connection the students will gain in this learning environment, to their peers teachers and education. The Octopus, Ed is our company mascot. He is friendly, and ready to help the students learn! The tag line Learn, Engage Connect represents the 3 primary gaols of the OctoEd virtual learing platform.

OctoEd Process Journal

Logo Variations There are three acceptable versions of the OctoEd brand signature. Version A is a shortened version for tighter spaces, abbreviations and brand recognition on productions. Version B is the vertical brand signature that can be used when applying the brand signature to a more narrow space. Version B includes the brand tag line: learn, engage, connect. It also moves the octopus to the front of the brand signature.

OctoEd Process Journal

Logo Anatomy The following diagrams illustrate the anatomy of each brand signature. There are threes parts that can potentially make up a brand signature: logo, word mark, and tag line.

OctoEd Process Journal

Logo Clear Space The following pages show the clear space requirements and breakdown of the logo anatomy and measurements based on the measurement of x. X is equal to the lowercase o in OctoEd.

Brand Identity

OctoEd Process Journal

Brand Identity

OctoEd Process Journal

Unacceptable Use The following marks are examples of unacceptable logo usage and presentation. Following these guidelines allows for consistency in the brand signature in printed and multimedia materials.

Never use drop shadow or inner glow.

Never use outlines of brand signature.

Never use off brand color combinations.

Never stretch or distort brand signature.

Never stack in unaaproved formations.

Never layer word mark over octopus icon.

OctoEd Process Journal

Social Media Avatars The following two icons can be used as social media avatars and app launch icons on desktops, mobile devices and tablets.

OctoEd Process Journal

Typography The primary typeface used in all OctoEd designs is Montserrat. The old posters and signs in the traditional Montserrat neighborhood of Buenos Aires inspired Julieta Ulanovsky to design this typeface and rescue the beauty of urban typography that emerged in the first half of the twentieth century. As urban development changes that place, it will never return to its original form and loses forever the designs that are so special and unique. The letters that inspired this project have work, dedication, care, color, contrast, light and life, day and night! These are the types that make the city look so beautiful. The Montserrat Project began with the idea to rescue what is in Montserrat and set it free under a libre license, the SIL Open Font License.

Brand Identity

Montserrat Headers:

Semi Bold ABCDEFGHIJKLMNOPQRSTUVWXYZ 0123456789

Sub Heads:

Medium ABCDEFGHIJKLMNOPQRSTUVWXYZ 0123456789

Body:

Light ABCDEFGHIJKLMNOPQRSTUVWXYZ 0123456789

OctoEd Process Journal

Color The colors used the the OctoEd system are blue, yellow, green and purple. The purple is used as a background on the website and the learning platform. The primary and secondary colors are used in graphic elements and type. All colors are used at full opacity and in no other shades.

Brand Identity

Primary Colors:

R12 G64 B93

R252 G191 B56

R0 G166 B144

R102 G47 B92

C98 M73 Y41 K30

C1 M27 Y90

C80 M10 Y54

C61 M91 Y36 K24

Secondary Colors:

R224 G192 B67

R255 G112 B98

R236 G0 B140

R119 G192 B67

R0 G0 B0

C6 M99 Y94 K0

C0 M71 Y57

C0 M100 Y0 K0

C58 M0 Y100 K0

C0 M0 Y0 K0

R39 G91 B169 C90 M70 Y0 K0

OctoEd Process Journal

Graphic Elements The visual system includes graphic elements made of three types of visuals: monotone photography, brightly colored circles, patterned circles, hand drawn illustrations, and thin flowing and overlapping lines. These elements appear throughout all OctoEd media, websites, products and publications in various combinations and layouts.

OctoEd Process Journal

Photography Style The primary subject of all photography is middle school students, either solo or in small groups. The students will all appear happy and engaged. They will all be engaged in or performing school related activities. The photos will be black and white and colorized in monotone blue/purple. The photos will be in circles overlaid on a colored circular background.

Brand Identity

OctoEd Process Journal

Patterns Patterns constructed of circles, squares, grids and blocks of color in grey or black will overlay solid colored circles in an off-set manner throughout the inclusion of graphic elements. Usage is random and interspersed amoung cirlces, lines, and monochrome photography.

OctoEd Process Journal

Icons Icons appear throughout the OctoEd virtual learning platform and the OctoEd website. Icons can appear as white outlines on a colored circular background, white outlined icons with no color background, and blu icons with no color background. Buttons are rectangular with rounded edges and white text.

Connect

Agenda

Done

Teacher

Send to Teacher

Send

Add a Photo

Virtual Classroom Icons: InActive

Gym

Health

Bathroom Pass

Microphone On

Pen

Virtual Classroom Icons: Active Grades

Gym

Health

ON Microphone On

Bathroom Pass

Pen

OctoEd Process Journal

Class Schedule Icons

Math

Health

Brand Identity

Science

Gym

Social Studies

Art

STEM

Reading

Language Arts

Music

Menu Icons ConnectEd

Class Schedule

Notebook

Agenda

App Library

Grades

Study Group

Log Out

OctoEd Process Journal

Buttons Buttons are rectangular with rounded edges and white or black text. Colors can be yellow, white, pink, or green. Grey indicates a button that is inactive.

Period 1 Enter

Period 2

Math Assignment

Share Screen

Comment

OctoEd Process Journal

Brand Development The following pages delve into the development of the the brand Identity, the logo, the visual system, and the four primary deliverable systems of the OctoEd virtual learning platform.

OctoEd Process Journal

Inspiration & Keywords At the beginning stages of visual development I looked for inspiration by creating 3 mood boards based off my primary keywords: Connected, Layered, and Playful. I used these references to begin sketching and developing various directions in which to take the visual system of the OctoEd brand.

Moodboard 1: Connected

Brand Development

Moodboard 2: Layered

Moodboard 3: Playful

Design Inspiration: Moodboards conveying the intended look and feel of OctoEd.

OctoEd Process Journal

Logo Development The OctoEd word mark went through many iterations and levels of development. The beginning brand name took some time to form, and the inspiration of the octopus came to the forefront. Octopus are very intelligent and multifaceted creatures. After many iterations OctoEd was born!

Logo creation: Early sketches of the logo and word mark

Brand Development

OctoEd Process Journal

Logo Iterations

cto E d

Conclusion

ctoEd

Logo creation: Early iterations of the OctoEd logo and wordmark.

OctoEd Process Journal

Logo Deployment The final OctoEd logo consists of a wordmark of connecting letters combined with an Octopus named Ed. Ed has the potentioal to become a mascot for the learning platform. The phrase Learn, Engage, Connect encapsulates the 3 primary goals of the OctoEd virtual learning platform.

Logo creation: Final wordmar and tagline.

OctoEd Process Journal

OctoEd Virtual Learning Platform The OctoEd word mark went through many iterations and levels of development. The beginning brand name took some time to form, and the inspiration of the octopus came to the forefront. Octopus are very intelligent and multifaceted creatures. After many iterations OctoEd was born!

OctoEd: A student in the virtual classroom.

100

Brand Development

OctoEd Process Journal

101

UX Design: User Journey Map The OctoEd word mark went through many iterations and levels of development. The beginning brand name took some time to form, and the inspiration of the octopus came to the forefront. Octopus are very intelligent and multifaceted creatures. After many iterations OctoEd was born!

102

Brand Development

Persona: Makayla Cooper, Middle School Student • female • age 12 • 6th Grade • virtual learner

Zone A: The Lens

Zone B: The Experience

Scenario: School will be virtual today, which means Makayla is learning from home. She will need to access her classes, her assignments, and submit her work by the end of the school day. This is her journey through one virtual class.

Goals & Expectations: • engage Makayla in her lessons • make it easy to navigate from one task to the next. • enable Makayla to feel connected to her teacher & peers through interaction and activities.

Logging In:

Getting Started:

Class:

Transition:

1. She logs on to her school laptop.

3. Her student dashboard opens and she reads her announcements for the day.

6. Makayla listens to the teacher and interacts with the lesson in her workspace.

4. Class starts in 2 minutes so the enter class link appears on screen and she clicks it, entering the virtual classroom.

7. When it is time for class discussion the teacher puts the in chat groups where they can talk or text chat.

9. Her homework and any missing assignments are listed on her to-do list. She writes them in her agenda.

2. She opens her web browser and logs into the learning platform.

5. Her video connects and Makayla see her teacher, classmates, and virtual classroom workspace.

class discussion Oh look! It's

10. Makayla says goodbye to her class and clicks the exit class link. Her browser gives her a 5 minute countdown to her next class. She can use her web browser until the timer beeps.

8. Class is almost over so Makayla submits her classwork in the virtual submission box.

free time Yes! Sarah and Matt! Hi guys!!

Finally a break!

Sarah! I hope we don't have a lot to do I hope it's a good day today.

I can look up

sees teacher and peers See you

class starts student dashboard

I hate math.

tomorrow Mrs.

classwork

Don't forget to

goodbyes

submit again!

Good thing we can use a calculator

logs on computer

submit work

opens browser

homework assigned

log out of class

Zone C: The Insights Zone C: The Insights

• make icons bright, cheerful, and easy to find • make login easy with a saved password

• Dashboard should be organized, engaging, and interesting.

• workspace easy to navigate and organized.

• to-do lists and reminders

• class links easy to find and use.

• chat fun, like texting or social media.

• can use browser on break

• virtual classroom layout uses screen effectively

• submission options should be clear & consistent.

• students locked in during class.

• transitions should be simple

•class tools available on desktop

Process Work: User journey map for the OctoEd virtual learning platform.

OctoEd Process Journal

103

UX Design: User Flow What makes OctoEd a unique learning platform for middle schoolers? Classes are held in a contained virtual classroom space. Once they log in to class everything they need is in their workspace including the video, teacher blackboard and their individual workspace. They cannot navigate away to play, chat or surf the web. It will be like walking into a classroom. They will have the ability to create study groups and chat rooms within the platform to socialize, do homework, and engage in extracurricular school clubs and activities.

104

Brand Development

Middle School Virtual Learning Platform User Flow:

New User

Forgot Password

New Password

Create Account

Student Dashboard

Announcements

Classes

Notebook

Agenda

App Library

Grades

Connect

Today

Schedule

New

Schedule

Inbox

App Links

Overview

Text Chat

This Week

Class

Calendar

Compose

Class Grade

Video

Classbook

To Do

Trash

Add New

Assignment Grade

Video Search Teacher Board

Folder

Assignment

Pages

Class

New

Missing Work

MIssing Work

Workspace

Notebook

Tools

Chat

Key:

Agenda

Level 2

Home

Level 3

Level 4

Process Work: User flow map for the OctoEd virtual learning platform.

OctoEd Process Journal

105

UX Design: Task Flows The individual task flows were designed to be completed with the least amount of steps possible. Using user feedback and research completed while observing students using current learning platform, I tried to create intuitive task succession.

106

Process Work: Task Flows for the OctoEd virtual learning platform.

OctoEd Process Journal

107

UX Design: Wireframes Developing the wire frames helped to work out the various design requirements of the OctoEd virtual learning platform. The learning platform went through various stages of development to get to the desired outcome and using wireframes helped to work through the kinks in the design. Presenting these wire frames to the users in preliminary testing gave vital feedback that helped to design the final iterations of the learning platform.

108

Process Work: Wire frames for the OctoEd virtual learning platform.

OctoEd Process Journal

109

110

OctoEd Process Journal

111

The Learning Platform The OctoEd virtual learning platform features The virtual classroom is set up with two sides. The left is the teacher area where the student can view the teachers video, class and teacher chat, and the teachers white board where they can instruct and give lesson and examples. On the right is the student workspace, where they have document tools, access to their agenda and control buttons along the bottom. Here the teacher can send private reminders to each student for added classroom control. The student may also control the amount of peer videos they can view as they work. This helps them feel a little more connected to their classmates in the virtual setting.

When break out rooms are ending an alert is sent to the students. They are also provided with countdown clocks to keep them on schedule. When they return to class they can submit work, and gain access to homework assignments. They can send assignments to their agenda, which they can access at any time. Here they can find links to new assignments, existing assignments and even get alerts about past due work. When class ends the students are dismissed from the virtual classroom and are given a 5 minute break. Now they can navigate OctoEd as they please, especially to visit ConnectEd, the school social media page.

Students have options to chat with the teacher for private questions, they can raise their hand to speak in class, or even privately request a bathroom break. The teacher can provide a bathroom pass which signs the student in and out of the virtual classroom. These options allow the student to get the teachers attention when needed, avoid embarrassment, minimize unwanted distractions, and help the student feel a little more connected and in control. As the student works they can access tools such as pens, calculators, and new assignments. The teacher may chose to utilize break out room to allow students to collaborate together. From these break out rooms the students can video chat, work together on assignments, and submit work. The teacher can monitor the breakout rooms from her own dashboard, and the students can connect to the teacher to ask for assistance by clicking the apple icon, or by sending her a virtual chat.

OctoEd: Screens from the self contained virtual classroom.

112

Brand Identity

OctoEd Process Journal

113

114

OctoEd Process Journal

115

116

OctoEd Process Journal

117

118

OctoEd: Screens from the Breakout rooms and self contained virtual classroom. OctoEd Process Journal

119

120

OctoEd Process Journal

121

122

OctoEd Process Journal

123

124

OctoEd: Screens from the Breakout rooms and self contained virtual classroom. OctoEd Process Journal

125

ConnectEd: Social Media Platform I then created a new prototype from the updated platform screens and used them to complete user testing. I was able to meet with 5 middle school students aged 11-13. I got a lot of great re-assuring feedback. It was really nice to get validation from my primary target audience. And trust me, middle school students can be a tough audience! After user testing, I compiled the feedback and looked for insights.

OctoEd: Screens from the ConnectEd Social Media Outlet

126

Brand Development

OctoEd Process Journal

127

128

OctoEd Process Journal

129

OctoEd: Screens from the ConnectEd Social Media Outlet

130

OctoEd Process Journal

131

User Testing Beginning Stages To develop the user flow and tasks flows, I 1st created a post it note user flow. I asked 2 middles school students and one middle school parent to follow the flow and give feedback based off my explanation of the OctoEd learning platform as I envisioned it. They helped me to add some needed navigational elements and gave me advice on how they would perceive things as I have them planned out. User Testing Outcomes: • Workspace to Email: How do you get there during class? • Add Agenda link from Class • Add Email link from Class • Options to toggle back and forth between pages • Naming: Notebook & Agenda could be confused as one another • Rename Chat (Messenger?) • Add Missing Work to To-Do

User Testing: Middle school students help to organize the site menu and navigation, 132

Brand Development

OctoEd Process Journal

133

User Testing: Round One I created a prototype with the 1st iteration of the OctoEd virtual learning platform. I had two middle school students test the platform using a set of instructions read aloud. I gather ed data by observing and asking questions after they completed the testing. Feedback was positive with a few key suggestions. User 1 • User moved through instructions easily but got confused at the arrow to see more classmates section. • Likes the different colors. • Felt it was easy to use and not confusing like the ones they use at school • Noted that the screen was blurry but this was due to the screen resolution of the prototype. • Connect: comment section should be under pictures, not next to them. • Likes the name for the social media, but suggested OctoConnect • Thinks Connect page is fun and exciting. User 2 • User completed tasks easily • Thought the layout of the classroom made sense and was easy to navigate • Colors and font size are good. Easy to use. • Screen was simple and not confusing or overwhelming (He mentioned that he has ADHD and often gets distracted) • Social Media/Connect: should have the option to separate the chat from the social media thread. Maybe a button to open the chat options and option to chat in a new window or in a smaller window on the social media page (how it is now). He was a little overwhelmed on this screen. User Testing: Students use the OctoEd Prototype.

134

OctoEd Process Journal

135

136

User Testing: Round Two I created a final prototype from OctoEd platform screens and used them to complete user testing. I was able to meet with 5 middle school students aged 11-13. I got a lot of great re-assuring feedback. It was really nice to get validation from my primary target audience. And trust me, middle school students can be a tough audience! After user testing, I compiled the feedback and looked for insights.

OctoEd Process Journal

137

138

Stephanie, age 12 User Tasks: Navigate OctoEd Virtual Learning Platform as if with teacher instruction. Enter ConnectEd social media outlet on “break” Method of Testing: Experience and Usability Testing, completed virtually. User Feedback: User stated the following as she was using OctoEd • “it’s really good.” • “I like how I can privately chat with the teacher.” • “It helps how you have the teacher to guide you. You can see her board and work while she is showing you what to do. I like that I can chat with her or raise my hand of I need help” • “I like the bathroom pass. It is nice because I don’t have to ask out loud, it’s more private, only the teacher knows.” • On ConnectEd “It’s fun to be able to talk with my friends” • “It’s really easy to use.” • On the Break Out rooms “We can work together. I like how the teacher can pop in and help. I like that we can help each other figure stuff out and work together.” Parent Feedback: “I think it’s so great that they can do so much from one screen without leaving and going to another screen. I can’t tell you how frustrated they would get during virtual learning. They would be late for class or get lost trying to figure out what screen to be on. And the teacher wouldn’t always know when they needed help. It seems so much easier to use.”